Merge pull request #103 from BlueFinchCommerce/feature/above-payments-extension

Feature/above payments extension

Author: Nehaenko

view/frontend/web/js/checkout/dist/main.css

@@ -129,12 +129,13 @@ export default {
     if (!this.locale) {
       await this.getInitialConfig();
     }
-    this.applyButtonText = window.bluefinchCheckout?.[this.applyButtonTextId] || this.$t('orderSummary.applyBtn');
-    this.removeButtonText = window.bluefinchCheckout?.[this.removeButtonTextId] || this.$t('orderSummary.removeBtn');
+    const translate = typeof this.$t === 'function' ? this.$t.bind(this) : (key) => key;
+    this.applyButtonText = window.bluefinchCheckout?.[this.applyButtonTextId] || translate('orderSummary.applyBtn');
+    this.removeButtonText = window.bluefinchCheckout?.[this.removeButtonTextId] || translate('orderSummary.removeBtn');
     this.couponDiscountText = window.bluefinchCheckout?.[this.couponDiscountTextId]
-      || this.$t('orderSummary.couponDiscountTitle');
+      || translate('orderSummary.couponDiscountTitle');
     this.couponDiscountPlaceholderText = window.bluefinchCheckout?.[this.couponDiscountPlaceholderTextId]
-      || this.$t('orderSummary.couponDiscount.placeholder');
+      || translate('orderSummary.couponDiscount.placeholder');
   },
   computed: {
     ...mapState(useCartStore, ['cart', 'discountErrorMessage']),

view/frontend/web/js/checkout/dist/main.min.js

@@ -129,11 +129,12 @@ export default {
     if (!this.locale) {
       await this.getInitialConfig();
     }
-    this.applyButtonText = window.bluefinchCheckout?.[this.applyButtonTextId] || this.$t('orderSummary.applyBtn');
-    this.removeButtonText = window.bluefinchCheckout?.[this.removeButtonTextId] || this.$t('orderSummary.removeBtn');
-    this.giftCardText = window.bluefinchCheckout?.[this.giftCardTextId] || this.$t('orderSummary.giftDiscountTitle');
+    const translate = typeof this.$t === 'function' ? this.$t.bind(this) : (key) => key;
+    this.applyButtonText = window.bluefinchCheckout?.[this.applyButtonTextId] || translate('orderSummary.applyBtn');
+    this.removeButtonText = window.bluefinchCheckout?.[this.removeButtonTextId] || translate('orderSummary.removeBtn');
+    this.giftCardText = window.bluefinchCheckout?.[this.giftCardTextId] || translate('orderSummary.giftDiscountTitle');
     this.giftCardPlaceholderText = window.bluefinchCheckout?.[this.giftCardPlaceholderTextId]
-      || this.$t('orderSummary.giftCardDiscount.placeholder');
+      || translate('orderSummary.giftCardDiscount.placeholder');
   },
   computed: {
     ...mapState(useCartStore, ['cart', 'giftCardErrorMessage']),

view/frontend/web/js/checkout/src/components/Steps/GlobalComponents/OrderSummary/CouponDiscount/CouponDiscount.vue

@@ -15,6 +15,13 @@
     <SavedShippingMethod v-if="!cart.is_virtual" />
     <Rewards v-if="rewardsEnabled" />
     <StoreCredit />
+
+    <component
+      :is="abovePaymentMethod"
+      v-for="abovePaymentMethod in abovePaymentMethods"
+      :key="abovePaymentMethod"
+    />
+
     <div class="payment-page">
       <div class="payment-form">
         <ProgressBar />
@@ -143,6 +150,7 @@ import additionalVaultedMethods from '@/extensions/additionalVaultedMethods';
 import paymentMethods from '@/extensions/paymentMethods';
 import paymentMethodsPrimary from '@/extensions/paymentMethodsPrimary';
 import ageCheckerExtensions from '@/extensions/ageCheckerExtensions';
+import abovePaymentMethods from '@/extensions/abovePaymentMethods';
 
 export default {
   name: 'PaymentPage',
@@ -163,13 +171,15 @@ export default {
     ...paymentMethods(),
     ...paymentMethodsPrimary(),
     ...ageCheckerExtensions(),
+    ...abovePaymentMethods(),
   },
   data() {
     return {
       additionalPaymentMethods: [],
       additionalVaultedMethods: [],
       additionalPaymentMethodsPrimary: [],
       ageCheckerExtensions: [],
+      abovePaymentMethods: [],
       storedStepText: '',
       paymentKey: 0,
     };
@@ -222,6 +232,7 @@ export default {
     this.additionalPaymentMethodsPrimary = Object.keys(paymentMethodsPrimary());
     this.additionalVaultedMethods = Object.keys(additionalVaultedMethods());
     this.ageCheckerExtensions = Object.keys(ageCheckerExtensions());
+    this.abovePaymentMethods = Object.keys(abovePaymentMethods());
 
     this.trackStep({
       step: 3,

view/frontend/web/js/checkout/src/components/Steps/GlobalComponents/OrderSummary/GiftCardDiscount/GiftCardDiscount.vue

@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export default () => {
+  const abovePaymentMethods = {};
+  // Look at window.bluefinchCheckout.abovePaymentMethods object to trigger the loading of all extra details.
+  if (window.bluefinchCheckout?.abovePaymentMethods) {
+    Object.keys(window.bluefinchCheckout.abovePaymentMethods).forEach((detailField) => {
+      abovePaymentMethods[detailField] = defineAsyncComponent(() => (
+        import(
+          /* @vite-ignore */
+          window.bluefinchCheckout.abovePaymentMethods[detailField]
+        )));
+    });
+  }
+
+  return abovePaymentMethods;
+};

view/frontend/web/js/checkout/src/components/Steps/PaymentPage/PaymentPage.vue

@@ -2,7 +2,23 @@ export default () => {
   const mageCache = JSON.parse(localStorage.getItem('mage-cache-storage'));
 
   if (!mageCache.cart) {
-    return [];
+    return {
+      subtotalAmount: 0,
+      grandTotalAmount: 0,
+      grand_total: {
+        value: 0,
+        currency: undefined,
+      },
+      subtotal_including_tax: {
+        value: 0,
+        currency: undefined,
+      },
+      subtotal_excluding_tax: {
+        value: 0,
+        currency: undefined,
+      },
+      discounts: [],
+    };
   }
 
   const { subtotalAmount, currencyCode } = mageCache.cart;

view/frontend/web/js/checkout/src/extensions/abovePaymentMethods.js

@@ -379,6 +379,7 @@
     --input__placeholder-font-color: var(--color__primary-grey1);
     --input__placeholder-font-weight: var(--font-weight__medium);
     --input__border-left-radius: var(--input__border-radius) 0 0 var(--input__border-radius);
+    --input__border-right-radius: 0 var(--input__border-radius) var(--input__border-radius) 0;
     --input__inline-label-display: flex;
 
     //