Merge branch 'develop' into feature/CXSPA-8992

feature-libs/product-configurator/rulebased/styles/_configurator-group-menu.scss

@@ -20,10 +20,10 @@
       border-style: solid;
       border-color: var(--cx-color-light);
       border-radius: 2px;
-      padding-inline-start: 0px;
-      padding-inline-end: 0px;
-      padding-block-start: 0px;
-      padding-block-end: 0px;
+      padding-inline-start: 3px;
+      padding-inline-end: 3px;
+      padding-block-start: 3px;
+      padding-block-end: 3px;
       margin-inline-start: 0px;
       margin-block-start: 0px;
       margin-block-end: 0px;

feature-libs/storefinder/components/store-finder-list-item/store-finder-list-item.component.ts

@@ -6,6 +6,7 @@
 
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { StoreFinderService } from '@spartacus/storefinder/core';
+import { useFeatureStyles } from '@spartacus/core';
 import { StoreFinderOutlets } from '@spartacus/storefinder/root';
 import { AbstractStoreItemComponent } from '../abstract-store-item/abstract-store-item.component';
 
@@ -29,6 +30,7 @@ export class StoreFinderListItemComponent extends AbstractStoreItemComponent {
 
   constructor(protected storeFinderService: StoreFinderService) {
     super(storeFinderService);
+    useFeatureStyles('a11yTruncatedTextStoreFinder');
   }
 
   handleStoreItemClick() {

feature-libs/storefinder/styles/components/_store-finder-list-item.scss

@@ -30,6 +30,9 @@
   }
   .cx-store-address-street {
     white-space: nowrap;
+    @include forFeature('a11yTruncatedTextStoreFinder') {
+      white-space: unset;
+    }
     overflow: hidden;
     text-overflow: ellipsis;
 

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;
 }

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,
 };
 

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,
     };
 

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,
   });
 

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,
       };
 

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) {

integration-libs/opf/checkout/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>

integration-libs/opf/checkout/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();
     });

integration-libs/opf/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(

integration-libs/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,
       })
     );

integration-libs/opf/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,
       };