Merge pull request #1024 from Adyen/release/23.3.1

Release/23.3.1

.github/CODEOWNERS

@@ -1 +1 @@
-* @maassenbas @zaiddreakh @amihajlovski @shanikantsingh @zenit2001
+* @maassenbas @amihajlovski @shanikantsingh @zenit2001

.github/pull_request_template.md

@@ -1,10 +1,12 @@
 <!-- 🎉 Thank you for submitting a pull request! 🎉  -->
 
 ## Summary
-<!--
 Describe the changes proposed in this pull request:
-- What is the motivation for this change? 
+- What is the motivation for this change?
 - What existing problem does this pull request solve?
--->
 
-**Fixed issue**:  <!-- #-prefixed issue number -->
+
+## Tested scenarios
+Description of tested scenarios:
+
+**Fixed issue**:  <!-- #-prefixed issue number -->

.github/workflows/E2E_SFRA.yml

@@ -97,7 +97,7 @@ jobs:
         run: npx playwright install --with-deps
       - name: run e2e tests full coverage
         working-directory: adyen-salesforce-commerce-cloud/tests/playwright/
-        if: github.event.pull_request.base.ref == 'main' || github.event.pull_request.base.ref == 'develop'
+        if: github.event.pull_request.base.ref == 'main'
         run: npm run test:ci
         env:
           SANDBOX_HTTP_AUTH_USERNAME: ${{ secrets.SANDBOX_HTTP_AUTH_USERNAME }}
@@ -110,7 +110,7 @@ jobs:
           SFCC_HOSTNAME: ${{ secrets[matrix.sfcc-hostname-secret] }}
       - name: run e2e tests quick coverage
         working-directory: adyen-salesforce-commerce-cloud/tests/playwright/
-        if: github.event.pull_request.base.ref != 'main' && github.event.pull_request.base.ref != 'develop'
+        if: github.event.pull_request.base.ref != 'main'
         run: npm run test:ci:quick
         env:
           SANDBOX_HTTP_AUTH_USERNAME: ${{ secrets.SANDBOX_HTTP_AUTH_USERNAME }}

.gitignore

@@ -7,4 +7,5 @@ dw.json
 /coverage/
 screenshots/
 playwright-report/
+test-results/
 Vagrantfile

cartridges/bm_adyen/cartridge/static/default/css/configurationSettings.css

@@ -494,4 +494,22 @@ ul{
     font-size: 14px;
     line-height: 24px;
     color: #69778C;
-}
+}
+
+#addRuleButton{
+    position: relative; 
+    margin-inline-end: auto;
+    margin-bottom : 10px;
+}
+
+#removeRuleButton {
+    border: none;
+    background-color: transparent;
+    outline: none;
+}
+
+#adyen_installments_div{
+    font-family: 'Fakt';
+    font-style: normal;
+    font-size: 14px;
+}

cartridges/bm_adyen/cartridge/static/default/js/adyenSettings.js

