Re-render components to reflect updated amount

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

@@ -1,4 +1,5 @@
 const helpers = require('./helpers');
+const { makePartialPayment } = require('./makePartialPayment');
 const { onBrand, onFieldValid } = require('../commons');
 const store = require('../../../../store');
 const constants = require('../constants');
@@ -208,7 +209,7 @@ function getGiftCardConfig() {
               },
               giftcardBrand,
             };
-            const partialPaymentResponse = helpers.makePartialPayment(
+            const partialPaymentResponse = makePartialPayment(
               partialPaymentRequest,
             );
             if (partialPaymentResponse?.error) {

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

@@ -49,32 +49,6 @@ function paymentFromComponent(data, component = {}) {
   });
 }
 
-function makePartialPayment(requestData) {
-  let error;
-  $.ajax({
-    url: 'Adyen-partialPayment',
-    type: 'POST',
-    data: JSON.stringify(requestData),
-    contentType: 'application/json; charset=utf-8',
-    async: false,
-    success(response) {
-      if (response.error) {
-        error = {
-          error: true,
-        };
-      } else {
-        const { giftCards, ...rest } = response;
-        store.checkout.options.amount = rest.remainingAmount;
-        store.partialPaymentsOrderObj = rest;
-        sessionStorage.setItem('partialPaymentsObj', JSON.stringify(rest));
-        store.addedGiftCards = giftCards;
-        setOrderFormData(response);
-      }
-    },
-  }).fail(() => {});
-  return error;
-}
-
 function resetPaymentMethod() {
   $('#requiredBrandCode').hide();
   $('#selectedIssuer').val('');
@@ -162,5 +136,4 @@ module.exports = {
   showValidation,
   createShowConfirmationForm,
   getInstallmentValues,
-  makePartialPayment,
 };

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

@@ -0,0 +1,34 @@
+const store = require('../../../../store');
+const { renderGenericComponent } = require('./renderGenericComponent');
+const helpers = require('./helpers');
+
+function makePartialPayment(requestData) {
+  let error;
+  $.ajax({
+    url: 'Adyen-partialPayment',
+    type: 'POST',
+    data: JSON.stringify(requestData),
+    contentType: 'application/json; charset=utf-8',
+    async: false,
+    success(response) {
+      if (response.error) {
+        error = {
+          error: true,
+        };
+      } else {
+        const { giftCards, ...rest } = response;
+        store.checkout.options.amount = rest.remainingAmount;
+        store.partialPaymentsOrderObj = rest;
+        sessionStorage.setItem('partialPaymentsObj', JSON.stringify(rest));
+        store.addedGiftCards = giftCards;
+        helpers.setOrderFormData(response);
+        renderGenericComponent(true);
+      }
+    },
+  }).fail(() => {});
+  return error;
+}
+
+module.exports = {
+  makePartialPayment,
+};

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

@@ -56,28 +56,33 @@ function unmountComponents() {
   return Promise.all(promises);
 }
 
+function isCartModified(refresh, amount, orderAmount) {
+  return (
+    refresh === false &&
+    (amount.currency !== orderAmount.currency ||
+      amount.value !== orderAmount.value)
+  );
+}
+
 function renderGiftCardLogo(imagePath) {
   const headingImg = document.querySelector('#headingImg');
   if (headingImg) {
     headingImg.src = `${imagePath}genericgiftcard.png`;
   }
 }
-
-function applyGiftCards() {
+function applyGiftCards(refresh) {
   const now = new Date().toISOString();
   const { amount } = store.checkoutConfiguration;
   const { orderAmount } = store.partialPaymentsOrderObj;
 
   const isPartialPaymentExpired = store.addedGiftCards.some(
     (cart) => now > cart.expiresAt,
   );
-  const isCartModified =
-    amount.currency !== orderAmount.currency ||
-    amount.value !== orderAmount.value;
+  const cartModified = isCartModified(refresh, amount, orderAmount);
 
   if (isPartialPaymentExpired) {
     removeGiftCards();
-  } else if (isCartModified) {
+  } else if (cartModified) {
     removeGiftCards();
     showGiftCardWarningMessage();
   } else {
@@ -183,67 +188,74 @@ function setGiftCardContainerVisibility() {
   }
 }
 
+// used by renderGiftCardComponent.js
+document.addEventListener('renderGenericComponentCalled', async () => {
+  await module.exports.renderGenericComponent();
+});
+
 /**
  * Calls createSession and then renders the retrieved payment methods (including card component)
  */
-module.exports.renderGenericComponent =
-  async function renderGenericComponent() {
-    if (Object.keys(store.componentsObj).length !== 0) {
-      await unmountComponents();
-    }
+module.exports.renderGenericComponent = async function renderGenericComponent(
+  refresh = false,
+) {
+  if (Object.keys(store.componentsObj).length !== 0) {
+    await unmountComponents();
+  }
 
-    const session = await createSession();
-    const giftCardsData = await fetchGiftCards();
-
-    store.checkoutConfiguration.session = {
-      id: session.id,
-      sessionData: session.sessionData,
-      imagePath: session.imagePath,
-      adyenDescriptions: session.adyenDescriptions,
-    };
-    store.checkout = await AdyenCheckout(store.checkoutConfiguration);
-
-    setGiftCardContainerVisibility();
-    const { totalDiscountedAmount, giftCards } = giftCardsData;
-    store.addedGiftCards = giftCards;
-    if (giftCards?.length) {
-      const lastGiftCard = giftCards[store.addedGiftCards.length - 1];
-      store.partialPaymentsOrderObj = giftCardsData.giftCards?.length
-        ? { ...lastGiftCard, totalDiscountedAmount }
-        : null;
-    }
+  const session = await createSession();
+  const giftCardsData = await fetchGiftCards();
 
-    setCheckoutConfiguration(store.checkout.options);
-    setInstallments(store.checkout.options.amount);
-    setAmazonPayConfig(store.checkout.paymentMethodsResponse);
-    document.querySelector('#paymentMethodsList').innerHTML = '';
+  store.checkoutConfiguration.session = {
+    id: session.id,
+    sessionData: session.sessionData,
+    imagePath: session.imagePath,
+    adyenDescriptions: session.adyenDescriptions,
+  };
+  store.checkout = await AdyenCheckout(store.checkoutConfiguration);
 
-    renderStoredPaymentMethods(
-      store.checkout.paymentMethodsResponse,
-      session.imagePath,
-    );
-    renderPaymentMethods(
-      store.checkout.paymentMethodsResponse,
-      session.imagePath,
-      session.adyenDescriptions,
-    );
-    renderPosTerminals(session.adyenConnectedTerminals);
+  setGiftCardContainerVisibility();
+  const { totalDiscountedAmount, giftCards } = giftCardsData;
+  store.addedGiftCards = giftCards;
+  if (giftCards?.length) {
+    const lastGiftCard = giftCards[store.addedGiftCards.length - 1];
+    store.partialPaymentsOrderObj = giftCardsData.giftCards?.length
+      ? { ...lastGiftCard, totalDiscountedAmount }
+      : null;
+  }
 
-    renderGiftCardLogo(session.imagePath);
+  setCheckoutConfiguration(store.checkout.options);
+  setInstallments(store.checkout.options.amount);
+  setAmazonPayConfig(store.checkout.paymentMethodsResponse);
+  document.querySelector('#paymentMethodsList').innerHTML = '';
 
-    if (store.addedGiftCards?.length) {
-      applyGiftCards();
-    }
+  renderStoredPaymentMethods(
+    store.checkout.paymentMethodsResponse,
+    session.imagePath,
+  );
 
-    attachGiftCardAddButtonListener();
+  renderPaymentMethods(
+    store.checkout.paymentMethodsResponse,
+    session.imagePath,
+    session.adyenDescriptions,
+  );
+  renderPosTerminals(session.adyenConnectedTerminals);
 
-    const firstPaymentMethod = document.querySelector(
-      'input[type=radio][name=brandCode]',
-    );
-    firstPaymentMethod.checked = true;
-    helpers.displaySelectedMethod(firstPaymentMethod.value);
+  renderGiftCardLogo(session.imagePath);
 
-    helpers.createShowConfirmationForm(
-      window.ShowConfirmationPaymentFromComponent,
-    );
-  };
+  if (store.addedGiftCards?.length) {
+    applyGiftCards(refresh);
+  }
+
+  attachGiftCardAddButtonListener();
+
+  const firstPaymentMethod = document.querySelector(
+    'input[type=radio][name=brandCode]',
+  );
+  firstPaymentMethod.checked = true;
+  helpers.displaySelectedMethod(firstPaymentMethod.value);
+
+  helpers.createShowConfirmationForm(
+    window.ShowConfirmationPaymentFromComponent,
+  );
+};

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

@@ -355,6 +355,10 @@ function createElementsToShowRemainingGiftCardAmount() {
     removeGiftCards();
     giftCardCancelButton.classList.add('invisible');
     giftCardAddButton.style.display = 'block';
+    // Emit a custom event instead of calling renderGenericComponent() directly,
+    // to avoid circular dependency
+    const event = new Event('renderGenericComponentCalled');
+    document.dispatchEvent(event);
   });
 
   remainingAmountContainer.appendChild(remainingAmountStart);

src/cartridges/int_adyen_overlay/cartridge/scripts/adyenSessions.js

@@ -32,18 +32,26 @@ const AdyenLogs = require('*/cartridge/scripts/adyenCustomLogs');
 
 function createSession(basket, customer, countryCode) {
   try {
-
     let sessionsRequest = {};
 
     // There is no basket for myAccount session requests
     if(basket) {
+      const getRemainingAmount = (giftCardResponse) => {
+          if (giftCardResponse && JSON.parse(giftCardResponse).remainingAmount) {
+              return JSON.parse(giftCardResponse).remainingAmount;
+          }
+          return {
+              currency: basket.currencyCode,
+              value: AdyenHelper.getCurrencyValueForApi(basket.getTotalGrossPrice()).value,
+          };
+      };
+
+      const amount = getRemainingAmount(session.privacy.giftCardResponse);
+
       //TODO: Change AdyenHelper so that this object can have a different name. Not creating a payment request here
       let paymentRequest = {
         merchantAccount: AdyenConfigs.getAdyenMerchantAccount(),
-        amount: {
-          currency: basket.currencyCode,
-          value: AdyenHelper.getCurrencyValueForApi(basket.getTotalGrossPrice()).value,
-        },
+        amount,
       };
 
       // Add Risk data