chore: add autoSubmit to CodeConfirmation

sikka-software · Sep 7, 2024 · 171e728 · 171e728
1 parent df61c9e
commit 171e728
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<TConfirmation> = ({ codeLength = 6, ...props }) => {
+export const CodeConfirmation: FC<TConfirmation> = ({
+  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<TConfirmation> = ({ 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 (
     <Card
       className={cn(
@@ -92,7 +116,12 @@ export const CodeConfirmation: FC<TConfirmation> = ({ codeLength = 6, ...props }
     >
       <CardContent headless noPadding={props.cardless}>
         {props.showError && (
-          <Alert title={props.errorTitle} text={props.errorText} severity="error" />
+          <Alert
+            direction={props.direction || "ltr"}
+            title={props.errorTitle}
+            text={props.errorText}
+            severity="error"
+          />
         )}
         <div className="hawa-mb-4 dark:hawa-text-white">
           <div className="hawa-text-lg hawa-font-bold">

diff --git 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
@@ -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
@@ -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
@@ -24,6 +24,10 @@ export const Default: Story = {
         <CodeConfirmation
           showError={args.showError}
           {...args}
+          autoSubmit
+          direction={direction}
+          errorText={t("codeTooShort")}
+          errorTitle={t("codeRequiredText")}
           texts={{
             checkYourIdentifier: t("checkYourPhone"),
             weSentCode: t("weSentCode"),