@invoice-sdk/widget 0.0.0 → 1.5.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "dependencies": {
-    "@invoice-sdk/api": "workspace:*",
     "react-hook-form": "^7.56.4",
     "react-router-dom": "6.30.1",
     "zod": "^3.25.42",
-    "zustand": "^5.0.5"
+    "zustand": "^5.0.5",
+    "@invoice-sdk/api": "1.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -32,12 +32,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "type": "module",
+  "version": "1.5.2",
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",
     "lint": "eslint .",
     "preview": "vite preview"
-  },
-  "type": "module",
-  "version": "0.0.0"
+  }
 }

package/src/components/button.tsx

@@ -1,23 +1,23 @@
-
-type Props = {
-  title: string
-  isDisabled?: boolean
-  handleClick?: () => void
-  type?: 'submit' | 'button'
-  className?: string
-}
-
-const Button = (props: Props) => {
-  return (
-    <button
-      type={props.type || 'button'}
-      disabled={props.isDisabled}
-      className={`bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded disabled:opacity-50 *:disabled:cursor-not-allowed ${props.className}`}
-      onClick={props.handleClick}
-      >
-         {props.title}
-    </button>
-  )
-}
-
+
+type Props = {
+  title: string
+  isDisabled?: boolean
+  handleClick?: () => void
+  type?: 'submit' | 'button'
+  className?: string
+}
+
+const Button = (props: Props) => {
+  return (
+    <button
+      type={props.type || 'button'}
+      disabled={props.isDisabled}
+      className={`bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded disabled:opacity-50 *:disabled:cursor-not-allowed ${props.className}`}
+      onClick={props.handleClick}
+      >
+         {props.title}
+    </button>
+  )
+}
+
 export default Button

package/src/components/form/custom-checkbox.tsx

@@ -1,20 +1,20 @@
-type Props = {
-  checked: boolean
-  setChecked: (checked: boolean) => void
-}
-const CustomCheckbox = ({ checked, setChecked }: Props) => {
-  return (
-    <label className='relative inline-flex cursor-pointer items-center'>
-      <input
-        type='checkbox'
-        className='peer sr-only'
-        checked={checked}
-        onChange={(e) => setChecked(e.target.checked)}
-      />
-
-      <div className='border-[#ACADAE] relative h-5 w-5 rounded-full border-2 before:absolute before:left-1/2 before:top-1/2 before:hidden before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-green-500 peer-checked:border-green-500 peer-checked:before:block' />
-    </label>
-  )
-}
-
-export default CustomCheckbox
+type Props = {
+  checked: boolean
+  setChecked: (checked: boolean) => void
+}
+const CustomCheckbox = ({ checked, setChecked }: Props) => {
+  return (
+    <label className='relative inline-flex cursor-pointer items-center'>
+      <input
+        type='checkbox'
+        className='peer sr-only'
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+
+      <div className='border-[#ACADAE] relative h-5 w-5 rounded-full border-2 before:absolute before:left-1/2 before:top-1/2 before:hidden before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-green-500 peer-checked:border-green-500 peer-checked:before:block' />
+    </label>
+  )
+}
+
+export default CustomCheckbox

package/src/components/form/file-upload.tsx

