diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
index 034c292..cfbc86a 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
@@ -34,10 +34,10 @@ const getType = (pattern: Pattern): PatternType => {
return "regex";
} else if (Array.isArray(pattern)) {
return "nlp";
- } else if (typeof pattern === "object" && pattern !== null) {
- if (pattern.type === "menu") {
+ } else if (typeof pattern === "object") {
+ if (pattern?.type === "menu") {
return "menu";
- } else if (pattern.type === "content") {
+ } else if (pattern?.type === "content") {
return "content";
} else {
return "payload";
diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
index 2bd49da..476a75c 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
@@ -15,7 +15,7 @@ import {
Spellcheck,
} from "@mui/icons-material";
import { Box, IconButton, styled } from "@mui/material";
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
import { useFormContext } from "react-hook-form";
import DropdownButton, {
@@ -23,6 +23,7 @@ import DropdownButton, {
} from "@/app-components/buttons/DropdownButton";
import { useTranslate } from "@/hooks/useTranslate";
import { Pattern } from "@/types/block.types";
+import { PayloadType } from "@/types/message.types";
import { SXStyleOptions } from "@/utils/SXStyleOptions";
import { createValueWithId, ValueWithId } from "@/utils/valueWithId";
@@ -39,12 +40,6 @@ const StyledNoPatternsDiv = styled("div")(
width: "100%",
}),
);
-const actions: DropdownButtonAction[] = [
- { icon: , name: "Exact Match", defaultValue: "" },
- { icon: , name: "Pattern Match", defaultValue: "//" },
- { icon: , name: "Intent Match", defaultValue: [] },
- { icon: , name: "Interaction", defaultValue: {} },
-];
type PatternsInputProps = {
value: Pattern[];
@@ -78,8 +73,29 @@ const PatternsInput: FC = ({ value, onChange }) => {
useEffect(() => {
onChange(patterns.map(({ value }) => value));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [patterns]);
+ const actions: DropdownButtonAction[] = useMemo(
+ () => [
+ { icon: , name: "Exact Match", defaultValue: "" },
+ { icon: , name: "Pattern Match", defaultValue: "//" },
+ { icon: , name: "Intent Match", defaultValue: [] },
+ {
+ icon: ,
+ name: "Interaction",
+ defaultValue: {
+ label: t("label.get_started"),
+ value: "GET_STARTED",
+ type: PayloadType.button,
+ group: "general",
+ },
+ },
+ ],
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [],
+ );
+
return (
@@ -99,7 +115,11 @@ const PatternsInput: FC = ({ value, onChange }) => {
t("message.text_is_required"),
)}
/>
- removeInput(idx)}>
+ removeInput(idx)}
+ >
diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx
index 9ac684d..90c0cfc 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx
@@ -44,8 +44,8 @@ const isSamePostback = (a: T, b: T) =>
a.label === b.label && a.value === b.value;
type PostbackInputProps = {
- defaultValue?: PayloadPattern;
- onChange: (pattern: PayloadPattern | null) => void;
+ defaultValue: PayloadPattern;
+ onChange: (pattern: PayloadPattern) => void;
};
export const PostbackInput = ({
@@ -53,7 +53,7 @@ export const PostbackInput = ({
onChange,
}: PostbackInputProps) => {
const block = useBlock();
- const [selectedValue, setSelectedValue] = useState(defaultValue || null);
+ const [selectedValue, setSelectedValue] = useState(defaultValue);
const getBlockFromCache = useGetFromCache(EntityType.BLOCK);
const { data: menu, isLoading: isLoadingMenu } = useFind(
{ entity: EntityType.MENU, format: Format.FULL },
@@ -74,7 +74,6 @@ export const PostbackInput = ({
type: PayloadType.button,
group: "general",
},
-
{
label: t("label.view_more"),
value: "VIEW_MORE",
@@ -212,19 +211,17 @@ export const PostbackInput = ({
return (
{
setSelectedValue(value);
- if (value) {
- const { group: _g, ...payloadPattern } = value;
+ const { group: _g, ...payloadPattern } = value;
- onChange(payloadPattern);
- } else {
- onChange(null);
- }
+ onChange(payloadPattern);
}}
groupBy={({ group }) => group ?? t("label.other")}
getOptionLabel={({ label }) => label}