Finalize payment cdm component

src/components/pay/SelectOutlet.vue

@@ -71,7 +71,7 @@
     </TabPanel>
   </TabView>
   <Dialog
-    header="Teruskan Bayaran"
+    header="Teruskan Bayaran Menggunakan Kaedah FPX"
     v-model:visible="isDisplay"
     :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
     :style="{ width: '50vw' }"
@@ -174,13 +174,83 @@
       />
     </template>
   </Dialog>
+  <Dialog
+    v-model:visible="isDisplayPaymentMethod"
+    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+    :style="{ width: '50vw' }"
+    :modal="true"
+    :closable="false"
+  >
+    <div class="text-center m-2">
+      <h4>Sila Pilih Jenis Bayaran</h4>
+      <Button
+        label="Bayaran FPX"
+        @click="openModalNew()"
+        class="p-button-warning m-1"
+      />
+      <Button
+        label="Bayaran CDM"
+        @click="openModalFileUpload()"
+        class="p-button-help m-1"
+      />
+    </div>
+    <template #footer>
+      <Button
+        label="Batal"
+        icon="pi pi-times"
+        iconPos="right"
+        @click="closeModalPaymentMethod()"
+        class="p-button-text"
+      />
+    </template>
+  </Dialog>
+  <Dialog
+    header="Teruskan Bayaran Menggunakan Kaedah CDM"
+    v-model:visible="isDisplayFileUpload"
+    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+    :style="{ width: '50vw' }"
+    :modal="true"
+  >
+    <div class="text-center m-2">
+      <input
+        class="form-control"
+        type="file"
+        accept="image/png, image/jpg, image/jpeg"
+        v-on:change="selectPhoto"
+      />
+      <div
+        style="font-size: 13px"
+        class="fst-italic text-danger row"
+        v-if="v$.fileSize.$error"
+      >
+        <div>Saiz maksimum gambar adalah 2MB.</div>
+        <div>Jenis gambar yang diterima adalah PNG dan JPG.</div>
+      </div>
+    </div>
+    <template #footer>
+      <Button
+        class="p-button-sm p-button-secondary"
+        label="Kembali"
+        @click="closeModalFileUpload()"
+      />
+      <Button
+        class="p-button-sm p-button-success"
+        label="Simpan"
+        icon="pi pi-check"
+        iconPos="right"
+        :loading="isLoadingButton"
+        @click="addPhotoResit()"
+      />
+    </template>
+  </Dialog>
 </template>
 
 <script>
-import { integer } from "@vuelidate/validators";
 import SelectId from "./SelectId.vue";
 import TermsAndConditionsDetails from "../authentication/TermsAndConditionsDetails.vue";
 import axios from "axios";
