Hide divider if no giftcards enabled (#935)

* fix: hide giftcard divider if no giftcards available * fix: test html for render generic component test * chore: tests added for checking if giftcard container is hidden
Adyen · Jul 19, 2023 · a54f2e0 · a54f2e0
1 parent cf9729f
commit a54f2e0
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 33 deletions.
diff --git a/...ent/default/js/adyen_checkout/__tests__/__snapshots__/renderGenericComponent.test.js.snap b/...ent/default/js/adyen_checkout/__tests__/__snapshots__/renderGenericComponent.test.js.snap
@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Render Generic Component should hide giftcard container 1`] = `
+{
+  "amount": "mocked_amount",
+  "countryCode": "mocked_countrycode",
+  "paymentMethodsConfiguration": {
+    "amazonpay": {
+      "addressDetails": {
+        "addressLine1": "test",
+        "city": "test",
+        "countryCode": "test",
+        "name": "test test",
+        "phoneNumber": "test",
+        "postalCode": "test",
+        "stateOrRegion": "test",
+      },
+      "configuration": undefined,
+    },
+  },
+  "session": {
+    "adyenDescriptions": {},
+    "id": "mock_id",
+    "imagePath": "example.com",
+    "sessionData": "mock_session_data",
+  },
+}
+`;
+
 exports[`Render Generic Component should render 1`] = `
 {
   "amount": "mocked_amount",

diff --git a/..._SFRA/cartridge/client/default/js/adyen_checkout/__tests__/renderGenericComponent.test.js b/..._SFRA/cartridge/client/default/js/adyen_checkout/__tests__/renderGenericComponent.test.js
@@ -8,6 +8,37 @@ const { renderGenericComponent } = require('../renderGenericComponent');
 const { createSession } = require('../../commons');
 const { fetchGiftCards } = require('../../commons');
 const store = require('../../../../../store');
+const giftCardHtml = `
+      <div id="paymentMethodsList"></div>
+      <input type="radio" name="brandCode" value="card" />
+      <button value="submit-payment">Submit</button>
+      <div id="component_card"></div>
+      <div class="gift-card-selection"></div>
+      <div class="gift-card-separator"></div>
+      <div id="adyenPosTerminals">
+        <span>Child #1</span>
+      </div>
+      <div>
+        <input type="text" id="shippingFirstNamedefault" value="test">
+        <input type="text" id="shippingLastNamedefault" value="test">
+        <input type="text" id="shippingAddressOnedefault" value="test">
+        <input type="text" id="shippingAddressCitydefault" value="test">
+        <input type="text" id="shippingZipCodedefault" value="test">
+        <input type="text" id="shippingCountrydefault" value="test">
+        <input type="text" id="shippingPhoneNumberdefault" value="test">
+        <input type="text" id="shippingZipCodedefault" value="test">
+      </div>
+    `;
+const availableGiftCards = {
+  giftCards: [
+    {
+      orderAmount: {
+        currency: '',
+        value: '',
+      },
+    },
+  ],
+}
 
 beforeEach(() => {
   window.AdyenCheckout = jest.fn(async () => ({
@@ -35,41 +66,11 @@ beforeEach(() => {
     imagePath: 'example.com',
     adyenDescriptions: {},
   });
-
-  fetchGiftCards.mockReturnValue({
-    giftCards: [
-      {
-        orderAmount: {
-          currency: '',
-          value: '',
-        },
-      },
-    ],
-  });
 });
 describe('Render Generic Component', () => {
   it('should render', async () => {
-    document.body.innerHTML = `
-      <div id="paymentMethodsList"></div>
-      <input type="radio" name="brandCode" value="card" />
-      <button value="submit-payment">Submit</button>
-      <div id="component_card"></div>
-      <div class="gift-card-selection"></div>
-      <div id="adyenPosTerminals">
-        <span>Child #1</span>
-      </div>
-      <div>
-        <input type="text" id="shippingFirstNamedefault" value="test">
-        <input type="text" id="shippingLastNamedefault" value="test">
-        <input type="text" id="shippingAddressOnedefault" value="test">
-        <input type="text" id="shippingAddressCitydefault" value="test">
-        <input type="text" id="shippingZipCodedefault" value="test">
-        <input type="text" id="shippingCountrydefault" value="test">
-        <input type="text" id="shippingPhoneNumberdefault" value="test">
-        <input type="text" id="shippingZipCodedefault" value="test">
-      </div>
-    `;
-
+    fetchGiftCards.mockReturnValue(availableGiftCards);
+    document.body.innerHTML = giftCardHtml;
     store.componentsObj = { foo: 'bar', bar: 'baz' };
     store.checkoutConfiguration.paymentMethodsConfiguration = { amazonpay: {} };
     await renderGenericComponent();
@@ -79,4 +80,20 @@ describe('Render Generic Component', () => {
         document.querySelector('input[type=radio][name=brandCode]').value,
     ).toBeTruthy();
   });
+
+  it('should hide giftcard container', async () => {
+    fetchGiftCards.mockReturnValue({ giftCards: [] });
+    document.body.innerHTML = giftCardHtml;
+    store.componentsObj = { foo: 'bar', bar: 'baz' };
+    store.checkoutConfiguration.paymentMethodsConfiguration = { amazonpay: {} };
+    await renderGenericComponent();
+    expect(createSession).toBeCalled();
+    expect(store.checkoutConfiguration).toMatchSnapshot();
+    expect(
+      document.querySelector('.gift-card-selection').style.display,
+    ).toEqual('none');
+    expect(
+      document.querySelector('.gift-card-separator').style.display,
+    ).toEqual('none');
+  });
 });
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
@@ -185,6 +185,8 @@ function setGiftCardContainerVisibility() {
   if (availableGiftCards.length === 0) {
     const giftCardContainer = document.querySelector('.gift-card-selection');
     giftCardContainer.style.display = 'none';
+    const giftCardSeparator = document.querySelector('.gift-card-separator');
+    giftCardSeparator.style.display = 'none';
   }
 }
 

diff --git a/...idges/int_adyen_SFRA/cartridge/templates/default/checkout/billing/adyenComponentForm.isml b/...idges/int_adyen_SFRA/cartridge/templates/default/checkout/billing/adyenComponentForm.isml
@@ -70,7 +70,7 @@
      <input id="selectedIssuer" type="hidden" name="${adyenPaymentFields.issuer.htmlName}"/>
 
     <ul id="paymentMethodsList" class="payment-methods-container"></ul>
-    <div class="adyen-checkout__content-separator adyen-checkout-ctp__separator">
+    <div class="gift-card-separator adyen-checkout__content-separator adyen-checkout-ctp__separator">
         ${Resource.msg('separator.giftCard', 'adyen', null)}
     </div>
     <div class="gift-card-selection">