Merge pull request #8 from Nickz22/ux-cleanup

ux-cleanup
Nickz22 · Aug 11, 2024 · 201d310 · 201d310
2 parents 1205b3d + 1c23732
commit 201d310
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 47 deletions.
diff --git a/client/src/components/Api/Api.js b/client/src/components/Api/Api.js
@@ -49,21 +49,20 @@ api.interceptors.response.use(
   async (response) => {
     // Check if the response contains authentication error information
     if (response.data && response.data.type === "AuthenticationError") {
+      if (response.data.error.toLowerCase() === "session not found") {
+        window.location.href = "/";
+        return Promise.reject(response.data);
+      }
+
       const originalRequest = response.config;
-      if (!originalRequest._retry) {
-        originalRequest._retry = true;
-        const refreshed = await handleAuthError();
-        if (refreshed) {
-          return api(originalRequest);
-        } else {
-          // Redirect to login page if refresh failed
-          window.location.href = "/";
-          return Promise.reject(response.data);
-        }
+      const refreshed = await handleAuthError();
+      if (refreshed) {
+        return api(originalRequest);
+      } else {
+        // Redirect to login page if refresh failed
+        window.location.href = "/";
+        return Promise.reject(response.data);
       }
-      // If this is already a retry, redirect to login page
-      window.location.href = "/";
-      return Promise.reject(response.data);
     }
     return response;
   },

diff --git a/client/src/components/DataFilter/DataFilter.js b/client/src/components/DataFilter/DataFilter.js
@@ -1,4 +1,3 @@
-// DataFilter.js
 import React, { useState } from "react";
 import {
   Box,
@@ -9,7 +8,7 @@ import {
   Tooltip,
 } from "@mui/material";
 
-const DataFilter = ({ fields, onFilter }) => {
+const DataFilter = ({ fields, onFilter, onClear }) => {
   const [selectedField, setSelectedField] = useState("");
   const [operator, setOperator] = useState("equals");
   const [filterValue, setFilterValue] = useState("");
@@ -18,6 +17,13 @@ const DataFilter = ({ fields, onFilter }) => {
     onFilter({ field: selectedField, operator, value: filterValue });
   };
 
+  const handleClearFilter = () => {
+    setSelectedField("");
+    setOperator("equals");
+    setFilterValue("");
+    onClear();
+  };
+
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
       <Tooltip
@@ -61,6 +67,9 @@ const DataFilter = ({ fields, onFilter }) => {
       <Button onClick={handleApplyFilter} variant="contained" size="small">
         Apply
       </Button>
+      <Button onClick={handleClearFilter} variant="outlined" size="small">
+        Clear
+      </Button>
     </Box>
   );
 };

diff --git a/client/src/components/FilterContainer/useFilterLogic.js b/client/src/components/FilterContainer/useFilterLogic.js
@@ -131,6 +131,16 @@ export const useFilterLogic = (initialFilterContainer, initialFilterFields) => {
         { field: "", operator: "", value: "", dataType: "string" },
       ],
     }));
+
+    setLogicErrors(
+      /**
+       * @param {{[key: number]: any}} currentErrors
+       */
+      (currentErrors) => ({
+        ...currentErrors,
+        0: "Please add new logic for the new filter.",
+      })
+    );
   }, []);
 
   const handleDeleteFilter = useCallback(

diff --git a/client/src/components/ProspectingCriteriaSelector/ProspectingCriteriaSelector.js b/client/src/components/ProspectingCriteriaSelector/ProspectingCriteriaSelector.js
@@ -11,6 +11,7 @@ import {
   Step,
   StepLabel,
   Paper,
+  Tooltip,
 } from "@mui/material";
 import FilterContainer from "../FilterContainer/FilterContainer";
 import CustomTable from "../CustomTable/CustomTable";
@@ -53,14 +54,14 @@ const ProspectingCriteriaSelector = ({
   const debouncedOnFilterChange = useCallback(
     debounce((updatedFilter, onFilterChange) => {
       onFilterChange(updatedFilter);
-    }, 1000),
+    }, 200),
     []
   );
 
   const debouncedSetCurrentFilter = useCallback(
     debounce((updatedFilter) => {
       setCurrentFilter(updatedFilter);
-    }, 1000),
+    }, 200),
     []
   );
 
