<iman> save to local storage

2 files changed, 65 insertions, 15 deletions

diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index b2e9832e..bdd6e6ef 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -8,7 +8,8 @@ import {
   usePengajuanTempoStore,
   usePengajuanTempoStoreKontakPerson,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { chakra } from '@chakra-ui/react';
 const PengajuanTempo = () => {
   const [currentStep, setCurrentStep] = React.useState(0);
   const NUMBER_OF_STEPS = 6;
@@ -22,11 +23,11 @@ const PengajuanTempo = () => {
   const [notValid, setNotValid] = useState(false);
   const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
   const stepDivs = [
-    <KontakPerusahaan
+    <InformasiPerusahaan
       chekValid={notValid}
       buttonSubmitClick={buttonSubmitClick}
     />,
-    <InformasiPerusahaan
+    <KontakPerusahaan
       chekValid={notValid}
       buttonSubmitClick={buttonSubmitClick}
     />,
@@ -37,14 +38,31 @@ const PengajuanTempo = () => {
     <div>Konfirmasi</div>,
   ];
   const stepDivsError = [
-    errorsKontakPerson,
     errors,
+    errorsKontakPerson,
+    <div>Kontak Person</div>,
+    <div>Pengiriman</div>,
+    <div>Referensi</div>,
+    <div>Dokumen</div>,
+    <div>Konfirmasi</div>,
+  ];
+  const stepDivsForm = [
+    form,
+    formKontakPerson,
     <div>Kontak Person</div>,
     <div>Pengiriman</div>,
     <div>Referensi</div>,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
+  const stepLabels = [
+    'informasi_perusahaan',
+    'kontak_person',
+    'Pengiriman',
+    'Referensi',
+    'Dokumen',
+    'Konfirmasi',
+  ];
 
   const isFormValid = useMemo(
     () => Object.keys(stepDivsError[currentStep]).length === 0,
@@ -54,16 +72,18 @@ const PengajuanTempo = () => {
     validate();
     validateKontakPerson();
   }, []);
-  console.log('isFormValid', isFormValid);
   const goToNextStep = () => {
     if (!isFormValid) {
       setNotValid(true);
       setButtonSubmitClick(!buttonSubmitClick);
-      console.log('form', form);
+      console.log('form', stepDivsForm[currentStep]);
       console.log('error', stepDivsError[currentStep]);
       return;
     } else {
-      console.log('form', form);
+      saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
+      const cachedData = getFromLocalStorage(stepLabels[currentStep]);
+      console.log('cachedData', cachedData);
+      console.log('form', stepDivsForm[currentStep]);
       console.log('error', stepDivsError[currentStep]);
       setButtonSubmitClick(!buttonSubmitClick);
       setNotValid(false);
@@ -71,8 +91,29 @@ const PengajuanTempo = () => {
     setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
   };
 
-  const goToPreviousStep = () =>
+  const goToPreviousStep = () => {
+    const cachedData = getFromLocalStorage(stepLabels[currentStep - 1]);
+    console.log('cachedData prev button', cachedData);
+    if (cachedData) {
+      // const formData = JSON.parse(cachedData);
+      Object.keys(cachedData).forEach((key) => {
+        updateForm(key, cachedData[key]);
+      });
+    }
     setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1));
+  };
+
+  const saveToLocalStorage = (key, form) => {
+    localStorage.setItem(key, JSON.stringify(form));
+  };
+
+  const getFromLocalStorage = (key) => {
+    const itemStr = localStorage.getItem(key);
+    if (!itemStr) return null;
+
+    const item = JSON.parse(itemStr);
+    return item;
+  };
 
   return (
     <>
@@ -95,13 +136,6 @@ const PengajuanTempo = () => {
         <div>{stepDivs[currentStep]}</div>
         <section className='flex gap-10 mt-10'>
           {/* <button
-            onClick={goToPreviousStep}
-            className='bg-blue-600 text-white p-2 rounded-md'
-            disabled={currentStep === 0} // Disable if on the first step
-          >
-            Previous step
-          </button> */}
-          {/* <button
             onClick={goToNextStep}
             className='bg-blue-600 text-white p-2 rounded-md'
             disabled={currentStep === NUMBER_OF_STEPS - 1} // Disable if on the last step
@@ -114,6 +148,14 @@ const PengajuanTempo = () => {
             *Pastikan data yang anda masukan sudah benar dan sesuai
           </span>
           <button
+            onClick={goToPreviousStep}
+            className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+            disabled={currentStep === 0} // Disable if on the first step
+          >
+            {<ChevronLeftIcon className='w-5' />}
+            Langkah Sebelumnya
+          </button>
+          <button
             onClick={goToNextStep}
             disabled={currentStep === NUMBER_OF_STEPS - 1}
             className='bg-red-600 border border-red-600 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index e5b2ff2c..a7d170e9 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -262,6 +262,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 type='text'
                 className='form-input'
                 aria-invalid={errors.name}
+                value={form.name}
                 ref={nameRef}
                 onChange={handleInputChange}
               />
@@ -324,6 +325,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={streetRef}
                   placeholder='Masukkan alamat lengkap perusahaan'
                   type='text'
+                  value={form.street}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -378,6 +380,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                     ref={zipRef}
                     placeholder='Kode Pos'
                     type='number'
+                    value={form.zip}
                     className='form-input'
                     onChange={handleInputChange}
                   />
@@ -406,6 +409,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={mobileRef}
                 placeholder='Masukkan nomor telfon perusahaan'
                 type='tel'
+                value={form.mobile}
                 className='form-input'
                 aria-invalid={errors.mobile}
                 onChange={handleInputChange}
@@ -433,6 +437,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={bankNameRef}
                   placeholder='Nama bank'
                   type='text'
+                  value={form.bankName}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -452,6 +457,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={accountNameRef}
                   placeholder='Nama Rekening'
                   type='text'
+                  value={form.accountName}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -469,6 +475,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   ref={accountNumberRef}
                   placeholder='Nomor Rekening Bank'
                   type='text'
+                  value={form.accountNumber}
                   className='form-input'
                   onChange={handleInputChange}
                 />
@@ -494,6 +501,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 name='website'
                 placeholder='www.indoteknik.com'
                 type='text'
+                value={form.website}
                 className='form-input'
                 onChange={handleInputChange}
               />