@@ -1,141 +1,141 @@
-import { useCallback, useEffect, useRef, useState, type ChangeEvent } from "react";
-
-type FileUploadProps = {
-  label: string;
-  required?: boolean;
-  file: File | null;
-  onFileChange: (file: File) => void;
-  error?: string;
-};
-
-const FileUpload: React.FC<FileUploadProps> = ({
-  label,
-  required = false,
-  file,
-  onFileChange,
-  error,
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {
-    const chosen = e.target.files?.[0];
-    if (!chosen) return;
-    onFileChange(chosen);
-    setPreviewUrl(URL.createObjectURL(chosen));
-  };
-
-  const openPicker = useCallback(() => {
-    inputRef.current?.click();
-  }, []);
-
-  useEffect(() => {
-    if(file){
-      setPreviewUrl(URL.createObjectURL(file as File))
-    }
-  }, [file])
-
-  return (
-    <>
-      {/* Label + Upload button */}
-      <div className="flex flex-col">
-        <label className="font-medium mb-1 text-gray-700">
-          {label}{required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-        <div className="flex items-center">
-          <button
-            type="button"
-            onClick={openPicker}
-            className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
-          >
-            Upload file
-          </button>
-          <input
-            ref={inputRef}
-            type="file"
-            accept="image/*,.pdf"
-            className="hidden"
-            onChange={handleFileInput}
-          />
-        </div>
-
-        {/* Preview box */}
-        <div
-          className="mt-2 h-40 w-full bg-gray-200 rounded overflow-hidden flex items-center justify-center cursor-pointer"
-          onClick={() => previewUrl && setModalOpen(true)}
-        >
-          {previewUrl ? (
-            file?.type === 'application/pdf' ? (
-              <object
-                data={previewUrl}
-                type="application/pdf"
-                width="100%"
-                height="100%"
-              >
-                <p className="text-gray-600 text-sm">
-                  Cannot preview PDF.{' '}
-                  <a
-                    href={previewUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-blue-600 underline"
-                  >
-                    Download PDF
-                  </a>
-                </p>
-              </object>
-            ) : (
-              <img
-                src={previewUrl}
-                alt="Preview"
-                className="h-full object-contain"
-              />
-            )
-          ) : (
-            <span className="text-gray-500">No file selected</span>
-          )}
-        </div>
-
-        {error && <span className="text-red-500 text-sm mt-1">{error}</span>}
-      </div>
-
-      {/* Lightbox Modal */}
-     {isModalOpen && previewUrl && (
-  <div
-    className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center"
-    onClick={() => setModalOpen(false)}
-  >
-    <div
-      className="relative w-full h-full"
-      onClick={(e) => e.stopPropagation()}
-    >
-      <button
-        onClick={() => setModalOpen(false)}
-        className="absolute top-2 right-2 text-white text-2xl"
-        aria-label="Close preview"
-      >
-        &times;
-      </button>
-
-      {file?.type === 'application/pdf' ? (
-        <object
-          data={previewUrl}
-          type="application/pdf"
-          className="w-full h-full object-contain"
-        />
-      ) : (
-        <img
-          src={previewUrl}
-          alt="Full Preview"
-          className="w-full h-full object-contain"
-        />
-      )}
-    </div>
-  </div>
-)}
-    </>
-  );
-};
-
+import { useCallback, useEffect, useRef, useState, type ChangeEvent } from "react";
+
+type FileUploadProps = {
+  label: string;
+  required?: boolean;
+  file: File | null;
+  onFileChange: (file: File) => void;
+  error?: string;
+};
+
+const FileUpload: React.FC<FileUploadProps> = ({
+  label,
+  required = false,
+  file,
+  onFileChange,
+  error,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const chosen = e.target.files?.[0];
+    if (!chosen) return;
+    onFileChange(chosen);
+    setPreviewUrl(URL.createObjectURL(chosen));
+  };
+
+  const openPicker = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+
+  useEffect(() => {
+    if(file){
+      setPreviewUrl(URL.createObjectURL(file as File))
+    }
+  }, [file])
+
+  return (
+    <>
+      {/* Label + Upload button */}
+      <div className="flex flex-col">
+        <label className="font-medium mb-1 text-gray-700">
+          {label}{required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className="flex items-center">
+          <button
+            type="button"
+            onClick={openPicker}
+            className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
+          >
+            Upload file
+          </button>
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/*,.pdf"
+            className="hidden"
+            onChange={handleFileInput}
+          />
+        </div>
+
+        {/* Preview box */}
+        <div
+          className="mt-2 h-40 w-full bg-gray-200 rounded overflow-hidden flex items-center justify-center cursor-pointer"
+          onClick={() => previewUrl && setModalOpen(true)}
+        >
+          {previewUrl ? (
+            file?.type === 'application/pdf' ? (
+              <object
+                data={previewUrl}
+                type="application/pdf"
+                width="100%"
+                height="100%"
+              >
+                <p className="text-gray-600 text-sm">
+                  Cannot preview PDF.{' '}
+                  <a
+                    href={previewUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-blue-600 underline"
+                  >
+                    Download PDF
+                  </a>
+                </p>
+              </object>
+            ) : (
+              <img
+                src={previewUrl}
+                alt="Preview"
+                className="h-full object-contain"
+              />
+            )
+          ) : (
+            <span className="text-gray-500">No file selected</span>
+          )}
+        </div>
+
+        {error && <span className="text-red-500 text-sm mt-1">{error}</span>}
+      </div>
+
+      {/* Lightbox Modal */}
+     {isModalOpen && previewUrl && (
+  <div
+    className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center"
+    onClick={() => setModalOpen(false)}
+  >
+    <div
+      className="relative w-full h-full"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <button
+        onClick={() => setModalOpen(false)}
+        className="absolute top-2 right-2 text-white text-2xl"
+        aria-label="Close preview"
+      >
+        &times;
+      </button>
+
+      {file?.type === 'application/pdf' ? (
+        <object
+          data={previewUrl}
+          type="application/pdf"
+          className="w-full h-full object-contain"
+        />
+      ) : (
+        <img
+          src={previewUrl}
+          alt="Full Preview"
+          className="w-full h-full object-contain"
+        />
+      )}
+    </div>
+  </div>
+)}
+    </>
+  );
+};
+
 export default FileUpload;

package/src/components/form/input-field.tsx

@@ -1,35 +1,35 @@
-import { forwardRef } from "react";
-
-type InputFieldProps = {
-  label: string;
-  required?: boolean;
-  error?: string;
-} & React.InputHTMLAttributes<HTMLInputElement>;
-
-const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  ({ label, required = false, error, ...props }, ref) => (
-    <div className="flex flex-col">
-      <label
-        htmlFor={props.name}
-        className="font-medium mb-1 text-gray-700"
-      >
-        {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
-      </label>
-      <input
-        id={props.name}
-        ref={ref}
-        {...props}
-        className={`border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-          error ? 'border-red-500' : 'border-gray-300'
-        }`}
-      />
-      {error && (
-        <span className="text-red-500 text-sm mt-1">{error}</span>
-      )}
-    </div>
-  )
-);
-InputField.displayName = 'InputField';
-
+import { forwardRef } from "react";
+
+type InputFieldProps = {
+  label: string;
+  required?: boolean;
+  error?: string;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  ({ label, required = false, error, ...props }, ref) => (
+    <div className="flex flex-col">
+      <label
+        htmlFor={props.name}
+        className="font-medium mb-1 text-gray-700"
+      >
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <input
+        id={props.name}
+        ref={ref}
+        {...props}
+        className={`border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+          error ? 'border-red-500' : 'border-gray-300'
+        }`}
+      />
+      {error && (
+        <span className="text-red-500 text-sm mt-1">{error}</span>
+      )}
+    </div>
+  )
+);
+InputField.displayName = 'InputField';
+
 export default InputField;

package/src/components/form/select-option.tsx

@@ -1,74 +1,74 @@
-import React from 'react';
-
-type Option = {
-  value: string;
-  label: string;
-};
-
-type SubscriptionSelectorProps = {
-  options: Option[];
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const SubscriptionSelector: React.FC<SubscriptionSelectorProps> = ({
-  options,
-  value,
-  onChange,
-}) => {
-  return (
-    <fieldset
-      role="radiogroup"
-      aria-label="Chọn gói đăng ký"
-      className="flex flex-col md:flex-row gap-4 md:gap-20"
-    >
-      {options.map((opt) => {
-        const selected = opt.value === value;
-        return (
-          <label
-            key={opt.value}
-            className={[
-              'flex items-center cursor-pointer rounded-lg border p-4 transition',
-              selected
-                ? 'border-green-500 bg-green-50'
-                : 'border-gray-300 bg-white hover:bg-gray-50',
-            ].join(' ')}
-          >
-            {/* Visually hidden native radio */}
-            <input
-              type="radio"
-              name="subscription"
-              value={opt.value}
-              checked={selected}
-              onChange={() => onChange(opt.value)}
-              className="sr-only"
-            />
-
-            {/* Custom radio visual */}
-            <span
-              className={[
-                'flex-shrink-0 flex items-center justify-center rounded-full mr-3',
-                selected
-                  ? 'w-5 h-5 border-2 border-green-500 bg-green-500'
-                  : 'w-4 h-4 border border-gray-400',
-              ].join(' ')}
-            >
-              {selected && (
-                <span className="block w-2 h-2 bg-white rounded-full" />
-              )}
-            </span>
-
-            {/* Label text */}
-            <span
-              className={selected ? 'text-green-700 font-medium' : 'text-gray-700'}
-            >
-              {opt.label}
-            </span>
-          </label>
-        );
-      })}
-    </fieldset>
-  );
-};
-
-export default SubscriptionSelector;
+import React from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+type SubscriptionSelectorProps = {
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const SubscriptionSelector: React.FC<SubscriptionSelectorProps> = ({
+  options,
+  value,
+  onChange,
+}) => {
+  return (
+    <fieldset
+      role="radiogroup"
+      aria-label="Chọn gói đăng ký"
+      className="flex flex-col md:flex-row gap-4 md:gap-20"
+    >
+      {options.map((opt) => {
+        const selected = opt.value === value;
+        return (
+          <label
+            key={opt.value}
+            className={[
+              'flex items-center cursor-pointer rounded-lg border p-4 transition',
+              selected
+                ? 'border-green-500 bg-green-50'
+                : 'border-gray-300 bg-white hover:bg-gray-50',
+            ].join(' ')}
+          >
+            {/* Visually hidden native radio */}
+            <input
+              type="radio"
+              name="subscription"
+              value={opt.value}
+              checked={selected}
+              onChange={() => onChange(opt.value)}
+              className="sr-only"
+            />
+
+            {/* Custom radio visual */}
+            <span
+              className={[
+                'flex-shrink-0 flex items-center justify-center rounded-full mr-3',
+                selected
+                  ? 'w-5 h-5 border-2 border-green-500 bg-green-500'
+                  : 'w-4 h-4 border border-gray-400',
+              ].join(' ')}
+            >
+              {selected && (
+                <span className="block w-2 h-2 bg-white rounded-full" />
+              )}
+            </span>
+
+            {/* Label text */}
+            <span
+              className={selected ? 'text-green-700 font-medium' : 'text-gray-700'}
+            >
+              {opt.label}
+            </span>
+          </label>
+        );
+      })}
+    </fieldset>
+  );
+};
+
+export default SubscriptionSelector;

package/src/components/layout.tsx

@@ -1,14 +1,14 @@
-import { Outlet } from "react-router-dom"
-import Process from "./process"
-
-
-const MainLayout = () => {
-  return (
-    <div className="max-w-[800px] mx-auto py-10 flex flex-col gap-8">
-      <Process />
-      <Outlet />
-    </div>
-  )
-}
-
+import { Outlet } from "react-router-dom"
+import Process from "./process"
+
+
+const MainLayout = () => {
+  return (
+    <div className="max-w-[800px] mx-auto py-10 flex flex-col gap-8">
+      <Process />
+      <Outlet />
+    </div>
+  )
+}
+
 export default MainLayout