From cf8d49f8675f99e3a471cdacbcf6def246e9f783 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 3 Apr 2024 14:44:49 -0700
Subject: [PATCH] Funnel report updates. Fixed insights report.

---
 .../[reportId]/FieldFilterEditForm.tsx        |  2 +-
 .../reports/[reportId]/FilterParameters.tsx   |  3 +-
 .../reports/[reportId]/ParameterList.tsx      |  5 +-
 .../reports/funnel/FunnelChart.module.css     |  8 +--
 .../funnel/FunnelParameters.module.css        |  7 ++
 .../reports/funnel/FunnelParameters.tsx       | 43 +++++++++---
 .../reports/funnel/FunnelStepAddForm.tsx      | 69 +++++++++++--------
 src/pages/api/reports/insights.ts             |  4 +-
 8 files changed, 94 insertions(+), 47 deletions(-)

diff --git a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
index 5612c554..dc10b724 100644
--- a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
@@ -191,7 +191,7 @@ export default function FieldFilterEditForm({
           )}
         </Flexbox>
         <Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
-          {isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
+          {formatMessage(isNew ? labels.add : labels.update)}
         </Button>
       </FormRow>
     </Form>
diff --git a/src/app/(main)/reports/[reportId]/FilterParameters.tsx b/src/app/(main)/reports/[reportId]/FilterParameters.tsx
index edc0ff4e..3118a6f4 100644
--- a/src/app/(main)/reports/[reportId]/FilterParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/FilterParameters.tsx
@@ -74,7 +74,8 @@ export function FilterParameters() {
             return (
               <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
                 <FilterParameter
-                  {...dateRange}
+                  startDate={dateRange.startDate}
+                  endDate={dateRange.endDate}
                   websiteId={websiteId}
                   name={name}
                   label={label}
diff --git a/src/app/(main)/reports/[reportId]/ParameterList.tsx b/src/app/(main)/reports/[reportId]/ParameterList.tsx
index 046e85dc..f2ac988f 100644
--- a/src/app/(main)/reports/[reportId]/ParameterList.tsx
+++ b/src/app/(main)/reports/[reportId]/ParameterList.tsx
@@ -4,6 +4,7 @@ import Icons from 'components/icons';
 import Empty from 'components/common/Empty';
 import { useMessages } from 'components/hooks';
 import styles from './ParameterList.module.css';
+import classNames from 'classnames';
 
 export interface ParameterListProps {
   children?: ReactNode;
@@ -22,15 +23,17 @@ export function ParameterList({ children }: ParameterListProps) {
 
 const Item = ({
   children,
+  className,
   onClick,
   onRemove,
 }: {
   children?: ReactNode;
+  className?: string;
   onClick?: () => void;
   onRemove?: () => void;
 }) => {
   return (
-    <div className={styles.item} onClick={onClick}>
+    <div className={classNames(styles.item, className)} onClick={onClick}>
       {children}
       <Icon onClick={onRemove}>
         <Icons.Close />
diff --git a/src/app/(main)/reports/funnel/FunnelChart.module.css b/src/app/(main)/reports/funnel/FunnelChart.module.css
index 45d0ea61..81b22c78 100644
--- a/src/app/(main)/reports/funnel/FunnelChart.module.css
+++ b/src/app/(main)/reports/funnel/FunnelChart.module.css
@@ -37,7 +37,7 @@
 .card {
   display: grid;
   gap: 20px;
-  margin-top: 8px;
+  margin-top: 14px;
 }
 
 .header {
@@ -73,7 +73,7 @@
 }
 
 .item {
-  font-size: 24px;
+  font-size: 20px;
   color: var(--base900);
   font-weight: 700;
 }
@@ -83,19 +83,19 @@
   display: flex;
   justify-content: space-between;
   gap: 10px;
-  font-size: 24px;
   margin: 10px 0;
   text-transform: lowercase;
 }
 
 .visitors {
   color: var(--base900);
-  font-size: 32px;
+  font-size: 24px;
   font-weight: 900;
   margin-right: 10px;
 }
 
 .percent {
+  font-size: 20px;
   font-weight: 700;
   align-self: flex-end;
 }
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.module.css b/src/app/(main)/reports/funnel/FunnelParameters.module.css
index 81ef9216..219b9807 100644
--- a/src/app/(main)/reports/funnel/FunnelParameters.module.css
+++ b/src/app/(main)/reports/funnel/FunnelParameters.module.css
@@ -2,8 +2,15 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
 }
 
 .type {
   color: var(--base700);
 }
+
+.value {
+  display: flex;
+  align-self: center;
+  gap: 20px;
+}
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx
index 248318f1..7b1fb0c8 100644
--- a/src/app/(main)/reports/funnel/FunnelParameters.tsx
+++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx
@@ -41,6 +41,17 @@ export function FunnelParameters() {
     updateReport({ parameters: { steps: parameters.steps.concat(step) } });
   };
 
+  const handleUpdateStep = (
+    close: () => void,
+    index: number,
+    step: { type: string; value: string },
+  ) => {
+    const steps = [...parameters.steps];
+    steps[index] = step;
+    updateReport({ parameters: { steps } });
+    close();
+  };
+
   const handleRemoveStep = (index: number) => {
     const steps = [...parameters.steps];
     delete steps[index];
@@ -57,7 +68,7 @@ export function FunnelParameters() {
         </Button>
         <Popup alignment="start">
           <PopupForm>
-            <FunnelStepAddForm onAdd={handleAddStep} />
+            <FunnelStepAddForm onChange={handleAddStep} />
           </PopupForm>
         </Popup>
       </PopupTrigger>
@@ -79,14 +90,30 @@ export function FunnelParameters() {
         <ParameterList>
           {steps.map((step: { type: string; value: string }, index: number) => {
             return (
-              <ParameterList.Item key={index} onRemove={() => handleRemoveStep(index)}>
-                <div className={styles.item}>
-                  <div className={styles.type}>
-                    <Icon>{step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}</Icon>
+              <PopupTrigger key={index}>
+                <ParameterList.Item
+                  className={styles.item}
+                  onRemove={() => handleRemoveStep(index)}
+                >
+                  <div className={styles.value}>
+                    <div className={styles.type}>
+                      <Icon>{step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}</Icon>
+                    </div>
+                    <div>{step.value}</div>
                   </div>
-                  <div>{step.value}</div>
-                </div>
-              </ParameterList.Item>
+                </ParameterList.Item>
+                <Popup alignment="start">
+                  {(close: () => void) => (
+                    <PopupForm>
+                      <FunnelStepAddForm
+                        type={step.type}
+                        value={step.value}
+                        onChange={handleUpdateStep.bind(null, close, index)}
+                      />
+                    </PopupForm>
+                  )}
+                </Popup>
+              </PopupTrigger>
             );
           })}
         </ParameterList>
diff --git a/src/app/(main)/reports/funnel/FunnelStepAddForm.tsx b/src/app/(main)/reports/funnel/FunnelStepAddForm.tsx
index 978747c9..7d77b0c7 100644
--- a/src/app/(main)/reports/funnel/FunnelStepAddForm.tsx
+++ b/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>
   );
 }
 
diff --git a/src/pages/api/reports/insights.ts b/src/pages/api/reports/insights.ts
index efd3a6b5..ba4f643e 100644
--- a/src/pages/api/reports/insights.ts
+++ b/src/pages/api/reports/insights.ts
@@ -56,8 +56,8 @@ const schema = {
 };
 
 function convertFilters(filters: any[]) {
-  return filters.reduce((obj, { name, ...value }) => {
-    obj[name] = value;
+  return filters.reduce((obj, filter) => {
+    obj[filter.name] = filter;
 
     return obj;
   }, {});