feat: rebase

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) {
+  } else if (typeof pattern === "object") {
-    if (pattern.type === "menu") {
+    if (pattern?.type === "menu") {
       return "menu";
-    } else if (pattern.type === "content") {
+    } else if (pattern?.type === "content") {
       return "content";
     } else {
       return "payload";

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: <Spellcheck />, name: "Exact Match", defaultValue: "" },
-  { icon: <Abc />, name: "Pattern Match", defaultValue: "//" },
-  { icon: <PsychologyAlt />, name: "Intent Match", defaultValue: [] },
-  { icon: <Mouse />, name: "Interaction", defaultValue: {} },
-];
 
 type PatternsInputProps = {
   value: Pattern[];
@@ -78,8 +73,29 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
 
   useEffect(() => {
     onChange(patterns.map(({ value }) => value));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [patterns]);
 
+  const actions: DropdownButtonAction[] = useMemo(
+    () => [
+      { icon: <Spellcheck />, name: "Exact Match", defaultValue: "" },
+      { icon: <Abc />, name: "Pattern Match", defaultValue: "//" },
+      { icon: <PsychologyAlt />, name: "Intent Match", defaultValue: [] },
+      {
+        icon: <Mouse />,
+        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 (
     <Box display="flex" flexDirection="column">
       <Box display="flex" flexDirection="column">
@@ -99,7 +115,11 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
                   t("message.text_is_required"),
                 )}
               />
-              <IconButton size="small" color="error" onClick={() => removeInput(idx)}>
+              <IconButton
+                size="small"
+                color="error"
+                onClick={() => removeInput(idx)}
+              >
                 <RemoveCircleOutline />
               </IconButton>
             </Box>

frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx

@@ -44,8 +44,8 @@ const isSamePostback = <T extends PayloadPattern>(a: T, b: T) =>
   a.label === b.label && a.value === b.value;
 
 type PostbackInputProps = {
-  defaultValue?: PayloadPattern;
+  defaultValue: PayloadPattern;
-  onChange: (pattern: PayloadPattern | null) => void;
+  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 (
     <Autocomplete
       size="small"
-      defaultValue={selected}
+      fullWidth
+      defaultValue={selected || undefined}
       value={selected}
       options={options}
       multiple={false}
+      disableClearable
       onChange={(_e, value) => {
         setSelectedValue(value);
-        if (value) {
+        const { group: _g, ...payloadPattern } = value;
-          const { group: _g, ...payloadPattern } = value;
 
-          onChange(payloadPattern);
+        onChange(payloadPattern);
-        } else {
-          onChange(null);
-        }
       }}
       groupBy={({ group }) => group ?? t("label.other")}
       getOptionLabel={({ label }) => label}