refactor(app/checkout): not auto-selecting subscription periodicity a…

…nymore rendering subscription periodicity as required and labeled <select> by default on credit card form new opt prop `gatewayOptionsLabel` on <CreditCardForm>
ecomplus · Sep 21, 2023 · 5c17404 · 5c17404
1 parent f62d234
commit 5c17404
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/@ecomplus/storefront-app/src/components/html/CreditCardForm.html b/@ecomplus/storefront-app/src/components/html/CreditCardForm.html
@@ -24,11 +24,22 @@
     v-if="gatewayOptions && gatewayOptions.length"
     class="form-group"
   >
+    <label
+      v-if="gatewayOptionsLabel"
+      for="credit-card-gateway"
+    >
+      {{ gatewayOptionsLabel }}
+    </label>
     <select
       class="custom-select"
       id="credit-card-gateway"
       @change="ev => $emit('select-gateway', gatewayOptions[ev.target.value])"
+      required
     >
+      <option
+        v-if="gatewayOptionsLabel"
+        value=""
+      >--</option>
       <option
         v-for="({ label }, i) in gatewayOptions"
         :value="i"

diff --git a/@ecomplus/storefront-app/src/components/html/PaymentMethods.html b/@ecomplus/storefront-app/src/components/html/PaymentMethods.html
@@ -138,6 +138,7 @@
             <credit-card-form
               v-if="shouldUseCardForm"
               :gateway-options="cardFormGatewayOptions"
+              :gateway-options-label="i19chooseSubscriptionPeriod"
               @select-gateway="onCardFormSelectGateway"
               :amount="amount"
               :check-holder="customerName"

diff --git a/@ecomplus/storefront-app/src/components/js/CreditCardForm.js b/@ecomplus/storefront-app/src/components/js/CreditCardForm.js
@@ -51,6 +51,7 @@ export default {
     isCompany: Boolean,
     installmentOptions: Array,
     gatewayOptions: Array,
+    gatewayOptionsLabel: String,
     jsClient: Object,
     jsClientLoad: Promise,
     isPayerDocRequired: {

diff --git a/@ecomplus/storefront-app/src/components/js/PaymentMethods.js b/@ecomplus/storefront-app/src/components/js/PaymentMethods.js
@@ -2,6 +2,7 @@ import {
   i19anyPaymentMethodMsg,
   i19changePaymentMethod,
   i19checkout,
+  i19chooseSubscriptionPeriod,
   i19generateBillet,
   i19interestFree,
   i19ofDiscount,
@@ -90,6 +91,7 @@ export default {
   computed: {
     i19anyPaymentMethodMsg: () => i18n(i19anyPaymentMethodMsg),
     i19changePaymentMethod: () => i18n(i19changePaymentMethod),
+    i19chooseSubscriptionPeriod: () => i18n(i19chooseSubscriptionPeriod),
     i19checkout: () => i18n(i19checkout),
     i19generateBillet: () => i18n(i19generateBillet),
     i19interestFree: () => i18n(i19interestFree),