From a5cb3ce573bad05f3c37cf9f446896a71784cfe3 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Mon, 11 Sep 2023 22:09:13 +0000
Subject: [PATCH] feat: Create VerifyCodeDialog storybook file (#11286)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../components/verifyCodeDialog.stories.mdx   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/features/bookings/components/verifyCodeDialog.stories.mdx

diff --git a/packages/features/bookings/components/verifyCodeDialog.stories.mdx b/packages/features/bookings/components/verifyCodeDialog.stories.mdx
new file mode 100644
index 0000000000..8679477369
--- /dev/null
+++ b/packages/features/bookings/components/verifyCodeDialog.stories.mdx
@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import { Title, CustomArgsTable } from "@calcom/storybook/components";
+
+import { StorybookTrpcProvider } from "../../../ui/components/mocks/trpc.tsx";
+import { VerifyCodeDialog } from "./VerifyCodeDialog";
+
+<Meta title="Features/VerifyCodeDialog" component={VerifyCodeDialog} />
+
+<Title title="VerifyCodeDialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 11 Sep 2023" />
+
+## Definition
+
+The `VerifyCodeDialog` component allows users to enter a verification code sent to their email. The component provides feedback in case of an error and can handle different verification processes depending on whether the user session is required.
+
+## Structure
+
+This component contains an input form to capture a 6-digit verification code, error handling UI, and action buttons.
+
+<CustomArgsTable of={VerifyCodeDialog} />
+
+## VerifyCodeDialog Story
+
+<Canvas>
+  <Story
+    name="VerifyCodeDialog"
+    args={{
+      isOpenDialog: true,
+      setIsOpenDialog: () => {},
+      email: "example@email.com",
+      onSuccess: () => {},
+      onError: (err) => {
+        if (err.message === "invalid_code") {
+          alert("Code provided is invalid");
+        }
+      },
+    }}
+    argTypes={{
+      isOpenDialog: { control: "boolean", description: "Indicates whether the dialog is open or not." },
+      setIsOpenDialog: { action: "setIsOpenDialog", description: "Function to set the dialog state." },
+      email: { control: "text", description: "Email to which the verification code was sent." },
+      onSuccess: { action: "onSuccess", description: "Callback function when verification succeeds." },
+      onError: { action: "onError", description: "Callback function when verification fails." },
+      isUserSessionRequiredToVerify: {
+        control: "boolean",
+        description: "Indicates if user session is required for verification.",
+      },
+    }}>
+    {(args) => (
+      <StorybookTrpcProvider>
+        <VerifyCodeDialog {...args} />
+      </StorybookTrpcProvider>
+    )}
+  </Story>
+</Canvas>