refactor(dashboard): lift business logic out of DashboardCard

bigcommerce · Feb 13, 2025 · cea67f9 · cea67f9
1 parent 16676c5
commit cea67f9
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 64 deletions.
diff --git a/apps/storefront/src/pages/Dashboard/components/DashboardCard.tsx b/apps/storefront/src/pages/Dashboard/components/DashboardCard.tsx
@@ -1,22 +1,34 @@
+import { useB3Lang } from '@b3/lang';
 import { Box, Button, Card, CardContent, Typography } from '@mui/material';
 
-interface CustomField {
-  [key: string]: string | number;
+interface DashboardCardProps {
+  companyName: string;
+  email: string;
+  isSelected: boolean;
+  action: { label: string; onClick: () => void };
 }
 
-interface DashboardCardProps {
-  row: CustomField;
-  startActing: (id: number) => void;
-  endActing: () => void;
-  salesRepCompanyId?: number;
+function SelectedBadge() {
+  const b3Lang = useB3Lang();
+
+  return (
+    <Box
+      sx={{
+        fontWeight: 400,
+        fontSize: '13px',
+        background: '#ED6C02',
+        display: 'inline-block',
+        p: '2px 7px',
+        color: '#FFFFFF',
+        borderRadius: '10px',
+      }}
+    >
+      {b3Lang('dashboard.selected')}
+    </Box>
+  );
 }
 
-export function DashboardCard({
-  row,
-  startActing,
-  endActing,
-  salesRepCompanyId = 0,
-}: DashboardCardProps) {
+export function DashboardCard({ companyName, email, isSelected, action }: DashboardCardProps) {
   return (
     <Card>
       <CardContent
@@ -31,30 +43,17 @@ export function DashboardCard({
             color: 'rgba(0, 0, 0, 0.87)',
           }}
         >
-          {row.companyName}
+          {companyName}
         </Typography>
 
-        {row.companyId === Number(salesRepCompanyId) && (
-          <Box
-            sx={{
-              fontWeight: 400,
-              fontSize: '13px',
-              background: '#ED6C02',
-              display: 'inline-block',
-              p: '2px 7px',
-              color: '#FFFFFF',
-              borderRadius: '10px',
-            }}
-          >
-            Selected
-          </Box>
-        )}
+        {isSelected && <SelectedBadge />}
 
         <Box
           sx={{
             display: 'flex',
             fontSize: '16px',
             mt: '15px',
+            gap: '5px',
           }}
         >
           <Typography
@@ -64,33 +63,20 @@ export function DashboardCard({
           >
             Email:
           </Typography>
-          <Typography variant="body1">{row.companyEmail}</Typography>
+          <Typography variant="body1">{email}</Typography>
         </Box>
       </CardContent>
 
-      {row.companyId === Number(salesRepCompanyId) ? (
-        <Button
-          sx={{
-            ml: '10px',
-            mb: '10px',
-          }}
-          variant="text"
-          onClick={() => endActing()}
-        >
-          End MASQUERADE
-        </Button>
-      ) : (
-        <Button
-          sx={{
-            ml: '10px',
-            mb: '10px',
-          }}
-          variant="text"
-          onClick={() => startActing((row as CustomFieldItems).companyId)}
-        >
-          MASQUERADE
-        </Button>
-      )}
+      <Button
+        sx={{
+          ml: '10px',
+          mb: '10px',
+        }}
+        variant="text"
+        onClick={() => action.onClick()}
+      >
+        {action.label}
+      </Button>
     </Card>
   );
 }
diff --git a/apps/storefront/src/pages/Dashboard/index.tsx b/apps/storefront/src/pages/Dashboard/index.tsx
@@ -9,15 +9,14 @@ import B3Spin from '@/components/spin/B3Spin';
 import { B3PaginationTable } from '@/components/table/B3PaginationTable';
 import { TableColumnItem } from '@/components/table/B3Table';
 import { useSort } from '@/hooks';
+import { PageProps } from '@/pages/PageProps';
 import { superAdminCompanies } from '@/shared/service/b2b';
 import { useAppSelector } from '@/store';
 import { endMasquerade, startMasquerade } from '@/utils/masquerade';
 
-import { type PageProps } from '../PageProps';
-
+import { DashboardCard } from './components/DashboardCard';
 import { ActionMenuCell } from './ActionMenuCell';
 import { CompanyNameCell } from './CompanyNameCell';
-import { DashboardCard } from './DashboardCard';
 
 interface ListItem {
   [key: string]: string;
@@ -197,14 +196,31 @@ function Dashboard(props: PageProps) {
           sortDirection={order}
           orderBy={orderBy}
           sortByFn={handleSetOrderBy}
-          renderItem={(row: ListItem) => (
-            <DashboardCard
-              row={row}
-              startActing={startActing}
-              endActing={endActing}
-              salesRepCompanyId={Number(salesRepCompanyId)}
-            />
-          )}
+          renderItem={({ companyName, companyEmail, companyId }: ListItem) => {
+            const isSelected = Number(companyId) === Number(salesRepCompanyId);
+            const action = isSelected
+              ? {
+                  label: b3Lang('dashboard.endMasqueradeAction'),
+                  onClick: () => {
+                    endActing();
+                  },
+                }
+              : {
+                  label: b3Lang('dashboard.masqueradeAction'),
+                  onClick: () => {
+                    startActing(Number(companyId));
+                  },
+                };
+
+            return (
+              <DashboardCard
+                companyName={companyName}
+                email={companyEmail}
+                isSelected={isSelected}
+                action={action}
+              />
+            );
+          }}
         />
       </Box>
     </B3Spin>

diff --git a/apps/storefront/src/pages/SetOpenPage.tsx → apps/storefront/src/pages/SetOpenPage.ts b/apps/storefront/src/pages/SetOpenPage.tsx → apps/storefront/src/pages/SetOpenPage.ts
diff --git a/packages/eslint-config-b2b/.eslintrc.js b/packages/eslint-config-b2b/.eslintrc.js
@@ -88,5 +88,6 @@ module.exports = {
     'react/jsx-no-useless-fragment': ['warn', { allowExpressions: true }],
     'import/prefer-default-export': 'off',
     'no-implicit-coercion': 'error',
+    'react/prop-types': 'off',
   },
 }