Merge pull request #45 from buckaroo-it/BP-3761-Adjustment-in-the-mai…

…n-module-to-resolve-an-issue-with-giftcards-for-the-additional-Hyv-Checkout-module

BP-3761-Adjustment-in-the-main-module-to-resolve-an-issue-with-giftcards-for-the-additional-Hyv-Checkout-module

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>

view/frontend/layout/hyva_checkout_index_index.xml

@@ -11,4 +11,4 @@
             </block>
         </referenceContainer>
     </body>
-</page>
+</page>

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
+}

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), {