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 }