Funnel report updates. Fixed insights report.

src/app/(main)/reports/funnel/FunnelStepAddForm.tsx

@@ -3,13 +3,18 @@ import { useMessages } from 'components/hooks';
 import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
 import styles from './FunnelStepAddForm.module.css';
 
-export interface UrlAddFormProps {
-  defaultValue?: string;
-  onAdd?: (step: { type: string; value: string }) => void;
+export interface FunnelStepAddFormProps {
+  type?: string;
+  value?: string;
+  onChange?: (step: { type: string; value: string }) => void;
 }
 
-export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
-  const [type, setType] = useState('url');
+export function FunnelStepAddForm({
+  type: defaultType = 'url',
+  value: defaultValue = '',
+  onChange,
+}: FunnelStepAddFormProps) {
+  const [type, setType] = useState(defaultType);
   const [value, setValue] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
   const items = [
@@ -19,7 +24,7 @@ export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps)
   const isDisabled = !type || !value;
 
   const handleSave = () => {
-    onAdd({ type, value });
+    onChange({ type, value });
     setValue('');
   };
 
@@ -39,32 +44,36 @@ export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps)
   };
 
   return (
-    <FormRow label={formatMessage(labels.addStep)}>
-      <Flexbox gap={10}>
-        <Dropdown
-          className={styles.dropdown}
-          items={items}
-          value={type}
-          renderValue={renderTypeValue}
-          onChange={(value: any) => setType(value)}
-        >
-          {({ value, label }) => {
-            return <Item key={value}>{label}</Item>;
-          }}
-        </Dropdown>
-        <TextField
-          className={styles.input}
-          value={value}
-          onChange={handleChange}
-          autoFocus={true}
-          autoComplete="off"
-          onKeyDown={handleKeyDown}
-        />
+    <Flexbox direction="column" gap={10}>
+      <FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
+        <Flexbox gap={10}>
+          <Dropdown
+            className={styles.dropdown}
+            items={items}
+            value={type}
+            renderValue={renderTypeValue}
+            onChange={(value: any) => setType(value)}
+          >
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+          <TextField
+            className={styles.input}
+            value={value}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+        </Flexbox>
+      </FormRow>
+      <FormRow>
         <Button variant="primary" onClick={handleSave} disabled={isDisabled}>
-          {formatMessage(labels.add)}
+          {formatMessage(defaultValue ? labels.update : labels.add)}
         </Button>
-      </Flexbox>
-    </FormRow>
+      </FormRow>
+    </Flexbox>
   );
 }