Merge pull request #456 from PermanentOrg/PER-9807-changes-to-archive…

…-invite-design

PER-9807-Design changes to archive invite

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

@@ -102,6 +102,10 @@ export class CreateNewArchiveComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    if (this.pendingArchives.length && !this.pendingArchive) {
+      this.screen = 'create';
+    }
+
     if (this.pendingArchive) {
       this.screen = 'goals';
       this.progress.emit(1);
@@ -130,8 +134,8 @@ export class CreateNewArchiveComponent implements OnInit {
 
   public setScreen(screen: NewArchiveScreen): void {
     if (
-      this.pendingArchive &&
-      (screen === 'create' || screen === 'name-archive')
+      (this.pendingArchive || this.pendingArchives.length) &&
+      (screen === 'create' || screen === 'name-archive' || screen === 'start')
     ) {
       this.goToInvitations();
     }

src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.html

@@ -2,7 +2,7 @@
 <div class="pending-archives">
   <div class="text-container">
     <p class="greeting">
-      Hello <b>{{ accountName }}</b
+      Hello <b class="bold">{{ accountName }}</b
       >. Welcome to Permanent!
     </p>
     <p class="text">
@@ -13,15 +13,15 @@
     </p>
   </div>
   <div class="pending-archives-container">
-    @for (archive of pendingArchives; track archive.archiveId) {
-      <pr-pending-archive
-        [archive]="archive"
-        (acceptArchiveOutput)="selectArchive(archive)"
-        [isSelected]="
-          selectedArchive && selectedArchive.archiveId === archive.archiveId
-        "
-      ></pr-pending-archive>
-    }
+    <div class="pending-info">
+      @for (archive of pendingArchives; track archive.archiveId) {
+        <pr-pending-archive
+          [archive]="archive"
+          (acceptArchiveOutput)="selectArchive(archive)"
+          [isSelected]="isSelected(archive.archiveId)"
+        ></pr-pending-archive>
+      }
+    </div>
 
     <div class="buttons">
       <div class="create-button">
@@ -44,6 +44,7 @@
           (buttonClick)="next()"
           [size]="'fill'"
           [disabled]="!selectedArchive"
+          [style]="{ justifyContent: 'center' }"
         >
           Next</pr-button
         >

src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss

@@ -8,11 +8,16 @@ p {
 
 .greeting {
   font-size: 56px;
-  font-family: 'UsualRegular', sans-serif;
+  font-family: 'UsualLight', sans-serif;
+  letter-spacing: -2px;
+}
+
+.bold {
+  font-family: 'UsualMedium', sans-serif;
 }
 
 .text {
-  font-size: 16px;
+  font-size: 0.6rem;
   font-family: 'UsualRegular', sans-serif;
 }
 
@@ -22,6 +27,7 @@ p {
 
 .pending-archives {
   display: flex;
+  justify-content: space-between;
   gap: 64px;
 
   @media screen and (max-width: 900px) {
@@ -30,7 +36,7 @@ p {
 }
 
 .pending-archives-container {
-  width: 500px;
+  width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -48,7 +54,7 @@ p {
 .buttons {
   display: flex;
   justify-content: space-between;
-  gap: 32px;
+  gap: 16px;
 }
 
 .next-button {

src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.spec.ts

@@ -2,6 +2,7 @@
 import { Shallow } from 'shallow-render';
 import { AccountService } from '@shared/services/account/account.service';
 import { ArchiveVO } from '@models/index';
+import { ApiService } from '@shared/services/api/api.service';
 import { OnboardingModule } from '../../onboarding.module';
 import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
 
@@ -17,10 +18,13 @@ describe('GlamPendingArchivesComponent', () => {
   let shallow: Shallow<GlamPendingArchivesComponent>;
 
   beforeEach(async () => {
-    shallow = new Shallow(GlamPendingArchivesComponent, OnboardingModule).mock(
-      AccountService,
-      mockAccountService,
-    );
+    shallow = new Shallow(GlamPendingArchivesComponent, OnboardingModule)
+      .mock(AccountService, mockAccountService)
+      .mock(ApiService, {
+        archive: {
+          accept: (archive: ArchiveVO) => Promise.resolve(),
+        },
+      });
   });
 
   it('should create the component', async () => {
@@ -50,18 +54,6 @@ describe('GlamPendingArchivesComponent', () => {
     expect(archiveElements.length).toBe(2);
   });
 
-  it('should update selectedArchive when selectArchive is called', async () => {
-    const { instance } = await shallow.render();
-    const archive: ArchiveVO = new ArchiveVO({
-      archiveId: 1,
-      fullName: 'Test Archive',
-    });
-
-    instance.selectArchive(archive);
-
-    expect(instance.selectedArchive).toBe(archive);
-  });
-
   it('should emit createNewArchiveOutput when createNewArchive is called', async () => {
     const { instance, outputs } = await shallow.render();
     instance.createNewArchive();
@@ -81,4 +73,67 @@ describe('GlamPendingArchivesComponent', () => {
 
     expect(outputs.nextOutput.emit).toHaveBeenCalledWith(selectedArchive);
   });
+
+  it('should call api.archive.accept when selectArchive is called', async () => {
+    const { instance, inject } = await shallow.render();
+    const apiService = inject(ApiService);
+    spyOn(apiService.archive, 'accept').and.callThrough();
+
+    const archive: ArchiveVO = new ArchiveVO({
+      archiveId: 1,
+      fullName: 'Test Archive',
+    });
+
+    await instance.selectArchive(archive);
+
+    expect(apiService.archive.accept).toHaveBeenCalledWith(archive);
+  });
+
+  it('should add archive to acceptedArchives when selectArchive is called', async () => {
+    const { instance } = await shallow.render();
+    const archive: ArchiveVO = new ArchiveVO({
+      archiveId: 1,
+      fullName: 'Test Archive',
+    });
+
+    await instance.selectArchive(archive);
+
+    expect(instance.acceptedArchives.length).toBe(1);
+    expect(instance.acceptedArchives[0].archiveId).toBe(1);
+  });
+
+  it('should set selectedArchive if no archive was previously selected', async () => {
+    const { instance } = await shallow.render();
+    const archive: ArchiveVO = new ArchiveVO({
+      archiveId: 1,
+      fullName: 'Test Archive',
+    });
+
+    expect(instance.selectedArchive).toBeNull();
+    await instance.selectArchive(archive);
+
+    expect(instance.selectedArchive.archiveId).toBe(archive.archiveId);
+  });
+
+  it('should return true when isSelected is called for an accepted archive', async () => {
+    const { instance } = await shallow.render();
+    const archive: ArchiveVO = new ArchiveVO({
+      archiveId: 1,
+      fullName: 'Test Archive',
+    });
+
+    await instance.selectArchive(archive);
+
+    expect(instance.isSelected(1)).toBeTrue();
+  });
+
+  it('should return false when isSelected is called for a non-accepted archive', async () => {
+    const { instance } = await shallow.render();
+    const archive: ArchiveVO = new ArchiveVO({
+      archiveId: 1,
+      fullName: 'Test Archive',
+    });
+
+    expect(instance.isSelected(1)).toBeFalse();
+  });
 });

src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.ts

@@ -2,6 +2,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ArchiveVO } from '@models/index';
 import { AccountService } from '@shared/services/account/account.service';
+import { ApiService } from '@shared/services/api/api.service';
 
 @Component({
   selector: 'pr-glam-pending-archives',
@@ -16,8 +17,12 @@ export class GlamPendingArchivesComponent {
 
   public accountName: string = '';
   public selectedArchive: ArchiveVO = null;
+  public acceptedArchives: ArchiveVO[] = [];
 
-  constructor(private account: AccountService) {
+  constructor(
+    private account: AccountService,
+    private api: ApiService,
+  ) {
     this.accountName = this.account.getAccount().fullName;
   }
 
@@ -29,7 +34,19 @@ export class GlamPendingArchivesComponent {
     this.nextOutput.emit(this.selectedArchive);
   }
 
-  selectArchive(archive: ArchiveVO): void {
-    this.selectedArchive = archive;
+  async selectArchive(archive: ArchiveVO) {
+    try {
+      await this.api.archive.accept(archive);
+      this.acceptedArchives.push(archive);
+      if (!this.selectedArchive) {
+        this.selectedArchive = archive;
+      }
+    } catch (error) {
+      console.error(error.message);
+    }
+  }
+
+  isSelected(archiveId: string | number): boolean {
+    return !!this.acceptedArchives.find((a) => a.archiveId === archiveId);
   }
 }

src/app/onboarding/components/glam/pending-archive/pending-archive.component.html

@@ -20,7 +20,7 @@
       [icon]="isSelected ? '/accept-green' : ''"
       [color]="isSelected ? '#32D583' : ''"
     >
-      Accept
+      {{ isSelected ? 'Accepted' : 'Accept' }}
     </pr-button>
   </div>
 </div>

src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss

@@ -24,6 +24,7 @@
 .pending-archive {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 1rem;
 }
 
 .accept-button {