<iman> input npwp by template

2 files changed, 99 insertions, 18 deletions

diff --git a/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg b/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg
new file mode 100644
index 00000000..63001bb5
--- /dev/null
+++ b/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index a278097b..6ab12776 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -14,6 +14,8 @@ import { toast } from 'react-hot-toast';
 import {
   EyeIcon
 } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import Image from 'next/image'
 
 interface FormProps {
   type: string;
@@ -42,6 +44,11 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [isChekBox, setIsChekBox] = useState<boolean>(false);
+  const [isExample, setIsExample] = useState<boolean>(false);
+  // Inside your component
+  const [formattedNpwp, setFormattedNpwp] = useState<string>(""); // State for formatted NPWP
+  const [unformattedNpwp, setUnformattedNpwp] = useState<string>(""); // State for unformatted NPWP
+
 
   const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
@@ -90,9 +97,58 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
     validate();
   };
 
+  const handleInputChangeNpwp = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm('type_acc',`business`)
+    updateForm('is_pkp',`${isPKP}`)
+    updateForm('npwp', value);
+    validate();
+  };
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsChekBox(!isChekBox)
   };
+  
+  const formatNpwp = (value: string) => {
+    try {
+      const cleaned = ("" + value).replace(/\D/g, "");
+      // const match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      console.log("panjang",form?.npwp?.length)
+      console.log("panjang cleaned",cleaned.length)
+      let match
+      if(cleaned.length <= 15){
+        match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      }else{
+        match = cleaned.match(/(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      }
+      
+  
+      if (match) {
+        return [
+          match[1],
+          match[2] ? "." : "",
+          match[2],
+          match[3] ? "." : "",
+          match[3],
+          match[4] ? "." : "",
+          match[4],
+          match[5] ? "-" : "",
+          match[5],
+          match[6] ? "." : "",
+          match[6],
+        ].join("");
+      }
+  
+      // If match is null, return the original cleaned string or handle as needed
+      return cleaned;
+  
+    } catch (error) {
+      // Handle error or return a default value
+      console.error("Error formatting NPWP:", error);
+      return value;
+    }
+  };
+  
 
   useEffect(() => {
     if (isChekBox) {
@@ -172,7 +228,26 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         break;
     }
   };
+  console.log("form",form)
   return (
+    <>
+    <BottomPopup
+        className=''
+        title='Contoh SPPKP'
+        active={isExample}
+        close={() => setIsExample(false)}
+      >
+        <div className='flex p-2'>
+        <Image
+                src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+                alt='Contoh SPPKP'
+                className='w-full h-full '
+                width={800}
+                height={800}
+                quality={100}
+              />
+        </div>
+      </BottomPopup>
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
       <div>
         <label htmlFor='email' className="font-bold">Email Bisnis {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
@@ -319,25 +394,28 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
-        <label htmlFor='npwp' className="font-bold">Nomor NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
+        <label htmlFor="npwp" className="font-bold">
+          Nomor NPWP {!isPKP && !required && <span className="font-normal text-gray_r-11">(opsional)</span>}
+        </label>
 
         <input
-          type='tel'
-          id='npwp'
-          name='npwp'
-          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+          type="tel"
+          id="npwp"
+          name="npwp"
+          className={`form-input mt-3 ${required ? "cursor-no-drop" : ""}`}
           disabled={required}
           contentEditable={required}
           readOnly={required}
-          placeholder='000.000.000.0-000.000'
-          value={!required ? form.npwp : ''}
-          maxLength={16}  // Set maximum length to 16 characters
+          placeholder="000.000.000.0-000.000"
+          value={!required ? formattedNpwp : ""}
+          maxLength={21} // Set maximum length to 16 characters
           onChange={(e) => {
             if (!required) {
-              const value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters
-              if (value.length <= 16) {
-                handleInputChange(e);
-              }
+              const unformatted = e.target.value.replace(/\D/g, ""); // Remove all non-digit characters
+              const formattedValue = formatNpwp(unformatted); // Format the value
+              setUnformattedNpwp(unformatted); // Store unformatted value
+              setFormattedNpwp(formattedValue); // Store formatted value
+              handleInputChangeNpwp({ ...e, target: { ...e.target, value: unformatted } }); // Update form state with unformatted value
             }
           }}
           aria-invalid={!required && !!errors.npwp}
@@ -347,12 +425,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
-        <label htmlFor='sppkp' className="font-bold flex flex-row items-center justify-between">
-            Nomor SPPKP { !required && <span className='font-normal text-gray_r-11'>(opsional) </span>}
-              {<button className="rounded text-white p-2 flex flex-row bg-red-500" >
+        <label htmlFor='sppkp' className="font-bold flex flex-row items-center justify-between"> 
+          <div className="flex flex-row items-center">
+            Nomor SPPKP { !required && <span className='ml-2 font-normal text-gray_r-11'>(opsional) </span>}
+          </div>
+              {<div onClick={() => setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500" >
                 <EyeIcon className='w-4 mr-2' />
                 <p className="font-light text-xs">Lihat Contoh</p> 
-              </button>}
+              </div>}
           </label>
 
 
@@ -362,9 +442,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
           name='sppkp'
           className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
           disabled={required}
-          contentEditable={required}S
+          contentEditable={required}
           readOnly={required}
-          placeholder='000.000.000.0-000.000'
+          placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
           onChange={handleInputChange}
           value={!required ? form.sppkp : ''}
           aria-invalid={!required && !!errors.sppkp}
@@ -409,6 +489,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         {isPKP && !required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>}
       </div>
     </form>
+    </>
   )
 }