Skip to content

Commit a3ffb68

Browse files
DavidsonGomesDavidsonGomes
committed
refactor: typebot form
1 parent 7fdc945 commit a3ffb68

File tree

6 files changed

+370
-566
lines changed

6 files changed

+370
-566
lines changed

‎src/pages/instance/Dify/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,7 @@ function Dify() {
117117
<>
118118
<ResizableHandle withHandle className="border border-border" />
119119
<ResizablePanel className="">
120-
<UpdateDify
121-
difyId={difyId}
122-
instance={instance}
123-
resetTable={resetTable}
124-
/>
120+
<UpdateDify difyId={difyId} resetTable={resetTable} />
125121
</ResizablePanel>
126122
</>
127123
)}

‎src/pages/instance/Flowise/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,7 @@ function Flowise() {
114114
<>
115115
<ResizableHandle withHandle className="border border-border" />
116116
<ResizablePanel className="">
117-
<UpdateFlowise
118-
flowiseId={flowiseId}
119-
instance={instance}
120-
resetTable={resetTable}
121-
/>
117+
<UpdateFlowise flowiseId={flowiseId} resetTable={resetTable} />
122118
</ResizablePanel>
123119
</>
124120
)}

‎src/pages/instance/Typebot/NewTypebot.tsx‎

Lines changed: 19 additions & 246 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,25 @@
1-
import { zodResolver } from "@hookform/resolvers/zod";
2-
import { PlusIcon } from "lucide-react";
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { PlusIcon } from "lucide-react"; // Importando o ícone corretamente
33
import { useState } from "react";
4-
import { useForm, FormProvider } from "react-hook-form";
54
import { useTranslation } from "react-i18next";
65
import { toast } from "react-toastify";
7-
import { z } from "zod";
86

97
import { Button } from "@/components/ui/button";
108
import {
119
Dialog,
1210
DialogContent,
13-
DialogFooter,
1411
DialogHeader,
1512
DialogTitle,
1613
DialogTrigger,
1714
} from "@/components/ui/dialog";
18-
import { FormInput, FormSelect, FormSwitch } from "@/components/ui/form";
19-
import { Input } from "@/components/ui/input";
20-
import { Separator } from "@/components/ui/separator";
2115

2216
import { useInstance } from "@/contexts/InstanceContext";
2317

2418
import { createTypebot } from "@/services/typebot.service";
2519

2620
import { Typebot } from "@/types/evolution.types";
2721

28-
const FormSchema = z.object({
29-
enabled: z.boolean(),
30-
description: z.string(),
31-
url: z.string().url(),
32-
typebot: z.string(),
33-
triggerType: z.string(),
34-
triggerOperator: z.string().optional(),
35-
triggerValue: z.string().optional(),
36-
expire: z.string(),
37-
keywordFinish: z.string(),
38-
delayMessage: z.string(),
39-
unknownMessage: z.string(),
40-
listeningFromMe: z.boolean(),
41-
stopBotFromMe: z.boolean(),
42-
keepOpen: z.boolean(),
43-
debounceTime: z.string(),
44-
ignoreJids: z.array(z.string()).default([]),
45-
});
22+
import { FormSchemaType, TypebotForm } from "./TypebotForm";
4623

