@invoice-sdk/widget 0.0.0 → 1.1.0

package/src/components/process.tsx

@@ -1,21 +0,0 @@
-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.css

@@ -1,2 +0,0 @@
-@import "tailwindcss";
-

package/src/index.ts

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

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import InvoiceRegisterWidget from './App'
-import './index.css'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <InvoiceRegisterWidget />
-  </StrictMode>,
-)

package/src/pages/register.tsx

@@ -1,222 +0,0 @@
-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 +0,0 @@
-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;

package/src/pages/select-provider.tsx

@@ -1,74 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import Button from "../components/button";
-import CustomCheckbox from "../components/form/custom-checkbox";
-import { useProcessStore } from "../store/process";
-import { useRegisterStore } from "../store/register";
-
-
-
-interface IProvider {
-    name: string;
-    route: string;
-};
-
-const providers: IProvider[] = [
-  { name: 'M-Invoice', route: 'm-invoice' },
-  { name: 'FPT', route: 'fpt' },
-  { name: 'Misa', route: 'misa' },
-];
-
-const ProviderItem = ({ provider, handleProviderChange }: { provider: IProvider, 
-  handleProviderChange: (provider: string) => void
-} ) => {
-  const selectedProvider = useRegisterStore((state) => state.selectedProvider)
-  return (
-    <div
-    data-checked={selectedProvider === provider.route}
-    className="flex items-center justify-center gap-2 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 cursor-pointer
-    transition-colors duration-200 data-[checked=true]:border-green-500 data-[checked=true]:text-green-700
-    "
-    onClick={() => handleProviderChange(provider.route)}
-    >
-      <CustomCheckbox checked={selectedProvider === provider.route}
-      setChecked={() => handleProviderChange(provider.route)}
-      />
-      <label className="">{provider.name}</label>
-    </div>
-  )
-}
-
-const SelectProvider = () => {
-
-  const navigate = useNavigate()
-  const selectedProvider = useRegisterStore((state) => state.selectedProvider);
-  const setSelectedProvider = useRegisterStore((state) => state.setSelectedProvider);
-  const nextStep = useProcessStore(state => state.nextStep);
-
-  const handleProviderChange = (provider: string) => {
-    setSelectedProvider(provider);
-  };
-
-  return (
-    <div className="w-full flex flex-col gap-6">
-      <h2 className="heading">Select Provider</h2>
-      <div className="flex gap-20">
-        {
-          providers.map((provider) => (
-            <ProviderItem key={provider.route} provider={provider} handleProviderChange={handleProviderChange} />
-          ))
-        }
-      </div>
-      <div className='text-right'>
-        <Button title={'Next'}
-        isDisabled={!selectedProvider}
-        handleClick={() => {
-          nextStep()
-          navigate("/register")
-        }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default SelectProvider

package/src/pages/status.tsx

@@ -1,9 +0,0 @@
-
-
-const Status = () => {
-  return (
-    <div>Status</div>
-  )
-}
-
-export default Status

package/src/store/process.ts

@@ -1,18 +0,0 @@
-import {create} from 'zustand';
-
-type State = {
-  step: number;
- 
-}
-
-type Actions = {
-  nextStep: () => void
-  prevStep: () => void
-}
-
-export const useProcessStore = create<State & Actions>((set) => ({
-  step: 1,
-  nextStep: () => set((state) => ({ step: state.step + 1 })),
-  prevStep: () => set((state) => ({ step: Math.max(state.step - 1, 1) })),
-  reset: () => set({ step: 1})
-}));

package/src/store/register.ts

@@ -1,60 +0,0 @@
-import {create } from 'zustand';
-
-type State = {
-  selectedProvider: string | null;
-  form: {
-    taxCode: string;
-    companyName: string;
-    representative: string;
-    position: string;
-    email: string;
-    phoneNumber: string | null;
-    address: string ;
-    license: File | null;
-  },
-  selectedPlan: string | null;
-}
-
-type Actions = {
-  setSelectedProvider: (provider: string | null) => void;
-  setForm: (form: Partial<State['form']>) => void;
-  setSelectedPlan: (plan: string | null) => void;
-  reset: () => void;
-}
-export const useRegisterStore = create<State & Actions>((set) => ({
-  selectedProvider: null,
-  form: {
-    taxCode: '',
-    companyName: '',
-    representative: '',
-    position: '',
-    email: '',
-    phoneNumber: null,
-    address: '',
-    license: null,
-  },
-  selectedPlan: null,
-
-  setSelectedProvider: (provider) => set({ selectedProvider: provider }),
-  
-  setForm: (form) => set((state) => ({
-    form: { ...state.form, ...form }
-  })),
-
-  setSelectedPlan: (plan) => set({ selectedPlan: plan }),
-
-  reset: () => set({
-    selectedProvider: null,
-    form: {
-      taxCode: '',
-      companyName: '',
-      representative: '',
-      position: '',
-      email: '',
-      phoneNumber: null,
-      address: '',
-      license: null,
-    },
-    selectedPlan: null,
-  }),
-}));

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",          
-    "module": "CommonJS", 
-    "jsx": "react-jsx",       
-    "outDir": "dist", 
-    "rootDir": "src",           
-    "strict": true,
-    "declaration": true, 
-    "declarationMap": true,        
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,   
-    "skipLibCheck": true,
-    "emitDeclarationOnly": true,
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/app.tsx","./src/index.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/layout.tsx","./src/components/process.tsx","./src/components/form/custom-checkbox.tsx","./src/components/form/file-upload.tsx","./src/components/form/input-field.tsx","./src/components/form/select-option.tsx","./src/pages/register.tsx","./src/pages/select-plan.tsx","./src/pages/select-provider.tsx","./src/pages/status.tsx","./src/store/process.ts","./src/store/register.ts"],"version":"5.8.3"}

package/vite.config.ts

@@ -1,46 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-import autoprefixer from 'autoprefixer'
-import path from 'path'
-// https://vite.dev/config/
-export default defineConfig({
-  root: ".",
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  build: {
-    outDir: "dist",
-    lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
-      name: "SdkWidget",
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format}.js`,
-    },
-    rollupOptions: {
-      // Do not bundle React/ReactDOM/ReactRouter – treat them as externals
-      external: ["react", "react-dom", "react-router-dom"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          "react-router-dom": "ReactRouterDOM",
-        },
-      },
-    },
-  },
-  server: {
-    port: 3000,
-    open: true,
-  },
-  plugins: [react(),tailwindcss(),],
-  css: {
-    postcss: {
-      plugins: [
-        autoprefixer(),
-      ]
-    }
-  }
-})