@akinon/pz-otp 2.0.0-beta.10 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-otp
 
+## 2.0.0-beta.11
+
+### Minor Changes
+
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+
 ## 2.0.0-beta.10
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-otp",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "license": "MIT",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/readme.md

@@ -9,3 +9,103 @@ You can use the following command to install the extension with the latest plugi
 npx @akinon/projectzero@latest --plugins
 
 ```
+
+### Props
+
+| Property | Type | 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. |
+
+### Customizing OTP
+
+```javascript
+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,7 +65,8 @@ export const Otp = ({
   timer = 60,
   texts,
   classes,
-  error
+  error,
+  customUIRender
 }: OtpProps) => {
   const { phone } = data;
   const [otp, setOtp] = useState('');
@@ -129,6 +143,22 @@ 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">