From 5c3698ad8cad97df43277db8aa175bd5df08abaf Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Tue, 13 Jun 2023 11:29:28 +0300
Subject: [PATCH 01/15] PER-9237 gift-storage-interface

This pr's purpose is the implementation of the gift storage interface.

I have added a new tab to the dropdown for the gift component. I have created a new component which in which the new form lies where the user must input the email, amount and the message. Upon confirmation a new modal pops up for confirmation.
---
 .../components/storage-dialog/storage-dialog.component.ts  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/core/components/storage-dialog/storage-dialog.component.ts b/src/app/core/components/storage-dialog/storage-dialog.component.ts
index 650092256..8de18edec 100644
--- a/src/app/core/components/storage-dialog/storage-dialog.component.ts
+++ b/src/app/core/components/storage-dialog/storage-dialog.component.ts
@@ -2,12 +2,13 @@
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { IsTabbedDialog, DialogRef } from '@root/app/dialog/dialog.module';
+
+import { PromoVOData, AccountVO } from '@models';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
   Validators,
 } from '@angular/forms';
-import { PromoVOData, AccountVO } from '@models';
 import { ApiService } from '@shared/services/api/api.service';
 import {
   BillingResponse,
@@ -79,6 +80,10 @@ export class StorageDialogComponent implements OnInit, IsTabbedDialog {
         `Gift code redeemed for ${pipe.transform(bytes)} of storage`,
         'success'
       );
+      this.message.showMessage(
+        `Gift code redeemed for ${pipe.transform(bytes)} of storage`,
+        'success'
+      );
       this.promoForm.reset();
     } catch (err) {
       if (err instanceof BillingResponse || err instanceof AccountResponse) {

From 2b44d663e336db7c22f82aba27009e6ccb5f82a5 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Thu, 19 Oct 2023 12:43:11 +0300
Subject: [PATCH 02/15] PER-9373 enter multiple emails.

Changed the ui
---
 .../gift-storage/gift-storage.component.html          |  9 ++++++---
 .../gift-storage/gift-storage.component.scss          | 11 ++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index def84b274..97e2b23a4 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -15,7 +15,10 @@
     >
       <div class="dialog-form-field">
         <div class="text">
-          <label class="label" for="email">Recipient Email</label>
+          <label class="label" for="email">Recipient Email(s)</label>
+          <span class="label-info"
+            >Separate multiple email addresses with commas</span
+          >
         </div>
         <input
           type="text"
@@ -45,7 +48,7 @@
             'form-control-error': giftForm.get('amount').errors?.notInteger
           }"
         />
-        <span class="gigabytes">gigabytes</span>
+        <span class="gigabytes">gigabytes per recipient</span>
       </div>
       <p class="input-error" *ngIf="giftForm.get('amount').errors?.notInteger">
         Storage can only be gifted in 1GB increments.
@@ -56,7 +59,7 @@
       <div class="dialog-form-field">
         <div class="text">
           <label class="label" for="amount">Note to recipient</label>
-          <span class="label-info">Optional</span>
+          <span class="label-info optional">Optional; sent to all recipients</span>
         </div>
         <textarea
           class="form-control form-control-textarea"
diff --git a/src/app/core/components/gift-storage/gift-storage.component.scss b/src/app/core/components/gift-storage/gift-storage.component.scss
index b5316e819..3a614c469 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.scss
+++ b/src/app/core/components/gift-storage/gift-storage.component.scss
@@ -12,6 +12,10 @@
   display: flex;
   margin-bottom: 23px;
 
+  &-amount > input {
+    width: 300px !important;
+  }
+
   @include beforeDesktop {
     flex-direction: column;
 
@@ -40,17 +44,22 @@
     line-height: 17px;
   }
 
+  & .optional {
+    width: 100px;
+  }
+
   & .gigabytes {
     display: inline-flex;
     align-items: center;
 
     font-family: 'Open Sans';
-    font-style: normal;
+    font-style: italic;
     font-weight: 400;
     font-size: 16px;
     line-height: 17px;
     color: $gray-dark;
     margin-left: 10px;
+    width: 100px;
 
     @include beforeDesktop {
       margin-left: 0;

From b2c0417b684d71915e0d931a1c1dc2c6045707f6 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:52:53 +0300
Subject: [PATCH 03/15] PER-9373

Added new form validation.
---
 .../confirm-gift-dialog.component.spec.ts     |   2 +-
 .../confirm-gift-dialog.component.ts          |   8 +-
 .../gift-storage/gift-storage.component.html  |  20 ++-
 .../gift-storage/gift-storage.component.scss  |   1 +
 .../gift-storage/gift-storage.component.ts    | 137 +++++++++++++-----
 src/assets/svg/alert.svg                      |   3 +
 6 files changed, 127 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/svg/alert.svg

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
index a95a499e0..ffcdf5b77 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
@@ -100,7 +100,7 @@ describe('ConfirmGiftDialogComponent', () => {
   });
 
   it('should take the email from the dialog data', () => {
-    expect(component.email).toEqual('test@example.com');
+    expect(component.emails).toEqual('test@example.com');
   });
 
   it('should take the amount from the dialog data', () => {
diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
index cb02627d6..fde25cdcc 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
@@ -11,7 +11,7 @@ import { BehaviorSubject } from 'rxjs';
   styleUrls: ['./confirm-gift-dialog.component.scss'],
 })
 export class ConfirmGiftDialogComponent {
-  email: string;
+  emails: string[];
   amount: number;
   message: string;
   giftResult: BehaviorSubject<boolean>;
@@ -22,8 +22,8 @@ export class ConfirmGiftDialogComponent {
     @Inject(DIALOG_DATA) public data: any,
     private msg: MessageService
   ) {
-    this.email = this.data.email;
-    this.amount = this.data.amount;
+    this.emails = this.data.emails;
+    this.amount = this.data.fullAmount;
     this.message = this.data.message;
     this.giftResult = this.data.giftResult;
   }
@@ -34,7 +34,7 @@ export class ConfirmGiftDialogComponent {
 
   public async onConfirmClick() {
     try {
-      await this.api.billing.giftStorage(this.email, Number(this.amount));
+      await this.api.billing.giftStorage(this.emails, Number(this.amount));
       this.giftResult.next(true);
     } catch (e) {
       this.msg.showError('Something went wrong! Please try again.');
diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index 97e2b23a4..e712598a2 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -29,9 +29,12 @@
           placeholder="email@email.com"
         />
       </div>
-      <p class="input-error" *ngIf="giftForm.get('email').errors?.email">
-        The email you have entered is not valid.
-      </p>
+      <div *ngFor="let invalidEmail of emailValidationErrors">
+        <img src="assets/svg/alert.svg" />
+        <span class="input-error"
+          >{{ invalidEmail }} is not a valid email address.</span
+        >
+      </div>
       <div class="dialog-form-field dialog-form-field-amount">
         <div class="text">
           <label class="label" for="amount">Storage Gift Amount</label>
@@ -56,10 +59,19 @@
       <p class="input-error" *ngIf="giftForm.get('amount').errors?.max">
         Amount must be less than or equal to {{ availableSpace }} GB.
       </p>
+      <p *ngIf="giftForm.get('amount').errors?.positiveValidation" class="success-message">
+        {{ giftForm.get('amount').errors?.successMessage }}
+      </p>
+      <div *ngIf="giftForm.get('amount').errors?.isGreaterThanAvailableSpace">
+        <img src="assets/svg/alert.svg" />
+        <span class="input-error">{{ getAmountErrorMessage() }}</span>
+      </div>
       <div class="dialog-form-field">
         <div class="text">
           <label class="label" for="amount">Note to recipient</label>
-          <span class="label-info optional">Optional; sent to all recipients</span>
+          <span class="label-info optional"
+            >Optional; sent to all recipients</span
+          >
         </div>
         <textarea
           class="form-control form-control-textarea"
diff --git a/src/app/core/components/gift-storage/gift-storage.component.scss b/src/app/core/components/gift-storage/gift-storage.component.scss
index 3a614c469..5e3d0f51e 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.scss
+++ b/src/app/core/components/gift-storage/gift-storage.component.scss
@@ -100,4 +100,5 @@
 .input-error {
   margin-bottom: 1rem;
   color: $red;
+  font-style: italic;
 }
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index 41af4e322..c96804b2f 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -11,8 +11,9 @@ import {
   ValidatorFn,
 } from '@angular/forms';
 import { AccountVO } from '@models/index';
+import { unsubscribeAll } from '@shared/utilities/hasSubscriptions';
 import { Observable, BehaviorSubject, Subscription, of, timer } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { Dialog } from '../../../dialog/dialog.service';
 import { AccountService } from '../../../shared/services/account/account.service';
 
@@ -26,13 +27,14 @@ export class GiftStorageComponent implements OnDestroy {
   availableSpace: string;
   account: AccountVO;
   bytesPerGigabyte = 1073741824;
+  emailValidationErrors: string[] = [];
 
   public isSuccessful: boolean = false;
   public giftResult: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
     false
   );
-  private sub: Subscription;
-  isAsyncValidating: boolean;
+  private subscriptions: Subscription[] = [];
+  public isAsyncValidating: boolean;
 
   constructor(
     private fb: UntypedFormBuilder,
@@ -45,9 +47,9 @@ export class GiftStorageComponent implements OnDestroy {
       email: [
         '',
         {
-          validators: [Validators.email, Validators.required],
-          asyncValidators: [this.emailValidator()],
-          updateOn: 'blur',
+          validators: [Validators.required],
+          asyncValidators: [this.delayedEmailValidator()],
+          updateOn: 'change',
         },
       ],
       amount: [
@@ -58,37 +60,44 @@ export class GiftStorageComponent implements OnDestroy {
             Validators.min(0),
             Validators.max(Number(this.availableSpace)),
             this.integerValidator,
+            this.giftedAmountValidator(),
           ],
           updateOn: 'change',
         },
       ],
       message: ['', []],
     });
-    this.sub = this.giftResult.subscribe((isSuccessful) => {
-      if (isSuccessful) {
-        const giftedAmount = Number(this.giftForm.value.amount);
-        const remainingSpaceAfterGift =
-          Number(this.availableSpace) - giftedAmount;
-        this.availableSpace = String(remainingSpaceAfterGift.toFixed(2));
-
-        const remainingSpaceInBytes =
-          remainingSpaceAfterGift * this.bytesPerGigabyte;
-
-        const newAccount = new AccountVO({
-          ...this.account,
-          spaceLeft: remainingSpaceInBytes,
-          spaceTotal:
-            this.account.spaceTotal - giftedAmount * this.bytesPerGigabyte,
-        });
-
-        this.accountService.setAccount(newAccount);
-        this.isSuccessful = isSuccessful;
-      }
-    });
+    this.subscriptions.push(
+      this.giftResult.subscribe((isSuccessful) => {
+        if (isSuccessful) {
+          console.log(this.giftForm.value.email);
+          const giftedAmount = Number(this.giftForm.value.amount);
+          const remainingSpaceAfterGift =
+            Number(this.availableSpace) - giftedAmount;
+          this.availableSpace = String(remainingSpaceAfterGift);
+
+          const remainingSpaceInBytes =
+            remainingSpaceAfterGift * this.bytesPerGigabyte;
+
+          const newAccount = new AccountVO({
+            ...this.account,
+            spaceLeft: remainingSpaceInBytes,
+            spaceTotal:
+              this.account.spaceTotal - giftedAmount * this.bytesPerGigabyte,
+          });
+
+          this.accountService.setAccount(newAccount);
+          this.isSuccessful = isSuccessful;
+        }
+      })
+    ),
+      this.giftForm.get('email')?.valueChanges.subscribe(() => {
+        this.giftForm.get('amount')?.updateValueAndValidity();
+      });
   }
 
   ngOnDestroy(): void {
-    this.sub.unsubscribe();
+    unsubscribeAll(this.subscriptions);
   }
 
   submitStorageGiftForm(value: {
@@ -96,10 +105,14 @@ export class GiftStorageComponent implements OnDestroy {
     amount: number;
     message: string;
   }) {
+    const emails = this.parseEmailString(value.email);
+    const fullAmount = Number(value.amount) * emails.length;
     this.dialog.open(
       'ConfirmGiftDialogComponent',
       {
-        ...value,
+        emails,
+        fullAmount,
+        message: value.message,
         giftResult: this.giftResult,
       },
       {
@@ -128,22 +141,76 @@ export class GiftStorageComponent implements OnDestroy {
     return isInteger && !hasDecimalPoint ? null : { notInteger: true };
   }
 
-  emailValidator(): AsyncValidatorFn {
+  private validateEmails(controlValue: string): Observable<string[] | null> {
+    const emails = this.parseEmailString(controlValue);
+
+    const invalidEmails = emails.filter((email) => {
+      const tempEmailControl = new FormControl(email, Validators.email);
+      return tempEmailControl.invalid;
+    });
+
+    return of(invalidEmails.length ? invalidEmails : null);
+  }
+
+  private delayedEmailValidator(): AsyncValidatorFn {
     return (control: AbstractControl): Observable<ValidationErrors | null> => {
       if (!control.value) {
+        this.emailValidationErrors = [];
         return of(null);
       }
-
       this.isAsyncValidating = true;
 
       return timer(1000).pipe(
-        map(() => {
-          const emailValid = Validators.email(control);
+        switchMap(() => this.validateEmails(control.value)),
+        map((invalidEmails) => {
+          this.emailValidationErrors = invalidEmails || [];
           this.isAsyncValidating = false;
-
-          return emailValid ? { email: true } : null;
+          return invalidEmails ? { invalidEmails: invalidEmails } : null;
         })
       );
     };
   }
+
+  private giftedAmountValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const emailControl = control.parent?.get('email');
+      if (!control.value || !emailControl.value) {
+        return null;
+      }
+
+      if (emailControl) {
+        const emails = this.parseEmailString(emailControl.value as string);
+        const numberOfEmails = emails.length;
+        const giftedAmount = numberOfEmails * Number(control.value);
+        const availableSpace = Number(this.availableSpace);
+        if (giftedAmount > availableSpace) {
+          return {
+            isGreaterThanAvailableSpace: true,
+            requiredSpace: giftedAmount,
+          };
+        }
+        if (giftedAmount <= availableSpace) {
+          return {
+            positiveValidation: true,
+            successMessage: `Total gifted storage: ${giftedAmount} GB`,
+          };
+        }
+      }
+
+      return null;
+    };
+  }
+
+  private parseEmailString(emailString: string): string[] {
+    return emailString.split(',').map((email) => email.trim());
+  }
+
+  public getAmountErrorMessage(): string | null {
+    const errors = this.giftForm.get('amount')?.errors;
+    if (errors?.isGreaterThanAvailableSpace) {
+      const requiredSpace = errors.requiredSpace;
+      return `You need at least ${requiredSpace} GB.`;
+    }
+    return null;
+  }
 }
diff --git a/src/assets/svg/alert.svg b/src/assets/svg/alert.svg
new file mode 100644
index 000000000..26d00b558
--- /dev/null
+++ b/src/assets/svg/alert.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 15.75H17.25L9 1.5L0.75 15.75ZM9.75 13.5H8.25V12H9.75V13.5ZM9.75 10.5H8.25V7.5H9.75V10.5Z" fill="#A10000"/>
+</svg>

From f600717d3dcf5c09b5041e8c201d577457d7a744 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 23 Oct 2023 17:10:29 +0300
Subject: [PATCH 04/15] PER-9373 display the errors for the inputs.

---
 .../confirm-gift-dialog.component.ts          |  2 +-
 .../gift-storage/gift-storage.component.html  | 27 ++++++++++++-------
 .../gift-storage/gift-storage.component.scss  |  8 ++++++
 .../gift-storage/gift-storage.component.ts    | 13 ++++-----
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
index fde25cdcc..3b1b2102e 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
@@ -23,7 +23,7 @@ export class ConfirmGiftDialogComponent {
     private msg: MessageService
   ) {
     this.emails = this.data.emails;
-    this.amount = this.data.fullAmount;
+    this.amount = this.data.amount;
     this.message = this.data.message;
     this.giftResult = this.data.giftResult;
   }
diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index e712598a2..add1842be 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -29,7 +29,10 @@
           placeholder="email@email.com"
         />
       </div>
-      <div *ngFor="let invalidEmail of emailValidationErrors">
+      <div
+        class="error-message"
+        *ngFor="let invalidEmail of emailValidationErrors"
+      >
         <img src="assets/svg/alert.svg" />
         <span class="input-error"
           >{{ invalidEmail }} is not a valid email address.</span
@@ -53,16 +56,20 @@
         />
         <span class="gigabytes">gigabytes per recipient</span>
       </div>
-      <p class="input-error" *ngIf="giftForm.get('amount').errors?.notInteger">
-        Storage can only be gifted in 1GB increments.
-      </p>
-      <p class="input-error" *ngIf="giftForm.get('amount').errors?.max">
-        Amount must be less than or equal to {{ availableSpace }} GB.
-      </p>
-      <p *ngIf="giftForm.get('amount').errors?.positiveValidation" class="success-message">
-        {{ giftForm.get('amount').errors?.successMessage }}
+      <div
+        *ngIf="giftForm.get('amount').errors?.notInteger"
+        class="error-message"
+      >
+        <img src="assets/svg/alert.svg" />
+        <p class="input-error">Storage can only be gifted in 1GB increments.</p>
+      </div>
+      <p *ngIf="successMessage" class="error-message success-message">
+        {{ successMessage }}
       </p>
-      <div *ngIf="giftForm.get('amount').errors?.isGreaterThanAvailableSpace">
+      <div
+        class="error-message"
+        *ngIf="giftForm.get('amount').errors?.isGreaterThanAvailableSpace"
+      >
         <img src="assets/svg/alert.svg" />
         <span class="input-error">{{ getAmountErrorMessage() }}</span>
       </div>
diff --git a/src/app/core/components/gift-storage/gift-storage.component.scss b/src/app/core/components/gift-storage/gift-storage.component.scss
index 5e3d0f51e..62f3e5517 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.scss
+++ b/src/app/core/components/gift-storage/gift-storage.component.scss
@@ -102,3 +102,11 @@
   color: $red;
   font-style: italic;
 }
+.error-message {
+  margin-left: 200px;
+  margin-bottom: 20px;
+}
+
+.success-message {
+  font-style: italic;
+}
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index c96804b2f..61cd64a76 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -35,6 +35,7 @@ export class GiftStorageComponent implements OnDestroy {
   );
   private subscriptions: Subscription[] = [];
   public isAsyncValidating: boolean;
+  public successMessage: string = '';
 
   constructor(
     private fb: UntypedFormBuilder,
@@ -70,7 +71,6 @@ export class GiftStorageComponent implements OnDestroy {
     this.subscriptions.push(
       this.giftResult.subscribe((isSuccessful) => {
         if (isSuccessful) {
-          console.log(this.giftForm.value.email);
           const giftedAmount = Number(this.giftForm.value.amount);
           const remainingSpaceAfterGift =
             Number(this.availableSpace) - giftedAmount;
@@ -92,6 +92,7 @@ export class GiftStorageComponent implements OnDestroy {
       })
     ),
       this.giftForm.get('email')?.valueChanges.subscribe(() => {
+        this.successMessage = '';
         this.giftForm.get('amount')?.updateValueAndValidity();
       });
   }
@@ -165,7 +166,7 @@ export class GiftStorageComponent implements OnDestroy {
         map((invalidEmails) => {
           this.emailValidationErrors = invalidEmails || [];
           this.isAsyncValidating = false;
-          return invalidEmails ? { invalidEmails: invalidEmails } : null;
+          return invalidEmails ? { invalidEmails: true } : null;
         })
       );
     };
@@ -175,6 +176,7 @@ export class GiftStorageComponent implements OnDestroy {
     return (control: AbstractControl): ValidationErrors | null => {
       const emailControl = control.parent?.get('email');
       if (!control.value || !emailControl.value) {
+        this.successMessage = '';
         return null;
       }
 
@@ -184,16 +186,15 @@ export class GiftStorageComponent implements OnDestroy {
         const giftedAmount = numberOfEmails * Number(control.value);
         const availableSpace = Number(this.availableSpace);
         if (giftedAmount > availableSpace) {
+          this.successMessage = '';
+
           return {
             isGreaterThanAvailableSpace: true,
             requiredSpace: giftedAmount,
           };
         }
         if (giftedAmount <= availableSpace) {
-          return {
-            positiveValidation: true,
-            successMessage: `Total gifted storage: ${giftedAmount} GB`,
-          };
+          this.successMessage = `Total gifted storage: ${giftedAmount} GB`;
         }
       }
 

From 597a52c79b7565e3c419c0fd88da39ca5fdad2a7 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:13:06 +0300
Subject: [PATCH 05/15] PER-9373

Wrote a new validator that handles the case when the user adds duplicate emails and added some tests
---
 .../confirm-gift-dialog.component.spec.ts     |  4 +-
 .../gift-storage/gift-storage.component.html  | 22 ++++-
 .../gift-storage/gift-storage.component.scss  | 22 ++++-
 .../gift-storage.component.spec.ts            | 85 +++++++++++++++++-
 .../gift-storage/gift-storage.component.ts    | 89 ++++++++++++++++---
 5 files changed, 199 insertions(+), 23 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
index ffcdf5b77..b7bd0ba85 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
@@ -65,7 +65,7 @@ describe('ConfirmGiftDialogComponent', () => {
     config.providers.push({
       provide: DIALOG_DATA,
       useValue: {
-        email: 'test@example.com',
+        emails: ['test@example.com', 'test2@example.com'],
         amount: 10,
         message: 'test message',
         giftResult: mockGiftResult,
@@ -100,7 +100,7 @@ describe('ConfirmGiftDialogComponent', () => {
   });
 
   it('should take the email from the dialog data', () => {
-    expect(component.emails).toEqual('test@example.com');
+    expect(component.emails).toEqual(['test@example.com', 'test2@example.com']);
   });
 
   it('should take the amount from the dialog data', () => {
diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index add1842be..e7c104589 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -13,7 +13,13 @@
       class="dialog-form"
       (submit)="submitStorageGiftForm(giftForm.value)"
     >
-      <div class="dialog-form-field">
+      <div
+        class="dialog-form-field dialog-form-field-emails"
+        [ngClass]="{
+          'dialog-form-field-with-error':
+            duplicateEmails.length || emailValidationErrors.length
+        }"
+      >
         <div class="text">
           <label class="label" for="email">Recipient Email(s)</label>
           <span class="label-info"
@@ -38,7 +44,11 @@
           >{{ invalidEmail }} is not a valid email address.</span
         >
       </div>
-      <div class="dialog-form-field dialog-form-field-amount">
+      <div class="error-message" *ngFor="let duplicate of duplicateEmails">
+        <img src="assets/svg/alert.svg" />
+        <span class="input-error">{{ duplicate }} has already been added.</span>
+      </div>
+      <div class="dialog-form-field dialog-form-field-amount" [ngClass]="">
         <div class="text">
           <label class="label" for="amount">Storage Gift Amount</label>
           <span class="label-info">{{ this.availableSpace }} GB available</span>
@@ -124,9 +134,13 @@
 
     <p class="panel-title">Storage successfully gifted</p>
     <p>
-      Success! You sent {{ giftForm.value.amount }} GB of Permanent storage to
-      {{ giftForm.value.email }}.
+      Success! You sent {{ giftForm.value.amount }} GB of Permanent storage to:
     </p>
+    <ul>
+      <li class="email" *ngFor="let email of emails">
+        {{ email }}
+      </li>
+    </ul>
     <p>
       You have
       {{ (+availableSpace).toFixed(2) }} GB of storage available.
diff --git a/src/app/core/components/gift-storage/gift-storage.component.scss b/src/app/core/components/gift-storage/gift-storage.component.scss
index 62f3e5517..e38d3d783 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.scss
+++ b/src/app/core/components/gift-storage/gift-storage.component.scss
@@ -12,8 +12,12 @@
   display: flex;
   margin-bottom: 23px;
 
-  &-amount > input {
-    width: 300px !important;
+  &-with-error {
+    margin-bottom: 0px;
+
+    @include beforeDesktop {
+      margin-bottom: 10px;
+    }
   }
 
   @include beforeDesktop {
@@ -74,6 +78,16 @@
     height: 42px;
   }
 
+  &-emails > .form-control {
+    @include beforeDesktop {
+      width: 350px;
+    }
+  }
+
+  &-amount > .form-control {
+    width: 300px;
+  }
+
   & > .form-control-textarea {
     height: 150px;
     resize: none;
@@ -105,6 +119,10 @@
 .error-message {
   margin-left: 200px;
   margin-bottom: 20px;
+
+  @include beforeDesktop {
+    margin-left: 0px;
+  }
 }
 
 .success-message {
diff --git a/src/app/core/components/gift-storage/gift-storage.component.spec.ts b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
index 00a5775ae..6ca6bd758 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.spec.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
@@ -1,3 +1,4 @@
+import { async } from '@angular/core/testing';
 /* @format */
 import { Shallow } from 'shallow-render';
 import { HttpClient, HttpHandler } from '@angular/common/http';
@@ -50,12 +51,30 @@ describe('GiftStorageComponent', () => {
     expect(button.disabled).toBe(false);
   });
 
-  it('disables the submit button if the email is not valid', async () => {
+  it('disables the submit button if at least one email is not valid', async () => {
     const { find, instance, fixture } = await shallow.render();
 
     instance.availableSpace = '5';
 
-    instance.giftForm.controls.email.setValue('test');
+    instance.giftForm.controls.email.setValue('test@example.com, test');
+    instance.giftForm.controls.amount.setValue('1');
+
+    instance.giftForm.updateValueAndValidity();
+    fixture.detectChanges();
+
+    const button: HTMLButtonElement = find('.btn-primary').nativeElement;
+
+    expect(button.disabled).toBe(true);
+  });
+
+  it('disables the submit button if the there is a duplicate email', async () => {
+    const { find, instance, fixture } = await shallow.render();
+
+    instance.availableSpace = '5';
+
+    instance.giftForm.controls.email.setValue(
+      'test@example.com, test@example.com'
+    );
     instance.giftForm.controls.amount.setValue('1');
 
     instance.giftForm.updateValueAndValidity();
@@ -84,6 +103,44 @@ describe('GiftStorageComponent', () => {
     expect(button.disabled).toBe(true);
   });
 
+  it('displays the total amount gifted based on the number of emails', async () => {
+    const { instance, fixture } = await shallow.render();
+
+    instance.availableSpace = '5';
+
+    await instance.giftForm.controls.email.setValue(
+      'test@example.com,test1@example.com'
+    );
+    instance.giftForm.controls.amount.setValue('2');
+
+    instance.giftForm.updateValueAndValidity();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(instance.successMessage).toEqual('Total gifted storage: 4 GB');
+  });
+
+  it('disables the submit button if the amount multiplied by the number of emails exceeds the available amount', async () => {
+    const { find, instance, fixture } = await shallow.render();
+
+    instance.availableSpace = '5';
+
+    await instance.giftForm.controls.email.setValue(
+      'test@example.com,test1@example.com'
+    );
+    instance.giftForm.controls.amount.setValue('4');
+
+    instance.giftForm.updateValueAndValidity();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = find('.btn-primary').nativeElement;
+
+    expect(button.disabled).toBe(true);
+  });
+
   it('calls submitStorageGiftForm when the form is valid', async () => {
     const { instance } = await shallow.render();
 
@@ -114,4 +171,28 @@ describe('GiftStorageComponent', () => {
     expect(mockAccountService.setAccount).toHaveBeenCalled();
     expect(instance.availableSpace).toBe('50.00');
   });
+  it('parses the email string correctly', async () => {
+    const { instance } = await shallow.render();
+
+    const result = instance.parseEmailString(
+      'test@example.com, test1@example.com'
+    );
+
+    expect(result).toEqual(['test@example.com', 'test1@example.com']);
+  });
+
+  it('returns all the duplicate emails', async (done) => {
+    const { instance } = await shallow.render();
+
+    const testEmailString =
+      'test@example.com,test@example.com,test2@example.com';
+    const expectedDuplicates = ['test@example.com'];
+
+    instance
+      .checkForDuplicateEmails(testEmailString)
+      .subscribe((duplicates) => {
+        expect(duplicates).toEqual(expectedDuplicates);
+        done();
+      });
+  });
 });
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index 61cd64a76..f3a7e72cf 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -12,7 +12,14 @@ import {
 } from '@angular/forms';
 import { AccountVO } from '@models/index';
 import { unsubscribeAll } from '@shared/utilities/hasSubscriptions';
-import { Observable, BehaviorSubject, Subscription, of, timer } from 'rxjs';
+import {
+  Observable,
+  BehaviorSubject,
+  Subscription,
+  of,
+  timer,
+  forkJoin,
+} from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { Dialog } from '../../../dialog/dialog.service';
 import { AccountService } from '../../../shared/services/account/account.service';
@@ -28,6 +35,7 @@ export class GiftStorageComponent implements OnDestroy {
   account: AccountVO;
   bytesPerGigabyte = 1073741824;
   emailValidationErrors: string[] = [];
+  duplicateEmails: string[] = [];
 
   public isSuccessful: boolean = false;
   public giftResult: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
@@ -36,6 +44,7 @@ export class GiftStorageComponent implements OnDestroy {
   private subscriptions: Subscription[] = [];
   public isAsyncValidating: boolean;
   public successMessage: string = '';
+  public emails: string[] = [];
 
   constructor(
     private fb: UntypedFormBuilder,
@@ -49,7 +58,7 @@ export class GiftStorageComponent implements OnDestroy {
         '',
         {
           validators: [Validators.required],
-          asyncValidators: [this.delayedEmailValidator()],
+          asyncValidators: [this.combinedEmailValidator()],
           updateOn: 'change',
         },
       ],
@@ -72,18 +81,22 @@ export class GiftStorageComponent implements OnDestroy {
       this.giftResult.subscribe((isSuccessful) => {
         if (isSuccessful) {
           const giftedAmount = Number(this.giftForm.value.amount);
+          this.emails = this.parseEmailString(this.giftForm.value.email);
           const remainingSpaceAfterGift =
-            Number(this.availableSpace) - giftedAmount;
+            Number(this.availableSpace) - this.emails.length * giftedAmount;
           this.availableSpace = String(remainingSpaceAfterGift);
 
           const remainingSpaceInBytes =
             remainingSpaceAfterGift * this.bytesPerGigabyte;
 
+          const totalSpace =
+            this.account.spaceTotal -
+            giftedAmount * this.emails.length * this.bytesPerGigabyte;
+
           const newAccount = new AccountVO({
             ...this.account,
             spaceLeft: remainingSpaceInBytes,
-            spaceTotal:
-              this.account.spaceTotal - giftedAmount * this.bytesPerGigabyte,
+            spaceTotal: totalSpace,
           });
 
           this.accountService.setAccount(newAccount);
@@ -91,9 +104,18 @@ export class GiftStorageComponent implements OnDestroy {
         }
       })
     ),
-      this.giftForm.get('email')?.valueChanges.subscribe(() => {
+      this.giftForm.get('email')?.valueChanges.subscribe((value) => {
         this.successMessage = '';
         this.giftForm.get('amount')?.updateValueAndValidity();
+
+        if (!value) {
+          if (this.emailValidationErrors.length) {
+            this.emailValidationErrors = [];
+          }
+          if (this.duplicateEmails.length) {
+            this.duplicateEmails = [];
+          }
+        }
       });
   }
 
@@ -107,12 +129,11 @@ export class GiftStorageComponent implements OnDestroy {
     message: string;
   }) {
     const emails = this.parseEmailString(value.email);
-    const fullAmount = Number(value.amount) * emails.length;
     this.dialog.open(
       'ConfirmGiftDialogComponent',
       {
         emails,
-        fullAmount,
+        amount: value.amount,
         message: value.message,
         giftResult: this.giftResult,
       },
@@ -153,20 +174,38 @@ export class GiftStorageComponent implements OnDestroy {
     return of(invalidEmails.length ? invalidEmails : null);
   }
 
-  private delayedEmailValidator(): AsyncValidatorFn {
+  private combinedEmailValidator(): AsyncValidatorFn {
     return (control: AbstractControl): Observable<ValidationErrors | null> => {
       if (!control.value) {
         this.emailValidationErrors = [];
+        this.duplicateEmails = [];
         return of(null);
       }
+
       this.isAsyncValidating = true;
 
       return timer(1000).pipe(
-        switchMap(() => this.validateEmails(control.value)),
-        map((invalidEmails) => {
+        switchMap(() => {
+          return forkJoin({
+            invalidEmails: this.validateEmails(control.value),
+            duplicateEmails: this.checkForDuplicateEmails(control.value),
+          });
+        }),
+        map(({ invalidEmails, duplicateEmails }) => {
           this.emailValidationErrors = invalidEmails || [];
+          this.duplicateEmails = duplicateEmails || [];
           this.isAsyncValidating = false;
-          return invalidEmails ? { invalidEmails: true } : null;
+
+          let errors: ValidationErrors | null = null;
+
+          if (invalidEmails?.length > 0) {
+            errors = { ...errors, invalidEmails: true };
+          }
+          if (duplicateEmails?.length > 0) {
+            errors = { ...errors, duplicateEmails: true };
+          }
+
+          return errors;
         })
       );
     };
@@ -202,7 +241,7 @@ export class GiftStorageComponent implements OnDestroy {
     };
   }
 
-  private parseEmailString(emailString: string): string[] {
+  public parseEmailString(emailString: string): string[] {
     return emailString.split(',').map((email) => email.trim());
   }
 
@@ -214,4 +253,28 @@ export class GiftStorageComponent implements OnDestroy {
     }
     return null;
   }
+
+  public checkForDuplicateEmails(
+    emailsString: string
+  ): Observable<string[] | null> {
+    const emails = this.parseEmailString(emailsString);
+    const emailCount = {};
+    const duplicates: string[] = [];
+
+    emails.forEach((email) => {
+      if (!emailCount[email]) {
+        emailCount[email] = 1;
+      } else {
+        emailCount[email]++;
+      }
+    });
+
+    Object.keys(emailCount).forEach((key) => {
+      if (emailCount[key] > 1) {
+        duplicates.push(key);
+      }
+    });
+
+    return of(duplicates.length ? duplicates : null);
+  }
 }

From 7b4218134638d4c8ac8124a48f67983d5b02607f Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Thu, 26 Oct 2023 14:55:32 +0300
Subject: [PATCH 06/15] PER-9373

Changed the text of the popup
---
 .../confirm-gift-dialog.component.html         | 16 ++++++++--------
 .../confirm-gift-dialog.component.scss         | 18 +++++++++++++++++-
 .../gift-storage.component.spec.ts             |  1 -
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html
index d6125e4d4..e18ec5059 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html
@@ -8,17 +8,17 @@
   </div>
   <div class="content">
     <p class="popup-text">
-      <b
-        >Are you sure you would like to gift {{ amount }} GB of storage to
-        {{ email }}?</b
-      >
+      <b> Are you sure you’d like to gift storage?</b>
     </p>
     <p class="popup-text">
-      Once confirmed, the gift storage cannot be reclaimed.
+      Once you send gift storage to someone else, it can’t be reclaimed.
+    </p>
+    <div class="buttons">
+      <button class="btn btn-sm btn-secondary" (click)="onDoneClick()">Cancel</button>
+
       <button class="btn btn-sm btn-primary" (click)="onConfirmClick()">
-        Confirm
+        Yes, gift storage
       </button>
-      <button class="btn btn-sm" (click)="onDoneClick()">Go back</button>
-    </p>
+    </div>
   </div>
 </div>
diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
index 1a1806fa4..71139d49d 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
@@ -11,7 +11,7 @@
 
 .content {
   @include tabbedDialogContent;
-  flex-direction: column
+  flex-direction: column;
 }
 
 .tabs {
@@ -44,3 +44,19 @@ pr-archive-small {
   text-align: center;
   padding: 20px;
 }
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  & .btn {
+    padding: 10px;
+    border-radius: 4px;
+    margin: 0 10px;
+    width: 15%;
+  }
+
+  & .btn-primary {
+    width: 30%;
+  }
+}
diff --git a/src/app/core/components/gift-storage/gift-storage.component.spec.ts b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
index 6ca6bd758..7b3fe43fa 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.spec.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
@@ -1,4 +1,3 @@
-import { async } from '@angular/core/testing';
 /* @format */
 import { Shallow } from 'shallow-render';
 import { HttpClient, HttpHandler } from '@angular/common/http';

From c886793b2ed89af7d1aed3a0dc2a48ec85df0a6a Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:35:30 +0300
Subject: [PATCH 07/15] PER-9373

Added a new check to make sure that only valid mails pass the duplicate check.
---
 .../confirm-gift-dialog.component.scss                    | 8 ++++++++
 .../components/gift-storage/gift-storage.component.ts     | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
index 71139d49d..f8e243940 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
@@ -1,3 +1,4 @@
+/* @format */
 @import 'variables';
 
 :host {
@@ -54,9 +55,16 @@ pr-archive-small {
     border-radius: 4px;
     margin: 0 10px;
     width: 15%;
+
+    @include beforeDesktop{
+      width: 20%;
+    }
   }
 
   & .btn-primary {
     width: 30%;
+    @include beforeDesktop{
+      width: 35%;
+    }
   }
 }
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index f3a7e72cf..4d0bb6162 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -271,7 +271,10 @@ export class GiftStorageComponent implements OnDestroy {
 
     Object.keys(emailCount).forEach((key) => {
       if (emailCount[key] > 1) {
-        duplicates.push(key);
+        const mailControl = new FormControl(key, Validators.email);
+        if (mailControl.valid) {
+          duplicates.push(key);
+        }
       }
     });
 

From 4528bbab45f2434509268384ea3a8274b3ba52f9 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:40:17 +0300
Subject: [PATCH 08/15] PER-9373

Design changes
---
 .../components/gift-storage/gift-storage.component.html    | 7 +++++--
 .../components/gift-storage/gift-storage.component.scss    | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index e7c104589..42c60e96c 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -68,12 +68,15 @@
       </div>
       <div
         *ngIf="giftForm.get('amount').errors?.notInteger"
-        class="error-message"
+        class="error-message not-integer"
       >
         <img src="assets/svg/alert.svg" />
         <p class="input-error">Storage can only be gifted in 1GB increments.</p>
       </div>
-      <p *ngIf="successMessage" class="error-message success-message">
+      <p
+        *ngIf="successMessage && !giftForm.get('amount').errors?.notInteger"
+        class="error-message success-message"
+      >
         {{ successMessage }}
       </p>
       <div
diff --git a/src/app/core/components/gift-storage/gift-storage.component.scss b/src/app/core/components/gift-storage/gift-storage.component.scss
index e38d3d783..28cb0b61d 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.scss
+++ b/src/app/core/components/gift-storage/gift-storage.component.scss
@@ -128,3 +128,10 @@
 .success-message {
   font-style: italic;
 }
+
+.not-integer {
+  display: flex;
+  & > p {
+    margin-bottom: 0px;
+  }
+}

From e7c0a277595696c20e70d92ffff6088ae3e2e7a9 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Tue, 31 Oct 2023 10:42:03 +0200
Subject: [PATCH 09/15] Changed the api call

---
 .../confirm-gift-dialog.component.ts                  |  8 +++++++-
 src/app/shared/services/api/billing.repo.ts           | 11 ++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
index 3b1b2102e..3687457e8 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
@@ -34,9 +34,15 @@ export class ConfirmGiftDialogComponent {
 
   public async onConfirmClick() {
     try {
-      await this.api.billing.giftStorage(this.emails, Number(this.amount));
+      const res = await this.api.billing.giftStorage(
+        this.emails,
+        Number(this.amount),
+        this.message
+      );
+      console.log(res)
       this.giftResult.next(true);
     } catch (e) {
+      console.log(e)
       this.msg.showError('Something went wrong! Please try again.');
       this.giftResult.next(false);
     }
diff --git a/src/app/shared/services/api/billing.repo.ts b/src/app/shared/services/api/billing.repo.ts
index fef793bb7..db63d3a28 100644
--- a/src/app/shared/services/api/billing.repo.ts
+++ b/src/app/shared/services/api/billing.repo.ts
@@ -71,13 +71,18 @@ export class BillingRepo extends BaseRepo {
     );
   }
 
-  public giftStorage(recipientEmail, storageAmount) {
+  public giftStorage(
+    recipientEmails: string[],
+    storageAmount: number,
+    note: string
+  ) {
     const data = {
-      recipientEmail,
+      recipientEmails,
       storageAmount,
+      note
     };
 
-    return this.httpV2.post('/billing/giftStorage', data).toPromise();
+    return this.httpV2.post('v2/billing/gift', data).toPromise();
   }
 }
 

From e5a5ff1361c0d3478b6e8ecbd3fe136a8280edaa Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Tue, 31 Oct 2023 17:04:56 +0200
Subject: [PATCH 10/15] PER-9373

Connect the interface to the new api
---
 .../confirm-gift-dialog.component.ts          | 18 +++++++---
 .../gift-storage/gift-storage.component.html  | 10 +++++-
 .../gift-storage.component.spec.ts            |  6 +++-
 .../gift-storage/gift-storage.component.ts    | 35 +++++++++++++------
 src/app/shared/services/api/billing.repo.ts   | 24 ++++++++++---
 5 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
index 3687457e8..e2dda7c5a 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
@@ -4,6 +4,7 @@ import { DialogRef, DIALOG_DATA } from '@root/app/dialog/dialog.service';
 import { ApiService } from '@shared/services/api/api.service';
 import { MessageService } from '@shared/services/message/message.service';
 import { BehaviorSubject } from 'rxjs';
+import { GiftingResponse } from '@shared/services/api/billing.repo';
 
 @Component({
   selector: 'pr-confirm-gift-dialog',
@@ -14,7 +15,10 @@ export class ConfirmGiftDialogComponent {
   emails: string[];
   amount: number;
   message: string;
-  giftResult: BehaviorSubject<boolean>;
+  giftResult: BehaviorSubject<{
+    isSuccessful: boolean;
+    response: GiftingResponse | null;
+  }>;
 
   constructor(
     private dialogRef: DialogRef,
@@ -39,12 +43,16 @@ export class ConfirmGiftDialogComponent {
         Number(this.amount),
         this.message
       );
-      console.log(res)
-      this.giftResult.next(true);
+      console.log(res);
+      const response = {
+        isSuccessful: true,
+        response: res,
+      };
+      this.giftResult.next(response);
     } catch (e) {
-      console.log(e)
+      console.log(e);
       this.msg.showError('Something went wrong! Please try again.');
-      this.giftResult.next(false);
+      this.giftResult.next({ isSuccessful: false, response: null });
     }
     this.dialogRef?.close();
   }
diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index 42c60e96c..dacb9a530 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -140,7 +140,15 @@
       Success! You sent {{ giftForm.value.amount }} GB of Permanent storage to:
     </p>
     <ul>
-      <li class="email" *ngFor="let email of emails">
+      <li class="email" *ngFor="let email of emailsSentTo">
+        {{ email }}
+      </li>
+    </ul>
+    <p *ngIf="alreadyInvited.length">
+      The following emails were already invited
+    </p>
+    <ul>
+      <li class="email" *ngFor="let email of alreadyInvited">
         {{ email }}
       </li>
     </ul>
diff --git a/src/app/core/components/gift-storage/gift-storage.component.spec.ts b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
index 7b3fe43fa..e80c291f0 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.spec.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
@@ -6,6 +6,7 @@ import { Dialog } from '@root/app/dialog/dialog.service';
 import { AccountService } from '@shared/services/account/account.service';
 import { AccountVO } from '../../../models/account-vo';
 import { GiftStorageComponent } from './gift-storage.component';
+import { GiftingResponse } from '@shared/services/api/billing.repo';
 
 describe('GiftStorageComponent', () => {
   let shallow: Shallow<GiftStorageComponent>;
@@ -165,7 +166,10 @@ describe('GiftStorageComponent', () => {
     instance.giftForm.controls.email.setValue('test@example.com');
     instance.giftForm.controls.amount.setValue('50');
 
-    instance.giftResult.next(true);
+    instance.giftResult.next({
+      isSuccessful: true,
+      response: new GiftingResponse({}),
+    });
 
     expect(mockAccountService.setAccount).toHaveBeenCalled();
     expect(instance.availableSpace).toBe('50.00');
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index 4d0bb6162..03ba06c75 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -12,6 +12,7 @@ import {
 } from '@angular/forms';
 import { AccountVO } from '@models/index';
 import { unsubscribeAll } from '@shared/utilities/hasSubscriptions';
+import { GiftingResponse } from '@shared/services/api/billing.repo';
 import {
   Observable,
   BehaviorSubject,
@@ -38,13 +39,18 @@ export class GiftStorageComponent implements OnDestroy {
   duplicateEmails: string[] = [];
 
   public isSuccessful: boolean = false;
-  public giftResult: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
-    false
-  );
+  public giftResult: BehaviorSubject<{
+    isSuccessful: boolean;
+    response: GiftingResponse | null;
+  }> = new BehaviorSubject<{
+    isSuccessful: boolean;
+    response: GiftingResponse | null;
+  }>({ isSuccessful: false, response: null });
   private subscriptions: Subscription[] = [];
   public isAsyncValidating: boolean;
   public successMessage: string = '';
-  public emails: string[] = [];
+  public emailsSentTo: string[] = [];
+  public alreadyInvited: string[] = [];
 
   constructor(
     private fb: UntypedFormBuilder,
@@ -78,12 +84,19 @@ export class GiftStorageComponent implements OnDestroy {
       message: ['', []],
     });
     this.subscriptions.push(
-      this.giftResult.subscribe((isSuccessful) => {
-        if (isSuccessful) {
-          const giftedAmount = Number(this.giftForm.value.amount);
-          this.emails = this.parseEmailString(this.giftForm.value.email);
+      this.giftResult.subscribe((response) => {
+        if (response.isSuccessful) {
+          this.emailsSentTo = [
+            ...new Set([
+              ...response.response.invitationSent,
+              ...response.response.invitationSent,
+            ]),
+          ];
+          this.alreadyInvited = response.response.alreadyInvited;
+          const giftedAmount = response.response.storageGifted;
           const remainingSpaceAfterGift =
-            Number(this.availableSpace) - this.emails.length * giftedAmount;
+            Number(this.availableSpace) -
+            this.emailsSentTo.length * giftedAmount;
           this.availableSpace = String(remainingSpaceAfterGift);
 
           const remainingSpaceInBytes =
@@ -91,7 +104,7 @@ export class GiftStorageComponent implements OnDestroy {
 
           const totalSpace =
             this.account.spaceTotal -
-            giftedAmount * this.emails.length * this.bytesPerGigabyte;
+            giftedAmount * this.emailsSentTo.length * this.bytesPerGigabyte;
 
           const newAccount = new AccountVO({
             ...this.account,
@@ -100,7 +113,7 @@ export class GiftStorageComponent implements OnDestroy {
           });
 
           this.accountService.setAccount(newAccount);
-          this.isSuccessful = isSuccessful;
+          this.isSuccessful = response.isSuccessful;
         }
       })
     ),
diff --git a/src/app/shared/services/api/billing.repo.ts b/src/app/shared/services/api/billing.repo.ts
index db63d3a28..6f1c7e537 100644
--- a/src/app/shared/services/api/billing.repo.ts
+++ b/src/app/shared/services/api/billing.repo.ts
@@ -7,6 +7,7 @@ import {
 } from '@root/app/models';
 import { BaseResponse, BaseRepo } from '@shared/services/api/base';
 import { BillingPaymentVO } from '@models';
+import { getFirst } from '../http-v2/http-v2.service';
 
 export class BillingRepo extends BaseRepo {
   public claimPledge(billingPaymentVO: BillingPaymentVO, pledgeId: string) {
@@ -74,15 +75,17 @@ export class BillingRepo extends BaseRepo {
   public giftStorage(
     recipientEmails: string[],
     storageAmount: number,
-    note: string
-  ) {
+    note?: string
+  ): Promise<GiftingResponse> {
     const data = {
       recipientEmails,
       storageAmount,
-      note
+      ...(note ? { note } : {}),
     };
 
-    return this.httpV2.post('v2/billing/gift', data).toPromise();
+    return getFirst(
+      this.httpV2.post('v2/billing/gift', data, GiftingResponse)
+    ).toPromise();
   }
 }
 
@@ -114,3 +117,16 @@ export class BillingResponse extends BaseResponse {
     return data[0][0].PromoVO as PromoVOData;
   }
 }
+
+export class GiftingResponse {
+  storageGifted: number;
+  giftDelivered: string[];
+  invitationSent: string[];
+  alreadyInvited: string[];
+
+  constructor(props: Object) {
+    for (const prop in props) {
+      this[prop] = props[prop];
+    }
+  }
+}

From 6e9e9e1fdd8286861def1bd768a5187562426d0c Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Tue, 31 Oct 2023 20:58:40 +0200
Subject: [PATCH 11/15] PER-9373

Hide the text if only the already invited array is populated
---
 .../components/gift-storage/gift-storage.component.html     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index dacb9a530..dd1c5037c 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -135,8 +135,10 @@
       </defs>
     </svg>
 
-    <p class="panel-title">Storage successfully gifted</p>
-    <p>
+    <p *ngIf="emailsSentTo.length" class="panel-title">
+      Storage successfully gifted
+    </p>
+    <p *ngIf="emailsSentTo.length">
       Success! You sent {{ giftForm.value.amount }} GB of Permanent storage to:
     </p>
     <ul>

From afbc5b6d4b4482b5e5af20b54ee6af635a543c02 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:22:32 +0200
Subject: [PATCH 12/15] PER-9373

Added a new test and lintng
---
 .../confirm-gift-dialog.component.spec.ts     | 28 ++++++++++++++++---
 .../gift-storage/gift-storage.component.html  |  4 ++-
 .../gift-storage.component.spec.ts            | 27 +++++++++++++++++-
 .../gift-storage/gift-storage.component.ts    | 10 +++----
 4 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
index b7bd0ba85..e0954ffa9 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.spec.ts
@@ -12,6 +12,7 @@ import * as Testing from '@root/test/testbedConfig';
 import { cloneDeep } from 'lodash';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { ApiService } from '@shared/services/api/api.service';
+import { GiftingResponse } from '@shared/services/api/billing.repo';
 import { MessageService } from '@shared/services/message/message.service';
 import { ConfirmGiftDialogComponent } from './confirm-gift-dialog.component';
 
@@ -46,7 +47,10 @@ describe('ConfirmGiftDialogComponent', () => {
     },
   };
 
-  const mockGiftResult = new BehaviorSubject<boolean>(false);
+  const mockGiftResult = new BehaviorSubject<{
+    isSuccessful: boolean;
+    response: GiftingResponse;
+  }>({ isSuccessful: false, response: null });
 
   beforeEach(async () => {
     const config: TestModuleMetadata = cloneDeep(Testing.BASE_TEST_CONFIG);
@@ -122,14 +126,27 @@ describe('ConfirmGiftDialogComponent', () => {
   it('should close the dialog and send the data back when confirm method is called', fakeAsync(() => {
     const dialogRefSpy = spyOn(dialogRef, 'close');
     const giftResultSpy = spyOn(mockGiftResult, 'next');
-    mockApiService.billing.giftStorage.and.returnValue(Promise.resolve());
+    const giftingResponse = new GiftingResponse({
+      storageGifted: 10,
+      alreadyInvited: [],
+      invitationSent: [],
+      giftDelivered: [],
+    });
+
+    const response = mockApiService.billing.giftStorage.and.returnValue(
+      Promise.resolve(giftingResponse)
+    );
 
     component.onConfirmClick();
 
     tick();
 
     expect(dialogRefSpy).toHaveBeenCalled();
-    expect(giftResultSpy).toHaveBeenCalledWith(true);
+
+    expect(giftResultSpy).toHaveBeenCalledWith({
+      isSuccessful: true,
+      response: giftingResponse,
+    });
   }));
 
   it('should handle failure in onConfirmClick', fakeAsync(() => {
@@ -149,7 +166,10 @@ describe('ConfirmGiftDialogComponent', () => {
     expect(showErrorSpy).toHaveBeenCalledWith(
       'Something went wrong! Please try again.'
     );
-    expect(giftResultSpy).toHaveBeenCalledWith(false);
+    expect(giftResultSpy).toHaveBeenCalledWith({
+      isSuccessful: false,
+      response: null,
+    });
 
     expect(dialogRefSpy).toHaveBeenCalled();
   }));
diff --git a/src/app/core/components/gift-storage/gift-storage.component.html b/src/app/core/components/gift-storage/gift-storage.component.html
index dd1c5037c..841783744 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.html
+++ b/src/app/core/components/gift-storage/gift-storage.component.html
@@ -147,7 +147,9 @@
       </li>
     </ul>
     <p *ngIf="alreadyInvited.length">
-      The following emails were already invited
+      The following emails have already been invited and were not sent storage.
+      They must accept their invitation before they can be sent additional
+      storage.
     </p>
     <ul>
       <li class="email" *ngFor="let email of alreadyInvited">
diff --git a/src/app/core/components/gift-storage/gift-storage.component.spec.ts b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
index e80c291f0..e266328af 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.spec.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
@@ -168,7 +168,12 @@ describe('GiftStorageComponent', () => {
 
     instance.giftResult.next({
       isSuccessful: true,
-      response: new GiftingResponse({}),
+      response: new GiftingResponse({
+        storageGifted: 50,
+        giftDelivered: [],
+        invitationSent: [],
+        alreadyInvited: [],
+      }),
     });
 
     expect(mockAccountService.setAccount).toHaveBeenCalled();
@@ -198,4 +203,24 @@ describe('GiftStorageComponent', () => {
         done();
       });
   });
+
+  it('filters out the duplicates from the giftDelivered and invitationSent of the response', async () => {
+    const { instance } = await shallow.render();
+
+    await instance.giftResult.next({
+      isSuccessful: true,
+      response: new GiftingResponse({
+        storageGifted: 50,
+        giftDelivered: ['test@example.com', 'test1@example.com'],
+        invitationSent: ['test@example.com', 'test2@example.com'],
+        alreadyInvited: [],
+      }),
+    });
+
+    expect(instance.emailsSentTo).toEqual([
+      'test@example.com',
+      'test2@example.com',
+      'test1@example.com',
+    ]);
+  });
 });
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index 03ba06c75..7fa6ee67f 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -89,22 +89,20 @@ export class GiftStorageComponent implements OnDestroy {
           this.emailsSentTo = [
             ...new Set([
               ...response.response.invitationSent,
-              ...response.response.invitationSent,
+              ...response.response.giftDelivered,
             ]),
           ];
           this.alreadyInvited = response.response.alreadyInvited;
           const giftedAmount = response.response.storageGifted;
           const remainingSpaceAfterGift =
-            Number(this.availableSpace) -
-            this.emailsSentTo.length * giftedAmount;
-          this.availableSpace = String(remainingSpaceAfterGift);
+            Number(this.availableSpace) - giftedAmount;
+          this.availableSpace = String(remainingSpaceAfterGift.toFixed(2));
 
           const remainingSpaceInBytes =
             remainingSpaceAfterGift * this.bytesPerGigabyte;
 
           const totalSpace =
-            this.account.spaceTotal -
-            giftedAmount * this.emailsSentTo.length * this.bytesPerGigabyte;
+            this.account.spaceTotal - giftedAmount * this.bytesPerGigabyte;
 
           const newAccount = new AccountVO({
             ...this.account,

From a78e57b2b15bf04f6be3186b70622cba3d10e6bd Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:23:00 +0200
Subject: [PATCH 13/15] Removed console logs

---
 .../confirm-gift-dialog/confirm-gift-dialog.component.ts        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
index e2dda7c5a..09d81e1a9 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.ts
@@ -43,14 +43,12 @@ export class ConfirmGiftDialogComponent {
         Number(this.amount),
         this.message
       );
-      console.log(res);
       const response = {
         isSuccessful: true,
         response: res,
       };
       this.giftResult.next(response);
     } catch (e) {
-      console.log(e);
       this.msg.showError('Something went wrong! Please try again.');
       this.giftResult.next({ isSuccessful: false, response: null });
     }

From be83666cbcf31001c467bcd2fdf5222af36afcf1 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:24:44 +0200
Subject: [PATCH 14/15] Prettier

---
 .../confirm-gift-dialog/confirm-gift-dialog.component.html    | 4 +++-
 .../confirm-gift-dialog/confirm-gift-dialog.component.scss    | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html
index e18ec5059..893fc983d 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.html
@@ -14,7 +14,9 @@
       Once you send gift storage to someone else, it can’t be reclaimed.
     </p>
     <div class="buttons">
-      <button class="btn btn-sm btn-secondary" (click)="onDoneClick()">Cancel</button>
+      <button class="btn btn-sm btn-secondary" (click)="onDoneClick()">
+        Cancel
+      </button>
 
       <button class="btn btn-sm btn-primary" (click)="onConfirmClick()">
         Yes, gift storage
diff --git a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
index f8e243940..53fb8ba15 100644
--- a/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
+++ b/src/app/core/components/confirm-gift-dialog/confirm-gift-dialog.component.scss
@@ -56,14 +56,14 @@ pr-archive-small {
     margin: 0 10px;
     width: 15%;
 
-    @include beforeDesktop{
+    @include beforeDesktop {
       width: 20%;
     }
   }
 
   & .btn-primary {
     width: 30%;
-    @include beforeDesktop{
+    @include beforeDesktop {
       width: 35%;
     }
   }

From 6b525986901c5ee6d7ed1140b7c767238aa63e59 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:28:16 +0200
Subject: [PATCH 15/15] Linting

---
 .../components/gift-storage/gift-storage.component.spec.ts | 2 +-
 .../core/components/gift-storage/gift-storage.component.ts | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/core/components/gift-storage/gift-storage.component.spec.ts b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
index e266328af..85f09dc82 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.spec.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.spec.ts
@@ -4,9 +4,9 @@ import { HttpClient, HttpHandler } from '@angular/common/http';
 import { CoreModule } from '@core/core.module';
 import { Dialog } from '@root/app/dialog/dialog.service';
 import { AccountService } from '@shared/services/account/account.service';
+import { GiftingResponse } from '@shared/services/api/billing.repo';
 import { AccountVO } from '../../../models/account-vo';
 import { GiftStorageComponent } from './gift-storage.component';
-import { GiftingResponse } from '@shared/services/api/billing.repo';
 
 describe('GiftStorageComponent', () => {
   let shallow: Shallow<GiftStorageComponent>;
diff --git a/src/app/core/components/gift-storage/gift-storage.component.ts b/src/app/core/components/gift-storage/gift-storage.component.ts
index 7fa6ee67f..fb461a167 100644
--- a/src/app/core/components/gift-storage/gift-storage.component.ts
+++ b/src/app/core/components/gift-storage/gift-storage.component.ts
@@ -113,8 +113,8 @@ export class GiftStorageComponent implements OnDestroy {
           this.accountService.setAccount(newAccount);
           this.isSuccessful = response.isSuccessful;
         }
-      })
-    ),
+      }),
+
       this.giftForm.get('email')?.valueChanges.subscribe((value) => {
         this.successMessage = '';
         this.giftForm.get('amount')?.updateValueAndValidity();
@@ -127,7 +127,8 @@ export class GiftStorageComponent implements OnDestroy {
             this.duplicateEmails = [];
           }
         }
-      });
+      })
+    );
   }
 
   ngOnDestroy(): void {