fix: four OPF fixes (#19661)

Fixes list: CXSPA-8982,CXSPA-9036,CXSPA-8965,CXSPA-9097
SAP · Dec 3, 2024 · 20ab001 · 20ab001
1 parent 73c41a4
commit 20ab001
Show file tree

Hide file tree

Showing 16 changed files with 110 additions and 75 deletions.
diff --git a/integration-libs/opf/base/root/model/opf-metadata-store.model.ts b/integration-libs/opf/base/root/model/opf-metadata-store.model.ts
@@ -9,6 +9,6 @@ export interface OpfMetadataModel {
   selectedPaymentOptionId: number | undefined;
   defaultSelectedPaymentOptionId?: number;
   isPaymentInProgress: boolean;
-  paymentSessionId: string | undefined;
+  opfPaymentSessionId: string | undefined;
   isTermsAndConditionsAlertClosed: boolean;
 }
diff --git a/integration-libs/opf/base/root/services/opf-metadata-state-persistence.service.spec.ts b/integration-libs/opf/base/root/services/opf-metadata-state-persistence.service.spec.ts
@@ -17,7 +17,7 @@ const mockOpfMetadata: OpfMetadataModel = {
   isPaymentInProgress: true,
   selectedPaymentOptionId: 111,
   termsAndConditionsChecked: true,
-  paymentSessionId: '111111',
+  opfPaymentSessionId: '111111',
   isTermsAndConditionsAlertClosed: false,
 };
 

diff --git a/integration-libs/opf/base/root/services/opf-metadata-store.service.spec.ts b/integration-libs/opf/base/root/services/opf-metadata-store.service.spec.ts
@@ -11,15 +11,15 @@ const initialState: OpfMetadataModel = {
   termsAndConditionsChecked: false,
   selectedPaymentOptionId: undefined,
   isPaymentInProgress: false,
-  paymentSessionId: undefined,
+  opfPaymentSessionId: undefined,
   isTermsAndConditionsAlertClosed: false,
 };
 
 const state: OpfMetadataModel = {
   isPaymentInProgress: true,
   selectedPaymentOptionId: 111,
   termsAndConditionsChecked: true,
-  paymentSessionId: '111111',
+  opfPaymentSessionId: '111111',
   isTermsAndConditionsAlertClosed: false,
 };
 
@@ -77,7 +77,7 @@ describe('OpfMetadataStoreService', () => {
       isPaymentInProgress: true,
       termsAndConditionsChecked: true,
       selectedPaymentOptionId: 111,
-      paymentSessionId: '111111',
+      opfPaymentSessionId: '111111',
       isTermsAndConditionsAlertClosed: false,
     };
 

diff --git a/integration-libs/opf/base/root/services/opf-metadata-store.service.ts b/integration-libs/opf/base/root/services/opf-metadata-store.service.ts
@@ -14,7 +14,7 @@ export class OpfMetadataStoreService {
     termsAndConditionsChecked: false,
     selectedPaymentOptionId: undefined,
     isPaymentInProgress: false,
-    paymentSessionId: undefined,
+    opfPaymentSessionId: undefined,
     isTermsAndConditionsAlertClosed: false,
   });
 

diff --git a/integration-libs/opf/base/root/services/opf-resource-loader.service.spec.ts b/integration-libs/opf/base/root/services/opf-resource-loader.service.spec.ts
@@ -71,6 +71,7 @@ describe('OpfResourceLoaderService', () => {
 
     it('should load provider resources successfully for scripts', fakeAsync(() => {
       const mockScriptResource = {
+        attributes: [{ key: 'crossorigin', value: 'use-credentials' }],
         url: 'script-url',
         sri: 'fake-hash-code',
         type: OpfDynamicScriptResourceType.SCRIPT,
@@ -176,7 +177,10 @@ describe('OpfResourceLoaderService', () => {
       const mockStylesResources = {
         url: 'style-url',
         sri: 'fake-hash-code',
-        attributes: [{ key: 'mock-key', value: 'mock-value' }],
+        attributes: [
+          { key: 'mock-key', value: 'mock-value' },
+          { key: 'crossorigin', value: 'use-credentials' },
+        ],
         type: OpfDynamicScriptResourceType.STYLES,
       };
 

diff --git a/integration-libs/opf/base/root/services/opf-resource-loader.service.ts b/integration-libs/opf/base/root/services/opf-resource-loader.service.ts
@@ -23,6 +23,7 @@ export class OpfResourceLoaderService {
   protected platformId = inject(PLATFORM_ID);
 
   protected readonly OPF_RESOURCE_ATTRIBUTE_KEY = 'data-opf-resource';
+  protected readonly CORS_DEFAULT_VALUE = 'anonymous';
 
   protected embedStyles(embedOptions: {
     attributes?: OpfKeyValueMap[];
@@ -40,6 +41,10 @@ export class OpfResourceLoaderService {
     link.setAttribute(this.OPF_RESOURCE_ATTRIBUTE_KEY, 'true');
     if (sri) {
       link.integrity = sri;
+      const corsKeyvalue = attributes?.find(
+        (attr) => attr.key === 'crossorigin' && !!attr.value?.length
+      );
+      link.crossOrigin = corsKeyvalue?.value ?? this.CORS_DEFAULT_VALUE;
     }
     if (attributes?.length) {
       attributes.forEach((attribute) => {
@@ -84,6 +89,12 @@ export class OpfResourceLoaderService {
 
       if (resource?.sri) {
         attributes['integrity'] = resource.sri;
+        const corsKeyvalue: OpfKeyValueMap | undefined =
+          resource?.attributes?.find(
+            (attr) => attr.key === 'crossorigin' && !!attr.value?.length
+          );
+        attributes['crossOrigin'] =
+          corsKeyvalue?.value ?? this.CORS_DEFAULT_VALUE;
       }
 
       if (resource.attributes) {

diff --git a/...ckout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.component.html b/...ckout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.component.html
@@ -67,8 +67,8 @@
         </form>
       </div>
     </ng-container>
-    <ng-container *ngIf="paymentLink.data && !paymentLink?.destination?.url">
-      <div [innerHTML]="bypassSecurityTrustHtml(paymentLink.data)"></div>
+    <ng-container *ngIf="paymentLink?.html">
+      <div [innerHTML]="bypassSecurityTrustHtml(paymentLink.html)"></div>
     </ng-container>
   </div>
 </ng-template>

diff --git a/...kout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.service.spec.ts b/...kout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.service.spec.ts
@@ -300,7 +300,6 @@ describe('OpfCheckoutPaymentWrapperService', () => {
       isLoading: false,
       isError: false,
       renderType: OpfPaymentRenderPattern.FULL_PAGE,
-      data: mockUrl,
       destination: { url: mockUrl, form: [] },
     });
   });
@@ -313,13 +312,13 @@ describe('OpfCheckoutPaymentWrapperService', () => {
     };
     (service as any).storePaymentSessionId(mockPaymentSessionData);
     expect(opfMetadataStoreServiceMock.updateOpfMetadata).toHaveBeenCalledWith({
-      paymentSessionId: mockPaymentSessionId,
+      opfPaymentSessionId: mockPaymentSessionId,
     });
 
     mockPaymentSessionData.pattern = OpfPaymentRenderPattern.HOSTED_FIELDS;
     (service as any).storePaymentSessionId(mockPaymentSessionData);
     expect(opfMetadataStoreServiceMock.updateOpfMetadata).toHaveBeenCalledWith({
-      paymentSessionId: undefined,
+      opfPaymentSessionId: undefined,
     });
   });
 
@@ -349,7 +348,6 @@ describe('OpfCheckoutPaymentWrapperService', () => {
       isLoading: false,
       isError: false,
       renderType: OpfPaymentRenderPattern.IFRAME,
-      data: mockUrl,
       destination: { url: mockUrl, form: mockFormData },
     });
   });
@@ -400,7 +398,7 @@ describe('OpfCheckoutPaymentWrapperService', () => {
         isLoading: false,
         isError: false,
         renderType: OpfPaymentRenderPattern.HOSTED_FIELDS,
-        data: '<html></html>',
+        html: '<html></html>',
       });
       done();
     });

diff --git a/.../checkout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.service.ts b/.../checkout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.service.ts
@@ -140,7 +140,9 @@ export class OpfCheckoutPaymentWrapperService {
       paymentOptionConfig.paymentSessionId
         ? paymentOptionConfig.paymentSessionId
         : undefined;
-    this.opfMetadataStoreService.updateOpfMetadata({ paymentSessionId });
+    this.opfMetadataStoreService.updateOpfMetadata({
+      opfPaymentSessionId: paymentSessionId,
+    });
   }
 
   reloadPaymentMode(): void {
@@ -149,18 +151,16 @@ export class OpfCheckoutPaymentWrapperService {
     }
   }
 
+  /**
+   * Render payment option covering the three patterns: IFRAME, FULL_PAGE, HOSTED_FIELDS.
+   * Context to explain this method logic:
+   * All three patterns can contains `dynamicScript` value.
+   * IFRAME and FULL_PAGE patterns can also have `destination` value.
+   * if `dynamicScript` and `destination` are present in same config, dynamicScript takes precendence.
+   * @param config
+   * @returns : none, OpfPaymentRenderMethodEvent gets emitted
+   */
   renderPaymentGateway(config: OpfPaymentSessionData) {
-    if (config?.destination) {
-      this.renderPaymentMethodEvent$.next({
-        isLoading: false,
-        isError: false,
-        renderType: config?.pattern,
-        data: config?.destination.url,
-        destination: config?.destination,
-      });
-      return;
-    }
-
     if (config?.dynamicScript) {
       const html = config?.dynamicScript?.html;
 
@@ -174,7 +174,7 @@ export class OpfCheckoutPaymentWrapperService {
             isLoading: false,
             isError: false,
             renderType: config?.pattern,
-            data: html,
+            html,
           });
 
           if (html) {
@@ -186,11 +186,16 @@ export class OpfCheckoutPaymentWrapperService {
         });
       return;
     }
-    this.handlePaymentInitiationError({
-      message: 'Payment Configuration problem',
-    })
-      .pipe(take(1))
-      .subscribe();
+    if (config?.destination) {
+      this.renderPaymentMethodEvent$.next({
+        isLoading: false,
+        isError: false,
+        renderType: config?.pattern,
+        destination: config?.destination,
+      });
+      return;
+    }
+    this.handleGeneralPaymentError().pipe(take(1)).subscribe();
   }
 
   protected handlePaymentInitiationError(

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
@@ -87,7 +87,7 @@ const mockOpfMetadata: OpfMetadataModel = {
   selectedPaymentOptionId: 111,
   termsAndConditionsChecked: true,
   defaultSelectedPaymentOptionId: 1,
-  paymentSessionId: '111111',
+  opfPaymentSessionId: '111111',
   isTermsAndConditionsAlertClosed: false,
 };
 
@@ -193,7 +193,7 @@ describe('OpfCheckoutPaymentsComponent', () => {
         selectedPaymentOptionId: undefined,
         termsAndConditionsChecked: true,
         defaultSelectedPaymentOptionId,
-        paymentSessionId: '111111',
+        opfPaymentSessionId: '111111',
         isTermsAndConditionsAlertClosed: false,
       })
     );

diff --git a/...payment/root/components/opf-payment-verification/opf-payment-verification.service.spec.ts b/...payment/root/components/opf-payment-verification/opf-payment-verification.service.spec.ts
@@ -112,14 +112,20 @@ describe('OpfPaymentVerificationService', () => {
           cxRoute: 'paymentVerificationResult',
         },
       },
-      queryParams: of({ paymentSessionId: mockPaymentSessionId }),
+      queryParams: of({
+        opfPaymentSessionId: mockPaymentSessionId,
+        keyMock: 'valueMock',
+      }),
     } as unknown as ActivatedRoute;
 
-    it('should verify the result URL and return the response map if the route cxRoute is "paymentVerificationResult"', (done) => {
+    it('should verify the result URL and return the response map without opfPaymentSessionId if the route cxRoute is "paymentVerificationResult"', (done) => {
       service.verifyResultUrl(mockRouteSnapshot).subscribe((result) => {
         expect(result.paymentSessionId).toEqual(mockPaymentSessionId);
         expect(result.paramsMap).toEqual([
-          { key: 'paymentSessionId', value: mockPaymentSessionId },
+          {
+            key: 'keyMock',
+            value: 'valueMock',
+          },
         ]);
         done();
       });
@@ -133,14 +139,14 @@ describe('OpfPaymentVerificationService', () => {
             cxRoute: 'paymentVerificationResult',
           },
         },
-        queryParams: of({ afterRedirectScriptFlag: 'true' }),
+        queryParams: of({ opfAfterRedirectFlag: 'true' }),
       } as unknown as ActivatedRoute;
 
       const mockOpfMetadata: OpfMetadataModel = {
         isPaymentInProgress: true,
         selectedPaymentOptionId: 111,
         termsAndConditionsChecked: true,
-        paymentSessionId: mockPaymentSessionId,
+        opfPaymentSessionId: mockPaymentSessionId,
         isTermsAndConditionsAlertClosed: false,
       };
 
@@ -151,7 +157,7 @@ describe('OpfPaymentVerificationService', () => {
       service.verifyResultUrl(mockRouteSnapshot).subscribe((result) => {
         expect(result.paymentSessionId).toEqual(mockPaymentSessionId);
         expect(result.paramsMap).toEqual([
-          { key: 'afterRedirectScriptFlag', value: 'true' },
+          { key: 'opfAfterRedirectFlag', value: 'true' },
         ]);
         expect(result.afterRedirectScriptFlag).toEqual('true');
         done();
@@ -180,7 +186,7 @@ describe('OpfPaymentVerificationService', () => {
         isPaymentInProgress: true,
         selectedPaymentOptionId: 111,
         termsAndConditionsChecked: true,
-        paymentSessionId: undefined,
+        opfPaymentSessionId: undefined,
         isTermsAndConditionsAlertClosed: false,
       };
 
@@ -212,7 +218,7 @@ describe('OpfPaymentVerificationService', () => {
         isPaymentInProgress: true,
         selectedPaymentOptionId: 111,
         termsAndConditionsChecked: true,
-        paymentSessionId: undefined,
+        opfPaymentSessionId: undefined,
         isTermsAndConditionsAlertClosed: false,
       };
 
@@ -500,7 +506,7 @@ describe('OpfPaymentVerificationService', () => {
         isPaymentInProgress: true,
         selectedPaymentOptionId: 111,
         termsAndConditionsChecked: true,
-        paymentSessionId: '111111',
+        opfPaymentSessionId: '111111',
         isTermsAndConditionsAlertClosed: false,
       };
 
@@ -522,7 +528,7 @@ describe('OpfPaymentVerificationService', () => {
         isPaymentInProgress: false,
         selectedPaymentOptionId: 111,
         termsAndConditionsChecked: true,
-        paymentSessionId: '111111',
+        opfPaymentSessionId: '111111',
         isTermsAndConditionsAlertClosed: false,
       };
 

diff --git a/.../opf/payment/root/components/opf-payment-verification/opf-payment-verification.service.ts b/.../opf/payment/root/components/opf-payment-verification/opf-payment-verification.service.ts
@@ -85,30 +85,34 @@ export class OpfPaymentVerificationService {
           }),
           concatMap((paymentSessionId: string | undefined) => {
             if (!paymentSessionId) {
-              return throwError(this.opfDefaultPaymentError);
+              return throwError(() => this.opfDefaultPaymentError);
             }
             return of({
               paymentSessionId,
-              paramsMap,
+              paramsMap: paramsMap.filter(
+                (param) =>
+                  param.key !==
+                  OpfPaymentVerificationUrlInput.OPF_PAYMENT_SESSION_ID
+              ),
               afterRedirectScriptFlag: this.findInParamsMap(
-                'afterRedirectScriptFlag',
+                OpfPaymentVerificationUrlInput.OPF_AFTER_REDIRECT_FLAG,
                 paramsMap
               ),
             });
           })
         )
-      : throwError({
+      : throwError(() => ({
           ...this.opfDefaultPaymentError,
           message: 'opfPayment.errors.cancelPayment',
-        });
+        }));
   }
 
   protected getPaymentSessionId(
     paramMap: Array<OpfKeyValueMap>
   ): Observable<string | undefined> {
     if (paramMap?.length) {
       const paymentSessionId = this.findInParamsMap(
-        OpfPaymentVerificationUrlInput.PAYMENT_SESSION_ID,
+        OpfPaymentVerificationUrlInput.OPF_PAYMENT_SESSION_ID,
         paramMap
       );
       return paymentSessionId
@@ -121,7 +125,7 @@ export class OpfPaymentVerificationService {
   protected getPaymentSessionIdFromStorage(): Observable<string | undefined> {
     return this.opfMetadataStoreService.getOpfMetadataState().pipe(
       take(1),
-      map((opfMetaData) => opfMetaData?.paymentSessionId)
+      map((opfMetaData) => opfMetaData?.opfPaymentSessionId)
     );
   }
 
@@ -153,12 +157,12 @@ export class OpfPaymentVerificationService {
     ) {
       return of(true);
     } else if (response.result === OpfPaymentVerificationResult.CANCELLED) {
-      return throwError({
+      return throwError(() => ({
         ...this.opfDefaultPaymentError,
         message: 'opfPayment.errors.cancelPayment',
-      });
+      }));
     } else {
-      return throwError(this.opfDefaultPaymentError);
+      return throwError(() => this.opfDefaultPaymentError);
     }
   }