Re-initialize checkout when order amount is changed (#1058)

Adyen · Mar 20, 2024 · d809507 · d809507
1 parent f3f3430
commit d809507
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 89 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -89,6 +89,7 @@ module.exports = {
     "object-curly-newline": ["error", {
       "ImportDeclaration": { multiline: true, "minProperties": 4 }
     }],
+    "import/prefer-default-export": "off",
     "implicit-arrow-linebreak": "off",
     "no-param-reassign": ["error", { "props": false }]
   },

diff --git a/...idges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGenericComponent.js b/...idges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGenericComponent.js
@@ -216,7 +216,7 @@ function setGiftCardContainerVisibility() {
   }
 }
 
-async function initializeCheckout() {
+export async function initializeCheckout() {
   const paymentMethodsResponse = await getPaymentMethods();
   const giftCardsData = await fetchGiftCards();
 

diff --git a/...dges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGiftcardComponent.js b/...dges/int_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGiftcardComponent.js
@@ -1,6 +1,6 @@
 const store = require('../../../../store');
 const constants = require('../constants');
-const { INIT_CHECKOUT_EVENT } = require('./renderGenericComponent');
+const { initializeCheckout } = require('./renderGenericComponent');
 
 function getGiftCardElements() {
   const giftCardSelect = document.querySelector('#giftCardSelect');
@@ -106,8 +106,7 @@ function removeGiftCards() {
             ?.parentNode.remove();
           store.componentsObj?.giftcard?.node.unmount('component_giftcard');
         }
-        const event = new Event(INIT_CHECKOUT_EVENT);
-        document.dispatchEvent(event);
+        initializeCheckout();
       },
     });
   });

diff --git a/..._SFRA/cartridge/controllers/middlewares/adyen/__tests__/getCheckoutPaymentMethods.test.js b/..._SFRA/cartridge/controllers/middlewares/adyen/__tests__/getCheckoutPaymentMethods.test.js
@@ -56,7 +56,10 @@ describe('getCheckoutPaymentMethods', () => {
          new Logger.error('error'),
       );
       getCheckoutPaymentMethods(req, res, next);
-      expect(res.json).not.toHaveBeenCalled();
+      expect(res.json).toHaveBeenCalledWith({
+         error: true,
+       });      
       expect(Logger.fatal.mock.calls.length).toBe(1);
+      expect(next).toHaveBeenCalled();
    });
 });