4724
function NewTypebot({ resetTable }: { resetTable: () => void }) {
4825
const { t } = useTranslation();
@@ -51,260 +28,56 @@ function NewTypebot({ resetTable }: { resetTable: () => void }) {
5128
const [updating, setUpdating] = useState(false);
5229
const [open, setOpen] = useState(false);
5330

54-
const form = useForm<z.infer<typeof FormSchema>>({
55-
resolver: zodResolver(FormSchema),
56-
defaultValues: {
57-
enabled: true,
58-
description: "",
59-
url: "",
60-
typebot: "",
61-
triggerType: "keyword",
62-
triggerOperator: "contains",
63-
triggerValue: "",
64-
expire: "0",
65-
keywordFinish: "",
66-
delayMessage: "0",
67-
unknownMessage: "",
68-
listeningFromMe: false,
69-
stopBotFromMe: false,
70-
keepOpen: false,
71-
debounceTime: "0",
72-
ignoreJids: [],
73-
},
74-
});
75-
76-
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
31+
const onSubmit = async (data: FormSchemaType) => {
7732
try {
7833
if (!instance || !instance.name) {
79-
throw new Error("Nome da instância não encontrado.");
34+
throw new Error("instance not found");
8035
}
8136

8237
setUpdating(true);
8338
const typebotData: Typebot = {
8439
enabled: data.enabled,
8540
description: data.description,
8641
url: data.url,
87-
typebot: data.typebot,
42+
typebot: data.typebot || "",
8843
triggerType: data.triggerType,
8944
triggerOperator: data.triggerOperator || "",
9045
triggerValue: data.triggerValue || "",
91-
expire: parseInt(data.expire, 10),
92-
keywordFinish: data.keywordFinish,
93-
delayMessage: parseInt(data.delayMessage, 10),
94-
unknownMessage: data.unknownMessage,
95-
listeningFromMe: data.listeningFromMe,
96-
stopBotFromMe: data.stopBotFromMe,
97-
keepOpen: data.keepOpen,
98-
debounceTime: parseInt(data.debounceTime, 10),
46+
expire: data.expire || 0,
47+
keywordFinish: data.keywordFinish || "",
48+
delayMessage: data.delayMessage || 0,
49+
unknownMessage: data.unknownMessage || "",
50+
listeningFromMe: data.listeningFromMe || false,
51+
stopBotFromMe: data.stopBotFromMe || false,
52+
keepOpen: data.keepOpen || false,
53+
debounceTime: data.debounceTime || 0,
9954
};
10055

10156
await createTypebot(instance.name, instance.token, typebotData);
10257
toast.success(t("typebot.toast.success.create"));
10358
setOpen(false);
104-
onReset();
10559
resetTable();
106-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
10760
} catch (error: any) {
108-
console.error(t("typebot.toast.error"), error);
61+
console.error("Error:", error);
10962
toast.error(`Error: ${error?.response?.data?.response?.message}`);
11063
} finally {
11164
setUpdating(false);
11265
}
11366
};
11467

115-
function onReset() {
116-
form.reset();
117-
}
118-
119-
const triggerType = form.watch("triggerType");
120-
12168
return (
12269
<Dialog open={open} onOpenChange={setOpen}>
12370
<DialogTrigger asChild>
124-
<Button variant="default" className="mr-5 text-white">
125-
<PlusIcon />
71+
<Button size="sm">
72+
<PlusIcon size={16} className="mr-1" />
12673
<span className="hidden sm:inline">{t("typebot.button.create")}</span>
12774
</Button>
12875
</DialogTrigger>
129-
<DialogContent
130-
className="overflow-y-auto sm:max-h-[600px] sm:max-w-[740px]"
131-
onCloseAutoFocus={onReset}
132-
>
76+
<DialogContent className="overflow-y-auto sm:max-h-[600px] sm:max-w-[740px]">
13377
<DialogHeader>
13478
<DialogTitle>{t("typebot.form.title")}</DialogTitle>
13579
</DialogHeader>
136-
<FormProvider {...form}>
137-
<form
138-
onSubmit={form.handleSubmit(onSubmit)}
139-
className="w-full space-y-6"
140-
>
141-
<div>
142-
<div className="space-y-4">
143-
<FormSwitch
144-
name="enabled"
145-
label={t("typebot.form.enabled.label")}
146-
reverse
147-
/>
148-
<FormInput
149-
name="description"
150-
label={t("typebot.form.description.label")}
151-
required
152-
>
153-
<Input />
154-
</FormInput>
155-
<div className="flex flex-col">
156-
<h3 className="my-4 text-lg font-medium">
157-
{t("typebot.form.typebotSettings.label")}
158-
</h3>
159-
<Separator />
160-
</div>
161-
<FormInput
162-
name="url"
163-
label={t("typebot.form.url.label")}
164-
required
165-
>
166-
<Input />
167-
</FormInput>
168-
<FormInput
169-
name="typebot"
170-
label={t("typebot.form.typebot.label")}
171-
required
172-
>
173-
<Input />
174-
</FormInput>
175-
<div className="flex flex-col">
176-
<h3 className="my-4 text-lg font-medium">
177-
{t("typebot.form.triggerSettings.label")}
178-
</h3>
179-
<Separator />
180-
</div>
181-
<FormSelect
182-
name="triggerType"
183-
label={t("typebot.form.triggerType.label")}
184-
required
185-
options={[
186-
{
187-
label: t("typebot.form.triggerType.keyword"),
188-
value: "keyword",
189-
},
190-
{ label: t("typebot.form.triggerType.all"), value: "all" },
191-
{
192-
label: t("typebot.form.triggerType.advanced"),
193-
value: "advanced",
194-
},
195-
{
196-
label: t("typebot.form.triggerType.none"),
197-
value: "none",
198-
},
199-
]}
200-
/>
201-
{triggerType === "keyword" && (
202-
<>
203-
<FormSelect
204-
name="triggerOperator"
205-
label={t("typebot.form.triggerOperator.label")}
206-
required
207-
options={[
208-
{
209-
label: t("typebot.form.triggerOperator.contains"),
210-
value: "contains",
211-
},
212-
{
213-
label: t("typebot.form.triggerOperator.equals"),
214-
value: "equals",
215-
},
216-
{
217-
label: t("typebot.form.triggerOperator.startsWith"),
218-
value: "startsWith",
219-
},
220-
{
221-
label: t("typebot.form.triggerOperator.endsWith"),
222-
value: "endsWith",
223-
},
224-
{
225-
label: t("typebot.form.triggerOperator.regex"),
226-
value: "regex",
227-
},
228-
]}
229-
/>
230-
<FormInput
231-
name="triggerValue"
232-
label={t("typebot.form.triggerValue.label")}
233-
required
234-
>
235-
<Input />
236-
</FormInput>
237-
</>
238-
)}
239-
{triggerType === "advanced" && (
240-
<FormInput
241-
name="triggerValue"
242-
label={t("typebot.form.triggerConditions.label")}
243-
required
244-
>
245-
<Input />
246-
</FormInput>
247-
)}
248-
249-
<div className="flex flex-col">
250-
<h3 className="my-4 text-lg font-medium">
251-
{t("typebot.form.generalSettings.label")}
252-
</h3>
253-
<Separator />
254-
</div>
255-
<FormInput name="expire" label={t("typebot.form.expire.label")}>
256-
<Input type="number" />
257-
</FormInput>
258-
<FormInput
259-
name="keywordFinish"
260-
label={t("typebot.form.keywordFinish.label")}
261-
>
262-
<Input />
263-
</FormInput>
264-
265-
<FormInput
266-
name="delayMessage"
267-
label={t("typebot.form.delayMessage.label")}
268-
>
269-
<Input type="number" />
270-
</FormInput>
271-
272-
<FormInput
273-
name="unknownMessage"
274-
label={t("typebot.form.unknownMessage.label")}
275-
>
276-
<Input />
277-
</FormInput>
278-
<FormSwitch
279-
name="listeningFromMe"
280-
label={t("typebot.form.listeningFromMe.label")}
281-
reverse
282-
/>
283-
<FormSwitch
284-
name="stopBotFromMe"
285-
label={t("typebot.form.stopBotFromMe.label")}
286-
reverse
287-
/>
288-
<FormSwitch
289-
name="keepOpen"
290-
label={t("typebot.form.keepOpen.label")}
291-
reverse
292-
/>
293-
<FormInput
294-
name="debounceTime"
295-
label={t("typebot.form.debounceTime.label")}
296-
>
297-
<Input type="number" />
298-
</FormInput>
299-
</div>
300-
</div>
301-
<DialogFooter>
302-
<Button disabled={updating} type="submit">
303-
{t("typebot.button.save")}
304-
</Button>
305-
</DialogFooter>
306-
</form>
307-
</FormProvider>
80+
<TypebotForm onSubmit={onSubmit} isModal={true} isLoading={updating} />
30881
</DialogContent>
30982
</Dialog>
31083
);

0 commit comments

Comments
 (0)