From 171e72879bbadba537351b52c447549cc45e9aa4 Mon Sep 17 00:00:00 2001 From: zakher Date: Sat, 7 Sep 2024 19:17:03 +0300 Subject: [PATCH] chore: add `autoSubmit` to `CodeConfirmation` --- .husky/pre-push | 2 +- apps/docs/CHANGELOG.md | 7 ++++ apps/docs/package.json | 2 +- packages/components/CHANGELOG.md | 7 ++++ .../blocks/auth/CodeConfirmation.tsx | 35 +++++++++++++++++-- packages/components/package.json | 2 +- packages/storybook/CHANGELOG.md | 7 ++++ packages/storybook/package.json | 2 +- .../AuthStories/CodeConfirmation.stories.tsx | 4 +++ 9 files changed, 61 insertions(+), 7 deletions(-) diff --git a/.husky/pre-push b/.husky/pre-push index fd5ed641..5888d6c0 100644 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -7,7 +7,7 @@ last_commit_message=$(git log -1 --pretty=%B) # Check if the commit message contains #skip_publish if echo "$last_commit_message" | grep -q "skip_publish"; then - echo "Skipping version check due to #skip_publish in the commit message." + echo "Skipping version check due to skip_publish in the commit message." exit 0 else node .husky/scripts/check-version.js diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md index a7c6d821..0aa130f7 100644 --- a/apps/docs/CHANGELOG.md +++ b/apps/docs/CHANGELOG.md @@ -1,5 +1,12 @@ # hawa-docs +## 0.0.130 + +### Patch Changes + +- Updated dependencies + - @sikka/hawa@0.49.13 + ## 0.0.129 ### Patch Changes diff --git a/apps/docs/package.json b/apps/docs/package.json index 03ffa913..2641ca97 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -1,6 +1,6 @@ { "name": "hawa-docs", - "version": "0.0.129", + "version": "0.0.130", "private": true, "scripts": { "dev": "next dev -p 3001", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1768f436..14679dc1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @sikka/hawa +## 0.49.13 + +### Patch Changes + +- `CodeConfirmation`: Add direction to alert +- `CodeConfirmation`: Add `autoSubmit` boolean to submit when code is fully entered + ## 0.49.12 ### Patch Changes diff --git a/packages/components/blocks/auth/CodeConfirmation.tsx b/packages/components/blocks/auth/CodeConfirmation.tsx index a63d822b..7ce7df9b 100644 --- a/packages/components/blocks/auth/CodeConfirmation.tsx +++ b/packages/components/blocks/auth/CodeConfirmation.tsx @@ -1,5 +1,5 @@ import React, { FC, useEffect, useState } from "react"; -import { Controller, useForm } from "react-hook-form"; +import { Controller, useForm, useWatch } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { cn } from "@util/index"; @@ -26,6 +26,7 @@ type TConfirmation = { showError?: any; errorTitle?: any; errorText?: any; + direction?: "ltr" | "rtl"; /* * The identifier to be shown in the card title. That could be a phone number or an email address of the user. */ @@ -37,9 +38,17 @@ type TConfirmation = { cardless?: boolean; codeLength?: number; + /* + * If set to true, the form will be submitted automatically when the code is entered + */ + autoSubmit?: boolean; }; -export const CodeConfirmation: FC = ({ codeLength = 6, ...props }) => { +export const CodeConfirmation: FC = ({ + autoSubmit = false, + codeLength = 6, + ...props +}) => { const formSchema = z.object({ otp_code: z .string({ required_error: props.texts?.codeRequiredText }) @@ -83,6 +92,21 @@ export const CodeConfirmation: FC = ({ codeLength = 6, ...props } } }; }, []); + + const otpCode = useWatch({ control, name: "otp_code" }); + + useEffect(() => { + if (autoSubmit && otpCode?.length === codeLength) { + handleSubmit((e) => { + if (props.onConfirm) { + return props.onConfirm(e); + } else { + console.log("Form is submitted but onConfirm prop is missing"); + } + })(); + } + }, [otpCode, autoSubmit, codeLength]); + return ( = ({ codeLength = 6, ...props } > {props.showError && ( - + )}
diff --git a/packages/components/package.json b/packages/components/package.json index 7cf71d9c..a39671d7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@sikka/hawa", - "version": "0.49.12", + "version": "0.49.13", "description": "Modern UI Kit made with Tailwind", "author": { "name": "Sikka Software", diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md index 37c2dcf0..42532f20 100644 --- a/packages/storybook/CHANGELOG.md +++ b/packages/storybook/CHANGELOG.md @@ -1,5 +1,12 @@ # hawa-storybook +## 0.26.152 + +### Patch Changes + +- Updated dependencies + - @sikka/hawa@0.49.13 + ## 0.26.151 ### Patch Changes diff --git a/packages/storybook/package.json b/packages/storybook/package.json index c52a3c3e..818106db 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -1,6 +1,6 @@ { "name": "hawa-storybook", - "version": "0.26.151", + "version": "0.26.152", "description": "Modern UI Kit made with Tailwind", "author": { "name": "Sikka Software", diff --git a/packages/storybook/stories/BlocksStories/AuthStories/CodeConfirmation.stories.tsx b/packages/storybook/stories/BlocksStories/AuthStories/CodeConfirmation.stories.tsx index fd25ceee..fa4a878c 100644 --- a/packages/storybook/stories/BlocksStories/AuthStories/CodeConfirmation.stories.tsx +++ b/packages/storybook/stories/BlocksStories/AuthStories/CodeConfirmation.stories.tsx @@ -24,6 +24,10 @@ export const Default: Story = {