Popup tnc, block payment <3pm

src/components/pay/SelectOutlet.vue

@@ -81,18 +81,32 @@
     <div class="overflow-x-auto">
       <table class="table text-center table-bordered">
         <tbody>
-          <tr class="table-light">
-            <td style="min-width: 240px">Cawangan</td>
-            <td style="min-width: 120px">Harga Bida</td>
+          <tr>
+            <td>Cawangan</td>
+            <td>{{ cawanganPilihan }}</td>
           </tr>
           <tr>
-            <th>{{ cawanganPilihan }}</th>
-            <th>
+            <td>Harga Bida</td>
+            <td style="min-width: 150px">
               RM{{
                 hargaBidaanPilihan
                   ?.toString()
                   .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
               }}
+            </td>
+          </tr>
+          <tr>
+            <td>Fi Pengurusan</td>
+            <td>RM1.00</td>
+          </tr>
+          <tr>
+            <th>Jumlah Keseluruhan</th>
+            <th>
+              RM{{
+                hargaBidaanPilihanTambahFi
+                  ?.toString()
+                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+              }}
             </th>
           </tr>
         </tbody>
@@ -106,66 +120,67 @@
         @click="closeModal()"
         class="p-button-text"
       />
-      <Button
+      <!-- <Button
         label="Ya"
         icon="pi pi-check"
         iconPos="right"
         :loading="isLoading"
         @click="doPayment()"
+      /> -->
+      <Button
+        label="Teruskan"
+        icon="pi pi-check"
+        iconPos="right"
+        @click="openModalTNC()"
+      />
+    </template>
+  </Dialog>
+  <Dialog
+    header="Terma & Syarat"
+    v-model:visible="isDisplayTNC"
+    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+    :style="{ width: '50vw' }"
+    :modal="true"
+  >
+    <div>
+      <terms-and-conditions-details></terms-and-conditions-details>
+    </div>
+    <template #footer>
+      <Button
+        label="Batal Pembayaran"
+        icon="pi pi-times"
+        iconPos="right"
+        @click="closeModalTNC()"
+        class="p-button-text"
+      />
+      <!-- <Button
+        label="Ya"
+        icon="pi pi-check"
+        iconPos="right"
+        :loading="isLoading"
+        @click="doPayment()"
+      /> -->
+      <Button
+        label="Teruskan Bayaran"
+        icon="pi pi-check"
+        iconPos="right"
+        :loading="isLoading"
+        @click="doPayment()"
       />
     </template>
   </Dialog>
-  <!-- <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-7">
-        <div v-if="!nextButton">
-          <h5>Pilih Cawangan</h5>
-          <table class="table table-bordered">
-            <tbody>
-              <tr v-for="data in namaCawangan" v-bind:key="data">
-                <td>
-                  <input
-                    type="radio"
-                    v-bind:value="data"
-                    v-model="selectRadio"
-                  />
-                </td>
-                <td>{{ data.cawangan }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="d-flex justify-content-between">
-            <button class="btn btn-danger" v-on:click="clickCancelButton()">
-              Cancel
-            </button>
-            <button
-              ref="nextButton"
-              v-on:click="clickNextButton()"
-              class="btn btn-primary"
-            >
-              Teruskan
-            </button>
-          </div>
-        </div>
-        <div v-else>
-          <select-id
-            v-bind:selectedRadio="selectRadio"
-            v-on:back-is-click="backIsClick"
-          ></select-id>
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <script>
 import { integer } from "@vuelidate/validators";
 import SelectId from "./SelectId.vue";
+import TermsAndConditionsDetails from "../authentication/TermsAndConditionsDetails.vue";
 import axios from "axios";
 
 export default {
   components: {
     "select-id": SelectId,
+    "terms-and-conditions-details": TermsAndConditionsDetails,
   },
   props: {
     namaCawangan: "",
@@ -179,9 +194,12 @@ export default {
       selectCawangan: this.namaCawangan,
       selectRadio: "",
       isDisplay: false,
+      isDisplayTNC: false,
       isLoading: false,
       cawanganPilihan: "",
       hargaBidaanPilihan: "",
+      hargaBidaanPilihanTambahFi: "",
+      lelongDetails: "",
       form: {
         email: localStorage.getItem("email"),
         notel: localStorage.getItem("notelbimbit"),
@@ -223,11 +241,12 @@ export default {
           },
         })
         .then((response) => {
-          console.log(response);
+          // console.log("getInvoice", response);
           if (response.data.success == true) {
             this.form.invoice_id = response.data.invoice.id;
             this.form.invoice_no = response.data.invoice.invoice_no;
             this.form.lelong_id = this.lelongIdProps;
+            this.lelongDetails = response.data.lelong;
           } else if (response.data.success == false) {
             alert("No Invoice Id");
           }
@@ -238,21 +257,49 @@ export default {
         });
     },
     openModal(value) {
+      var date = new Date();
+      var current_time = date.toLocaleString();
+      var limit_masa_bayaran = "15:00:00";
+      var limit_datetime_bayaran = this.lelongDetails.tarikh_lelong + ", " + limit_masa_bayaran;
+
+      if (current_time < limit_datetime_bayaran === true) {
       this.isDisplay = true;
       this.cawanganPilihan = value.cawangan;
       this.hargaBidaanPilihan = value.total_hargabida;
+      let convertHargaBidaanPilihan =
+        parseFloat(value.total_hargabida.replace(/,/g, "")) + 1;
+      this.hargaBidaanPilihanTambahFi = convertHargaBidaanPilihan.toFixed(2);
       this.form.total = parseFloat(value.total_hargabida.replace(/,/g, ""));
       let convertData = JSON.parse(JSON.stringify(value.sag));
       this.form.sag = convertData;
-      console.log(this.form);
+      } else {
+        this.$swal.fire({
+          icon: "error",
+          title: "Gagal",
+          text: "Pembayaran mesti diselesaikan sebelum 3:00pm.",
+          confirmButtonColor: "#344871",
+          confirmButtonText: "Kembali",
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+        });
+      }
     },
     closeModal() {
       this.isDisplay = false;
       this.form.total = "";
       this.form.sag = "";
     },
+    openModalTNC() {
+      this.isDisplay = false;
+      this.isDisplayTNC = true;
+    },
+    closeModalTNC() {
+      this.isDisplayTNC = false;
+      this.form.total = "";
+      this.form.sag = "";
+    },
     clickRadio(value) {
-      console.log(value);
+      // console.log(value);
       this.selectRadio = value;
     },
     clickCancelButton() {

src/components/pay/ThePay.vue

@@ -120,11 +120,11 @@ export default {
           }
         )
         .then((response) => {
+          // console.log("liveData", response);
           this.isLoading = false;
           if (response.data.success == true) {
             this.isSuccess = true;
             this.lists = response.data.data;
-            console.log(this.lists);
             this.tarikhLelong = response.data.tarikh_lelong;
           } else {
           }

src/components/result/ResultDetail.vue

@@ -379,7 +379,6 @@ export default {
       this.$router.push({ name: "result" });
     },
     marhunModal(value) {
-      console.log(value);
       this.theData = value;
       this.reloadImageComponent += 1;
     },