From 896ef4ef46b9f09c3a8081be4d776ad2e2ce9445 Mon Sep 17 00:00:00 2001
From: "v.carkaxhija" <vegim.carkaxhija@gmail.com>
Date: Mon, 14 Oct 2024 16:18:04 +0200
Subject: [PATCH] add Remaining amount under grand total

---
 .../layout/hyva_checkout_components.xml       |  3 +
 .../layout/hyva_checkout_index_index.xml      |  2 +-
 .../checkout/summary/remaining-amount.phtml   | 29 ++++++
 .../templates/component/payment/after.phtml   | 97 +++++++++----------
 4 files changed, 80 insertions(+), 51 deletions(-)
 create mode 100644 view/frontend/templates/checkout/summary/remaining-amount.phtml

diff --git a/view/frontend/layout/hyva_checkout_components.xml b/view/frontend/layout/hyva_checkout_components.xml
index a14b10f..2e3d8a6 100644
--- a/view/frontend/layout/hyva_checkout_components.xml
+++ b/view/frontend/layout/hyva_checkout_components.xml
@@ -210,6 +210,9 @@
                 class="Buckaroo\HyvaCheckout\Block\Totals\AlreadyPaid"
                 as="buckaroo_already_paid"
                 template="Buckaroo_HyvaCheckout::total-segments/already-paid.phtml"/>
+            <block name="price-summary.total-segment.remaining_amount"
+                as="remaining_amount"
+                template="Buckaroo_HyvaCheckout::checkout/summary/remaining-amount.phtml"/>
         </referenceBlock>
     </body>
 </page>
diff --git a/view/frontend/layout/hyva_checkout_index_index.xml b/view/frontend/layout/hyva_checkout_index_index.xml
index 92ce243..9bbb463 100644
--- a/view/frontend/layout/hyva_checkout_index_index.xml
+++ b/view/frontend/layout/hyva_checkout_index_index.xml
@@ -11,4 +11,4 @@
             </block>
         </referenceContainer>
     </body>
-</page>
\ No newline at end of file
+</page>
diff --git a/view/frontend/templates/checkout/summary/remaining-amount.phtml b/view/frontend/templates/checkout/summary/remaining-amount.phtml
new file mode 100644
index 0000000..24fab35
--- /dev/null
+++ b/view/frontend/templates/checkout/summary/remaining-amount.phtml
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+
+/** @var Template $block */
+/** @var FormatterViewModel $formatterViewModel */
+/** @var ViewModelRegistry $viewModels */
+/** @var Escaper $escaper */
+
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+use Hyva\Checkout\ViewModel\Checkout\Formatter as FormatterViewModel;
+use Hyva\Theme\Model\ViewModelRegistry;
+
+$formatterViewModel = $viewModels->require(FormatterViewModel::class);
+$segment = $block->getSegment();
+if ($segment['value'] != 0) {
+    ?>
+    <div class="flex gap-4 justify-between border-t border-gray-400 pt-4 mt-4 md:gap-0">
+        <span class="label font-bold text-xl">
+            <?= $block->escapeHtml($segment['title']) ?>
+        </span>
+        <span class="value text-right font-bold">
+            <?= /* @noEscape */ $formatterViewModel->currency($segment['value'] ?? 0) ?>
+        </span>
+    </div>
+    <?php
+}
diff --git a/view/frontend/templates/component/payment/after.phtml b/view/frontend/templates/component/payment/after.phtml
index 02b78de..0cfa6a7 100644
--- a/view/frontend/templates/component/payment/after.phtml
+++ b/view/frontend/templates/component/payment/after.phtml
@@ -63,6 +63,24 @@
     </div>
 </div>
 <script>
+    // Function to update the position of 'already-paid' after 'grand-total'
+    function updatePosition() {
+        // Select the elements by their class names
+        const alreadyPaidElement = document.querySelector('.remaining_amount');
+        const grandTotalElement = document.querySelector('.grand_total');
+
+        // Ensure both elements exist before trying to move them
+        if (alreadyPaidElement && grandTotalElement) {
+            // Move the 'already-paid' block after the 'grand-total' block
+            grandTotalElement.insertAdjacentElement('afterend', alreadyPaidElement);
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // Call the function on page load
+        updatePosition();
+    });
+
 
     var buckaroo = {
         modal() {
@@ -373,59 +391,24 @@
         },
         giftcards($el) {
             return Object.assign(hyva.formValidation($el), {
-                card: '',
+                card:'',
                 pin: '',
                 cardNumber: '',
-                canSubmit: false,
-
-                async update() {
-                    await this.$wire.getRemainingAmount();
-                },
-                listenToUpdate(){
-                    this.$wire.on('remainingAmount', async (response) => {
-                        this.updateGrandTotal(response);
-                    })
-                },
+                canSubmit:false,
                 async formValid() {
-                    try {
-                        await this.validate();
-                    } catch (error) {
-                        return false;
-                    }
-                    return true;
+                        try {
+                            await this.validate();
+                        } catch (error) {
+                            return false;
+                        }
+                        return true;
                 },
-
                 async submit() {
-                    if (!await this.formValid()) {
+                    if(!await this.formValid()) {
                         return;
                     }
                     await this.$wire.applyGiftcard(this.card, this.cardNumber, this.pin);
                 },
-
-                listenToSubmit() {
-                    this.$wire.on('giftcard_response', async (response) => {
-                        if (response.error) {
-                            this.displayError(response.error);
-                        } else if (response.remainder_amount === undefined) {
-                            this.displayError(response.message);
-                        } else if (response.remainder_amount == 0) {
-                            this.canSubmit = true;
-                            await hyvaCheckout.order.place();
-                        } else if (response.remainder_amount != 0) {
-                            this.displaySuccess(response);
-                            this.updateGrandTotal(response.remainder_amount_currency);
-                        }
-                    })
-                },
-                updateGrandTotal(remainder_amount_currency) {
-                    const grandTotalElement = document.querySelector('.grand_total .value');
-                    grandTotalElement.textContent = remainder_amount_currency
-
-                    setTimeout(function () {
-                        grandTotalElement.textContent = remainder_amount_currency
-
-                    }, 2000);
-                },
                 displaySuccess(response) {
                     window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
                         detail: {
@@ -440,7 +423,6 @@
                         }
                     }));
                 },
-
                 displayError(message) {
                     window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
                         detail: {
@@ -451,18 +433,33 @@
                         }
                     }));
                 },
-
+                listenToSubmit() {
+                    this.$wire.on('giftcard_response', async (response) => {
+                        if (response.error) {
+                            this.displayError(response.error);
+                        } else if(response.remainder_amount === undefined) {
+                            this.displayError(response.message);
+                        } else if (response.remainder_amount == 0) {
+                            this.canSubmit = true;
+                            await hyvaCheckout.order.place();
+                        } else if (response.remainder_amount != 0) {
+                            this.displaySuccess(response);
+                        }
+                        setTimeout(function () {
+                            updatePosition();
+                        }, 2000);
+                    })
+                },
                 register() {
                     this.listenToSubmit();
-                    this.update();
-                    this.listenToUpdate();
                     window.buckarooTask = async () => {
-                        if (!this.canSubmit) {
+                        if(!this.canSubmit) {
                             await this.submit();
                         }
                     };
                 },
-            });
+
+            })
         },
         mrCash($el) {
             return Object.assign(hyva.formValidation($el), {