jika pelaporan menggunakan tidak menggunakan nomor HP maka pengisian kode verifikasi & tombol kirim tanpa kode verifikasi tidak perlu di tampilkan

components/Sanksi/TmtDate.js

@@ -24,7 +24,7 @@ function TmtDate() {
     return (
         <div>
             <FormGroup row className="mt-3">
-                <label className="col-md-2 col-form-label">Tsi TMT</label>
+                <label className="col-md-2 col-form-label">Isi TMT</label>
                 <div className="col-md-10">
                     <DatePicker
                         selected={isiTmt}

pages/laporan/new/index.js

@@ -75,12 +75,12 @@ const laporanSchema = Yup.object().shape({
   keterangan: Yup.string()
     .min(3, "Minimal 3 huruf")
     .max(200, "Maksimal 200 huruf")
-    .required(""),
+    .required("Wajib diisi"),
   email: Yup.string().email().notRequired(),
   pelanggaran_id: Yup.array()
     .min(1, "Minimal terdapat 1 jenis pelanggaran")
-    .required(""),
-  pt_id: Yup.string().required(""),
+    .required("Wajib diisi"),
+  pt_id: Yup.string().required("Wajib diisi"),
   foto: Yup.array()
     .notRequired()
     .test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig)
@@ -144,6 +144,7 @@ class App extends Component {
       confirm: false,
       msgError: [],
       modal: false,
+      modalNotnoHP: false,
       user: {},
       kode: "",
       error: null,
@@ -160,8 +161,12 @@ class App extends Component {
     this.setState({ pelanggaran });
   };
 
-  toggleModal = () => {
-    this.setState({ modal: !this.state.modal });
+  toggleModal = (no_hp = null) => {
+    if (no_hp) {
+      this.setState({ modal: !this.state.modal })
+    } else {
+      this.setState({ modalNotnoHP: !this.state.modalNotnoHP });
+    }
   };
 
   optionsJenisPelanggaran = (pelanggaran) => {
@@ -243,20 +248,16 @@ class App extends Component {
       });
     }
 
-    // const toastid = toast.loading("loading...");
     this.setState({ loading: true });
     const success = await createLaporanPublic(token, formdata);
     if (!success) {
-      // toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
       swal.fire({
         title: "Kode verifikasi salah",
         icon: "error",
         confirmButtonColor: "#3e3a8e",
-        // isLoading: true,
       });
       this.setState({ error: "Kode verifikasi tidak valid" });
     } else {
-      // toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
       swal.fire({
         title: "Data berhasil dikirim",
         icon: "success",
@@ -332,7 +333,7 @@ class App extends Component {
                     }}
                     validationSchema={laporanSchema}
                     onSubmit={async (data) => {
-                      this.toggleModal();
+                      this.toggleModal(data.no_hp);
                       this.setState({ data, no_laporan: data.no_laporan });
                       this.setState({ data, no_hp: data.no_hp });
                       const user = await this.createUser(data);
@@ -454,10 +455,8 @@ class App extends Component {
                       <div class="header-1">
                         <h2 class="card-title-1">
                           Detail Laporan
-                          {/* <span className="font-20">(wajib diisi)</span> */}
                         </h2>
                       </div>
-                      {/* <p className="lead bb">Detail Laporan</p> */}
                       <FormGroup row>
                         <label className="col-md-2 col-form-label">
                           Nomor Pelaporan
@@ -631,6 +630,13 @@ class App extends Component {
                     <label className="modals-verifikasi font-color-white">
                       Masukkan Kode Verifikasi
                     </label>
+                    <Button
+                      className="ml-auto float-lg-right color-3e3a8e  btn-login"
+                      color
+                      type="cancel"
+                    >
+                      <span className="font-color-white">cancel</span>
+                    </Button>
                     <div className="border-2">
                       <Input
                         className="border-2"
@@ -675,13 +681,111 @@ class App extends Component {
                 </FormGroup>
               </ModalBody>
               <ModalFooter>
+
+                <Button
+                  className="btn-login"
+                  color
+                  onClick={async () => {
+                    await this.createLaporan(this.state.token);
+                  }}
+                >
+                  {this.state.loading ?
+                    (
+                      <div class="d-flex justify-content-center">
+                        <span
+                          class="spinner-border spinner-border-sm text-white"
+                          role="status"
+                        ></span>
+                        <span className="font-color-white">
+                          &nbsp; Diproses...
+                        </span>
+                      </div>
+                    ) : (
+                      <span className="font-color-white">
+                        Buat Laporan Tanpa Kode Verifikasi
+                      </span>
+                    )}
+                </Button>
                 <Button
-                  className="color-3e3a8e ml-auto btn-login"
+                  className="color-3e3a8e btn-login"
                   color
-                  type="cancel"
+                  onClick={async () => {
+                    if (this.state.kode) {
+                      await this.createLaporan(
+                        this.state.token,
+                        this.state.kode
+                      );
+                    } else {
+                      this.setState({ error: "Kode verifikasi harus diisi" });
+                    }
+                  }}
                 >
-                  <span className="font-color-white">cancel</span>
+                  <span className="font-color-white">Kirim</span>
                 </Button>
+              </ModalFooter>
+            </form>
+          </Modal>
+
+          <Modal isOpen={this.state.modalNotnoHP}>
+            <form className="form-horizontal">
+              <ModalBody>
+                <FormGroup>
+                  {/* <div className="">
+                    <label className="modals-verifikasi font-color-white">
+                      Masukkan Kode Verifikasi
+                    </label>
+                    <Button
+                      className="ml-auto float-lg-right color-3e3a8e  btn-login"
+                      color
+                      type="cancel"
+                    >
+                      <span className="font-color-white">cancel</span>
+                    </Button>
+                    <div className="border-2">
+                      <Input
+                        className="border-2"
+                        onChange={(e) =>
+                          this.setState({ kode: e.target.value })
+                        }
+                        type="text"
+                      />
+                    </div>
+                    <p>
+                      *Kode verifikasi terkirim ke nomor WA {this.state.no_hp}
+                    </p>
+                  </div> */}
+
+                  <p className="font-color-black">
+                    NOTE : Diharapkan pelapor dapat mencatat ataupun mengingat
+                    nomor laporan di bawah ini untuk mempermudah proses
+                    selanjutnya.
+                  </p>
+                  <div className="modals">
+                    <label className="modals font-color-white font-20 ">
+                      Nomor Laporan : {this.state.no_laporan}
+                    </label>
+                    <CopyToClipboard
+                      text={this.state.no_laporan}
+                      options={{ asHtml: true }}
+                    >
+                      <Button color className="btn-verif">
+                        <img
+                          src="/static/img/icon-copy.png"
+                          alt="icon-copy"
+                          width="20"
+                        />
+                      </Button>
+                    </CopyToClipboard>
+                  </div>
+                  {this.state.error && (
+                    <div className="form-text text-danger">
+                      {this.state.error}
+                    </div>
+                  )}
+                </FormGroup>
+              </ModalBody>
+              <ModalFooter>
+
                 <Button
                   className="btn-login"
                   color

styles/bootstrap/_buttons.scss

@@ -324,7 +324,7 @@ input[type="button"] {
   border-radius: 5px;
 }
 .modals-verifikasi {
-  background-color: $colortheme;
+  background-color: transparent;
   padding: 5px;
   border-radius: 5px;
 }