diff --git a/docker-compose.yml b/docker-compose.yml index be5ae91d4e62c5a9fd62cccf399e998748c447a3..8d4c37874d5283ef74f2d361a0fb83156129746a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,6 +1,7 @@ version: '3.3' services: web: + build: . image: tubes-1:latest ports: - 8008:80 diff --git a/src/app/component/checkout/CheckoutPage.php b/src/app/component/checkout/CheckoutPage.php index 573f6a7fec8b6de4aceee35bf612263de9c4bba9..129eedb2f4efbaedfd85c3c5f2556baec5aa32b9 100644 --- a/src/app/component/checkout/CheckoutPage.php +++ b/src/app/component/checkout/CheckoutPage.php @@ -68,21 +68,33 @@ <!-- Payment Details --> <div class="payment-detail" id="payment-details"> - <!-- E-WALLET DETAILS --> - <div class="detail" id="ewallet-detail"> - <div class="title-card"> - <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"> - <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> - <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H80c-8.8 0-16-7.2-16-16s7.2-16 16-16H448c17.7 0 32-14.3 32-32s-14.3-32-32-32H64zM416 272a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/> - </svg> - <p class="bold-text title">E-Wallet Details</p> - </div> - <div class="form-group"> - <label class="bold-text" for="ewallet">E-Wallet Number</label> - <input type="text" name="ewallet" placeholder="E-Wallet number" id="ewallet-number"> - <p id="ewallet-alert" class="alert-hide"></p> - </div> + <!-- E-WALLET DETAILS --> + <div class="detail" id="ewallet-detail"> + <div class="title-card"> + <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"> + <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> + <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H80c-8.8 0-16-7.2-16-16s7.2-16 16-16H448c17.7 0 32-14.3 32-32s-14.3-32-32-32H64zM416 272a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/> + </svg> + <p class="bold-text title">E-Wallet Details</p> </div> + + <div class="form-group"> + <label class="bold-text" for="ewallet">E-Wallet Number</label> + + <?php if (!empty($walletNumbers)) : ?> + <select name="ewallet" id="ewallet-number"> + <?php + foreach ($walletNumbers as $walletNumber) { + echo "<option value=\"$walletNumber\">$walletNumber</option>"; + } + ?> + </select> + <?php else : ?> + <p>You don't have an E-Wallet number</p> + <?php endif; ?> + <p id="ewallet-alert" class="alert-hide"></p> + </div> + </div> <!-- CARD DETAILS --> <div class="detail" id="card-detail"> diff --git a/src/public/javascript/checkout/checkout.js b/src/public/javascript/checkout/checkout.js index 212ce356b7c890a8caa0e7adf28b704cc015c24d..4d91b9a2f8b6a438d6a33a3f1e7048168e5f0ce1 100644 --- a/src/public/javascript/checkout/checkout.js +++ b/src/public/javascript/checkout/checkout.js @@ -77,21 +77,20 @@ function openSection(option) { paymentMethodValid = true; } -ewalletInput && ewalletInput.addEventListener('keyup', - debounce(() => { - const ewallet = ewalletInput.value; +ewalletInput && ewalletInput.addEventListener('change', () => { + const selectedOption = ewalletInput.value; + + if (!selectedOption || selectedOption === "") { + ewalletAlert.innerText = 'Please select an E-Wallet number'; + ewalletAlert.className = 'alert-show'; + ewalletValid = false; + } else { + ewalletAlert.innerText = ''; + ewalletAlert.className = 'alert-hide'; + ewalletValid = true; + } +}); - if(!numberRegex.test(ewallet)) { - ewalletAlert.innerText = 'Invalid number'; - ewalletAlert.className = 'alert-show'; - ewalletValid = false; - } else{ - ewalletAlert.innerText = ''; - ewalletAlert.className = 'alert-hide'; - ewalletValid = true; - } - }, DEBOUNCE_TIMEOUT) -); cardNumberInput && cardNumberInput.addEventListener('keyup', debounce(() => { @@ -235,7 +234,7 @@ mainForm.addEventListener('submit', async (e) => { if(method=="ewallet" && !ewalletValid) { e.preventDefault(); - ewalletAlert.innerText = 'Number is required'; + ewalletAlert.innerText = 'Select the E-Wallet number'; ewalletAlert.className = 'alert-show'; }else { diff --git a/src/public/styles/checkout/checkout.css b/src/public/styles/checkout/checkout.css index d1fe257513e8fd6389c3c750e6ab880303fae933..c1dd4fc26d35c930d696854d0e390847f51bd299 100644 --- a/src/public/styles/checkout/checkout.css +++ b/src/public/styles/checkout/checkout.css @@ -273,6 +273,8 @@ display: none; } +. + @media screen and (max-width: 1140px) { .gridview { flex-direction: column;