feat: Add pre-selected first payment option as default (#18318)

Closes: CXSPA-5588
SAP · Jan 2, 2024 · 0f31661 · 0f31661
1 parent a019fb5
commit 0f31661
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/integration-libs/opf/base/root/model/opf.model.ts b/integration-libs/opf/base/root/model/opf.model.ts
@@ -21,6 +21,7 @@ export enum OpfPaymentMethodType {
 export interface OpfPaymentMetadata {
   termsAndConditionsChecked: boolean;
   selectedPaymentOptionId: number | undefined;
+  defaultSelectedPaymentOptionId?: number | undefined;
   isPaymentInProgress: boolean;
 }
 

diff --git a/...ibs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.component.spec.ts b/...ibs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.component.spec.ts
@@ -64,6 +64,7 @@ const mockOpfPaymentMetadata: OpfPaymentMetadata = {
   isPaymentInProgress: true,
   selectedPaymentOptionId: 111,
   termsAndConditionsChecked: true,
+  defaultSelectedPaymentOptionId: 1,
 };
 
 describe('OpfCheckoutPaymentsComponent', () => {
@@ -150,17 +151,20 @@ describe('OpfCheckoutPaymentsComponent', () => {
     );
   });
 
-  it('should not preselect payment option', () => {
+  it('should preselect the default payment option', () => {
+    const defaultSelectedPaymentOptionId = 1;
+
     opfServiceMock.getOpfMetadataState.and.returnValue(
       of({
-        termsAndConditionsChecked: false,
-        selectedPaymentOptionId: 0,
         isPaymentInProgress: false,
+        selectedPaymentOptionId: undefined,
+        termsAndConditionsChecked: true,
+        defaultSelectedPaymentOptionId,
       })
     );
 
     fixture.detectChanges();
 
-    expect(component.selectedPaymentId).toBeUndefined();
+    expect(component.selectedPaymentId).toBe(defaultSelectedPaymentOptionId);
   });
 });
diff --git a/...ion-libs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.component.ts b/...ion-libs/opf/checkout/components/opf-checkout-payments/opf-checkout-payments.component.ts
@@ -43,6 +43,12 @@ export class OpfCheckoutPaymentsComponent implements OnInit, OnDestroy {
         } else if (!state.loading && !Boolean(state.data?.length)) {
           this.displayError('noActiveConfigurations');
         }
+
+        if (state.data && !state.error && !state.loading) {
+          this.opfService.updateOpfMetadataState({
+            defaultSelectedPaymentOptionId: state?.data[0]?.id,
+          });
+        }
       })
     );
 
@@ -62,13 +68,20 @@ export class OpfCheckoutPaymentsComponent implements OnInit, OnDestroy {
    * previously selected payment option ID by customer.
    */
   protected preselectPaymentOption(): void {
+    let isPreselected = false;
     this.subscription.add(
       this.opfService
         .getOpfMetadataState()
         .subscribe((state: OpfPaymentMetadata) => {
-          this.selectedPaymentId = state.termsAndConditionsChecked
-            ? state?.selectedPaymentOptionId
-            : undefined;
+          if (state.termsAndConditionsChecked && !isPreselected) {
+            isPreselected = true;
+            this.selectedPaymentId = !state.selectedPaymentOptionId
+              ? state.defaultSelectedPaymentOptionId
+              : state.selectedPaymentOptionId;
+            this.opfService.updateOpfMetadataState({
+              selectedPaymentOptionId: this.selectedPaymentId,
+            });
+          }
         })
     );
   }