@akinon/pz-otp 2.0.0-beta.12 → 2.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +79 -24
  2. package/package.json +10 -10
  3. package/readme.md +20 -4
  4. package/src/views/Otp.tsx +20 -10
package/CHANGELOG.md CHANGED
@@ -1,63 +1,118 @@
1
1
  # @akinon/pz-otp
2
2
 
3
- ## 2.0.0-beta.12
3
+ ## 2.0.0-beta.14
4
4
 
5
5
  ### Minor Changes
6
6
 
7
- - 1d79e32: ZERO-3540: Next.js Upgrade to 15.4.5
7
+ - 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
8
8
 
9
- ## 2.0.0-beta.11
9
+ ## 2.0.0-beta.13
10
10
 
11
- ### Minor Changes
11
+ ## 1.118.0
12
+
13
+ ## 1.117.0
14
+
15
+ ## 1.116.0
16
+
17
+ ## 1.115.0
18
+
19
+ ## 1.114.0
20
+
21
+ ## 1.113.0
22
+
23
+ ## 1.112.0
24
+
25
+ ## 1.111.0
12
26
 
13
- - ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
27
+ ## 1.110.0
14
28
 
15
- ## 2.0.0-beta.10
29
+ ## 1.109.0
30
+
31
+ ## 1.108.0
32
+
33
+ ## 1.107.0
34
+
35
+ ## 1.106.0
16
36
 
17
37
  ### Minor Changes
18
38
 
19
- - 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
39
+ - ae010f0: ZERO-3410: Update readme
40
+
41
+ ## 1.105.0
42
+
43
+ ## 1.104.0
44
+
45
+ ## 1.103.0
46
+
47
+ ## 1.102.0
20
48
 
21
- ## 2.0.0-beta.9
49
+ ## 1.101.0
50
+
51
+ ## 1.100.0
52
+
53
+ ## 1.99.0
22
54
 
23
55
  ### Minor Changes
24
56
 
25
- - 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
57
+ - d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
58
+
59
+ ## 1.98.0
60
+
61
+ ## 1.97.0
62
+
63
+ ## 1.96.0
64
+
65
+ ## 1.95.0
66
+
67
+ ## 1.94.0
26
68
 
27
- ## 2.0.0-beta.8
69
+ ## 1.93.0
28
70
 
29
- ## 2.0.0-beta.7
71
+ ## 1.92.0
30
72
 
31
- ## 2.0.0-beta.6
73
+ ## 1.91.0
74
+
75
+ ## 1.90.0
32
76
 
33
77
  ### Minor Changes
34
78
 
35
- - 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
79
+ - 9c3a22a: ZERO-3382: Enhance OTP component with customizable UI rendering support
80
+
81
+ ## 1.89.0
36
82
 
37
- ## 2.0.0-beta.5
83
+ ## 1.88.0
38
84
 
39
- ## 2.0.0-beta.4
85
+ ## 1.87.0
40
86
 
41
- ## 2.0.0-beta.3
87
+ ## 1.86.0
42
88
 
43
- ## 2.0.0-beta.2
89
+ ## 1.85.0
44
90
 
45
91
  ### Minor Changes
46
92
 
47
- - a006015: ZERO-3116: Add not-found page and update default middleware.
48
- - 1eeb3d8: ZERO-3116: Add not found page
93
+ - a0a1bac: ZERO-3228 :edit OTP login flow to use Redux for popup visibility and clean up unused props
49
94
 
50
- ## 2.0.0-beta.1
95
+ ## 1.84.0
51
96
 
52
97
  ### Minor Changes
53
98
 
54
- - ZERO-3091: Upgrade Next.js to v15 and React to v19
99
+ - 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
100
+
101
+ ## 1.83.0
102
+
103
+ ## 1.82.0
104
+
105
+ ## 1.81.0
106
+
107
+ ## 1.80.0
108
+
109
+ ## 1.79.0
55
110
 
56
- ## 2.0.0-beta.0
111
+ ## 1.78.0
57
112
 
58
- ### Major Changes
113
+ ## 1.77.0
59
114
 
60
- - be6c09d: ZERO-3114: Create beta version.
115
+ ## 1.76.0
61
116
 
62
117
  ## 1.75.0
63
118
 
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "@akinon/pz-otp",
3
- "version": "2.0.0-beta.12",
3
+ "version": "2.0.0-beta.14",
4
4
  "license": "MIT",
5
5
  "main": "./src/index.ts",
6
6
  "module": "./src/index.ts",
7
7
  "peerDependencies": {
8
- "react": "^19.0.0",
9
- "react-dom": "^19.0.0"
8
+ "react": "^18.0.0 || ^19.0.0",
9
+ "react-dom": "^18.0.0 || ^19.0.0"
10
10
  },