+import { required, integer, between } from "@vuelidate/validators";
+import useVuelidate from "@vuelidate/core";
 
 export default {
   components: {
@@ -195,16 +265,21 @@ export default {
   },
   data() {
     return {
+      v$: useVuelidate(),
       nextButton: false,
       selectCawangan: this.namaCawangan,
       selectRadio: "",
+      isLoadingButton: false,
       isDisplay: false,
       isDisplayTNC: false,
+      isDisplayPaymentMethod: false,
+      isDisplayFileUpload: false,
       isLoading: false,
       cawanganPilihan: "",
       hargaBidaanPilihan: "",
       hargaBidaanPilihanTambahFi: "",
       lelongDetails: "",
+      fileSize: 0,
       form: {
         email: localStorage.getItem("email"),
         notel: localStorage.getItem("notelbimbit"),
@@ -227,9 +302,16 @@ export default {
         //   },
         // ],
         sag: "",
+        kodcaw: "",
+        gambarResit: "",
       },
     };
   },
+  validations() {
+    return {
+      fileSize: { required, integer, betweenValue: between(1, 2200000) },
+    };
+  },
   mounted() {
     this.getInvoice();
   },
@@ -267,11 +349,12 @@ export default {
       var limit_masa_bayaran = "15:00:00";
       var limit_datetime_bayaran =
         this.lelongDetails.tarikh_lelong + ", " + limit_masa_bayaran;
-      console.log(current_time, "\n", limit_datetime_bayaran);
+      // console.log(current_time, "\n", limit_datetime_bayaran);
 
       // if (current_time < limit_datetime_bayaran === true) {
-      this.isDisplay = true;
+      this.isDisplayPaymentMethod = true;
       this.cawanganPilihan = value.cawangan;
+      this.form.kodcaw = value.kodcaw;
       this.hargaBidaanPilihan = value.total_hargabida;
       let convertHargaBidaanPilihan =
         parseFloat(value.total_hargabida.replace(/,/g, "")) + 1;
@@ -296,6 +379,78 @@ export default {
       this.form.total = "";
       this.form.sag = "";
     },
+    selectPhoto(e) {
+      this.fileSize = e.target.files[0].size;
+      this.form.gambarResit = e.target.files[0];
+    },
+    addPhotoResit() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        let convertDataSAG = JSON.stringify(this.form.sag);
+
+        this.isLoadingButton = true;
+        var resitFormData = new FormData();
+        resitFormData.append("gambarResit", this.form.gambarResit);
+        resitFormData.append("lelong_id", this.form.lelong_id);
+        resitFormData.append("user_id", this.form.user_id);
+        resitFormData.append("kodcaw", this.form.kodcaw);
+        resitFormData.append("invoice_id", this.form.invoice_id);
+        resitFormData.append("invoice_no", this.form.invoice_no);
+        resitFormData.append("total", this.form.total);
+        resitFormData.append("sag", convertDataSAG);
+        axios
+          .post("/initializeCdmPayment", resitFormData, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            this.isLoadingButton = false;
+            this.fileSize = 0;
+            this.isDisplayFileUpload = false;
+            if (response.data.success == true) {
+              this.$swal.fire({
+                icon: "success",
+                title: "Gambar Resit Berjaya Di Muat Naik",
+                text: "Marhun mesti dituntut sebelum jam 4 petang hari ini.",
+                confirmButtonColor: "#344871",
+                confirmButtonText: "OK",
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+              });
+              this.$router.push({ name: "result" });
+            } else {
+              this.isLoadingButton = false;
+              console.log(response);
+              this.$swal.fire({
+                toast: true,
+                icon: "error",
+                title: "Gagal! Sila cuba kembali.",
+                animation: false,
+                position: "bottom",
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+              });
+            }
+          })
+          .catch((error) => {
+            alert(error);
+            this.isLoadingButton = false;
+          });
+      }
+    },
+    openModalNew() {
+      this.isDisplay = true;
+      this.isDisplayPaymentMethod = false;
+    },
+    openModalFileUpload() {
+      this.isDisplayFileUpload = true;
+      this.isDisplayPaymentMethod = false;
+    },
+    closeModalFileUpload() {
+      this.isDisplayFileUpload = false;
+    },
     openModalTNC() {
       this.isDisplay = false;
       this.isDisplayTNC = true;
@@ -305,6 +460,12 @@ export default {
       this.form.total = "";
       this.form.sag = "";
     },
+    openModalPaymentMethod() {
+      this.isDisplayPaymentMethod = true;
+    },
+    closeModalPaymentMethod() {
+      this.isDisplayPaymentMethod = false;
+    },
     clickRadio(value) {
       // console.log(value);
       this.selectRadio = value;

src/components/result/ResultDetail.vue

@@ -203,7 +203,7 @@
                                 class="fst-italic text-danger row"
                                 v-if="v$.fileSize.$error"
                               >
-                                <div>Gambar mesti tidak melebihi 2MB.</div>
+                                <div>Saiz maksimum gambar adalah 2MB.</div>
                                 <div>
                                   Jenis gambar yang diterima adalah PNG dan JPG.
                                 </div>