@invoice-sdk/widget 0.0.0 → 1.5.2

package/src/components/process.tsx

@@ -1,21 +1,21 @@
-import { useProcessStore } from "../store/process";
-
-
-const MAX_STEP = 4;
-
-const Process = () => {
-  const { step } = useProcessStore();
-  return (
-    <div className="w-full relative h-3 bg-gray-200 rounded-full">
-      <div className="absolute rounded-full bg-green-500"
-      style={{
-        width: `${(step / MAX_STEP) * 100}%`,
-        height: '100%',
-        transition: 'width 0.3s ease-in-out'
-      }}
-      ></div>
-    </div>
-  )
-}
-
+import { useProcessStore } from "../store/process";
+
+
+const MAX_STEP = 4;
+
+const Process = () => {
+  const { step } = useProcessStore();
+  return (
+    <div className="w-full relative h-3 bg-gray-200 rounded-full">
+      <div className="absolute rounded-full bg-green-500"
+      style={{
+        width: `${(step / MAX_STEP) * 100}%`,
+        height: '100%',
+        transition: 'width 0.3s ease-in-out'
+      }}
+      ></div>
+    </div>
+  )
+}
+
 export default Process

package/src/index.ts

@@ -1,2 +1,2 @@
-import InvoiceRegisterWidget from './App'
+import InvoiceRegisterWidget from './App'
 export default InvoiceRegisterWidget;

package/src/pages/register.tsx

