From 96390b3b7d397aa496c50af2bab398afc4e6ec24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ricardo=20S=C3=A1nchez?= <me@ricardosanchez.dev>
Date: Fri, 22 Oct 2021 13:09:30 +0200
Subject: [PATCH] feat(global): add loading template support (#146)

* feat(global): add loading template support

* fix(elements): mark as optional, not non-null

* fix(card): wrong field :(
---
 CHANGELOG.md                                     |  4 ++++
 .../stripe-test-01/stripe-test-01.component.ts   |  6 +++++-
 projects/ngx-stripe/package.json                 |  2 +-
 .../lib/components/au-bank-account.component.ts  | 14 ++++++++++++--
 .../src/lib/components/card-cvc.component.ts     | 16 +++++++++++++---
 .../src/lib/components/card-expiry.component.ts  | 16 +++++++++++++---
 .../src/lib/components/card-number.component.ts  | 16 +++++++++++++---
 .../src/lib/components/card.component.ts         | 14 ++++++++++++--
 .../src/lib/components/fpx-bank.component.ts     | 14 ++++++++++++--
 .../src/lib/components/iban.component.ts         | 14 ++++++++++++--
 .../src/lib/components/ideal-bank.component.ts   | 14 ++++++++++++--
 .../stripe-element-loading-template.directive.ts |  8 ++++++++
 projects/ngx-stripe/src/lib/ngx-stripe.module.ts | 12 +++++++++---
 projects/ngx-stripe/src/public_api.ts            |  1 +
 14 files changed, 127 insertions(+), 24 deletions(-)
 create mode 100644 projects/ngx-stripe/src/lib/directives/stripe-element-loading-template.directive.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a088edc..c3e801e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 12.6.0 - 2021-10-10
+
+- Add support for Loading Template
+
 ## 12.5.0 - 2021-09-24
 
 - Add support for Boleto Payments
diff --git a/projects/ngx-stripe-tester/src/app/stripe-test-01/stripe-test-01.component.ts b/projects/ngx-stripe-tester/src/app/stripe-test-01/stripe-test-01.component.ts
index 09c1ad5..4b28299 100644
--- a/projects/ngx-stripe-tester/src/app/stripe-test-01/stripe-test-01.component.ts
+++ b/projects/ngx-stripe-tester/src/app/stripe-test-01/stripe-test-01.component.ts
@@ -14,7 +14,11 @@ import {
       </mat-toolbar>
       <div section-content>
         <p>Minimum example, just fill the form and get your token</p>
-        <ngx-stripe-card [options]="cardOptions"></ngx-stripe-card>
+        <ngx-stripe-card [options]="cardOptions">
+          <span style="color: green" *ngxStripeLoadingTemplate>
+            Loading Stripe Card...
+          </span>
+        </ngx-stripe-card>
         <button (click)="buy()">CLICK</button>
       </div>
     </app-section>
diff --git a/projects/ngx-stripe/package.json b/projects/ngx-stripe/package.json
index bfc95f9..31d9b56 100644
--- a/projects/ngx-stripe/package.json
+++ b/projects/ngx-stripe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-stripe",
-  "version": "12.5.0",
+  "version": "12.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/richnologies/ngx-stripe"
diff --git a/projects/ngx-stripe/src/lib/components/au-bank-account.component.ts b/projects/ngx-stripe/src/lib/components/au-bank-account.component.ts
index dde1241..f4143eb 100644
--- a/projects/ngx-stripe/src/lib/components/au-bank-account.component.ts
+++ b/projects/ngx-stripe/src/lib/components/au-bank-account.component.ts
@@ -8,7 +8,9 @@ import {
   OnInit,
   OnChanges,
   SimpleChanges,
-  OnDestroy
+  OnDestroy,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import {
@@ -19,15 +21,23 @@ import {
   StripeAuBankAccountElementChangeEvent
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-au-bank-account',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeAuBankAccountComponent
   implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeAuBankAccountElement;
 
diff --git a/projects/ngx-stripe/src/lib/components/card-cvc.component.ts b/projects/ngx-stripe/src/lib/components/card-cvc.component.ts
index e3552bf..b632858 100644
--- a/projects/ngx-stripe/src/lib/components/card-cvc.component.ts
+++ b/projects/ngx-stripe/src/lib/components/card-cvc.component.ts
@@ -9,7 +9,9 @@ import {
   OnChanges,
   SimpleChanges,
   OnDestroy,
-  Optional
+  Optional,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -20,14 +22,22 @@ import {
   StripeCardCvcElementOptions
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeCardGroupDirective } from '../directives/card-group.directive';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card-cvc',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="cardGroup && cardGroup.state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeCardCvcComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeCardCvcElement;
 
@@ -47,7 +57,7 @@ export class StripeCardCvcComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     public stripeElementsService: StripeElementsService,
-    @Optional() private cardGroup: StripeCardGroupDirective
+    @Optional() public cardGroup: StripeCardGroupDirective
   ) {}
 
   async ngOnChanges(changes: SimpleChanges) {
diff --git a/projects/ngx-stripe/src/lib/components/card-expiry.component.ts b/projects/ngx-stripe/src/lib/components/card-expiry.component.ts
index 2c7826f..11d2707 100644
--- a/projects/ngx-stripe/src/lib/components/card-expiry.component.ts
+++ b/projects/ngx-stripe/src/lib/components/card-expiry.component.ts
@@ -9,7 +9,9 @@ import {
   OnChanges,
   SimpleChanges,
   OnDestroy,
-  Optional
+  Optional,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -20,14 +22,22 @@ import {
   StripeCardExpiryElementChangeEvent
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeCardGroupDirective } from '../directives/card-group.directive';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card-expiry',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="cardGroup && cardGroup.state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeCardExpiryComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeCardExpiryElement;
 
@@ -47,7 +57,7 @@ export class StripeCardExpiryComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     public stripeElementsService: StripeElementsService,
-    @Optional() private cardGroup: StripeCardGroupDirective
+    @Optional() public cardGroup: StripeCardGroupDirective
   ) {}
 
   async ngOnChanges(changes: SimpleChanges) {
diff --git a/projects/ngx-stripe/src/lib/components/card-number.component.ts b/projects/ngx-stripe/src/lib/components/card-number.component.ts
index cb652c1..f3503ff 100644
--- a/projects/ngx-stripe/src/lib/components/card-number.component.ts
+++ b/projects/ngx-stripe/src/lib/components/card-number.component.ts
@@ -9,7 +9,9 @@ import {
   OnChanges,
   SimpleChanges,
   OnDestroy,
-  Optional
+  Optional,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -20,14 +22,22 @@ import {
   StripeCardNumberElementChangeEvent
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeCardGroupDirective } from '../directives/card-group.directive';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card-number',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="cardGroup && cardGroup.state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeCardNumberComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeCardNumberElement;
 
@@ -47,7 +57,7 @@ export class StripeCardNumberComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     public stripeElementsService: StripeElementsService,
-    @Optional() private cardGroup: StripeCardGroupDirective
+    @Optional() public cardGroup: StripeCardGroupDirective
   ) {}
 
   async ngOnChanges(changes: SimpleChanges) {
diff --git a/projects/ngx-stripe/src/lib/components/card.component.ts b/projects/ngx-stripe/src/lib/components/card.component.ts
index 61667ea..99686a8 100644
--- a/projects/ngx-stripe/src/lib/components/card.component.ts
+++ b/projects/ngx-stripe/src/lib/components/card.component.ts
@@ -8,7 +8,9 @@ import {
   OnInit,
   OnChanges,
   SimpleChanges,
-  OnDestroy
+  OnDestroy,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import {
@@ -19,14 +21,22 @@ import {
   StripeCardElementChangeEvent
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeCardComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeCardElement;
 
diff --git a/projects/ngx-stripe/src/lib/components/fpx-bank.component.ts b/projects/ngx-stripe/src/lib/components/fpx-bank.component.ts
index d1beba6..1d6fe26 100644
--- a/projects/ngx-stripe/src/lib/components/fpx-bank.component.ts
+++ b/projects/ngx-stripe/src/lib/components/fpx-bank.component.ts
@@ -8,7 +8,9 @@ import {
   OnInit,
   OnChanges,
   SimpleChanges,
-  OnDestroy
+  OnDestroy,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import {
@@ -19,14 +21,22 @@ import {
   StripeFpxBankElementOptions
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-fpx-bank',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeFpxBankComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeFpxBankElement;
 
diff --git a/projects/ngx-stripe/src/lib/components/iban.component.ts b/projects/ngx-stripe/src/lib/components/iban.component.ts
index fba7a60..86b5b02 100644
--- a/projects/ngx-stripe/src/lib/components/iban.component.ts
+++ b/projects/ngx-stripe/src/lib/components/iban.component.ts
@@ -8,7 +8,9 @@ import {
   OnInit,
   OnChanges,
   SimpleChanges,
-  OnDestroy
+  OnDestroy,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import {
@@ -19,14 +21,22 @@ import {
   StripeIbanElementChangeEvent
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-iban',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeIbanComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeIbanElement;
 
diff --git a/projects/ngx-stripe/src/lib/components/ideal-bank.component.ts b/projects/ngx-stripe/src/lib/components/ideal-bank.component.ts
index 03d634f..7896043 100644
--- a/projects/ngx-stripe/src/lib/components/ideal-bank.component.ts
+++ b/projects/ngx-stripe/src/lib/components/ideal-bank.component.ts
@@ -8,7 +8,9 @@ import {
   OnInit,
   OnChanges,
   SimpleChanges,
-  OnDestroy
+  OnDestroy,
+  ContentChild,
+  TemplateRef
 } from '@angular/core';
 
 import {
@@ -19,14 +21,22 @@ import {
   StripeIdealBankElementChangeEvent
 } from '@stripe/stripe-js';
 
+import { NgxStripeElementLoadingTemplateDirective } from '../directives/stripe-element-loading-template.directive';
+
 import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-ideal-bank',
-  template: `<div class="field" #stripeElementRef></div>`
+  template: `
+    <div class="field" #stripeElementRef>
+      <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
+    </div>
+  `
 })
 export class StripeIdealBankComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })
+  loadingTemplate?: TemplateRef<NgxStripeElementLoadingTemplateDirective>;
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;
   element!: StripeIdealBankElement;
 
diff --git a/projects/ngx-stripe/src/lib/directives/stripe-element-loading-template.directive.ts b/projects/ngx-stripe/src/lib/directives/stripe-element-loading-template.directive.ts
new file mode 100644
index 0000000..5fc0867
--- /dev/null
+++ b/projects/ngx-stripe/src/lib/directives/stripe-element-loading-template.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[ngxStripeLoadingTemplate]'
+})
+export class NgxStripeElementLoadingTemplateDirective {
+  constructor(public templateRef: TemplateRef<NgxStripeElementLoadingTemplateDirective>) {}
+}
diff --git a/projects/ngx-stripe/src/lib/ngx-stripe.module.ts b/projects/ngx-stripe/src/lib/ngx-stripe.module.ts
index 2642599..3980265 100644
--- a/projects/ngx-stripe/src/lib/ngx-stripe.module.ts
+++ b/projects/ngx-stripe/src/lib/ngx-stripe.module.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { StripeConstructorOptions } from '@stripe/stripe-js';
@@ -13,6 +14,7 @@ import { StripeAuBankAccountComponent } from './components/au-bank-account.compo
 import { StripePaymentRequestButtonComponent } from './components/payment-request-button.component';
 
 import { StripeCardGroupDirective } from './directives/card-group.directive';
+import { NgxStripeElementLoadingTemplateDirective } from './directives/stripe-element-loading-template.directive';
 
 import {
   NGX_STRIPE_VERSION,
@@ -39,13 +41,17 @@ const components = [
   StripePaymentRequestButtonComponent
 ];
 
-const directives = [StripeCardGroupDirective];
+const directives = [
+  StripeCardGroupDirective,
+  NgxStripeElementLoadingTemplateDirective
+];
 
-const currentVersion = '12.5.0';
+const currentVersion = '12.6.0';
 
 @NgModule({
   declarations: [...components, ...directives],
-  exports: [...components, ...directives]
+  exports: [...components, ...directives],
+  imports: [CommonModule]
 })
 export class NgxStripeModule {
   public static forRoot(
diff --git a/projects/ngx-stripe/src/public_api.ts b/projects/ngx-stripe/src/public_api.ts
index d70a5bd..b5dfc28 100644
--- a/projects/ngx-stripe/src/public_api.ts
+++ b/projects/ngx-stripe/src/public_api.ts
@@ -14,6 +14,7 @@ export { StripeAuBankAccountComponent } from './lib/components/au-bank-account.c
 export { StripePaymentRequestButtonComponent } from './lib/components/payment-request-button.component';
 
 export { StripeCardGroupDirective } from './lib/directives/card-group.directive';
+export { NgxStripeElementLoadingTemplateDirective } from './lib/directives/stripe-element-loading-template.directive';
 
 export { StripeService } from './lib/services/stripe.service';
 export { StripeFactoryService } from './lib/services/stripe-factory.service';