@akinon/pz-otp 2.0.0-beta.9 → 2.0.1

package/CHANGELOG.md

@@ -1,45 +1,154 @@
 # @akinon/pz-otp
 
-## 2.0.0-beta.9
+## 2.0.1
+
+## 2.0.0
+
+## 2.0.0-beta.27
+
+## 2.0.0-beta.26
+
+## 2.0.0-beta.25
+
+## 2.0.0-beta.24
+
+## 2.0.0-beta.23
+
+## 2.0.0-beta.22
+
+## 2.0.0-beta.21
+
+## 2.0.0-beta.20
+
+## 1.126.0
+
+## 1.125.2
+
+## 1.125.1
+
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+## 1.121.0
+
+## 1.120.0
 
 ### Minor Changes
 
-- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
+## 1.119.0
+
+## 1.118.0
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+## 1.112.0
+
+## 1.111.0
+
+## 1.110.0
+
+## 1.109.0
 
-## 2.0.0-beta.8
+## 1.108.0
 
-## 2.0.0-beta.7
+## 1.107.0
 
-## 2.0.0-beta.6
+## 1.106.0
 
 ### Minor Changes
 
-- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+- ae010f0: ZERO-3410: Update readme
 
-## 2.0.0-beta.5
+## 1.105.0
 
-## 2.0.0-beta.4
+## 1.104.0
 
-## 2.0.0-beta.3
+## 1.103.0
 
-## 2.0.0-beta.2
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
+
+### Minor Changes
+
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
+
+## 1.98.0
+
+## 1.97.0
+
+## 1.96.0
+
+## 1.95.0
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+## 1.90.0
+
+### Minor Changes
+
+- 9c3a22a: ZERO-3382: Enhance OTP component with customizable UI rendering support
+
+## 1.89.0
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
 
 ### Minor Changes
 
-- a006015: ZERO-3116: Add not-found page and update default middleware.
-- 1eeb3d8: ZERO-3116: Add not found page
+- a0a1bac: ZERO-3228 :edit OTP login flow to use Redux for popup visibility and clean up unused props
 
-## 2.0.0-beta.1
+## 1.84.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
+
+## 1.82.0
+
+## 1.81.0
+
+## 1.80.0
+
+## 1.79.0
 
-## 2.0.0-beta.0
+## 1.78.0
 
-### Major Changes
+## 1.77.0
 
