Merge pull request #496 from PermanentOrg/PER-9922-show-loading-spinn…

…er-storage-checkout

PER-9922 Show loading spinner and success message checkout

src/app/component-library/components/loading-spinner/loading-spinner.component.scss

@@ -11,6 +11,12 @@
   border: 1px solid rgba(54, 68, 147, 0.4);
   border-radius: 12px;
 }
+
+:host(.full-screen) {
+  left: 0;
+  z-index: 2;
+}
+
 .spinner-container {
   position: relative;
   display: flex;

src/app/component-library/components/loading-spinner/loading-spinner.component.ts

@@ -1,9 +1,15 @@
 /* @format */
-import { Component } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'pr-loading-spinner',
   templateUrl: './loading-spinner.component.html',
   styleUrl: './loading-spinner.component.scss',
 })
-export class LoadingSpinnerComponent {}
+export class LoadingSpinnerComponent {
+  @Input() isFullScreen = false;
+
+  @HostBinding('class.full-screen') get fullScreenClass() {
+    return this.isFullScreen;
+  }
+}

src/app/pledge/components/new-pledge/new-pledge.component.html

@@ -1,5 +1,10 @@
 <!-- @format -->
 <form (submit)="submitPledge(pledgeForm.value)" [formGroup]="pledgeForm">
+  <pr-loading-spinner
+    [isFullScreen]="true"
+    *ngIf="waiting"
+  ></pr-loading-spinner>
+
   <div class="input-group-vertical">
     <div class="input-vertical pledge-buttons">
       <div
@@ -85,4 +90,8 @@
     }}
     GB
   </button>
+  <p class="success-message" *ngIf="isSuccessful">
+    Success! {{ amountInGb }} GB of Permanent storage has been added to your
+    account.
+  </p>
 </form>

src/app/pledge/components/new-pledge/new-pledge.component.spec.ts

@@ -189,4 +189,25 @@ describe('NewPledgeComponent', () => {
 
     expect(instance.donationSelection).toBe('custom');
   });
+
+  it('should display the loading spinner', async () => {
+    const { find, instance } = await shallow.render();
+
+    instance.waiting = true;
+
+    expect(find('pr-loading-spinner')).toBeTruthy();
+  });
+
+  it('should display the succes message if the transaction is succesful', async () => {
+    const { find, instance, fixture } = await shallow.render();
+
+    instance.isSuccessful = true;
+    instance.amountInGb = 5;
+
+    fixture.detectChanges();
+
+    const displayedMessage = find('.success-message');
+
+    expect(displayedMessage).toBeTruthy();
+  });
 });

src/app/pledge/components/new-pledge/new-pledge.component.ts

@@ -33,7 +33,7 @@ const elements = stripe.elements();
 })
 export class NewPledgeComponent implements OnInit, AfterViewInit {
   @Input() inlineFlow: boolean = false;
-  public waiting: boolean;
+  public waiting: boolean = false;
   public pledgeForm: UntypedFormGroup;
 
   public donationLevels = [10, 20, 50];
@@ -42,6 +42,7 @@ export class NewPledgeComponent implements OnInit, AfterViewInit {
   public donationAmount = 10;
 
   public pricePerGb = 10;
+  public isSuccessful: boolean = false;
 
   @ViewChild('customDonationAmount', { static: true })
   customDonationInput: ElementRef;
@@ -53,6 +54,7 @@ export class NewPledgeComponent implements OnInit, AfterViewInit {
 
   public static stripeCardInstance: any;
   public static currentInstance: NewPledgeComponent;
+  public amountInGb: number = 0;
 
   constructor(
     private api: ApiService,
@@ -264,13 +266,15 @@ export class NewPledgeComponent implements OnInit, AfterViewInit {
               entity: 'account',
               action: 'purchase_storage',
             });
+            this.isSuccessful = true;
             this.accountService.addStorageBytes(sizeInBytes);
             this.message.showMessage({
               message: `You just claimed ${this.getStorageAmount(
                 pledge.dollarAmount,
               )} GB of storage!`,
               style: 'success',
             });
+            this.amountInGb = this.getStorageAmount(pledge.dollarAmount);
           }
         } catch (err) {
           this.waiting = false;

src/app/pledge/pledge.module.ts

@@ -8,6 +8,7 @@ import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
 import { CountUpModule } from 'ngx-countup';
 import { environment } from '@root/environments/environment';
 import { SecretsService } from '@shared/services/secrets/secrets.service';
+import { ComponentsModule } from '../component-library/components.module';
 import { PledgeRoutingModule } from './pledge.routes';
 import { NewPledgeComponent } from './components/new-pledge/new-pledge.component';
 import { PledgeService } from './services/pledge.service';
@@ -25,6 +26,7 @@ import { UpdateCardComponent } from './components/update-card/update-card.compon
     CommonModule,
     SharedModule,
     RouterModule,
+    ComponentsModule,
     AngularFireModule.initializeApp({
       ...environment.firebase,
       apiKey: SecretsService.getStatic('FIREBASE_API_KEY'),