@@ -137,16 +138,17 @@ const ProspectingCriteriaSelector = ({
         <Typography variant="h6" gutterBottom>
           {filterContainers[activeStep]?.name} Criteria
         </Typography>
-
-        <FormControlLabel
-          control={
-            <Switch
-              checked={showTable}
-              onChange={(e) => setShowTable(e.target.checked)}
-            />
-          }
-          label="Show Table to Generate Criteria"
-        />
+        <Tooltip title="Select records and let the application create the criteria for you based on common field values.">
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showTable}
+                onChange={(e) => setShowTable(e.target.checked)}
+              />
+            }
+            label="Show Table to Generate Criteria"
+          />
+        </Tooltip>
 
         {showTable && (
           <Box sx={{ my: 2 }}>

diff --git a/client/src/pages/Onboard.js b/client/src/pages/Onboard.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { Dialog, DialogContent, Box, Paper } from "@mui/material";
+import { Dialog, DialogContent, Box, Paper, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import ProspectingCriteriaSelector from "../components/ProspectingCriteriaSelector/ProspectingCriteriaSelector";
 import InfoGatheringStep from "../components/InfoGatheringStep/InfoGatheringStep";
@@ -325,15 +325,21 @@ const Onboard = () => {
       );
     } else if (step === ONBOARD_WIZARD_STEPS.length + 1) {
       return (
-        <ProspectingCriteriaSelector
-          title="Prospecting Activity Criteria"
-          initialFilterContainers={filters}
-          filterFields={taskFilterFields.current}
-          tableData={categoryFormTableData}
-          onFilterChange={handleProspectingFilterChanged}
-          onTaskSelection={handleTaskSelection}
-          onSave={saveSettings}
-        />
+        <>
+          <Typography variant="h6" gutterBottom>
+            Define criteria by which we will recognize an Inbound Call, Outbound
+            Call, Inbound Email and Outbound Email.
+          </Typography>
+          <ProspectingCriteriaSelector
+            title="Prospecting Activity Criteria"
+            initialFilterContainers={filters}
+            filterFields={taskFilterFields.current}
+            tableData={categoryFormTableData}
+            onFilterChange={handleProspectingFilterChanged}
+            onTaskSelection={handleTaskSelection}
+            onSave={saveSettings}
+          />
+        </>
       );
     } else {
       return <div>Invalid step</div>;

diff --git a/client/src/pages/Prospecting.js b/client/src/pages/Prospecting.js
@@ -45,6 +45,10 @@ import {
 import MetricCard from "../components/MetricCard/MetricCard";
 import CustomTable from "../components/CustomTable/CustomTable";
 
+/**
+ * @typedef {import('types').Activation} Activation
+ */
+
 const Prospecting = () => {
   const [period, setPeriod] = useState("All");
   const [view, setView] = useState("Summary");
@@ -60,6 +64,7 @@ const Prospecting = () => {
   const navigate = useNavigate();
 
   const [dataFilter, setDataFilter] = useState(null);
+  const [originalRawData, setOriginalRawData] = useState([]);
 
   const accountFields = useMemo(() => {
     if (rawData.length === 0) return [];
@@ -73,6 +78,11 @@ const Prospecting = () => {
     setDataFilter(filter);
   }, []);
 
+  const handleClearFilter = useCallback(() => {
+    setDataFilter(null);
+    setRawData(originalRawData); // Reset to original data
+  }, [originalRawData]);
+
   const fetchData = useCallback(
     async (isRefresh = false) => {
       if (inFlightRef.current) return;
@@ -87,6 +97,7 @@ const Prospecting = () => {
           case 200:
             setSummaryData(response.data[0].summary);
             setRawData(response.data[0].raw_data || []);
+            setOriginalRawData(response.data[0].raw_data || []);
             break;
           case 400:
           case 401:
@@ -268,6 +279,7 @@ const Prospecting = () => {
   };
 
   const filteredData = useMemo(() => {
+    /** @type {Activation[]} */
     let filtered = rawData;
     if (selectedActivatedBy) {
       filtered = filtered.filter(
@@ -284,6 +296,8 @@ const Prospecting = () => {
         }
         return true;
       });
+    } else {
+      filtered = rawData;
     }
     return filterDataByPeriod(filtered, period);
   }, [rawData, selectedActivatedBy, dataFilter, filterDataByPeriod, period]);
@@ -385,7 +399,11 @@ const Prospecting = () => {
           marginBottom: "16px",
         }}
       >
-        <DataFilter fields={accountFields} onFilter={handleDataFilter} />
+        <DataFilter
+          fields={accountFields}
+          onFilter={handleDataFilter}
+          onClear={handleClearFilter}
+        />
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <FormControl variant="outlined" size="small" sx={{ minWidth: 120 }}>
             <InputLabel id="period-label">Period</InputLabel>

diff --git a/client/src/pages/Settings.js b/client/src/pages/Settings.js
@@ -15,6 +15,9 @@ import {
   MenuItem,
   IconButton,
   Tooltip,
+  Tabs,
+  Tab,
+  AppBar,
 } from "@mui/material";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import CloseIcon from "@mui/icons-material/Close";
@@ -56,6 +59,7 @@ const Settings = () => {
   const [criteria, setCriteria] = useState([]);
   const [tableData, setTableData] = useState(null);
   const [isTableLoading, setIsTableLoading] = useState(false);
+  const [currentTab, setCurrentTab] = useState(0);
 
   useEffect(() => {
     const fetchInitialData = async () => {
@@ -116,6 +120,18 @@ const Settings = () => {
     fetchInitialData();
   }, [navigate]);
 
+  const handleTabChange = (event, newValue) => {
+    setCurrentTab(newValue);
+    // Scroll to the corresponding section
+    const sectionId = ["general", "prospecting", "meeting", "user-role"][
+      newValue
+    ];
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   const fetchTeamMembersData = async (selectedIds = []) => {
     setIsTableLoading(true);
     try {
@@ -304,7 +320,15 @@ const Settings = () => {
 
   return (
     <Box sx={{ width: "100%", mt: 2 }}>
-      <Card sx={{ mb: 2 }}>
+      <AppBar position="sticky" color="default" elevation={0}>
+        <Tabs value={currentTab} onChange={handleTabChange} variant="fullWidth">
+          <Tab label="General Settings" />
+          <Tab label="Prospecting Activity" />
+          <Tab label="Meeting Criteria" />
+          <Tab label="User Role" />
+        </Tabs>
+      </AppBar>
+      <Card id="general" sx={{ mb: 2 }}>
         <CardContent sx={{ p: 2 }}>
           <Typography variant="h6" gutterBottom marginBottom={2}>
             General Settings
@@ -420,7 +444,7 @@ const Settings = () => {
         </CardContent>
       </Card>
 
-      <Card sx={{ mb: 2 }}>
+      <Card id="prospecting" sx={{ mb: 2 }}>
         <CardContent sx={{ p: 2 }}>
           <Typography variant="h6" gutterBottom>
             Prospecting Activity Criteria
@@ -461,7 +485,7 @@ const Settings = () => {
         </CardContent>
       </Card>
 
-      <Card>
+      <Card id="meeting">
         <CardContent sx={{ p: 2 }}>
           <Typography variant="h6" gutterBottom>
             Meeting Criteria
@@ -500,7 +524,7 @@ const Settings = () => {
         </CardContent>
       </Card>
 
-      <Card sx={{ mb: 2 }}>
+      <Card id="user-role" sx={{ mb: 2 }}>
         <CardContent sx={{ p: 2 }}>
           <Typography variant="h6" gutterBottom marginBottom={2}>
             User Role and Team Members

diff --git a/client/types/Activation.d.ts b/client/types/Activation.d.ts
@@ -0,0 +1,23 @@
+import { SObject } from "./SObject";
+import { ProspectingEffort } from "./ProspectingEffort";
+import { ProspectingMetadata } from "./ProspectingMetadata";
+
+export interface Activation {
+  id: string;
+  account: SObject;
+  activated_by_id: string;
+  active_contact_ids: Set<string>;
+  task_ids: Set<string>;
+  activated_date?: Date;
+  first_prospecting_activity?: Date;
+  last_prospecting_activity?: Date;
+  event_ids?: Set<string>;
+  prospecting_metadata?: ProspectingMetadata[];
+  prospecting_effort?: ProspectingEffort[];
+  days_activated?: number;
+  days_engaged?: number;
+  engaged_date?: Date;
+  last_outbound_engagement?: Date;
+  opportunity?: SObject;
+  status: StatusEnum;
+}
diff --git a/client/types/ProspectingEffort.d.ts b/client/types/ProspectingEffort.d.ts
@@ -0,0 +1,9 @@
+import { ProspectingMetadata } from "./ProspectingMetadata";
+
+export interface ProspectingEffort {
+  activation_id: string;
+  prospecting_metadata: ProspectingMetadata[];
+  status: string;
+  date_entered: Date;
+  task_ids: Set<string>;
+}
diff --git a/client/types/ProspectingMetadata.d.ts b/client/types/ProspectingMetadata.d.ts
@@ -0,0 +1,6 @@
+export interface ProspectingMetadata {
+  name: string;
+  first_occurrence: Date;
+  last_occurrence: Date;
+  total: number;
+}
diff --git a/client/types/index.d.ts b/client/types/index.d.ts
@@ -12,3 +12,6 @@ export * from "./SObjectField";
 export * from "./TableData";
 export * from "./TableColumn";
 export * from "./Task";
+export * from "./Activation"
+export * from "./ProspectingEffort"
+export * from "./ProspectingMetadata"
diff --git a/server/app/routes.py b/server/app/routes.py
@@ -437,7 +437,7 @@ def get_salesforce_tasks_by_user_ids():
         if not user_ids:
             response.message = "No user IDs provided"
         else:
-            response.data = fetch_tasks_by_user_ids(user_ids).data
+            response.data = fetch_tasks_by_user_ids(user_ids, 1000).data
             response.success = True
     except Exception as e:
         log_error(e)
@@ -461,7 +461,7 @@ def get_salesforce_events_by_user_ids():
         if not user_ids:
             response.message = "No user IDs provided"
         else:
-            response.data = fetch_events_by_user_ids(user_ids).data
+            response.data = fetch_events_by_user_ids(user_ids, 1000).data
             response.success = True
     except Exception as e:
         log_error(e)