fix(credit-card): fix updating installment list, add transition

[skip ci]
ecomplus · Apr 19, 2020 · 5125b5f · 5125b5f
1 parent 6a926d8
commit 5125b5f
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 45 deletions.
diff --git a/@ecomplus/storefront-app/src/components/html/EcCreditCard.html b/@ecomplus/storefront-app/src/components/html/EcCreditCard.html
@@ -127,41 +127,49 @@
   </div>
 
   <div
-    v-if="installmentOptions && installmentOptions.length"
+    v-if="installmentList.length || isLoadingInstallments"
     class="form-group"
   >
     <label for="ec-credit-card-installment">
       {{ i18n('ParcelIn') }}
     </label>
 
-    <select
-      v-if="!isLoadingInstallments"
-      class="custom-select"
-      id="ec-credit-card-installment"
-      v-model="card.installment"
+    <transition-group
+      enter-active-class="animated fadeInDown"
+      leave-active-class="d-none"
     >
-      <option :value="1">
-        {{ formatMoney(amount.total) }}
-        {{ i18n('AtSight').toLowerCase() }}
-      </option>
-      <option
-        v-for="({ number, value, tax }) in installmentList"
-        :value="number"
+      <select
+        key="installments"
+        v-if="!isLoadingInstallments"
+        class="custom-select"
+        id="ec-credit-card-installment"
+        v-model="card.installment"
       >
-        {{ `${number}x ${i18n('Of').toLowerCase()} ${formatMoney(value)}` }}
-        <template v-if="!tax">
-          {{ i18n('InterestFree').toLowerCase() }}
-        </template>
-      </option>
-    </select>
+        <option :value="1">
+          {{ formatMoney(amount.total) }}
+          {{ i18n('AtSight').toLowerCase() }}
+        </option>
+        <option
+          v-for="({ number, value, tax }) in installmentList"
+          v-if="number > 1"
+          :value="number"
+        >
+          {{ `${number}x ${i18n('Of').toLowerCase()} ${formatMoney(value)}` }}
+          <template v-if="!tax">
+            {{ i18n('InterestFree').toLowerCase() }}
+          </template>
+        </option>
+      </select>
 
-    <div
-      v-else
-      class="spinner-grow"
-      role="status"
-    >
-      <span class="sr-only">Loading...</span>
-    </div>
+      <div
+        key="loading"
+        v-else
+        class="spinner-grow"
+        role="status"
+      >
+        <span class="sr-only">Loading...</span>
+      </div>
+    </transition-group>
   </div>
 
   <button class="btn btn-lg btn-block btn-success" type="submit">

diff --git a/@ecomplus/storefront-app/src/components/js/EcCreditCard.js b/@ecomplus/storefront-app/src/components/js/EcCreditCard.js
@@ -177,6 +177,27 @@ export default {
         .cvv(this.card.cvv, this.activeBrand !== 'american-express' ? 3 : 4).isValid
     },
 
+    updateInstallmentList () {
+      const cardInstallments = this.jsClient.cc_installments
+      if (cardInstallments && cardInstallments.function) {
+        const installmentList = window[cardInstallments.function]({
+          number: this.card.bin,
+          amount: this.amount.total
+        })
+        if (cardInstallments.is_promise) {
+          this.isLoadingInstallments = true
+          installmentList
+            .then(installmentList => {
+              this.installmentList = installmentList
+            }).finally(() => {
+              this.isLoadingInstallments = false
+            })
+        } else {
+          this.installmentList = installmentList
+        }
+      }
+    },
+
     generateCardHash () {
       return this.loadPromise.then(() => {
         const cardHash = this.jsClient.cc_hash
@@ -290,30 +311,19 @@ export default {
       this.numberValidated = this.numberPotentiallyValid = false
       const numberCheck = cardValidator.number(bin)
       if (numberCheck.isPotentiallyValid && numberCheck.card) {
-        this.activeBrand = numberCheck.card.type
+        if (this.activeBrand !== numberCheck.card.type) {
+          this.activeBrand = numberCheck.card.type
+          if (this.activeBrand) {
+            this.updateInstallmentList()
+          }
+        } else if (!this.installmentList.length && this.card.bin.length >= 6) {
+          this.updateInstallmentList()
+        }
         if (numberCheck.isValid) {
           this.numberValidated = this.numberPotentiallyValid = true
         } else {
           this.numberPotentiallyValid = numberCheck.isPotentiallyValid
         }
-        const cardInstallments = this.jsClient.cc_installments
-        if (cardInstallments && cardInstallments.function) {
-          const installmentList = window[cardInstallments.function]({
-            number: this.card.bin,
-            amount: this.amount.total
-          })
-          if (cardInstallments.is_promise) {
-            this.isLoadingInstallments = true
-            installmentList
-              .then(installmentList => {
-                this.installmentList = installmentList
-              }).finally(() => {
-                this.isLoadingInstallments = false
-              })
-          } else {
-            this.installmentList = installmentList
-          }
-        }
       } else {
         this.activeBrand = ''
       }