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 :(
richnologies · Oct 22, 2021 · 96390b3 · 96390b3
1 parent d72bb41
commit 96390b3
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';