diff --git a/...idges/int_adyen_SFRA/cartridge/controllers/middlewares/adyen/getCheckoutPaymentMethods.js b/...idges/int_adyen_SFRA/cartridge/controllers/middlewares/adyen/getCheckoutPaymentMethods.js
@@ -25,21 +25,29 @@ function getConnectedTerminals() {
 }
 
 function getCheckoutPaymentMethods(req, res, next) {
-  const currentBasket = BasketMgr.getCurrentBasket();
-  const countryCode =
-    currentBasket.getShipments().length > 0 &&
-    currentBasket.getShipments()[0].shippingAddress
-      ? currentBasket.getShipments()[0].shippingAddress.getCountryCode().value
-      : getCountryCode(currentBasket, req.locale).value;
-  const adyenURL = `${AdyenHelper.getLoadingContext()}images/logos/medium/`;
-  const connectedTerminals = JSON.parse(getConnectedTerminals());
-  const currency = currentBasket.getTotalGrossPrice().currencyCode;
-  const paymentAmount = currentBasket.getTotalGrossPrice().isAvailable()
-    ? AdyenHelper.getCurrencyValueForApi(currentBasket.getTotalGrossPrice())
-    : new dw.value.Money(1000, currency);
-  let paymentMethods;
   try {
-    paymentMethods = getPaymentMethods.getMethods(
+    const currentBasket = BasketMgr.getCurrentBasket();
+    const countryCode =
+      currentBasket.getShipments().length > 0 &&
+      currentBasket.getShipments()[0].shippingAddress
+        ? currentBasket.getShipments()[0].shippingAddress.getCountryCode().value
+        : getCountryCode(currentBasket, req.locale).value;
+    const adyenURL = `${AdyenHelper.getLoadingContext()}images/logos/medium/`;
+    const connectedTerminals = JSON.parse(getConnectedTerminals());
+    const currency = currentBasket.getTotalGrossPrice().currencyCode;
+    const getRemainingAmount = (giftCardResponse) => {
+      if (giftCardResponse && JSON.parse(giftCardResponse).remainingAmount) {
+        return JSON.parse(giftCardResponse).remainingAmount;
+      }
+      return {
+        currency,
+        value: AdyenHelper.getCurrencyValueForApi(
+          currentBasket.getTotalGrossPrice(),
+        ).value,
+      };
+    };
+    const paymentAmount = getRemainingAmount(session.privacy.giftCardResponse);
+    const paymentMethods = getPaymentMethods.getMethods(
       currentBasket,
       AdyenHelper.getCustomer(req.currentCustomer),
       countryCode,
@@ -56,6 +64,7 @@ function getCheckoutPaymentMethods(req, res, next) {
     AdyenLogs.fatal_log(
       `Failed to fetch payment methods ${JSON.stringify(err)}`,
     );
+    res.json({ error: true });
   }
   return next();
 }

diff --git a/tests/playwright/pages/AccountPageSFRA.mjs b/tests/playwright/pages/AccountPageSFRA.mjs
@@ -28,7 +28,7 @@ export default class AccountPageSFRA {
         .locator('.input-field')
         .type(cardInput.cvc);
     }
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.page.click('button[name="save"]');
   };
 
@@ -41,7 +41,7 @@ export default class AccountPageSFRA {
     const cardElement = this.savedCardElementGenerator(cardData);
     const deleteButton = cardElement.locator('../../button');
 
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
 
     await deleteButton.click();
     await this.page.click('.delete-confirmation-btn');
@@ -52,7 +52,7 @@ export default class AccountPageSFRA {
 
     await cardElement.waitFor({
       state: 'visible',
-      timeout: 15000,
+      timeout: 20000,
     });
   };
 
@@ -65,7 +65,7 @@ export default class AccountPageSFRA {
 
     await cardElement.waitFor({
       state: 'detached',
-      timeout: 15000,
+      timeout: 20000,
     });
   };
 

diff --git a/tests/playwright/pages/CheckoutPageSFRA5.mjs b/tests/playwright/pages/CheckoutPageSFRA5.mjs
@@ -88,7 +88,7 @@ export default class CheckoutPageSFRA5 {
 
   isPaymentModalShown = async (imgAltValue) => {
     await expect(this.paymentModal.locator(`img[alt='${imgAltValue}']`))
-      .toBeVisible({ timeout: 15000 });
+      .toBeVisible({ timeout: 20000 });
   }
 
   navigateToCheckout = async (locale) => {
@@ -101,7 +101,7 @@ export default class CheckoutPageSFRA5 {
 
   goToCheckoutPageWithFullCart = async (locale, itemCount = 1) => {
     await this.addProductToCart(locale, itemCount);
-    await this.successMessage.waitFor({ visible: true, timeout: 15000 });
+    await this.successMessage.waitFor({ visible: true, timeout: 20000 });
 
     await this.navigateToCheckout(locale);
     await this.checkoutGuest.click();
@@ -158,10 +158,6 @@ export default class CheckoutPageSFRA5 {
   };
 
   setEmail = async () => {
-    /* After filling the shopper details, clicking "Next" has an autoscroll
-    feature, which leads the email field to be missed, hence the flakiness.
-    Waiting until the full page load prevents this situation */
-    await this.page.waitForLoadState('networkidle');
     await this.checkoutPageUserEmailInput.fill('');
     await this.checkoutPageUserEmailInput.fill('test@adyenTest.com');
     // Pressing Tab to simulate component re-rendering and waiting the components to re-mount
@@ -170,20 +166,20 @@ export default class CheckoutPageSFRA5 {
   };
 
   submitShipping = async () => {
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.shippingSubmit.click();
-    await this.page.waitForNavigation({ waitUntil: "networkidle", timeout: 15000 });
+    await this.page.waitForNavigation({ waitUntil: "networkidle", timeout: 20000 });
 
     // Ugly wait since the submit button takes time to mount.
     await new Promise(r => setTimeout(r, 2000));
   };
 
   submitPayment = async () => {
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.submitPaymentButton.click();
   };
   placeOrder = async () => {
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.placeOrderButton.click();
   };
 
@@ -197,7 +193,7 @@ export default class CheckoutPageSFRA5 {
   };
 
   goBackAndSubmitShipping = async () => {
-    await this.page.waitForNavigation('load', { timeout: 15000 });
+    await this.page.waitForNavigation('load', { timeout: 20000 });
     await this.navigateBack();
     await this.submitShipping();
   };
@@ -207,40 +203,40 @@ export default class CheckoutPageSFRA5 {
       url: /Order-Confirm/,
       timeout: 20000,
     });
-    await expect(this.thankYouMessage).toBeVisible({ timeout: 15000 });
+    await expect(this.thankYouMessage).toBeVisible({ timeout: 20000 });
   };
 
   expectNonRedirectSuccess = async () => {
-    await expect(this.thankYouMessage).toBeVisible({ timeout: 15000 });
+    await expect(this.thankYouMessage).toBeVisible({ timeout: 20000 });
   };
 
   expectRefusal = async () => {
     await expect(this.errorMessage).not.toBeEmpty();
   };
 
   expectVoucher = async () => {
-    await expect(this.voucherCode).toBeVisible({ timeout: 15000 });
+    await expect(this.voucherCode).toBeVisible({ timeout: 20000 });
   };
 
   expectQRcode = async () => {
-    await this.qrLoader.waitFor({ state: 'attached', timeout: 15000 });
-    await expect(this.qrLoaderAmount).toBeVisible({ timeout: 15000 });
-    await expect(this.qrImg).toBeVisible({ timeout: 15000 });
+    await this.qrLoader.waitFor({ state: 'attached', timeout: 20000 });
+    await expect(this.qrLoaderAmount).toBeVisible({ timeout: 20000 });
+    await expect(this.qrImg).toBeVisible({ timeout: 20000 });
   };
 
   expectGiftCardWarning = async () => {
     await expect(this.giftCardWarning).not.toBeEmpty();
   };
 
   getLocation = async () => {
-    await this.page.waitForLoadState('load', { timeout: 15000 });
+    await this.page.waitForLoadState('load', { timeout: 20000 });
     return await this.page.url();
   };
 
   navigateBack = async () => {
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.page.goBack();
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
   };
 
   loginUser = async (credentials) => {

diff --git a/tests/playwright/pages/CheckoutPageSFRA6.mjs b/tests/playwright/pages/CheckoutPageSFRA6.mjs
@@ -89,7 +89,7 @@ export default class CheckoutPageSFRA {
 
   isPaymentModalShown = async (imgAltValue) => {
     await expect(this.paymentModal.locator(`img[alt='${imgAltValue}']`))
-      .toBeVisible({ timeout: 15000 });
+      .toBeVisible({ timeout: 20000 });
   }
 
   navigateToCheckout = async (locale) => {
@@ -102,7 +102,7 @@ export default class CheckoutPageSFRA {
 
   goToCheckoutPageWithFullCart = async (locale, itemCount = 1) => {
     await this.addProductToCart(locale, itemCount);
-    await this.successMessage.waitFor({ visible: true, timeout: 15000 });
+    await this.successMessage.waitFor({ visible: true, timeout: 20000 });
 
     await this.navigateToCheckout(locale);
     await this.setEmail();
@@ -127,7 +127,7 @@ export default class CheckoutPageSFRA {
   };
 
   setShopperDetails = async (shopperDetails) => {
-    await this.customerInfoSection.waitFor({ visible: true, timeout: 15000 });
+    await this.customerInfoSection.waitFor({ visible: true, timeout: 20000 });
 
 
     await this.checkoutPageUserFirstNameInput.type(
@@ -175,24 +175,24 @@ export default class CheckoutPageSFRA {
   };
 
   submitShipping = async () => {
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.shippingSubmit.click();
-    await this.page.waitForNavigation({ waitUntil: "networkidle", timeout: 15000 });
+    await this.page.waitForNavigation({ waitUntil: "networkidle", timeout: 20000 });
 
     // Ugly wait since the submit button takes time to mount.
     await new Promise(r => setTimeout(r, 2000));
   };
 
   submitPayment = async () => {
-    await this.page.waitForLoadState('load', { timeout: 15000 });
+    await this.page.waitForLoadState('load', { timeout: 20000 });
     await this.submitPaymentButton.click();
   };
 
   placeOrder = async () => {
     let retries = 3;
     while (retries > 0) {
       try {
-        await this.page.waitForLoadState('load', { timeout: 15000 });
+        await this.page.waitForLoadState('load', { timeout: 20000 });
         await this.placeOrderButton.click();
         break; // Break out of the loop if successful
       } catch (error) {
@@ -212,7 +212,7 @@ export default class CheckoutPageSFRA {
   };
 
   goBackAndSubmitShipping = async () => {
-    await this.page.waitForNavigation('load', { timeout: 15000 });
+    await this.page.waitForNavigation('load', { timeout: 20000 });
     await this.navigateBack();
     await this.submitShipping();
   };
@@ -223,40 +223,40 @@ export default class CheckoutPageSFRA {
       url: /Order-Confirm/,
       timeout: 20000,
     });
-    await expect(this.thankYouMessage).toBeVisible({ timeout: 15000 });
+    await expect(this.thankYouMessage).toBeVisible({ timeout: 20000 });
   };
 
   expectNonRedirectSuccess = async () => {
-    await expect(this.thankYouMessage).toBeVisible({ timeout: 15000 });
+    await expect(this.thankYouMessage).toBeVisible({ timeout: 20000 });
   };
 
   expectRefusal = async () => {
     await expect(this.errorMessage).not.toBeEmpty();
   };
 
   expectVoucher = async () => {
-    await expect(this.voucherCode).toBeVisible({ timeout: 15000 });
+    await expect(this.voucherCode).toBeVisible({ timeout: 20000 });
   };
 
   expectQRcode = async () => {
-    await this.qrLoader.waitFor({ state: 'attached', timeout: 15000 });
-    await expect(this.qrLoaderAmount).toBeVisible({ timeout: 15000 });
-    await expect(this.qrImg).toBeVisible({ timeout: 15000 });
+    await this.qrLoader.waitFor({ state: 'attached', timeout: 20000 });
+    await expect(this.qrLoaderAmount).toBeVisible({ timeout: 20000 });
+    await expect(this.qrImg).toBeVisible({ timeout: 20000 });
   };
 
   expectGiftCardWarning = async () => {
     await expect(this.giftCardWarning).not.toBeEmpty();
   };
 
   getLocation = async () => {
-    await this.page.waitForLoadState('load', { timeout: 15000 });
+    await this.page.waitForLoadState('load', { timeout: 20000 });
     return await this.page.url();
   };
 
   navigateBack = async () => {
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
     await this.page.goBack();
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 20000 });
   };
 
   loginUser = async (credentials) => {