From 7aae25e0edbb5d360b6b92c4613c324c0be6ea0a Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Mon, 2 Dec 2024 16:32:40 +0200 Subject: [PATCH] PER-9922 Show loading spinner and success message checkout --- .../loading-spinner.component.scss | 6 ++++++ .../loading-spinner.component.ts | 10 +++++++-- .../new-pledge/new-pledge.component.html | 9 ++++++++ .../new-pledge/new-pledge.component.spec.ts | 21 +++++++++++++++++++ .../new-pledge/new-pledge.component.ts | 6 +++++- src/app/pledge/pledge.module.ts | 2 ++ 6 files changed, 51 insertions(+), 3 deletions(-) diff --git a/src/app/component-library/components/loading-spinner/loading-spinner.component.scss b/src/app/component-library/components/loading-spinner/loading-spinner.component.scss index ac85d90f2..18a9b4611 100644 --- a/src/app/component-library/components/loading-spinner/loading-spinner.component.scss +++ b/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; diff --git a/src/app/component-library/components/loading-spinner/loading-spinner.component.ts b/src/app/component-library/components/loading-spinner/loading-spinner.component.ts index a39d3c45a..f8aad7b14 100644 --- a/src/app/component-library/components/loading-spinner/loading-spinner.component.ts +++ b/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; + } +} diff --git a/src/app/pledge/components/new-pledge/new-pledge.component.html b/src/app/pledge/components/new-pledge/new-pledge.component.html index df7d4f13b..1aaddc078 100644 --- a/src/app/pledge/components/new-pledge/new-pledge.component.html +++ b/src/app/pledge/components/new-pledge/new-pledge.component.html @@ -1,5 +1,10 @@
+ +
+

+ Success! {{ amountInGb }} GB of Permanent storage has been added to your + account. +

diff --git a/src/app/pledge/components/new-pledge/new-pledge.component.spec.ts b/src/app/pledge/components/new-pledge/new-pledge.component.spec.ts index 0f8e7ebf8..f6a7f17c9 100644 --- a/src/app/pledge/components/new-pledge/new-pledge.component.spec.ts +++ b/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 correct amount of storage 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.nativeElement.textContent).toContain('Success! 5 GB of Permanent storage has been added to your account.'); + }); }); diff --git a/src/app/pledge/components/new-pledge/new-pledge.component.ts b/src/app/pledge/components/new-pledge/new-pledge.component.ts index 1bb10ca43..63bf1848d 100644 --- a/src/app/pledge/components/new-pledge/new-pledge.component.ts +++ b/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,6 +266,7 @@ 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( @@ -271,6 +274,7 @@ export class NewPledgeComponent implements OnInit, AfterViewInit { )} GB of storage!`, style: 'success', }); + this.amountInGb = this.getStorageAmount(pledge.dollarAmount); } } catch (err) { this.waiting = false; diff --git a/src/app/pledge/pledge.module.ts b/src/app/pledge/pledge.module.ts index da494f627..18f762dfc 100644 --- a/src/app/pledge/pledge.module.ts +++ b/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'),