-- be6c09d: ZERO-3114: Create beta version.
+## 1.76.0
 
 ## 1.75.0
 

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@akinon/pz-otp",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.1",
   "license": "MIT",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "prettier": "^3.4.2",
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "0.5.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "react-hook-form": "7.31.3",
-    "typescript": "^5.7.2"
+    "typescript": "^4.7.4"
   },
   "dependencies": {
     "react-otp-input": "^3.1.0",

package/readme.md

@@ -9,3 +9,119 @@ You can use the following command to install the extension with the latest plugi
 npx @akinon/projectzero@latest --plugins
 
 ```
+
+### Props
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| `customUIRender` | `React.ReactNode` | `Optional` | function to fully customize the otp. Receives closeHandler, resendHandler, otp, setOtp, hasError, error, canResend, time, codeLength, setHasError and onSubmit props. |
+| `submitAction` | `SubmitHandler<{ [key: string]: any }>` | `Required` | A submit handler function triggered when OTP form is submitted. |
+| `data` | `{ [key: string]: any }` | `Required` | Data object containing required fields like phone number. OTP code will be appended here before submission |
+
+### Default Usage
+
+```js
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.Otp}
+  props={{
+    data: getValues(),
+    submitAction: registerHandler
+  }}
+/>;
+```
+
+### Customizing OTP
+
+```js
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.Otp}
+  props={{
+    data: getValues(),
+    submitAction: registerHandler,
+    customUIRender: ({
+      closeHandler,
+      resendHandler,
+      onSubmit,
+      otp,
+      setOtp,
+      hasError,
+      error,
+      canResend,
+      time,
+      codeLength,
+      setHasError
+    }) => {
+      return (
+        <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-end md:items-center md:justify-center md:bg-black/10">
+          <div className="h-[calc(100vh-48px)] w-screen flex md:h-auto md:max-w-lg flex-col items-center rounded-sm bg-white p-8 shadow-xl">
+            <div className="w-full flex items-center justify-end">
+              <div className="cursor-pointer" onClick={closeHandler}>
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g fill="#000" fillRule="nonzero">
+                    <path d="M.684 14A.684.684 0 0 1 .2 12.833L12.833.2a.684.684 0 1 1 .967.967L1.167 13.8a.682.682 0 0 1-.483.2z" />
+                    <path d="M13.316 14a.682.682 0 0 1-.483-.2L.2 1.167A.684.684 0 0 1 1.167.2L13.8 12.833A.684.684 0 0 1 13.316 14z" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+            <div className="flex flex-col items-center px-14 mt-5">
+              <div className="text-2xl font-medium">OTP Verification</div>
+              <div className={twMerge('mt-2.5 text-center text-gray-700')}>
+                {`Please enter the ${codeLength}-digit sms code sent to your registered number and email address`}
+              </div>
+            </div>
+            <form
+              onSubmit={onSubmit}
+              className="flex flex-col items-center w-full"
+            >
+              <OtpInput
+                value={otp}
+                onChange={(otp) => {
+                  setOtp(otp);
+                  setHasError(false);
+                }}
+                numInputs={codeLength}
+                containerStyle="mt-12 gap-2 flex-wrap"
+                inputStyle={twMerge(
+                  'h-12 w-8 md:h-16 md:w-12 rounded-md border border-gray-600 text-center text-lg',
+                  hasError && 'border-error'
+                )}
+                renderInput={({ ...props }) => <input {...props} />}
+                skipDefaultStyles={true}
+              />
+              {error && <p className="text-xs text-error mt-2">{error}</p>}
+              <Button
+                type="submit"
+                className="mt-5 h-auto w-full py-4 text-lg font-medium uppercase"
+              >
+                Verify
+              </Button>
+            </form>
+            <div className="mt-6 flex flex-col items-center">
+              <span className="text-gray-700">I didn`t receive a code</span>
+              <div
+                className={twMerge(
+                  ' font-medium underline cursor-pointer',
+                  !canResend && 'cursor-not-allowed text-gray-700'
+                )}
+                onClick={resendHandler}
+              >
+                RESEND
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }}
+/>;
+```

package/src/views/Otp.tsx

@@ -43,6 +43,19 @@ type OtpProps = {
     [c in ComponentClasses]?: string;
   };
   error?: string;
+  customUIRender?: (props: {
+    closeHandler?: () => void;
+    resendHandler?: () => void;
+    onSubmit?: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+    otp?: string;
+    setOtp?: (otp: string) => void;
+    hasError?: boolean;
+    error?: string;
+    canResend?: boolean;
+    time?: number;
+    codeLength?: number;
+    setHasError?: (hasError: boolean) => void;
+  }) => ReactNode;
 };
 
 export const Otp = ({
@@ -52,13 +65,15 @@ export const Otp = ({
   timer = 60,
   texts,
   classes,
-  error
+  error,
+  customUIRender
 }: OtpProps) => {
   const { phone } = data;
   const [otp, setOtp] = useState('');
   const [canResend, setCanResend] = useState(false);
   const [time, setTime] = useState(timer);
   const [hasError, setHasError] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const dispatch = useAppDispatch();
   const { isPopupVisible } = useAppSelector((state) => state.otp);
 
@@ -70,18 +85,26 @@ export const Otp = ({
   const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (submitAction) {
-      data.code = otp;
-      data.phone = phone;
-      const res = await submitAction(data);
+    if (isSubmitting) return;
 
-      if (res?.status !== 200 || error) {
-        setHasError(true);
-      }
+    setIsSubmitting(true);
 
-      if (res?.status === 200) {
-        dispatch(hidePopup());
+    try {
+      if (submitAction) {
+        data.code = otp;
+        data.phone = phone;
+        const res = await submitAction(data);
+
+        if (res?.status !== 200 || error) {
+          setHasError(true);
+        }
+
+        if (res?.status === 200) {
+          dispatch(hidePopup());
+        }
       }
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -129,9 +152,25 @@ export const Otp = ({
 
   if (!isPopupVisible) return null;
 
+  if (customUIRender) {
+    return customUIRender({
+      closeHandler,
+      resendHandler,
+      onSubmit,
+      otp,
+      setOtp,
+      hasError,
+      error,
+      canResend,
+      time,
+      codeLength,
+      setHasError
+    });
+  }
+
   return (
     <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-end md:items-center md:justify-center md:bg-black/10">
-      <div className="h-[calc(100vh-48px)] w-screen flex md:h-auto md:max-w-lg flex-col items-center rounded-xs bg-white p-8 shadow-xl">
+      <div className="h-[calc(100vh-48px)] w-screen flex md:h-auto md:max-w-lg flex-col items-center rounded-sm bg-white p-8 shadow-xl">
         <div className="w-full flex items-center justify-end">
           <div className="cursor-pointer" onClick={closeHandler}>
             <svg
@@ -195,6 +234,7 @@ export const Otp = ({
           {error && <p className="text-xs text-error mt-2">{error}</p>}
           <Button
             type="submit"
+            disabled={isSubmitting}
             className={twMerge(
               'mt-5 h-auto w-full py-4 text-lg font-medium uppercase',
               classes?.submitButton