Merge pull request #439 from PermanentOrg/PER-9756-update-archive-typ…

…e-onboarding-screen

Per 9756 update archive type onboarding screen

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

@@ -102,8 +102,8 @@ <h1 *ngIf="screen === 'name-archive'" class="heading">
       </h1>
     </div>
     <pr-select-archive-type-screen
-      (navigationEmitter)="setScreen($event)"
       (submitEmitter)="handleCreationScreenEvents($event)"
+      [tag]="archiveTypeTag"
       *ngIf="screen === 'create'"
     ></pr-select-archive-type-screen>
     <pr-name-archive-screen

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

@@ -238,6 +238,12 @@ h3 {
     color: white;
     font-family: 'UsualLight', sans-serif;
   }
+
+  & > .heading-new-archive {
+    width: 60%;
+    color: white;
+    font-family: 'UsualLight', sans-serif;
+  }
 }
 
 .create-new-archive {

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

@@ -277,7 +277,7 @@ export class CreateNewArchiveComponent implements OnInit {
     this.archiveTypeTag = event.tag as OnboardingTypes;
     this.archiveType = event.type;
     this.headerText = event.headerText;
-    this.screen = 'name-archive';
+    this.screen = event.screen as NewArchiveScreen;
   }
 
   public onValueChange(value: {

src/app/onboarding/components/glam/archive-type-select-dialog/archive-type-select-dialog.component.scss

@@ -1,12 +1,13 @@
 @import 'variables';
+@import 'fonts';
 
 .archive-type-select-dialog {
   font-family: 'UsualRegular', sans-serif;
   background: #fff;
-  border-radius: 12px 12px 0px 0px;
+  border-radius: 12px;
   display: flex;
-  width: 673px;
-  height: 100vh;
+  width: auto;
+  height: 80vh;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
@@ -32,6 +33,7 @@
   align-items: center;
   flex-shrink: 0;
   align-self: stretch;
+  border-bottom: 1px solid #e7e8ed;
 
   .dialog-label {
     color: $darkBlue;
@@ -60,7 +62,7 @@
   background: transparent;
   display: flex;
   padding: 0px 32px;
-  align-items: flex-start;
+  align-items: center;
   gap: 24px;
   align-self: stretch;
 
@@ -75,6 +77,7 @@
       color: $darkBlue;
       font-weight: 600;
       line-height: 24px;
+      font-family: 'UsualExtraBold', sans-serif;
     }
 
     .type-description {

src/app/onboarding/components/glam/archive-type-select/archive-type-select.component.scss

@@ -1,3 +1,6 @@
+/* @format */
+@import 'fonts';
+
 .archive-type-select {
   cursor: pointer;
   width: 100%;
@@ -8,8 +11,8 @@
   align-self: stretch;
 
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: linear-gradient(97deg, #8d0085 0%, #ff9400 100%);
+  border: none;
+  background: linear-gradient(156deg, #8d0085 0%, #ff9400 100%);
 
   font-family: 'UsualRegular', sans-serif;
   font-style: normal;
@@ -27,7 +30,7 @@
 
   .type-name {
     font-size: 18px;
-    font-weight: 600;
+    font-family: 'UsualExtraBold', sans-serif;
     line-height: 24px;
   }
 
@@ -37,5 +40,6 @@
     font-style: normal;
     font-weight: 400;
     line-height: 32px;
+    text-align: left;
   }
 }

src/app/onboarding/components/glam/archive-type-select/archive-type-select.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, Input, EventEmitter, OnInit } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service';
@@ -14,9 +14,9 @@ import { ArchiveTypeIconComponent } from '../archive-type-icon/archive-type-icon
   templateUrl: './archive-type-select.component.html',
   styleUrl: './archive-type-select.component.scss',
 })
-export class GlamArchiveTypeSelectComponent {
+export class GlamArchiveTypeSelectComponent implements OnInit {
   @Output() public typeSelected = new EventEmitter<OnboardingTypes>();
-  public currentType: OnboardingTypes = OnboardingTypes.myself;
+  @Input() currentType: OnboardingTypes = OnboardingTypes.myself;
   public typeName: string;
   public typeDescription: string;
   public chevronDown = faChevronDown;
@@ -25,6 +25,12 @@ export class GlamArchiveTypeSelectComponent {
     this.refreshArchiveTypeText();
   }
 
+  ngOnInit(): void {
+    if (this.currentType) {
+      this.refreshArchiveTypeText();
+    }
+  }
+
   public onClick(): void {
     this.dialog
       .open(ArchiveTypeSelectDialogComponent, {

src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.html

@@ -2,7 +2,10 @@
 <div class="type-selection-container">
   <div class="archive-type-selection">
     <p>With my first archive, I plan to capture and preserve material about…</p>
-    <pr-glam-archive-type-select (typeSelected)="onValueChange($event)" />
+    <pr-glam-archive-type-select
+      [currentType]="tag"
+      (typeSelected)="onValueChange($event)"
+    />
   </div>
   <div class="buttons-container">
     <pr-button

src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.spec.ts

@@ -21,17 +21,25 @@ describe('SelectArchiveTypeScreenComponent', () => {
     const { instance } = await shallow.render();
 
     expect(instance.selectedValue).toBe('');
-    expect(instance.buttonText).toBe('');
+    expect(instance.buttonText).toBe('a Personal');
     expect(instance['headerText']).toBe('');
     expect(instance['tag']).toBe('');
     expect(instance['type']).toBe('');
   });
 
   it('should emit navigation event when navigate is called with start', async () => {
     const { instance, outputs } = await shallow.render();
+    instance['type'] = 'mockType';
+    instance['tag'] = 'mockTag';
+    instance['headerText'] = 'mockHeaderText';
     instance.navigate('start');
 
-    expect(outputs.navigationEmitter.emit).toHaveBeenCalledWith('start');
+    expect(outputs.submitEmitter.emit).toHaveBeenCalledWith({
+      screen: 'start',
+      type: 'mockType',
+      tag: 'mockTag',
+      headerText: 'mockHeaderText',
+    });
   });
 
   it('should emit submit event when navigate is called with other screen', async () => {
@@ -72,4 +80,28 @@ describe('SelectArchiveTypeScreenComponent', () => {
 
     expect(instance.navigate).toHaveBeenCalledWith('name-archive');
   });
+
+  it('should set buttonText correctly in ngOnInit if tag is defined', async () => {
+    const { instance } = await shallow.render({
+      bind: {
+        tag: 'type:community',
+      },
+    });
+
+    instance.ngOnInit();
+
+    expect(instance.buttonText).toBe('a Community');
+  });
+
+  it('should not call generateElementText if tag is not defined', async () => {
+    const { instance, fixture } = await shallow.render();
+
+    instance.tag = '';
+
+    fixture.detectChanges();
+
+    instance.ngOnInit();
+
+    expect(instance.buttonText).toBe('a Personal'); // Default value
+  });
 });

src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.ts

@@ -1,5 +1,5 @@
 /* @format */
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, Input, OnInit } from '@angular/core';
 import { generateElementText } from '../../../utils/utils';
 import {
   archiveOptionsWithArticle,
@@ -12,29 +12,33 @@ import {
   templateUrl: './select-archive-type-screen.component.html',
   styleUrl: './select-archive-type-screen.component.scss',
 })
-export class SelectArchiveTypeScreenComponent {
+export class SelectArchiveTypeScreenComponent implements OnInit {
   selectedValue = '';
-  buttonText = '';
+  buttonText = 'a Personal';
   public headerText: string = '';
-  public tag: string = '';
+  @Input() tag: string = '';
   public type: string = '';
 
-  @Output() navigationEmitter = new EventEmitter<string>();
   @Output() submitEmitter = new EventEmitter<Record<string, string>>();
 
-  public navigate(screen) {
-    if (screen === 'start') {
-      this.navigationEmitter.emit(screen);
-    } else {
-      this.submitEmitter.emit({
-        screen,
-        type: this.type,
-        tag: this.tag,
-        headerText: this.headerText,
-      });
+  ngOnInit(): void {
+    if (this.tag) {
+      this.buttonText = generateElementText(
+        this.tag,
+        archiveOptionsWithArticle,
+      );
     }
   }
 
+  public navigate(screen) {
+    this.submitEmitter.emit({
+      screen,
+      type: this.type,
+      tag: this.tag,
+      headerText: this.headerText,
+    });
+  }
+
   public onValueChange(event: string): void {
     this.tag = event;
     this.type = archiveOptions.find((val) => val.type === event).value;