From 6c6fa80fd19421e190e7f60f16939eb6e15899fd Mon Sep 17 00:00:00 2001
From: orw22 <oliver@thewortleys.plus.com>
Date: Thu, 15 Feb 2024 16:57:11 +0000
Subject: [PATCH] Disable clear button when paying, remove flag

---
 src/checkout.html  |  5 +----
 src/js/checkout.ts | 16 +++++++---------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/checkout.html b/src/checkout.html
index ddeb5da..de9cb69 100644
--- a/src/checkout.html
+++ b/src/checkout.html
@@ -33,10 +33,7 @@ <h2 class="text-start px-2">Basket Contents</h2>
         <th scope="col" style="width: 1px">Remove</th>
       </tr>
     </thead>
-    <!-- FIXME: Unexpected <tbody> hidden happened. The following is just a workaround. -->
-    <div id="basket" class="table-group-divider overflow-y-auto h-100">
-      <tr><td colspan="5" class="text-center">Nothing here 🥹!</td></tr>
-    </div>
+    <tr></tr>
     <tfoot id="basket-footer">
       <tr>
         <td colspan="4">Total</td>
diff --git a/src/js/checkout.ts b/src/js/checkout.ts
index a6f18b9..839a0a7 100644
--- a/src/js/checkout.ts
+++ b/src/js/checkout.ts
@@ -5,7 +5,6 @@ import type { Basket } from './typing'
 import { DialogCloseResult, cookieOptions, readBasketCookie } from './shared'
 import { isExpirationDateValid, isSecurityCodeValid, isValid } from './creditCard.ts'
 
-const creditCardShown = false
 const basket: Basket = readBasketCookie()
 
 const EMPTY_BASKET_HTML = `<div id="basket" class="table-group-divider overflow-y-auto h-100"><tr><td colspan="5" class="text-center">Nothing here 🥹!</td></tr></div>`
@@ -98,13 +97,12 @@ function initiateCreditCardFormDataBinding(parentForm: HTMLFormElement) {
 function showCreditCardPage(e: Event) {
   e.preventDefault()
 
-  if (!creditCardShown) {
-    const payIFrame = document.createElement('iframe')
-    payIFrame.src = 'creditcard.html'
-    payIFrame.width = '100%'
-    payIFrame.height = '500px'
-    document.querySelector('#customerDetails')?.replaceChildren(payIFrame)
-  }
+  const payIFrame = document.createElement('iframe')
+  payIFrame.src = 'creditcard.html'
+  payIFrame.width = '100%'
+  payIFrame.height = '500px'
+  document.querySelector('#customerDetails')?.replaceChildren(payIFrame);
+  (document.querySelector('#clearbasket') as HTMLButtonElement).disabled = true
 }
 
 async function showSweetAlert(message: string, e: Event, onDialogClose?: (result: DialogCloseResult) => void) {
@@ -156,7 +154,7 @@ function updateCheckoutList() {
     (document.querySelector('#clearbasket') as HTMLButtonElement).disabled = true;
     (document.querySelector('#paycreditcard') as HTMLButtonElement).disabled = true
     const checkoutListBody = document.querySelector('.checkoutList tbody')
-    checkoutListBody?.replaceChildren();
+    checkoutListBody?.replaceChildren()
     checkoutListBody?.insertAdjacentHTML('afterbegin', EMPTY_BASKET_HTML)
     return
   }