Merge pull request #468 from PermanentOrg/PER-9863-create-archive-for…

…-me-2-archives

PER-9863: Create archive for me - 2 archives

src/app/onboarding/components/create-new-archive/create-new-archive.component.html

@@ -190,12 +190,18 @@ <h2>Lastly, we’re curious -- what brought you to Permanent.org?</h2>
     <button
       (click)="onSubmit()"
       class="btn btn-primary next-button create-archive"
-      [disabled]="!selectedReasons.length || loading"
+      [disabled]="!selectedReasons.length || loading || isArchiveSubmitted"
     >
       Create my archive
     </button>
   </div>
 </div>
 <div *ngIf="!isGlam && screen !== 'create' && screen !== 'name-archive'">
-  <button (click)="skipStep()" class="btn btn-link">Skip this step</button>
+  <button
+    [disabled]="isArchiveSubmitted"
+    (click)="skipStep()"
+    class="btn btn-link skip-step"
+  >
+    Skip this step
+  </button>
 </div>

src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts

@@ -111,4 +111,18 @@ describe('CreateNewArchiveComponent #onboarding', () => {
 
     expect(button.disabled).toBe(true);
   });
+
+  it('should disable the Skip This Step and submit buttons when the archive has been submitted', async () => {
+    const { find, instance, fixture } = await shallow.render();
+    instance.screen = 'reasons';
+    instance.isArchiveSubmitted = true;
+
+    fixture.detectChanges();
+    const submitButton = find('.create-archive').nativeElement;
+
+    const skipStepButton = find('.skip-step').nativeElement;
+
+    expect(submitButton.disabled).toBe(true);
+    expect(skipStepButton.disabled).toBe(true);
+  });
 });

src/app/onboarding/components/create-new-archive/create-new-archive.component.ts

@@ -64,6 +64,7 @@ export class CreateNewArchiveComponent implements OnInit {
   public archiveName: string = '';
   public screen: NewArchiveScreen = 'start';
   public loading: boolean = false;
+  public isArchiveSubmitted: boolean = false;
   public selectedGoals: string[] = [];
   public selectedReasons: string[] = [];
   public selectedValue: string = '';
@@ -153,6 +154,7 @@ export class CreateNewArchiveComponent implements OnInit {
   public async onSubmit(): Promise<void> {
     try {
       this.loading = true;
+      this.isArchiveSubmitted = true;
       const fullName = this.name;
       const archive = new ArchiveVO({
         fullName,

src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.html

@@ -32,6 +32,7 @@
         [variant]="'secondary'"
         [icon]="'/accept'"
         [size]="'fill'"
+        [disabled]="isArchiveSubmitted"
         (buttonClick)="finalizeArchive()"
         >Done</pr-button
       >

src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.spec.ts

@@ -44,4 +44,14 @@ describe('FinalizeArchiveCreationScreenComponent', () => {
 
     expect(instance.finalizeArchive).toHaveBeenCalled();
   });
+
+  it('should disable the done button when it is clicked', async () => {
+    const { instance, fixture, find } = await shallow.render();
+    const doneButton = find('pr-button');
+    doneButton.triggerEventHandler('buttonClick', null);
+
+    fixture.detectChanges();
+
+    expect(instance.isArchiveSubmitted).toBe(true);
+  });
 });

src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.ts

@@ -9,8 +9,10 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 export class FinalizeArchiveCreationScreenComponent {
   @Input() name: string = '';
   @Output() finalizeArchiveOutput = new EventEmitter<string>();
+  public isArchiveSubmitted: boolean = false;
 
   finalizeArchive() {
+    this.isArchiveSubmitted = true;
     this.finalizeArchiveOutput.emit();
   }
 }