fix: Improve accessibility for OPF payments (SAP#19610)

crisli001 · Dec 2, 2024 · ec4a940 · ec4a940
1 parent 5d66fa2
commit ec4a940
Show file tree

Hide file tree

Showing 15 changed files with 400 additions and 235 deletions.
diff --git a/integration-libs/opf/base/root/config/default-opf-config.ts b/integration-libs/opf/base/root/config/default-opf-config.ts
@@ -9,5 +9,8 @@ import { OpfConfig } from './opf-config';
 export const defaultOpfConfig: OpfConfig = {
   opf: {
     opfBaseUrl: '',
+    paymentOption: {
+      enableInfoMessage: true,
+    },
   },
 };
diff --git a/integration-libs/opf/base/root/config/opf-config.ts b/integration-libs/opf/base/root/config/opf-config.ts
@@ -15,6 +15,26 @@ export abstract class OpfConfig {
   opf?: {
     opfBaseUrl?: string;
     commerceCloudPublicKey?: string;
+    paymentOption?: {
+      /**
+       * The map of info message translation keys for specific payment configuration IDs
+       * @example
+       * ```ts
+       * const opfConfig = {
+       *   opf: {
+       *     paymentInfoMessagesMap: {
+       *       213: 'opfCheckout.payPalPaymentInfoMessage' // Message key for payment method ID 213
+       *     }
+       *   }
+       * };
+       * ```
+       */
+      paymentInfoMessagesMap?: Record<number, string>;
+      /**
+       * Enables the payment info message section within the payment options
+       */
+      enableInfoMessage?: boolean;
+    };
   };
 }
 

diff --git a/integration-libs/opf/checkout/assets/translations/en/opfCheckout.json b/integration-libs/opf/checkout/assets/translations/en/opfCheckout.json
@@ -9,8 +9,11 @@
     "billingAddress": "Billing Address",
     "paymentOption": "Payment option",
     "termsAndConditions": "Terms & Conditions",
+    "closeTermsAndConditionsAlert": "Close alert",
     "itemsToBeShipped": "Items to be shipped",
     "proceedPayment": "Place Order",
+    "defaultPaymentInfoMessage": "You are about to make a payment. Depending on the option selected, you will either be redirected to a secure external page or complete the process directly within this page",
+    "proceedPaymentButtonLabel": "Place Order, opens external page",
     "retryPayment": "Retry to Continue",
     "checkTermsAndConditionsExplicit": "You must agree Terms & Conditions to see available payment options.",
     "checkTermsAndConditionsImplicit": "By submitting the order, you are agreeing to our Terms & Conditions.",

diff --git a/...onents/opf-checkout-billing-address-form/opf-checkout-billing-address-form.component.html b/...onents/opf-checkout-billing-address-form/opf-checkout-billing-address-form.component.html
@@ -1,62 +1,66 @@
-<h3>{{ 'opfCheckout.billingAddress' | cxTranslate }}</h3>
-<ng-container *ngIf="!(isLoadingAddress$ | async); else loading">
-  <ng-container
-    *ngIf="{
-      billingAddress: billingAddress$ | async,
-      isSameAsDelivery: isSameAsDelivery$ | async,
-    } as addressData"
-  >
-    <div class="form-group">
-      <div class="form-check">
-        <label>
-          <input
-            type="checkbox"
-            class="form-check-input"
-            [checked]="addressData.isSameAsDelivery"
-            (change)="toggleSameAsDeliveryAddress($event)"
-            [attr.aria-label]="
-              'paymentForm.billingAddressSameAsShipping' | cxTranslate
-            "
-          />
-          <span class="form-check-label">{{
-            'paymentForm.sameAsDeliveryAddress' | cxTranslate
-          }}</span>
-        </label>
+<section [attr.aria-label]="'opfCheckout.billingAddress' | cxTranslate">
+  <h3>{{ 'opfCheckout.billingAddress' | cxTranslate }}</h3>
+  <ng-container *ngIf="!(isLoadingAddress$ | async); else loading">
+    <ng-container
+      *ngIf="{
+        billingAddress: billingAddress$ | async,
+        isSameAsDelivery: isSameAsDelivery$ | async,
+      } as addressData"
+    >
+      <div class="form-group">
+        <div class="form-check">
+          <label>
+            <input
+              type="checkbox"
+              class="form-check-input"
+              [checked]="addressData.isSameAsDelivery"
+              (change)="toggleSameAsDeliveryAddress($event)"
+              [attr.aria-label]="
+                'paymentForm.billingAddressSameAsShipping' | cxTranslate
+              "
+            />
+            <span class="form-check-label">{{
+              'paymentForm.sameAsDeliveryAddress' | cxTranslate
+            }}</span>
+          </label>
+        </div>
       </div>
-    </div>
 
-    <ng-container *ngIf="!isEditBillingAddress && addressData.billingAddress">
-      <div class="cx-custom-address-info">
-        <cx-card
-          [content]="addressData.billingAddress | cxGetAddressCardContent"
-        ></cx-card>
+      <ng-container *ngIf="!isEditBillingAddress && addressData.billingAddress">
+        <div class="cx-custom-address-info">
+          <cx-card
+            [content]="addressData.billingAddress | cxGetAddressCardContent"
+          ></cx-card>
 
-        <button
-          *ngIf="!addressData.isSameAsDelivery"
-          (click)="editCustomBillingAddress()"
-        >
-          <cx-icon [type]="iconTypes.PENCIL"></cx-icon>
-        </button>
-      </div>
-    </ng-container>
+          <button
+            *ngIf="!addressData.isSameAsDelivery"
+            [attr.aria-label]="'paymentForm.editBillingAddress' | cxTranslate"
+            [attr.title]="'paymentForm.editBillingAddress' | cxTranslate"
+            (click)="editCustomBillingAddress()"
+          >
+            <cx-icon [type]="iconTypes.PENCIL"></cx-icon>
+          </button>
+        </div>
+      </ng-container>
 
-    <ng-container *ngIf="isEditBillingAddress">
-      <cx-address-form
-        [addressData]="getAddressData(addressData.billingAddress)"
-        class="cx-form"
-        [showTitleCode]="true"
-        [showCancelBtn]="true"
-        actionBtnLabel="{{ 'common.save' | cxTranslate }}"
-        cancelBtnLabel="{{ 'common.cancel' | cxTranslate }}"
-        (submitAddress)="onSubmitAddress($event)"
-        (backToAddress)="cancelAndHideForm()"
-        [setAsDefaultField]="false"
-        [countries]="countries$"
-      ></cx-address-form>
+      <ng-container *ngIf="isEditBillingAddress">
+        <cx-address-form
+          [addressData]="getAddressData(addressData.billingAddress)"
+          class="cx-form"
+          [showTitleCode]="true"
+          [showCancelBtn]="true"
+          actionBtnLabel="{{ 'common.save' | cxTranslate }}"
+          cancelBtnLabel="{{ 'common.cancel' | cxTranslate }}"
+          (submitAddress)="onSubmitAddress($event)"
+          (backToAddress)="cancelAndHideForm()"
+          [setAsDefaultField]="false"
+          [countries]="countries$"
+        ></cx-address-form>
+      </ng-container>
     </ng-container>
   </ng-container>
-</ng-container>
 
-<ng-template #loading>
-  <cx-spinner></cx-spinner>
-</ng-template>
+  <ng-template #loading>
+    <cx-spinner></cx-spinner>
+  </ng-template>
+</section>