Merge pull request #431 from PermanentOrg/PER-9566-glam-invited-as-ar…

…chive-member

Per 9566 glam invited as archive member

src/app/component-library/components/button/button.component.html

@@ -15,5 +15,5 @@
 >
   <img *ngIf="icon" class="icon" src="{{ 'assets/svg/' + icon + '.svg' }}" />
   <fa-icon class="icon" *ngIf="faIcon" [icon]="['fas', faIcon]"></fa-icon>
-  <p class="button-text"><ng-content></ng-content></p>
+  <p [style]="textColor" class="button-text"><ng-content></ng-content></p>
 </button>

src/app/component-library/components/button/button.component.ts

@@ -24,6 +24,7 @@ export class ButtonComponent {
   @Input() orientation: ORIENTATION = 'left';
   @Input() faIcon: string = '';
   @Input() buttonType: TYPE = 'button';
+  @Input() textColor: { color: string };
 
   //Outputs
   @Output() buttonClick = new EventEmitter<MouseEvent>();

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

@@ -143,7 +143,7 @@ <h1 *ngIf="screen === 'name-archive'" class="heading">
 
 @if (screen === 'finalize' && isGlam) {
   <pr-finalize-archive-creation-screen
-    [name]="name"
+    [name]="name ? name : pendingArchive.fullName"
     (finalizeArchiveOutput)="onSubmit()"
   ></pr-finalize-archive-creation-screen>
 }

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

@@ -51,6 +51,7 @@ export class CreateNewArchiveComponent implements OnInit {
   @Output() error = new EventEmitter<string>();
   @Output() progress = new EventEmitter<number>();
   @Output() chartPathClicked = new EventEmitter<void>();
+  @Output() backToPendingArchivesOutput = new EventEmitter<void>();
   @Input() pendingArchives: ArchiveVO[] = [];
   @Input() pendingArchive: ArchiveVO;
 
@@ -127,7 +128,10 @@ export class CreateNewArchiveComponent implements OnInit {
   }
 
   public setScreen(screen: NewArchiveScreen): void {
-    if (this.pendingArchive && screen === 'create') {
+    if (
+      this.pendingArchive &&
+      (screen === 'create' || screen === 'name-archive')
+    ) {
       this.goToInvitations();
     }
     const action = screen === 'reasons' ? 'submit_reasons' : 'submit_goals';

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

@@ -0,0 +1,53 @@
+<!-- @format -->
+<div class="pending-archives">
+  <div class="text-container">
+    <p class="greeting">
+      Hello <b>{{ accountName }}</b
+      >. Welcome to Permanent!
+    </p>
+    <p class="text">
+      You’ve been invited to collaborate on an archive as an archive member. A
+      Permanent archive is the collection of digital materials about an
+      individual, family or group, or organizational entity. Get started by
+      accepting an invitation, or by creating a new archive of your own.
+    </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="buttons">
+      <div class="create-button">
+        <pr-button
+          [variant]="'primary'"
+          [orientation]="'right'"
+          [icon]="'/onboarding/plus'"
+          (buttonClick)="createNewArchive()"
+          [size]="'fill'"
+        >
+          Create new Archive</pr-button
+        >
+      </div>
+
+      <div class="next-button">
+        <pr-button
+          [variant]="'secondary'"
+          [orientation]="'right'"
+          [icon]="'/onboarding/arrow-right'"
+          (buttonClick)="next()"
+          [size]="'fill'"
+          [disabled]="!selectedArchive"
+        >
+          Next</pr-button
+        >
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,60 @@
+/* @format */
+@import 'variables';
+@import 'fonts';
+
+p {
+  color: white;
+}
+
+.greeting {
+  font-size: 56px;
+  font-family: 'UsualRegular', sans-serif;
+}
+
+.text {
+  font-size: 16px;
+  font-family: 'UsualRegular', sans-serif;
+}
+
+.text-container {
+  width: 50%;
+}
+
+.pending-archives {
+  display: flex;
+  gap: 64px;
+
+  @media screen and (max-width: 900px) {
+    flex-direction: column;
+  }
+}
+
+.pending-archives-container {
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 70vh;
+
+  @media screen and (max-width: 900px) {
+    height: 40vh;
+  }
+
+  @media screen and (max-width: 517px) {
+    width: auto;
+  }
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  gap: 32px;
+}
+
+.next-button {
+  width: 50%;
+}
+
+.create-button {
+  width: 50%;
+}

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

@@ -0,0 +1,84 @@
+/* @format */
+import { Shallow } from 'shallow-render';
+import { AccountService } from '@shared/services/account/account.service';
+import { ArchiveVO } from '@models/index';
+import { OnboardingModule } from '../../onboarding.module';
+import { GlamPendingArchivesComponent } from './glam-pending-archives.component';
+
+const mockAccountService = {
+  getAccount: () => {
+    return {
+      fullName: 'John Doe',
+    };
+  },
+};
+
+describe('GlamPendingArchivesComponent', () => {
+  let shallow: Shallow<GlamPendingArchivesComponent>;
+
+  beforeEach(async () => {
+    shallow = new Shallow(GlamPendingArchivesComponent, OnboardingModule).mock(
+      AccountService,
+      mockAccountService,
+    );
+  });
+
+  it('should create the component', async () => {
+    const { instance } = await shallow.render();
+
+    expect(instance).toBeTruthy();
+  });
+
+  it('should initialize accountName from AccountService', async () => {
+    const { instance } = await shallow.render();
+
+    expect(instance.accountName).toBe('John Doe');
+  });
+
+  it('should render the list of pending archives', async () => {
+    const pendingArchives: ArchiveVO[] = [
+      new ArchiveVO({ archiveId: 1, fullName: 'Archive 1' }),
+      new ArchiveVO({ archiveId: 2, fullName: 'Archive 2' }),
+    ];
+
+    const { find } = await shallow.render({
+      bind: { pendingArchives },
+    });
+
+    const archiveElements = find('pr-pending-archive');
+
+    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();
+
+    expect(outputs.createNewArchiveOutput.emit).toHaveBeenCalled();
+  });
+
+  it('should emit nextOutput with selected archive when next is called', async () => {
+    const { instance, outputs } = await shallow.render();
+    const selectedArchive: ArchiveVO = new ArchiveVO({
+      archiveId: 1,
+      fullName: 'Test Archive',
+    });
+
+    instance.selectedArchive = selectedArchive;
+    instance.next();
+
+    expect(outputs.nextOutput.emit).toHaveBeenCalledWith(selectedArchive);
+  });
+});

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

@@ -0,0 +1,35 @@
+/* @format */
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ArchiveVO } from '@models/index';
+import { AccountService } from '@shared/services/account/account.service';
+
+@Component({
+  selector: 'pr-glam-pending-archives',
+  templateUrl: './glam-pending-archives.component.html',
+  styleUrl: './glam-pending-archives.component.scss',
+})
+export class GlamPendingArchivesComponent {
+  @Input() pendingArchives: ArchiveVO[] = [];
+
+  @Output() createNewArchiveOutput = new EventEmitter<void>();
+  @Output() nextOutput = new EventEmitter<ArchiveVO>();
+
+  public accountName: string = '';
+  public selectedArchive: ArchiveVO = null;
+
+  constructor(private account: AccountService) {
+    this.accountName = this.account.getAccount().fullName;
+  }
+
+  createNewArchive(): void {
+    this.createNewArchiveOutput.emit();
+  }
+
+  next(): void {
+    this.nextOutput.emit(this.selectedArchive);
+  }
+
+  selectArchive(archive: ArchiveVO): void {
+    this.selectedArchive = archive;
+  }
+}

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

@@ -0,0 +1,26 @@
+<!-- #format  -->
+<div class="pending-archive">
+  <div class="archive-image-and-text">
+    <div class="archive-image">
+      <img src="/assets/svg/onboarding/default-archive.svg" />
+    </div>
+    <div class="info">
+      <p class="name">
+        The <b>{{ archive?.fullName }}</b> Archive
+      </p>
+      <p class="role">Invited as {{ roles[archive.accessRole] }}</p>
+    </div>
+  </div>
+  <div class="accept-button">
+    <pr-button
+      (buttonClick)="acceptArchive(archive)"
+      [variant]="isSelected ? 'tertiary' : 'primary'"
+      [mode]="isSelected ? 'dark' : 'light'"
+      [orientation]="'right'"
+      [icon]="isSelected ? '/accept-green' : ''"
+      [textColor]="isSelected ? { color: '#32D583' } : {}"
+    >
+      Accept
+    </pr-button>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+/* @format */
+@import 'fonts';
+
+.pending-archive-container {
+  display: flex;
+  width: 50%;
+  justify-content: space-between;
+}
+
+.name {
+  color: white;
+  font-size: 14px;
+  font-family: 'UsualRegular', sans-serif;
+  margin-bottom: 0;
+}
+
+.role {
+  color: rgba(255, 255, 255, 0.5);
+  font-family: 'UsualRegular', sans-serif;
+  font-size: 14px;
+  margin-bottom: 0;
+}
+
+.pending-archive {
+  display: flex;
+  justify-content: space-between;
+}
+
+.accept-button {
+  display: flex;
+  align-items: center;
+}
+
+.archive-image-and-text {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.archive-image > img {
+  width: 50px;
+  height: 50px;
+}