Add Back button for QR methods

src/cartridges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/checkoutConfiguration.js

@@ -243,6 +243,9 @@ const actionHandler = async (action) => {
   const checkout = await AdyenCheckout(store.checkoutConfiguration);
   checkout.createFromAction(action).mount('#action-container');
   $('#action-modal').modal({ backdrop: 'static', keyboard: false });
+  if (action.type === constants.ACTIONTYPE.QRCODE){
+    document.getElementById('cancelQrMethodsButton').classList.remove('invisible');
+  };
 };
 
 function handleOnAdditionalDetails(state) {

src/cartridges/int_adyen_SFRA/cartridge/client/default/js/constants.js

@@ -8,4 +8,7 @@ module.exports = {
   NOTENOUGHBALANCE: 'NotEnoughBalance',
   SUCCESS: 'Success',
   GIFTCARD: 'giftcard',
+  ACTIONTYPE: {
+    QRCODE: 'qrCode',
+  },
 };

src/cartridges/int_adyen_SFRA/cartridge/templates/default/adyenActionModal.isml

@@ -1,6 +1,12 @@
 <div class="modal fade" id="action-modal" role="dialog">
    <div class="modal-dialog" id="adyenModalDialog">
-        <div id="action-container"></div>
+        <div id="action-container">
+            <div class='invisible' id="cancelQrMethodsButton">
+               <button id='cancelQrMethodsButtonStyling' onclick="location.href='${URLUtils.https('Checkout-Begin')}';">
+                     <img src="${URLUtils.staticURL('images/cancel.svg')}" alt="Cancel" />
+               </button>
+            </div>
+        </div>
         <div id="amazon-container"></div>
         <div id="giftcard-container"></div>
    </div>

src/cartridges/int_adyen_SFRA/cartridge/templates/default/checkout/billing/adyenComponentForm.isml

@@ -85,7 +85,9 @@
             <div id="giftCardContainer"></div>
         </div>
         <div id="cancelGiftCardButton" class="invisible">
-            <input type="image" src="${URLUtils.staticURL('images/cancel.svg')}"/>  
+            <button id='cancelGiftCardButtonStyling'>
+                <img src="${URLUtils.staticURL('images/cancel.svg')}" alt="Cancel" />
+            </button>
         </div>
     </div>
     <div id="giftCardsList" class="gift-cards-container"></div>

src/cartridges/int_adyen_overlay/cartridge/static/default/css/adyenCss.css

@@ -434,12 +434,19 @@ input:checked + .slider:before {
     font-size: 13px;
 }
 
-#cancelGiftCardButton {
+#cancelGiftCardButton, #cancelQrMethodsButton {
     position: absolute;
     top : 0;
     right : 0;
 }
 
+#cancelGiftCardButtonStyling, #cancelQrMethodsButtonStyling {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;  
+}
+
 .expressComponent {
     margin: 10px 0;
 }

tests/playwright/fixtures/countriesEUR/BE.spec.mjs

@@ -24,5 +24,12 @@ for (const environment of environments) {
       if (environment.name != 'SG') await checkoutPage.completeCheckout();
       await checkoutPage.expectQRcode();
     });
+    test('bcmc mobile cancellation flow', async ({ page }) => {
+      pendingPayments = new PendingPayments(page);
+      if (environment.name === 'SG') await checkoutPage.setEmail();
+      await pendingPayments.doQRCodePayment('bcmc_mobile', environment.name);
+      if (environment.name != 'SG') await checkoutPage.completeCheckout();
+      await pendingPayments.cancelQRCodePayment();
+    });
   });
 }

tests/playwright/pages/PaymentMethodsPage.mjs

@@ -595,6 +595,11 @@ export default class PaymentMethodsPage {
     }
   };
 
+  cancelQRCode = async () => {
+    await this.page.click('#cancelQrMethodsButton');
+    await expect(this.page).toHaveURL(/stage=shipping#shipping/);
+  };
+
   initiateBoletoPayment = async () => {
     const socialSecurityInput = this.page.locator(
       '#component_boletobancario input[name="socialSecurityNumber"]',

tests/playwright/paymentFlows/pending.mjs

@@ -25,6 +25,10 @@ export class PendingPayments {
     await this.paymentMethodsPage.initiateQRCode(paymentMethod, envName);
   };
 
+  cancelQRCodePayment = async () => {
+    await this.paymentMethodsPage.cancelQRCode();
+  };
+
   doGooglePayPayment = async () => {
     await this.paymentMethodsPage.initiateGooglePayPayment();
   };