@@ -14,10 +14,12 @@ const expressPaymentMethods = [{
 document.addEventListener('DOMContentLoaded', () => {
   const form = document.querySelector('#settingsForm');
   const troubleshootingForm = document.querySelector('#troubleshootingForm');
+  const cardSettingsForm = document.getElementById('adyen_installments_div');
   const submitButton = document.querySelector('#settingsFormSubmitButton');
   const cancelButton = document.querySelector('#settingsFormCancelButton');
   const formButtons = Array.from(document.getElementsByClassName('formButton'));
   const testConnectionButton = document.querySelector('#testConnectionButton');
+  const addRuleButton = document.getElementById('addRuleButton');
   const togglePassword = document.querySelector('#togglePassword');
   const toggleHmacKey = document.querySelector('#toggleHmacKey');
   const toggleApi = document.querySelector('#toggleApi');
@@ -40,6 +42,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const adyenGivingLogo = document.querySelector('#fileDropBoxGivingLogo');
   const params = 'resizable=yes,width=1000,height=500,left=100,top=100';
   const draggableList = document.getElementById('draggable-list');
+  let ruleCounter = 0;
+  const installmentsResult = {};
   const listItems = [];
   let dragStartIndex;
   function settingChanged(key, value) {
@@ -220,6 +224,94 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }, 1000);
   }
+  function removeRule(id) {
+    const element = document.getElementById(`rule${id}`);
+    if (element) {
+      element.remove();
+    }
+    delete installmentsResult[id];
+  }
+  function createRuleElement(id, ruleData) {
+    const el = document.createElement('div');
+    el.id = `rule${id}`;
+    el.classList.add('form-group');
+    el.innerHTML = `
+      <table class="table">
+        <tr>
+          <td>
+            <label for="installmentsAmount${id}">Minimum Amount</label>
+            <div>
+              <input type="number" min="0" id="installmentsAmount${id}" value="${ruleData[0]}">
+            </div>
+          </td>
+          <td>
+            <label for="installmentsNumber${id}">Number of installments</label>
+            <div>
+              <input type="number" min="2" id="installmentsNumber${id}" value="${ruleData[1]}">
+            </div>
+          </td>
+          <td>
+            <label for="card-options${id}">Allowed credit card types</label>
+            <div id="cards-dropdown-options">
+              <select id="card-options${id}" multiple required>
+                <option class="dropdown-option" value="amex" id="amexCard">Amex</option>
+                <option class="dropdown-option" value="elo" id="eloCard">Elo</option>
+                <option class="dropdown-option" value="hipercard" id="hipercardCard">Hipercard</option>
+                <option class="dropdown-option" value="mc" id="mcCard">Master Card</option>
+                <option class="dropdown-option" value="visa" id="visaCard">Visa</option>
+              </select>
+            </div>
+          </td>
+          <td>
+            <button type="button" id="removeRuleButton">
+              <img src="${window.binIcon}"/>
+            </button>
+          </td>
+        </tr>
+      </table>
+    `;
+    const removeButton = el.querySelector('#removeRuleButton');
+    removeButton.setAttribute('data-rule-counter', id);
+    removeButton.addEventListener('click', () => {
+      const counter = parseInt(removeButton.getAttribute('data-rule-counter'), 10);
+      removeRule(counter);
+      enableformButtons();
+      settingChanged('AdyenCreditCardInstallments', JSON.stringify(Object.values(installmentsResult)));
+    });
+    document.getElementById('adyen_installments_div').appendChild(el);
+    const cardOptionsSelect = document.getElementById(`card-options${ruleCounter}`);
+    ruleData[2].forEach(cardType => {
+      const option = cardOptionsSelect.querySelector(`[value="${cardType}"]`);
+      if (option) {
+        option.selected = true;
+      }
+    });
+  }
+  function addRule() {
+    ruleCounter += 1;
+    const ruleData = [0, 2, []]; // default values for installments
+    createRuleElement(ruleCounter, ruleData);
+  }
+  function getRuleValues(id) {
+    const installment = [];
+    const installmentAmount = document.getElementById(`installmentsAmount${id}`).value;
+    const installmentNumber = document.getElementById(`installmentsNumber${id}`).value;
+    const selectElement = document.getElementById(`card-options${id}`);
+    const selectedOptions = Array.from(selectElement.selectedOptions).map(option => option.value);
+    installment.push(parseInt(installmentAmount, 10), parseInt(installmentNumber, 10), selectedOptions);
+    installmentsResult[id] = installment;
+  }
+  function populateRules(savedData) {
+    savedData.forEach(ruleData => {
+      ruleCounter += 1;
+      createRuleElement(ruleCounter, ruleData);
+      installmentsResult[ruleCounter] = ruleData;
+    });
+  }
+  if (window.installments.value) {
+    const savedInstallments = JSON.parse(window.installments.value);
+    populateRules(savedInstallments);
+  }
   function getImageName(imageUrl) {
     const parts = imageUrl.split('/');
     const imageName = parts.pop();
@@ -258,6 +350,17 @@ document.addEventListener('DOMContentLoaded', () => {
   adyenGivingLogo.addEventListener('click', uploadAdyenGivingLogo);
   window.addEventListener('load', printBackgroundImageName);
   window.addEventListener('load', printLogoImageName);
+  addRuleButton.addEventListener('click', addRule);
+
+  // form for installments
+  cardSettingsForm.addEventListener('input', () => {
+    getRuleValues(ruleCounter);
+    const selectElement = document.getElementById(`card-options${ruleCounter}`);
+    const selectedOptions = Array.from(selectElement.selectedOptions);
+    if (selectedOptions.length) {
+      settingChanged('AdyenCreditCardInstallments', JSON.stringify(Object.values(installmentsResult)));
+    }
+  });
   adyenGivingBackground.addEventListener('click', saveAndHideAlerts);
   adyenGivingLogo.addEventListener('click', saveAndHideAlerts);
   troubleshootingForm.addEventListener('input', () => {
@@ -357,6 +460,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (data.success) {
       const alertBar = document.getElementById('saveChangesAlert');
       alertBar.classList.add('show');
+      addRuleButton.classList.remove('disabled');
       window.setTimeout(() => {
         alertBar.classList.remove('show');
       }, 2000);

cartridges/bm_adyen/cartridge/templates/default/adyenSettings/settingCards/cardSettings.isml

@@ -1,5 +1,8 @@
 <iscontent type="text/html" charset="UTF-8" compact="true">
 <isset name="AdyenConfigs" value="${require('*/cartridge/scripts/util/adyenConfigs')}" scope="page"/>
+<script>
+    window.binIcon = "${URLUtils.staticURL('icons/bin.svg')}";
+</script>
 <div id="cardSettings" class="card bg-white mt-4">
    <div class="card-body">
       <h5 class="card-title mb-0">
@@ -24,12 +27,24 @@
             </div>
          </div>
          <div class="form-group">
-            <label class="form-title mb-0" for="installments">Credit card installments <small class="text-secondary">(optional)</small></label>
-            <small id="installmentsHelp" class="form-text mb-1">
-            If you’re offering an installments option to your shoppers, go to <a class="text-primary" href="https://adyen.github.io/adyen-salesforce-commerce-cloud/" target="_blank">our GitHub</a> to create the required configuration value and paste it here.
-            </small>
-            <div class="input-fields">
-               <input type="text" class="form-control" name="AdyenCreditCardInstallments" id="installments" aria-describedby="installmentsHelp" value="${AdyenConfigs.getCreditCardInstallments() || ''}">    
+            <div class='row'>
+               <div class="switch-button">
+                  <div class="form-check form-switch">
+                     <input class="form-check-input" type="checkbox" name="AdyenInstallments_enabled" id="flexSwitchCheckChecked" data-bs-toggle="collapse" data-bs-target=".adyen-installments-settings" ${AdyenConfigs.getAdyenInstallmentsEnabled() ? 'checked': 'unchecked'}>
+                  </div>
+               </div>
+            </div>
+            <label class="form-title mb-0" for="installments">Enable credit card installments <small class="text-secondary">(optional)</small></label>
+            <small class="form-text mb-1" id="installmentsHelp">If you’re offering an installments option to your shoppers, please configure them below.</small>
+         </div>
+         <div class="input-fields">
+            <input type="hidden" class="form-control" name="AdyenCreditCardInstallments" id="installments" value="${AdyenConfigs.getCreditCardInstallments() || ''}">    
+         </div>
+         <div class="adyen-installments-settings collapse ${AdyenConfigs.getAdyenInstallmentsEnabled() ? 'show': ''}">
+            <div class="input-fields" id="adyen_installments_div">
+               <div class="d-grid gap-2 d-md-flex justify-content-md-end form-buttons">
+                  <button type="button" id="addRuleButton" class="btn btn-primary border formButton">Add Rule</button>
+               </div>
             </div>
          </div>
       </div>

cartridges/int_adyen_SFRA/cartridge/client/default/js/adyenCheckout.js

@@ -31,7 +31,7 @@ if (window.cardholderNameBool !== 'null') {
   store.checkoutConfiguration.paymentMethodsConfiguration.card.hasHolderName = true;
   store.checkoutConfiguration.paymentMethodsConfiguration.card.holderNameRequired = true;
 }
-if (window.googleMerchantID !== 'null' && window.Configuration.environment === 'live') {
+if (window.googleMerchantID !== 'null' && window.Configuration.environment.includes('live')) {
   var id = 'merchantId';
   store.checkoutConfiguration.paymentMethodsConfiguration.paywithgoogle.configuration[id] = window.googleMerchantID;
   store.checkoutConfiguration.paymentMethodsConfiguration.googlepay.configuration[id] = window.googleMerchantID;

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

@@ -324,7 +324,9 @@ function getAmazonpayConfig() {
 function getApplePayConfig() {
   return {
     showPayButton: true,
+    buttonColor: 'black',
     onSubmit: function onSubmit(state, component) {
+      $('#dwfrm_billing').trigger('submit');
       helpers.assignPaymentMethodValue();
       helpers.paymentFromComponent(state.data, component);
     }