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

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @akinon/pz-otp
 
+## 2.0.0-beta.10
+
+### Minor Changes
+
+- 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
+
+## 2.0.0-beta.9
+
+### Minor Changes
+
+- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+
+## 2.0.0-beta.8
+
+## 2.0.0-beta.7
+
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+## 2.0.0-beta.5
+
+## 2.0.0-beta.4
+
+## 2.0.0-beta.3
+
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- a006015: ZERO-3116: Add not-found page and update default middleware.
+- 1eeb3d8: ZERO-3116: Add not found page
+
 ## 2.0.0-beta.1
 
 ### Minor Changes

package/package.json

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

package/readme.md

@@ -1,11 +1,11 @@
 # @akinon/pz-otp
 
-### Install the npm package
+## Installation method
+
+You can use the following command to install the extension with the latest plugins:
 
 ```bash
-# For latest version
-yarn add @akinon/pz-otp
 
-# Preferred installation method
 npx @akinon/projectzero@latest --plugins
+
 ```

package/src/views/Otp.tsx

@@ -30,7 +30,6 @@ type ComponentClasses = ComponentClassKey | ComponentWrapperClassKey;
 type OtpProps = {
   codeLength?: number;
   timer?: number;
-  phone?: string;
   submitAction: SubmitHandler<{
     [key: string]: any;
   }>;
@@ -53,15 +52,15 @@ export const Otp = ({
   timer = 60,
   texts,
   classes,
-  error,
-  phone
+  error
 }: OtpProps) => {
+  const { phone } = data;
   const [otp, setOtp] = useState('');
   const [canResend, setCanResend] = useState(false);
   const [time, setTime] = useState(timer);
   const [hasError, setHasError] = useState(false);
   const dispatch = useAppDispatch();
-  const otpPopupVisible = useAppSelector((state) => state.otp?.isPopupVisible);
+  const { isPopupVisible } = useAppSelector((state) => state.otp);
 
   const resetTimer = () => {
     setTime(timer);
@@ -118,19 +117,21 @@ export const Otp = ({
   }, [time, onTimerEnd]);
 
   useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    if (isPopupVisible) {
+      document.body.style.overflow = 'hidden';
+      window.scrollTo({ top: 0, behavior: 'smooth' });
 
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
+      return () => {
+        document.body.style.overflow = 'auto';
+      };
+    }
   }, []);
 
-  if (!otpPopupVisible) return null;
+  if (!isPopupVisible) return null;
 
   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="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="w-full flex items-center justify-end">
           <div className="cursor-pointer" onClick={closeHandler}>
             <svg