optmize UI and hide agreements if it is disable

airwallex · Nov 7, 2024 · 9037307 · 9037307
1 parent be1fe98
commit 9037307
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 19 deletions.
diff --git a/view/frontend/web/js/view/payment/method-renderer/express/applepay.js b/view/frontend/web/js/view/payment/method-renderer/express/applepay.js
@@ -36,7 +36,7 @@ define([
                 utils.initCheckoutPageExpressCheckoutClick();
                 if (that.deviceSupportApplePay()) {
                     $(".express-title").show();
-                    $(".airwallex-express-checkout .checkout-agreements").show();
+                    utils.showAgreements();
                 } else {
                     if (!that.isGooglePayActive()) $(".airwallex-recaptcha").hide();
                 }

diff --git a/view/frontend/web/js/view/payment/method-renderer/express/googlepay.js b/view/frontend/web/js/view/payment/method-renderer/express/googlepay.js
@@ -23,7 +23,7 @@ define([
             el.addEventListener('onReady', (event) => {
                 utils.initCheckoutPageExpressCheckoutClick();
                 $(".express-title").show();
-                $(".airwallex-express-checkout .checkout-agreements").show();
+                utils.showAgreements();
             });
             this.attachEvents(that);
             utils.loadRecaptcha(that.isShowRecaptcha);

diff --git a/view/frontend/web/js/view/payment/redirect-method.js b/view/frontend/web/js/view/payment/redirect-method.js
@@ -122,46 +122,66 @@ define([
                     return false;
                 }
                 if (window.checkoutConfig.quoteData.quote_currency_code === targetCurrency) return true;
-                if (targetCurrency === window.checkoutConfig.quoteData.base_currency_code) return true;
+                if (targetCurrency === window.checkoutConfig.quoteData.base_currency_code && $(".totals.charge").length) return true;
                 let msg = "<span style='color: #1e1e1e;'>Klarna is not available in "
                     + window.checkoutConfig.quoteData.quote_currency_code + " for your billing country. We have converted your total to "
                     + targetCurrency + " for you to complete your payment.</span>";
                 this.validationError(msg);
+                if (targetCurrency === window.checkoutConfig.quoteData.base_currency_code) {
+                    this.showYouPay({
+                        payment_currency: window.checkoutConfig.quoteData.quote_currency_code,
+                        target_currency: targetCurrency,
+                        client_rate: (1/window.checkoutConfig.quoteData.base_to_quote_rate).toFixed(4),
+                        target_amount: parseFloat(window.checkoutConfig.quoteData.base_grand_total).toFixed(2),
+                    });
+                    return;
+                }
                 let switcher = await storage.post(url.build('rest/V1/airwallex/currency/switcher'), JSON.stringify({
                     'payment_currency': window.checkoutConfig.quoteData.quote_currency_code,
                     'target_currency': targetCurrency,
                     'amount': window.checkoutConfig.quoteData.grand_total,
                 }), undefined, 'application/json', {});
                 let switchers = JSON.parse(switcher);
-                this.showYouPay(switchers)
+                this.showYouPay(switchers);
             }
             return true;
         },
 
         showYouPay(switchers = {}) {
             if (!$('.awx-you-pay').length) {
                 $(".table-totals tbody").append(`
-                    <tr class="awx-you-pay">
-                        <th class="mark" scope="row">
-                            <strong style="font-size: 1.8rem">` + $t('You Pay') + `</strong>
-                        </th>
-                        <td class="amount">
-                            <div class="switcher-tip">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-                                    <path fillRule="evenodd" clipRule="evenodd" d="M10.8751 6.00603C11.2227 5.84685 11.641 5.97553 11.836 6.31338C12.0431 6.6721 11.9202 7.13079 11.5615 7.33789L9.93769 8.27539C9.57897 8.4825 9.12028 8.3596 8.91317 8.00088L7.97567 6.37708C7.76857 6.01836 7.89147 5.55967 8.25019 5.35256C8.60891 5.14545 9.0676 5.26836 9.27471 5.62708L9.36849 5.78951C9.25886 4.02452 7.79267 2.62695 6.00007 2.62695C5.0122 2.62695 4.12347 3.05137 3.50626 3.72782L2.44482 2.66638C3.33417 1.71884 4.598 1.12695 6.00007 1.12695C8.69245 1.12695 10.8751 3.30957 10.8751 6.00195C10.8751 6.00331 10.8751 6.00467 10.8751 6.00603ZM1.12576 6.08873L1.12513 6.0891C0.766406 6.2962 0.307713 6.1733 0.100606 5.81458C-0.106501 5.45586 0.0164058 4.99717 0.375125 4.79006L1.99892 3.85256C2.35764 3.64545 2.81633 3.76836 3.02344 4.12708L3.96094 5.75088C4.16805 6.1096 4.04514 6.56829 3.68642 6.77539C3.3277 6.9825 2.86901 6.8596 2.6619 6.50088L2.66152 6.50022C2.90238 8.12792 4.30533 9.37695 6 9.37695C6.85293 9.37695 7.63196 9.06056 8.22613 8.53874L9.28834 9.60095C8.42141 10.3935 7.26716 10.877 6 10.877C3.3366 10.877 1.17206 8.74108 1.12576 6.08873Z" fill="#B0B6BF" />
-                                </svg>
-                                <div>1 ${switchers.payment_currency} = ${switchers.client_rate} ${switchers.target_currency}</div>
-                            </div>
-                            <div class="awx-amount">${switchers.target_amount} ${switchers.target_currency}</div>
-                        </td>
-                    </tr>
+                    <tr class="awx-you-pay"></tr>
                 `);
             }
+            $('.awx-you-pay').html(`
+                <th class="mark" scope="row">
+                    <strong style="font-size: 1.8rem">` + $t('You Pay') + `</strong>
+                </th>
+                <td class="amount">
+                    <div class="switcher-tip">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                            <path fillRule="evenodd" clipRule="evenodd" d="M10.8751 6.00603C11.2227 5.84685 11.641 5.97553 11.836 6.31338C12.0431 6.6721 11.9202 7.13079 11.5615 7.33789L9.93769 8.27539C9.57897 8.4825 9.12028 8.3596 8.91317 8.00088L7.97567 6.37708C7.76857 6.01836 7.89147 5.55967 8.25019 5.35256C8.60891 5.14545 9.0676 5.26836 9.27471 5.62708L9.36849 5.78951C9.25886 4.02452 7.79267 2.62695 6.00007 2.62695C5.0122 2.62695 4.12347 3.05137 3.50626 3.72782L2.44482 2.66638C3.33417 1.71884 4.598 1.12695 6.00007 1.12695C8.69245 1.12695 10.8751 3.30957 10.8751 6.00195C10.8751 6.00331 10.8751 6.00467 10.8751 6.00603ZM1.12576 6.08873L1.12513 6.0891C0.766406 6.2962 0.307713 6.1733 0.100606 5.81458C-0.106501 5.45586 0.0164058 4.99717 0.375125 4.79006L1.99892 3.85256C2.35764 3.64545 2.81633 3.76836 3.02344 4.12708L3.96094 5.75088C4.16805 6.1096 4.04514 6.56829 3.68642 6.77539C3.3277 6.9825 2.86901 6.8596 2.6619 6.50088L2.66152 6.50022C2.90238 8.12792 4.30533 9.37695 6 9.37695C6.85293 9.37695 7.63196 9.06056 8.22613 8.53874L9.28834 9.60095C8.42141 10.3935 7.26716 10.877 6 10.877C3.3366 10.877 1.17206 8.74108 1.12576 6.08873Z" fill="#B0B6BF" />
+                        </svg>
+                        <div>1 ${switchers.payment_currency} = ${switchers.client_rate} ${switchers.target_currency}</div>
+                    </div>
+                    <div class="awx-amount">${switchers.target_amount} ${switchers.target_currency}</div>
+                </td>    
+            `);
             $('.awx-you-pay').show();
             $(".totals.charge").hide();
         },
 
         hideYouPay() {
+            // if (!$(".totals.charge").length) {
+            //     $(".table-totals tbody").append(`
+            //         <tr class="totals charge awx">
+            //             <th class="mark" data-bind="i18n: basicCurrencyMessage" scope="row">You will be charged for</th>
+            //             <td class="amount">
+            //                 <span class="price" data-bind="text: getBaseValue(), attr: {'data-th': basicCurrencyMessage}" data-th="You will be charged for">${parseFloat(window.checkoutConfig.quoteData.base_grand_total).toFixed(2)} ${window.checkoutConfig.quoteData.base_currency_code}</span>
+            //             </td>
+            //         </tr>
+            //     `);
+            // }
             $('.awx-you-pay').hide();
             $(".totals.charge").show();
         },
@@ -191,7 +211,10 @@ define([
                 $body.trigger('processStart');
 
                 try {
-                    if (!await this.testPaymentMethod()) return;
+                    if (!await this.testPaymentMethod()) {
+                        $body.trigger('processStop');
+                        return;
+                    }
 
                     const payload = {
                         cartId: quote.getQuoteId(),

diff --git a/view/frontend/web/js/view/payment/utils.js b/view/frontend/web/js/view/payment/utils.js
@@ -163,6 +163,15 @@ define([
             return status;
         },
 
+        showAgreements() {
+            if (!this.isCheckoutPage()) return;
+            let agreementsConfig = window.checkoutConfig.checkoutAgreements || {};
+            if (agreementsConfig.isEnabled && $(this.agreementSelector).length) {
+                $(".airwallex-express-checkout .checkout-agreements").show();
+                return;
+            }
+        },
+
         initCheckoutPageExpressCheckoutAgreement() {
             if (this.isCheckoutPage()) {
                 let agreementsConfig = window.checkoutConfig.checkoutAgreements || {};