11
11
  "devDependencies": {
12
- "@types/node": "^22.10.2",
13
- "@types/react": "^19.0.2",
14
- "@types/react-dom": "^19.0.2",
15
- "prettier": "^3.4.2",
12
+ "@types/node": "^18.7.8",
13
+ "@types/react": "^18.0.17",
14
+ "@types/react-dom": "^18.0.6",
15
+ "prettier": "3.0.3",
16
16
  "prettier-plugin-tailwindcss": "0.5.6",
17
- "react": "^19.0.0",
18
- "react-dom": "^19.0.0",
17
+ "react": "^19.2.4",
18
+ "react-dom": "^19.2.4",
19
19
  "react-hook-form": "7.31.3",
20
- "typescript": "^5.7.2"
20
+ "typescript": "^4.7.4"
21
21
  },
22
22
  "dependencies": {
23
23
  "react-otp-input": "^3.1.0",
package/readme.md CHANGED
@@ -12,13 +12,29 @@ npx @akinon/projectzero@latest --plugins
12
12
 
13
13
  ### Props
14
14
 
15
- | Property | Type | Description |
16
- | --- | --- | --- |
17
- | `customUIRender` | `React.ReactNode` | Optional function to fully customize the otp. Receives closeHandler, resendHandler, otp, setOtp, hasError, error, canResend, time, codeLength, setHasError and onSubmit props. |
15
+ | Property | Type | Required | Description |
16
+ | --- | --- | --- | --- |
17
+ | `customUIRender` | `React.ReactNode` | `Optional` | function to fully customize the otp. Receives closeHandler, resendHandler, otp, setOtp, hasError, error, canResend, time, codeLength, setHasError and onSubmit props. |
18
+ | `submitAction` | `SubmitHandler<{ [key: string]: any }>` | `Required` | A submit handler function triggered when OTP form is submitted. |
19
+ | `data` | `{ [key: string]: any }` | `Required` | Data object containing required fields like phone number. OTP code will be appended here before submission |
20
+
21
+ ### Default Usage
22
+
23
+ ```js
24
+ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
25
+
26
+ <PluginModule
27
+ component={Component.Otp}
28
+ props={{
29
+ data: getValues(),
30
+ submitAction: registerHandler
31
+ }}
32
+ />;
33
+ ```
18
34
 
19
35
  ### Customizing OTP
20
36
 
21
- ```javascript
37
+ ```js
22
38
  import PluginModule, { Component } from '@akinon/next/components/plugin-module';
23
39
 
24
40
  <PluginModule
package/src/views/Otp.tsx CHANGED
@@ -73,6 +73,7 @@ export const Otp = ({
73
73
  const [canResend, setCanResend] = useState(false);
74
74
  const [time, setTime] = useState(timer);
75
75
  const [hasError, setHasError] = useState(false);
76
+ const [isSubmitting, setIsSubmitting] = useState(false);
76
77
  const dispatch = useAppDispatch();
77
78
  const { isPopupVisible } = useAppSelector((state) => state.otp);
78
79
 
@@ -84,18 +85,26 @@ export const Otp = ({
84
85
  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
85
86
  event.preventDefault();
86
87
 
87
- if (submitAction) {
88
- data.code = otp;
89
- data.phone = phone;
90
- const res = await submitAction(data);
88
+ if (isSubmitting) return;
91
89
 
92
- if (res?.status !== 200 || error) {
93
- setHasError(true);
94
- }
90
+ setIsSubmitting(true);
91
+
92
+ try {
93
+ if (submitAction) {
94
+ data.code = otp;
95
+ data.phone = phone;
96
+ const res = await submitAction(data);
97
+
98
+ if (res?.status !== 200 || error) {
99
+ setHasError(true);
100
+ }
95
101
 
96
- if (res?.status === 200) {
97
- dispatch(hidePopup());
102
+ if (res?.status === 200) {
103
+ dispatch(hidePopup());
104
+ }
98
105
  }
106
+ } finally {
107
+ setIsSubmitting(false);
99
108
  }
100
109
  };
101
110
 
@@ -161,7 +170,7 @@ export const Otp = ({
161
170
 
162
171
  return (
163
172
  <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">
164
- <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">
173
+ <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">
165
174
  <div className="w-full flex items-center justify-end">
166
175
  <div className="cursor-pointer" onClick={closeHandler}>
167
176
  <svg
@@ -225,6 +234,7 @@ export const Otp = ({
225
234
  {error && <p className="text-xs text-error mt-2">{error}</p>}
226
235
  <Button
227
236
  type="submit"
237
+ disabled={isSubmitting}
228
238
  className={twMerge(
229
239
  'mt-5 h-auto w-full py-4 text-lg font-medium uppercase',
230
240
  classes?.submitButton