@akinon/pz-otp 1.23.0 → 1.24.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-otp
 
+## 1.24.0-rc.0
+
+### Minor Changes
+
+- 0181251: ZERO-2440: move otp popup state to redux
+
 ## 1.23.0
 
 ## 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-otp",
-  "version": "1.23.0",
+  "version": "1.24.0-rc.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -1 +1,4 @@
+import otpReducer from './redux/reducer';
+
 export * from './views/Otp';
+export { otpReducer };

package/src/redux/reducer.ts

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export interface OtpState {
+  isPopupVisible: boolean;
+}
+
+const initialState: OtpState = {
+  isPopupVisible: false
+};
+
+const otpSlice = createSlice({
+  name: 'otp',
+  initialState,
+  reducers: {
+    showPopup(state) {
+      state.isPopupVisible = true;
+    },
+    hidePopup(state) {
+      state.isPopupVisible = false;
+    }
+  }
+});
+
+export const { showPopup, hidePopup } = otpSlice.actions;
+
+export default otpSlice.reducer;

package/src/views/Otp.tsx

@@ -1,9 +1,10 @@
 import { FormEvent, ReactNode, useEffect, useState } from 'react';
-import { useRouter } from '@akinon/next/hooks';
 import { Button } from '@akinon/next/components/button';
 import OtpInput from 'react-otp-input';
 import { SubmitHandler } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { hidePopup } from '../redux/reducer';
 
 enum Component {
   Title = 'title',
@@ -21,15 +22,14 @@ enum ComponentWrapper {
   Otp = 'otp'
 }
 
-type ComponentClassKey = (typeof Component)[keyof typeof Component];
+type ComponentClassKey = typeof Component[keyof typeof Component];
 type ComponentWrapperClassKey =
-  `${(typeof ComponentWrapper)[keyof typeof ComponentWrapper]}Wrapper`;
+  `${typeof ComponentWrapper[keyof typeof ComponentWrapper]}Wrapper`;
 type ComponentClasses = ComponentClassKey | ComponentWrapperClassKey;
 
 type OtpProps = {
   codeLength?: number;
   timer?: number;
-  setShowPopup: any;
   submitAction: SubmitHandler<{
     [key: string]: any;
   }>;
@@ -49,16 +49,14 @@ export const Otp = ({
   data,
   codeLength = 6,
   timer = 60,
-  setShowPopup,
   texts,
   classes
 }: OtpProps) => {
-  const router = useRouter();
-
   const [otp, setOtp] = useState('');
   const [canResend, setCanResend] = useState(false);
   const [time, setTime] = useState(timer);
   const [hasError, setHasError] = useState(false);
+  const dispatch = useAppDispatch();
 
   const resetTimer = () => {
     setTime(timer);
@@ -79,9 +77,7 @@ export const Otp = ({
   };
 
   const closeHandler = () => {
-    if (setShowPopup) {
-      setShowPopup(false);
-    }
+    dispatch(hidePopup());
   };
 
   const resendHandler = async () => {
@@ -105,9 +101,9 @@ export const Otp = ({
       }, 1000);
 
       return () => clearInterval(timerId);
-    } else {
-      onTimerEnd();
     }
+
+    onTimerEnd();
   }, [time, onTimerEnd]);
 
   useEffect(() => {
@@ -117,7 +113,7 @@ export const Otp = ({
     return () => {
       document.body.style.overflow = 'auto';
     };
-  });
+  }, []);
 
   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">