@@ -1,222 +1,222 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import type { SubmitHandler } from 'react-hook-form';
-import { Controller, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import z from "zod";
-import Button from '../components/button';
-import FileUpload from '../components/form/file-upload';
-import InputField from '../components/form/input-field';
-import { useProcessStore } from '../store/process';
-import { useRegisterStore } from '../store/register';
-
-const formSchema = z.object({
-  taxCode: z.string().nonempty('Mã số thuế là bắt buộc'),
-  representative: z.string().nonempty('Người đại diện là bắt buộc'),
-  email: z
-    .string()
-    .nonempty('Email là bắt buộc')
-    .email('Email không hợp lệ'),
-  address: z.string().nonempty('Địa chỉ là bắt buộc'),
-  companyName: z.string().nonempty('Tên công ty là bắt buộc'),
-  position: z.string().optional(),
-  phone: z
-    .string()
-    .regex(/^[0-9()+\-\s]+$/, 'SĐT không hợp lệ')
-    .optional(),
-  
-  // ← here we make it `.optional()`
-  license: z
-    .instanceof(File, {
-      message: 'Giấy phép đăng ký kinh doanh là bắt buộc',
-    })
-    .optional(),
-});
-
-export type FormValues = z.infer<typeof formSchema>;
-
-
-const RegistrationForm = () => {
-  const navigate = useNavigate();
-  const form = useRegisterStore((state) => state.form);
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting, isValid },
-  } = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      taxCode: form.taxCode || '',
-      representative: form.representative || '',
-      email: form.email || '',
-      address: form.address || '',
-      companyName: form.companyName || '',
-      position: form.position || '',
-      phone: form.phoneNumber || '',
-      license: form.license || undefined, // handle optional license
-    },
-  });
-
-  const setForm = useRegisterStore((state) => state.setForm);
-  const nextStep = useProcessStore((state) => state.nextStep);
-  const prevStep = useProcessStore((state) => state.prevStep);
-
-  const onSubmit: SubmitHandler<FormValues> = (data) => {
-    // here data.license is a File
-    console.log(data);
-
-    setForm({
-      taxCode: data.taxCode,
-      representative: data.representative,
-      email: data.email,
-      address: data.address,
-      companyName: data.companyName,
-      position: data.position,
-      phoneNumber: data.phone || null, // handle optional phone
-      license: data.license || null, // handle optional license
-    });
-
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="w-full mx-auto p-6 bg-white shadow rounded"
-    >
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        {/* Left */}
-        <div className="space-y-4">
-          <Controller
-            name="taxCode"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="Mã số thuế"
-                required
-                error={errors.taxCode?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="representative"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="Người đại diện"
-                required
-                error={errors.representative?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="email"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="Email"
-                type="email"
-                required
-                error={errors.email?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="address"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="Địa chỉ"
-                required
-                error={errors.address?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="license"
-            control={control}
-            render={({ field }) => (
-              <FileUpload
-                label="Giấy phép đăng ký kinh doanh"
-                required
-                file={field.value ?? null}
-                onFileChange={field.onChange}
-                error={errors.license?.message}
-              />
-            )}
-          />
-        </div>
-
-        {/* Right */}
-        <div className="space-y-4">
-          <Controller
-            name="companyName"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="Tên công ty"
-                required
-                error={errors.companyName?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="position"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="Chức vụ"
-                error={errors.position?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="phone"
-            control={control}
-            render={({ field }) => (
-              <InputField
-                {...field}
-                label="SĐT"
-                type="tel"
-                error={errors.phone?.message}
-              />
-            )}
-          />
-        </div>
-      </div>
-
-      <div className='flex items-center justify-end gap-2'>
-        <Button title={'Back'} 
-        handleClick={() => {
-          prevStep()
-          navigate('/select-provider');
-         }
-          }
-
-        className=' !bg-gray-200 !text-gray-700 hover:!bg-gray-300 disabled:!bg-gray-200 disabled:!text-gray-500'  
-          />
-        <Button
-          type='submit'
-         title={isSubmitting ? 'Submitting...' : 'Submit'} isDisabled={isSubmitting || Object.keys(errors).length > 0 || !isValid}
-        handleClick={() => { 
-          nextStep()
-          navigate('/select-plan');
-        }
-          }
-          />
-      </div>
-    </form>
-  );
-};
-
-export default RegistrationForm;
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { SubmitHandler } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import z from "zod";
+import Button from '../components/button';
+import FileUpload from '../components/form/file-upload';
+import InputField from '../components/form/input-field';
+import { useProcessStore } from '../store/process';
+import { useRegisterStore } from '../store/register';
+
+const formSchema = z.object({
+  taxCode: z.string().nonempty('Mã số thuế là bắt buộc'),
+  representative: z.string().nonempty('Người đại diện là bắt buộc'),
+  email: z
+    .string()
+    .nonempty('Email là bắt buộc')
+    .email('Email không hợp lệ'),
+  address: z.string().nonempty('Địa chỉ là bắt buộc'),
+  companyName: z.string().nonempty('Tên công ty là bắt buộc'),
+  position: z.string().optional(),
+  phone: z
+    .string()
+    .regex(/^[0-9()+\-\s]+$/, 'SĐT không hợp lệ')
+    .optional(),
+  
+  // ← here we make it `.optional()`
+  license: z
+    .instanceof(File, {
+      message: 'Giấy phép đăng ký kinh doanh là bắt buộc',
+    })
+    .optional(),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+
+
+const RegistrationForm = () => {
+  const navigate = useNavigate();
+  const form = useRegisterStore((state) => state.form);
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      taxCode: form.taxCode || '',
+      representative: form.representative || '',
+      email: form.email || '',
+      address: form.address || '',
+      companyName: form.companyName || '',
+      position: form.position || '',
+      phone: form.phoneNumber || '',
+      license: form.license || undefined, // handle optional license
+    },
+  });
+
+  const setForm = useRegisterStore((state) => state.setForm);
+  const nextStep = useProcessStore((state) => state.nextStep);
+  const prevStep = useProcessStore((state) => state.prevStep);
+
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    // here data.license is a File
+    console.log(data);
+
+    setForm({
+      taxCode: data.taxCode,
+      representative: data.representative,
+      email: data.email,
+      address: data.address,
+      companyName: data.companyName,
+      position: data.position,
+      phoneNumber: data.phone || null, // handle optional phone
+      license: data.license || null, // handle optional license
+    });
+
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="w-full mx-auto p-6 bg-white shadow rounded"
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {/* Left */}
+        <div className="space-y-4">
+          <Controller
+            name="taxCode"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="Mã số thuế"
+                required
+                error={errors.taxCode?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="representative"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="Người đại diện"
+                required
+                error={errors.representative?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="email"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="Email"
+                type="email"
+                required
+                error={errors.email?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="address"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="Địa chỉ"
+                required
+                error={errors.address?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="license"
+            control={control}
+            render={({ field }) => (
+              <FileUpload
+                label="Giấy phép đăng ký kinh doanh"
+                required
+                file={field.value ?? null}
+                onFileChange={field.onChange}
+                error={errors.license?.message}
+              />
+            )}
+          />
+        </div>
+
+        {/* Right */}
+        <div className="space-y-4">
+          <Controller
+            name="companyName"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="Tên công ty"
+                required
+                error={errors.companyName?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="position"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="Chức vụ"
+                error={errors.position?.message}
+              />
+            )}
+          />
+
+          <Controller
+            name="phone"
+            control={control}
+            render={({ field }) => (
+              <InputField
+                {...field}
+                label="SĐT"
+                type="tel"
+                error={errors.phone?.message}
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className='flex items-center justify-end gap-2'>
+        <Button title={'Back'} 
+        handleClick={() => {
+          prevStep()
+          navigate('/select-provider');
+         }
+          }
+
+        className=' !bg-gray-200 !text-gray-700 hover:!bg-gray-300 disabled:!bg-gray-200 disabled:!text-gray-500'  
+          />
+        <Button
+          type='submit'
+         title={isSubmitting ? 'Submitting...' : 'Submit'} isDisabled={isSubmitting || Object.keys(errors).length > 0 || !isValid}
+        handleClick={() => { 
+          nextStep()
+          navigate('/select-plan');
+        }
+          }
+          />
+      </div>
+    </form>
+  );
+};
+
+export default RegistrationForm;

package/src/pages/select-plan.tsx

@@ -1,39 +1,39 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import Button from "../components/button";
-import SubscriptionSelector from "../components/form/select-option";
-import { useProcessStore } from "../store/process";
-
-
-const SelectPlan = () => {
-  const navigate = useNavigate();
-  const nextStep = useProcessStore((state) => state.nextStep);
-  const [plan, setPlan] = useState('300');
-  const options = [
-    { value: '100', label: '100 đơn/tháng' },
-    { value: '300', label: '300 đơn/tháng' },
-    { value: '500', label: '500 đơn/tháng' },
-  ];
-
-  return (
-    <div className="w-full flex flex-col gap-6">
-      <h2 className="heading">Select subscription package</h2>
-      <SubscriptionSelector
-        options={options}
-        value={plan}
-        onChange={setPlan}
-      />
-      <div className='text-right'>
-        <Button title={'Next'}
-        isDisabled={!plan}
-        handleClick={() => {
-          nextStep()
-          navigate("/status")
-        }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default SelectPlan;
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "../components/button";
+import SubscriptionSelector from "../components/form/select-option";
+import { useProcessStore } from "../store/process";
+
+
+const SelectPlan = () => {
+  const navigate = useNavigate();
+  const nextStep = useProcessStore((state) => state.nextStep);
+  const [plan, setPlan] = useState('300');
+  const options = [
+    { value: '100', label: '100 đơn/tháng' },
+    { value: '300', label: '300 đơn/tháng' },
+    { value: '500', label: '500 đơn/tháng' },
+  ];
+
+  return (
+    <div className="w-full flex flex-col gap-6">
+      <h2 className="heading">Select subscription package</h2>
+      <SubscriptionSelector
+        options={options}
+        value={plan}
+        onChange={setPlan}
+      />
+      <div className='text-right'>
+        <Button title={'Next'}
+        isDisabled={!plan}
+        handleClick={() => {
+          nextStep()
+          navigate("/status")
+        }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default SelectPlan;