From a74a184f625b3c60aedf91dd108ad98609a34d19 Mon Sep 17 00:00:00 2001
From: Ashinzekene <ashinzekene@gmail.com>
Date: Thu, 17 May 2018 08:40:05 +0100
Subject: [PATCH] example design ups

---
 .../lib/angular4-paystack-embed.component.ts  | 44 +++++++++----------
 .../src/lib/angular4-paystack.component.ts    |  3 +-
 src/app/app.component.html                    | 24 +++++-----
 src/app/app.component.ts                      |  2 +-
 4 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/projects/angular4-paystack/src/lib/angular4-paystack-embed.component.ts b/projects/angular4-paystack/src/lib/angular4-paystack-embed.component.ts
index d785c66..e9ffbfb 100644
--- a/projects/angular4-paystack/src/lib/angular4-paystack-embed.component.ts
+++ b/projects/angular4-paystack/src/lib/angular4-paystack-embed.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output,EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { PaystackOptions } from "./paystack-options";
 
 interface myWindow extends Window {
@@ -8,7 +8,7 @@ declare var window: Partial<myWindow>
 
 @Component({
   selector: 'angular4-paystack-embed',
-  changeDetection: ChangeDetectionStrategy.OnPush, 
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div id="paystackEmbedContainer"></div>`
 })
 
@@ -28,44 +28,44 @@ export class Angular4PaystackEmbed implements OnInit {
   @Output() close: EventEmitter<string> = new EventEmitter<string>()
   @Output() callback: EventEmitter<string> = new EventEmitter<string>()
   private paystackOptions: Partial<PaystackOptions>;
-  constructor() {}
+  constructor() { }
 
   pay() {
     this.setUp()
     console.log("OK payment will begin")
-    if(!this.checkInput()) return
+    if (!this.checkInput()) return
     window.PaystackPop.setup(this.paystackOptions)
   }
-  checkInput(){
-    if(!this.key) return console.error("Paystack key cannot be empty")
-    if(!this.email) return console.error("Paystack email cannot be empty")
-    if(!this.amount) return console.error("Paystack amount cannot be empty")
-    if(!this.ref) return console.error("Paystack ref cannot be empty")
+  checkInput() {
+    if (!this.key) return console.error("Paystack key cannot be empty")
+    if (!this.email) return console.error("Paystack email cannot be empty")
+    if (!this.amount) return console.error("Paystack amount cannot be empty")
+    if (!this.ref) return console.error("Paystack ref cannot be empty")
     if (!this.callback.observers.length) return console.error(`Insert a callback output like so (callback)='PaymentComplete($event)' to check payment status`)
     return true
   }
-  
+
   setUp() {
     this.paystackOptions = {
       container: "paystackEmbedContainer",
-      key: this.key ,
-      email: this.email ,
-      amount: this.amount ,
-      ref: this.ref ,
+      key: this.key,
+      email: this.email,
+      amount: this.amount,
+      ref: this.ref,
       metadata: this.metadata || {},
-      currency: this.currency || "NGN" ,
-      plan: this.plan || "" ,
-      quantity: this.quantity || "" ,
-      subaccount: this.subaccount || "" ,
-      transaction_charge: this.transaction_charge || 0 ,
-      bearer: this.bearer || "" ,
+      currency: this.currency || "NGN",
+      plan: this.plan || "",
+      quantity: this.quantity || "",
+      subaccount: this.subaccount || "",
+      transaction_charge: this.transaction_charge || 0,
+      bearer: this.bearer || "",
       callback: (res) => this.callback.emit(res),
       onClose: () => this.close.emit(),
     }
   }
   ngOnInit() {
-    if(this.text) {
-      console.error("Paystack Text input is deprecated. Add text into textnode like so <angular4-paystack>Pay With Paystack</angular4-paystack>")      
+    if (this.text) {
+      console.error("Paystack Text input is deprecated. Add text into textnode like so <angular4-paystack>Pay With Paystack</angular4-paystack>")
     }
     this.pay()
   }
diff --git a/projects/angular4-paystack/src/lib/angular4-paystack.component.ts b/projects/angular4-paystack/src/lib/angular4-paystack.component.ts
index 800cc95..3312747 100644
--- a/projects/angular4-paystack/src/lib/angular4-paystack.component.ts
+++ b/projects/angular4-paystack/src/lib/angular4-paystack.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { PaystackOptions } from "./paystack-options";
 
 interface MyWindow extends Window {
@@ -8,7 +8,6 @@ declare var window: MyWindow
  
 @Component({
   selector: 'angular4-paystack',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()">{{text}}<ng-content></ng-content></button>`,
 })
 export class Angular4PaystackComponent implements OnInit {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1028292..e63e15b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,15 +1,12 @@
-<div class="container">
-  <div class="display-4 p-3">Title: {{ title }}</div>
-  <h5>Result name: {{ results.name }} </h5>
-  
-  <div>You have not paid yet</div>
-<!-- <app-test-comp (payment)="letMeKnow($event)"></app-test-comp> -->
+<div class="display-4 py-4 px-1 text-center bg-primary text-white">Angular4 Paystack</div>
+<div class="text-center lead">{{ title }}</div>
+<div class="paystack-buttons text-center d-md-flex d-lg-flex d-xl-flex justify-content-between">
   <angular4-paystack
-    class="m-3"
+    [class]="'btn btn-primary m-3'"
     [key]="'pk_test_c613fc7d428a64fd1e5daea22f8380551b28c78e'" [email]="'mailexample@mail.com'"
     [amount]="'5000000'" [ref]="tRef" (close)="paymentCancel()" (callback)="paymentDone($event)"
     [class]="'btn btn-primary'"
-  >Pay With Paystack</angular4-paystack>
+  >Pay With Paystack component</angular4-paystack>
   
   <button
     class="btn btn-danger m-3"
@@ -17,5 +14,12 @@ <h5>Result name: {{ results.name }} </h5>
     [key]="'pk_test_c613fc7d428a64fd1e5daea22f8380551b28c78e'" [email]="'mailexample@mail.com'"
     [amount]="'5000000'" [ref]="tRef" (close)="paymentCancel()" (callback)="paymentDone($event)"
     [class]="'btn btn-primary btn-lg'"
-  >Pay With Paystack</button>
-</div>
\ No newline at end of file
+    >Pay With Paystack Directive</button>
+</div>
+  <h3 class="text-center my-3">Paystack Embed</h3>
+  <angular4-paystack-embed
+    angular4-paystack
+    [key]="'pk_test_c613fc7d428a64fd1e5daea22f8380551b28c78e'" [email]="'mailexample@mail.com'"
+    [amount]="'5000000'" [ref]="tRef" (close)="paymentCancel()" (callback)="paymentDone($event)"
+    [class]="'btn btn-primary btn-lg'"
+  ></angular4-paystack-embed>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8684ee7..345d637 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  public title: string = 'app';
+  public title: string = 'My app';
   public results = {
     name: ''
   }