@akinon/pz-otp 1.23.0-rc.5 → 1.23.0

package/CHANGELOG.md

@@ -1,20 +1,6 @@
 # @akinon/pz-otp
 
-## 1.23.0-rc.5
-
-## 1.23.0-rc.4
-
-## 1.23.0-rc.3
-
-## 1.23.0-rc.2
-
-## 1.23.0-rc.1
-
-## 1.23.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-rc.5",
+  "version": "1.23.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

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

package/src/views/Otp.tsx

@@ -1,10 +1,9 @@
 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',
@@ -22,14 +21,15 @@ 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,14 +49,16 @@ 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);
@@ -77,7 +79,9 @@ export const Otp = ({
   };
 
   const closeHandler = () => {
-    dispatch(hidePopup());
+    if (setShowPopup) {
+      setShowPopup(false);
+    }
   };
 
   const resendHandler = async () => {
@@ -101,9 +105,9 @@ export const Otp = ({
       }, 1000);
 
       return () => clearInterval(timerId);
+    } else {
+      onTimerEnd();
     }
-
-    onTimerEnd();
   }, [time, onTimerEnd]);
 
   useEffect(() => {
@@ -113,7 +117,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">

package/src/redux/reducer.ts

@@ -1,26 +0,0 @@
-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;