From 8697349e1933af2862724b3f049ad2169ff5a82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B5=D1=80=D0=B5=D0=BD=D1=82=D1=8C=D0=B5=D0=B2=20?= =?UTF-8?q?=D0=92=D0=B0=D0=B4=D0=B8=D0=BC=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81?= =?UTF-8?q?=D0=B5=D0=B5=D0=B2=D0=B8=D1=87?= Date: Sat, 4 May 2024 23:45:24 +0300 Subject: [PATCH] =?UTF-8?q?GL-25:=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=B8=D0=BD=D1=82=D0=B5=D0=B3=D1=80?= =?UTF-8?q?=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B0=D1=83=D1=82=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B8=D1=84=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/items/data-table-view-options.tsx | 16 ++-- src/features/authentication-form-any/index.ts | 1 + .../ui/AuthenticationFormAny.tsx | 44 +++++++++ .../authentication-form-azuriom/index.ts | 1 + .../authentication-form-azuriom/lib/static.ts | 11 +++ .../ui/AuthenticationFormAzuriom.tsx} | 26 +++--- src/features/authentication-form-dle/index.ts | 1 + .../authentication-form-dle/lib/static.ts | 11 +++ .../ui/AuthenticationFormDle.tsx | 90 +++++++++++++++++++ .../authentication-form-undefined/index.ts | 1 + .../ui/AuthenticationFormUndefined.tsx | 48 ++++++++++ src/features/integration-form/index.ts | 1 - src/features/integration-form/lib/static.ts | 8 -- src/features/sentry-connect-form/index.ts | 2 +- src/screens/Integrations/ui/Integrations.tsx | 2 + .../api/contracts/integrations/schemas.ts | 4 +- src/shared/enums/index.ts | 5 +- src/shared/enums/integration.ts | 13 +++ src/shared/hooks/useIntegraions.ts | 35 ++++---- src/shared/ui/Breadcrumbs/ui/Breadcrumbs.tsx | 5 +- src/shared/ui/alert.tsx | 49 ++++++++++ .../ui/AuthenticationMethodDialog.tsx | 62 +++++++------ 22 files changed, 358 insertions(+), 78 deletions(-) create mode 100644 src/features/authentication-form-any/index.ts create mode 100644 src/features/authentication-form-any/ui/AuthenticationFormAny.tsx create mode 100644 src/features/authentication-form-azuriom/index.ts create mode 100644 src/features/authentication-form-azuriom/lib/static.ts rename src/features/{integration-form/ui/IntegrationForm.tsx => authentication-form-azuriom/ui/AuthenticationFormAzuriom.tsx} (63%) create mode 100644 src/features/authentication-form-dle/index.ts create mode 100644 src/features/authentication-form-dle/lib/static.ts create mode 100644 src/features/authentication-form-dle/ui/AuthenticationFormDle.tsx create mode 100644 src/features/authentication-form-undefined/index.ts create mode 100644 src/features/authentication-form-undefined/ui/AuthenticationFormUndefined.tsx delete mode 100644 src/features/integration-form/index.ts delete mode 100644 src/features/integration-form/lib/static.ts create mode 100644 src/shared/enums/integration.ts create mode 100644 src/shared/ui/alert.tsx diff --git a/src/entities/Table/ui/items/data-table-view-options.tsx b/src/entities/Table/ui/items/data-table-view-options.tsx index 8eceebf..6409e5b 100644 --- a/src/entities/Table/ui/items/data-table-view-options.tsx +++ b/src/entities/Table/ui/items/data-table-view-options.tsx @@ -1,18 +1,18 @@ -'use client'; +"use client"; -import { Table } from '@tanstack/react-table'; +import { Table } from "@tanstack/react-table"; -import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'; -import { MixerHorizontalIcon } from '@radix-ui/react-icons'; +import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"; +import { MixerHorizontalIcon } from "@radix-ui/react-icons"; -import { Button } from '@/shared/ui/button'; +import { Button } from "@/shared/ui/button"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, -} from '@/shared/ui/dropdown-menu'; +} from "@/shared/ui/dropdown-menu"; interface DataTableViewOptionsProps { table: Table; @@ -32,13 +32,13 @@ export function DataTableViewOptions({ table }: DataTableViewOptionsProps {table .getAllColumns() - .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide()) + .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()) .map((column) => ( column.toggleVisibility(!!value)} + onCheckedChange={(value) => column.toggleVisibility(value)} > {column.id} diff --git a/src/features/authentication-form-any/index.ts b/src/features/authentication-form-any/index.ts new file mode 100644 index 0000000..91993d4 --- /dev/null +++ b/src/features/authentication-form-any/index.ts @@ -0,0 +1 @@ +export { AuthenticationFormAny } from "@/features/authentication-form-any/ui/AuthenticationFormAny"; diff --git a/src/features/authentication-form-any/ui/AuthenticationFormAny.tsx b/src/features/authentication-form-any/ui/AuthenticationFormAny.tsx new file mode 100644 index 0000000..cda44d7 --- /dev/null +++ b/src/features/authentication-form-any/ui/AuthenticationFormAny.tsx @@ -0,0 +1,44 @@ +"use client"; + +import React from "react"; + +import { useEditIntegration } from "@/shared/hooks"; +import { cn } from "@/shared/lib/utils"; +import { Button } from "@/shared/ui/button"; +import { Icons } from "@/shared/ui/icons"; +import { AuthenticationType } from "@/shared/enums"; +import { Alert, AlertDescription, AlertTitle } from "@/shared/ui/alert"; +import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; + +interface SignInFormProps extends React.HTMLAttributes { + onOpenChange: (open: boolean) => void; +} + +export function AuthenticationFormAny({ className, onOpenChange, ...props }: SignInFormProps) { + const { mutateAsync, isPending } = useEditIntegration(); + + const onSubmit = async () => { + await mutateAsync({ + authType: AuthenticationType.AUTHENTICATION_TYPE_ANY, + endpoint: "https://localhost", + }).then(() => { + onOpenChange(false); + }); + }; + + return ( +
+ + + Внимание! + + Данный метод разрешит любую аутентификацию со стороны лаунчера + + + +
+ ); +} diff --git a/src/features/authentication-form-azuriom/index.ts b/src/features/authentication-form-azuriom/index.ts new file mode 100644 index 0000000..d0c627f --- /dev/null +++ b/src/features/authentication-form-azuriom/index.ts @@ -0,0 +1 @@ +export { AuthenticationFormAzuriom } from "@/features/authentication-form-azuriom/ui/AuthenticationFormAzuriom"; diff --git a/src/features/authentication-form-azuriom/lib/static.ts b/src/features/authentication-form-azuriom/lib/static.ts new file mode 100644 index 0000000..09c8bef --- /dev/null +++ b/src/features/authentication-form-azuriom/lib/static.ts @@ -0,0 +1,11 @@ +import { z } from "zod"; + +export const integrationSchema = z.object({ + authType: z.number(), + endpoint: z + .string() + .min(1, { message: "Вы не заполнили поле" }) + .transform((v) => v.trim()), +}); + +export type IntegrationFormSchemaType = z.infer; diff --git a/src/features/integration-form/ui/IntegrationForm.tsx b/src/features/authentication-form-azuriom/ui/AuthenticationFormAzuriom.tsx similarity index 63% rename from src/features/integration-form/ui/IntegrationForm.tsx rename to src/features/authentication-form-azuriom/ui/AuthenticationFormAzuriom.tsx index af31907..7bdc6bd 100644 --- a/src/features/integration-form/ui/IntegrationForm.tsx +++ b/src/features/authentication-form-azuriom/ui/AuthenticationFormAzuriom.tsx @@ -6,30 +6,34 @@ import { SubmitHandler, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; -import { - IntegrationFormSchemaType, - integrationSchema, -} from "@/features/integration-form/lib/static"; -import { useCurrentIntegration, useEditIntegration } from "@/shared/hooks"; +import { useEditIntegration, useGetActiveAuthIntegrations } from "@/shared/hooks"; import { cn } from "@/shared/lib/utils"; import { Button } from "@/shared/ui/button"; import { Form, FormControl, FormItem, FormLabel, FormMessage } from "@/shared/ui/form"; import { Icons } from "@/shared/ui/icons"; import { Input } from "@/shared/ui/input"; +import { IntegrationFormSchemaType, integrationSchema } from "../lib/static"; +import { AuthenticationType } from "@/shared/enums"; interface SignInFormProps extends React.HTMLAttributes { onOpenChange: (open: boolean) => void; } -export function IntegrationForm({ className, onOpenChange, ...props }: SignInFormProps) { - const currentIntegration = useCurrentIntegration(); +export function AuthenticationFormAzuriom({ className, onOpenChange, ...props }: SignInFormProps) { + const { data: integration } = useGetActiveAuthIntegrations(); const { mutateAsync, isPending } = useEditIntegration(); const form = useForm({ values: { - endpoint: currentIntegration?.endpoint || "", - authType: currentIntegration?.authType || 1, + endpoint: + integration.authType === AuthenticationType.AUTHENTICATION_TYPE_AZURIOM + ? String(integration.endpoint) + : "", + authType: + integration.authType === AuthenticationType.AUTHENTICATION_TYPE_AZURIOM + ? integration.authType + : AuthenticationType.AUTHENTICATION_TYPE_AZURIOM, }, resolver: zodResolver(integrationSchema), }); @@ -47,9 +51,9 @@ export function IntegrationForm({ className, onOpenChange, ...props }: SignInFor
- Введите эндпоинт + Введите ссылку на Ваш сайт - + {form.formState.errors.endpoint && ( {form.formState.errors.endpoint.message} diff --git a/src/features/authentication-form-dle/index.ts b/src/features/authentication-form-dle/index.ts new file mode 100644 index 0000000..42ba874 --- /dev/null +++ b/src/features/authentication-form-dle/index.ts @@ -0,0 +1 @@ +export { AuthenticationFormDle } from "@/features/authentication-form-dle/ui/AuthenticationFormDle"; diff --git a/src/features/authentication-form-dle/lib/static.ts b/src/features/authentication-form-dle/lib/static.ts new file mode 100644 index 0000000..09c8bef --- /dev/null +++ b/src/features/authentication-form-dle/lib/static.ts @@ -0,0 +1,11 @@ +import { z } from "zod"; + +export const integrationSchema = z.object({ + authType: z.number(), + endpoint: z + .string() + .min(1, { message: "Вы не заполнили поле" }) + .transform((v) => v.trim()), +}); + +export type IntegrationFormSchemaType = z.infer; diff --git a/src/features/authentication-form-dle/ui/AuthenticationFormDle.tsx b/src/features/authentication-form-dle/ui/AuthenticationFormDle.tsx new file mode 100644 index 0000000..2a14eae --- /dev/null +++ b/src/features/authentication-form-dle/ui/AuthenticationFormDle.tsx @@ -0,0 +1,90 @@ +"use client"; + +import React from "react"; + +import { SubmitHandler, useForm } from "react-hook-form"; + +import { zodResolver } from "@hookform/resolvers/zod"; +import { useEditIntegration, useGetActiveAuthIntegrations } from "@/shared/hooks"; +import { cn } from "@/shared/lib/utils"; +import { Button } from "@/shared/ui/button"; +import { + Form, + FormControl, + FormDescription, + FormItem, + FormLabel, + FormMessage, +} from "@/shared/ui/form"; +import { Icons } from "@/shared/ui/icons"; +import { Input } from "@/shared/ui/input"; +import { IntegrationFormSchemaType, integrationSchema } from "../lib/static"; +import { AuthenticationType } from "@/shared/enums"; +import Link from "next/link"; + +interface SignInFormProps extends React.HTMLAttributes { + onOpenChange: (open: boolean) => void; +} + +export function AuthenticationFormDle({ className, onOpenChange, ...props }: SignInFormProps) { + const { data: integration } = useGetActiveAuthIntegrations(); + + const { mutateAsync, isPending } = useEditIntegration(); + + const form = useForm({ + values: { + endpoint: + integration.authType === AuthenticationType.AUTHENTICATION_TYPE_DATALIFE_ENGINE + ? String(integration.endpoint) + : "", + authType: + integration.authType === AuthenticationType.AUTHENTICATION_TYPE_DATALIFE_ENGINE + ? integration.authType + : AuthenticationType.AUTHENTICATION_TYPE_DATALIFE_ENGINE, + }, + resolver: zodResolver(integrationSchema), + }); + + const onSubmit: SubmitHandler = async ( + data: IntegrationFormSchemaType, + ) => { + await mutateAsync(data).then(() => { + onOpenChange(false); + }); + }; + + return ( +
+ + + + Введите эндпоинт + + + + + {form.formState.errors.endpoint ? ( + {form.formState.errors.endpoint.message} + ) : ( + + Не знаете где взять файл auth.php?{" "} + + Скачайте по ссылке + + + )} + + + + +
+ ); +} diff --git a/src/features/authentication-form-undefined/index.ts b/src/features/authentication-form-undefined/index.ts new file mode 100644 index 0000000..d0c627f --- /dev/null +++ b/src/features/authentication-form-undefined/index.ts @@ -0,0 +1 @@ +export { AuthenticationFormAzuriom } from "@/features/authentication-form-azuriom/ui/AuthenticationFormAzuriom"; diff --git a/src/features/authentication-form-undefined/ui/AuthenticationFormUndefined.tsx b/src/features/authentication-form-undefined/ui/AuthenticationFormUndefined.tsx new file mode 100644 index 0000000..4140554 --- /dev/null +++ b/src/features/authentication-form-undefined/ui/AuthenticationFormUndefined.tsx @@ -0,0 +1,48 @@ +"use client"; + +import React from "react"; + +import { useEditIntegration } from "@/shared/hooks"; +import { cn } from "@/shared/lib/utils"; +import { Button } from "@/shared/ui/button"; +import { Icons } from "@/shared/ui/icons"; +import { AuthenticationType } from "@/shared/enums"; +import { Alert, AlertDescription, AlertTitle } from "@/shared/ui/alert"; +import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; + +interface SignInFormProps extends React.HTMLAttributes { + onOpenChange: (open: boolean) => void; +} + +export function AuthenticationFormUndefined({ + className, + onOpenChange, + ...props +}: SignInFormProps) { + const { mutateAsync, isPending } = useEditIntegration(); + + const onSubmit = async () => { + await mutateAsync({ + authType: AuthenticationType.AUTHENTICATION_TYPE_UNDEFINED, + endpoint: "https://localhost", + }).then(() => { + onOpenChange(false); + }); + }; + + return ( +
+ + + Внимание! + + Данный метод запретит любую аутентификацию со стороны лаунчера + + + +
+ ); +} diff --git a/src/features/integration-form/index.ts b/src/features/integration-form/index.ts deleted file mode 100644 index 7c3d05e..0000000 --- a/src/features/integration-form/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { IntegrationForm } from '@/features/integration-form/ui/IntegrationForm'; diff --git a/src/features/integration-form/lib/static.ts b/src/features/integration-form/lib/static.ts deleted file mode 100644 index 49d343f..0000000 --- a/src/features/integration-form/lib/static.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { z } from 'zod'; - -export const integrationSchema = z.object({ - authType: z.number(), - endpoint: z.string().transform((v) => v.trim()), -}); - -export type IntegrationFormSchemaType = z.infer; diff --git a/src/features/sentry-connect-form/index.ts b/src/features/sentry-connect-form/index.ts index 7c3d05e..a44721f 100644 --- a/src/features/sentry-connect-form/index.ts +++ b/src/features/sentry-connect-form/index.ts @@ -1 +1 @@ -export { IntegrationForm } from '@/features/integration-form/ui/IntegrationForm'; +export { SentryConnectForm } from "@/features/sentry-connect-form/ui/SentryConnectForm"; diff --git a/src/screens/Integrations/ui/Integrations.tsx b/src/screens/Integrations/ui/Integrations.tsx index 300a841..821c56d 100644 --- a/src/screens/Integrations/ui/Integrations.tsx +++ b/src/screens/Integrations/ui/Integrations.tsx @@ -36,6 +36,8 @@ export const IntegrationsPage = () => { title="Аутентификация" description="Синхронизация и управление данными о пользователях на платформе" action={onAuthenticationDialogToggle} + status={"CONNECTED"} + buttonText={"Изменить"} /> { - const { data } = useQuery({ - queryKey: ["integration"], - }); - - return data; -}; - export const useAuthIntegrations = () => { - const { data, isLoading } = useQuery({ + return useQuery({ queryKey: ["integrations/findAll"], queryFn: () => integrationService.getAuthIntegrations(), + select: ({ data }) => data, }); - - return { data, isLoading }; }; +export const useGetActiveAuthIntegrations = (): TGetActiveAuthIntegrationsResponse => { + const queryClient = useQueryClient(); + + const data = queryClient.getQueryData([ + "integrations/findActive", + ]); + if (!data) return {} as TGetActiveAuthIntegrationsResponse; + + return data; +}; export const useActiveAuthIntegrations = () => { - const { data, isLoading } = useQuery({ + return useQuery({ queryKey: ["integrations/findActive"], queryFn: () => integrationService.getActiveAuthIntegration(), + select: ({ data }) => data, }); - - return { data, isLoading }; }; export const useEditIntegration = () => { @@ -44,11 +44,8 @@ export const useEditIntegration = () => { mutationKey: ["update-integration"], mutationFn: (data: TPostAuthIntegrationsRequest) => integrationService.putAuthIntegrations(data), - onSettled: async () => { - await queryClient.invalidateQueries({ queryKey: ["integrations/findAll"] }); - }, onSuccess: async (data) => { - await queryClient.setQueryData(["integration"], () => null); + await queryClient.invalidateQueries({ queryKey: ["integrations/findActive"] }); toast({ title: "Успешно", description: data.message, diff --git a/src/shared/ui/Breadcrumbs/ui/Breadcrumbs.tsx b/src/shared/ui/Breadcrumbs/ui/Breadcrumbs.tsx index f404030..b227650 100644 --- a/src/shared/ui/Breadcrumbs/ui/Breadcrumbs.tsx +++ b/src/shared/ui/Breadcrumbs/ui/Breadcrumbs.tsx @@ -6,6 +6,7 @@ import { BreadcrumbPage, BreadcrumbSeparator, } from "@/shared/ui/breadcrumb"; +import { Fragment } from "react"; type BreadcrumbItemType = { value: string; @@ -25,12 +26,12 @@ export const Breadcrumbs = (props: BreadcrumbsProps) => { {breadcrumbs && breadcrumbs.map(({ value, path }) => ( - <> + {value} - + ))} {current} diff --git a/src/shared/ui/alert.tsx b/src/shared/ui/alert.tsx new file mode 100644 index 0000000..bbb80df --- /dev/null +++ b/src/shared/ui/alert.tsx @@ -0,0 +1,49 @@ +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; + +import { cn } from "@/shared/lib/utils"; + +const alertVariants = cva( + "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)); +Alert.displayName = "Alert"; + +const AlertTitle = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertTitle, AlertDescription }; diff --git a/src/widgets/AuthenticationMethodDialog/ui/AuthenticationMethodDialog.tsx b/src/widgets/AuthenticationMethodDialog/ui/AuthenticationMethodDialog.tsx index 4013cb7..3ac8515 100644 --- a/src/widgets/AuthenticationMethodDialog/ui/AuthenticationMethodDialog.tsx +++ b/src/widgets/AuthenticationMethodDialog/ui/AuthenticationMethodDialog.tsx @@ -1,9 +1,13 @@ +import { useEffect, useState } from "react"; + +import { AuthenticationFormDle } from "@/features/authentication-form-dle"; +import { AuthenticationFormAzuriom } from "@/features/authentication-form-azuriom"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui/dialog"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui/select"; -import { Tabs, TabsContent } from "@/shared/ui/tabs"; -import { useAuthIntegrations } from "@/shared/hooks"; -import { useMemo, useState } from "react"; -import { IntegrationForm } from "@/features/integration-form"; +import { AuthenticationType, AuthenticationTypeOption } from "@/shared/enums"; +import { useActiveAuthIntegrations, useAuthIntegrations } from "@/shared/hooks"; +import { AuthenticationFormUndefined } from "@/features/authentication-form-undefined/ui/AuthenticationFormUndefined"; +import { AuthenticationFormAny } from "@/features/authentication-form-any/ui/AuthenticationFormAny"; interface AuthenticationMethodDialogProps { open: boolean; @@ -12,16 +16,22 @@ interface AuthenticationMethodDialogProps { export function AuthenticationMethodDialog(props: AuthenticationMethodDialogProps) { const { data: integrations } = useAuthIntegrations(); - const [authenticationTab, setAuthenticationTab] = useState("DataLifeEngine"); + const { data: activeIntegrations } = useActiveAuthIntegrations(); + + const [authenticationTab, setAuthenticationTab] = useState(String(activeIntegrations?.authType)); const onAuthenticationTabToggle = (tab: string) => setAuthenticationTab(() => tab); - const TabsContentElement = useMemo( - (): { [index: string]: React.ReactElement } => ({ - DataLifeEngine: props.onOpenChange(false)} />, - Undefined:

Метод авторизации в разработке

, - }), - [], - ); + useEffect(() => { + setAuthenticationTab(String(activeIntegrations?.authType)); + }, [activeIntegrations]); + + const isFormUndefined = + Number(authenticationTab) === AuthenticationType.AUTHENTICATION_TYPE_UNDEFINED; + const isFormDatalife = + Number(authenticationTab) === AuthenticationType.AUTHENTICATION_TYPE_DATALIFE_ENGINE; + const isFormAny = Number(authenticationTab) === AuthenticationType.AUTHENTICATION_TYPE_ANY; + const isFormAzuriom = + Number(authenticationTab) === AuthenticationType.AUTHENTICATION_TYPE_AZURIOM; return ( @@ -34,33 +44,35 @@ export function AuthenticationMethodDialog(props: AuthenticationMethodDialogProp
Метод

- Выберите метод аутентификации игроков в лаунчере + Текущий метод аутентификации игроков в лаунчере

- - {integrations && - integrations.data.map(({ name }) => ( - - {TabsContentElement[name]} - - ))} - + {isFormUndefined && ( + props.onOpenChange(false)} /> + )} + {isFormDatalife && ( + props.onOpenChange(false)} /> + )} + {isFormAny && props.onOpenChange(false)} />} + {isFormAzuriom && ( + props.onOpenChange(false)} /> + )}