Merge pull request #1030 from CruGlobal/MPDX-8137-refresh-columns

MPDX-7955 Create Flows and Implement Contact Move Functionality
CruGlobal · Sep 6, 2024 · 289927f · 289927f
2 parents c2b3d21 + a95487b
commit 289927f
Show file tree

Hide file tree

Showing 28 changed files with 2,577 additions and 149 deletions.
diff --git a/pages/accountLists/[accountListId]/tools/appeals/appeal/[[...appealId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/appeals/appeal/[[...appealId]].page.test.tsx
@@ -186,7 +186,7 @@ describe('Appeal navigation', () => {
       expect(getByRole('heading', { name: 'Excluded' })).toBeInTheDocument();
       expect(getByRole('heading', { name: 'Asked' })).toBeInTheDocument();
       expect(getByRole('heading', { name: 'Committed' })).toBeInTheDocument();
-      expect(getByRole('heading', { name: 'Received‌⁠' })).toBeInTheDocument();
+      expect(getByRole('heading', { name: 'Received' })).toBeInTheDocument();
       expect(getByRole('heading', { name: 'Given' })).toBeInTheDocument();
     });
 

diff --git a/src/components/Contacts/ContactFlow/ContactFlowDragLayer/ContactFlowDragLayer.tsx b/src/components/Contacts/ContactFlow/ContactFlowDragLayer/ContactFlowDragLayer.tsx
@@ -4,7 +4,7 @@ import theme from 'src/theme';
 import { ContactFlowRowPreview } from './ContactFlowRowPreview';
 import { useAutoScroll } from './useAutoScroll';
 
-const layerStyles: CSSProperties = {
+export const layerStyles: CSSProperties = {
   position: 'absolute',
   pointerEvents: 'none',
   zIndex: 100,
@@ -14,12 +14,12 @@ const layerStyles: CSSProperties = {
   height: '100%',
 };
 
-const dragPreviewStyle: CSSProperties = {
+export const dragPreviewStyle: CSSProperties = {
   display: 'inline-block',
   border: `1px solid ${theme.palette.cruGrayMedium.main}`,
 };
 
-function getItemStyles(
+export function getItemStyles(
   initialOffset: XYCoord | null,
   currentOffset: XYCoord | null,
 ) {
@@ -37,7 +37,7 @@ function getItemStyles(
   };
 }
 
-interface ContactFlowDragLayerProps {
+export interface ContactFlowDragLayerProps {
   containerRef: RefObject<HTMLElement>;
 }
 

diff --git a/src/components/Contacts/ContactFlow/ContactFlowDragLayer/ContactFlowRowPreview.tsx b/src/components/Contacts/ContactFlow/ContactFlowDragLayer/ContactFlowRowPreview.tsx
@@ -2,11 +2,31 @@ import React, { memo } from 'react';
 import Star from '@mui/icons-material/Star';
 import StarBorder from '@mui/icons-material/StarBorder';
 import { Avatar, Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { IdValue } from 'src/graphql/types.generated';
 import theme from '../../../../theme';
 
-interface Props {
+export const PreviewBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  background: theme.palette.mpdxYellow.main,
+}));
+
+export const PreviewInnerBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: theme.spacing(2),
+}));
+
+export const DetailsBox = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+}));
+
+export interface ContactFlowRowPreviewProps {
   name: string;
   status: {
     __typename?: 'IdValue' | undefined;
@@ -15,25 +35,13 @@ interface Props {
   width: number;
 }
 
-export const ContactFlowRowPreview: React.FC<Props> = memo(
+export const ContactFlowRowPreview: React.FC<ContactFlowRowPreviewProps> = memo(
   function ContactFlowRowPreview({ name, status, starred, width }) {
     const { t } = useTranslation();
     return (
-      <Box
-        display="flex"
-        width={width}
-        style={{
-          background: theme.palette.mpdxYellow.main,
-        }}
-      >
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          width="100%"
-          p={2}
-        >
-          <Box display="flex" alignItems="center" width="100%">
+      <PreviewBox width={width}>
+        <PreviewInnerBox>
+          <DetailsBox>
             <Avatar
               src=""
               style={{
@@ -49,12 +57,12 @@ export const ContactFlowRowPreview: React.FC<Props> = memo(
                 {t('{{status}}', { status: status.value })}
               </Typography>
             </Box>
-          </Box>
+          </DetailsBox>
           <Box display="flex" pr={2}>
             {starred ? <Star /> : <StarBorder />}
           </Box>
-        </Box>
-      </Box>
+        </PreviewInnerBox>
+      </PreviewBox>
     );
   },
 );
diff --git a/src/components/DonationTable/DonationTable.tsx b/src/components/DonationTable/DonationTable.tsx
@@ -48,7 +48,7 @@ export interface DonationTableProps {
   emptyPlaceholder: React.ReactElement;
 }
 
-const StyledGrid = styled(DataGrid)(({ theme }) => ({
+export const StyledGrid = styled(DataGrid)(({ theme }) => ({
   '.MuiDataGrid-row:nth-of-type(2n + 1):not(:hover)': {
     backgroundColor: theme.palette.cruGrayLight.main,
   },
@@ -69,15 +69,15 @@ const TotalsTable = styled(Table)({
   },
 });
 
-const LoadingProgressBar = styled(LinearProgress)(({ theme }) => ({
+export const LoadingProgressBar = styled(LinearProgress)(({ theme }) => ({
   height: '0.5rem',
   borderRadius: theme.shape.borderRadius,
   ['& .MuiLinearProgress-bar']: {
     borderRadius: theme.shape.borderRadius,
   },
 }));
 
-const LoadingBox = styled(Box)(({ theme }) => ({
+export const LoadingBox = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.cruGrayLight.main,
   height: 300,
   minWidth: 700,
@@ -88,11 +88,11 @@ const LoadingBox = styled(Box)(({ theme }) => ({
   alignItems: 'center',
 }));
 
-const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({
+export const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({
   margin: theme.spacing(0, 1, 0, 0),
 }));
 
-interface DonationRow {
+export interface DonationRow {
   id: string;
   date: DateTime;
   contactId: string | null;
@@ -107,7 +107,9 @@ interface DonationRow {
   rawDonation: DonationTableRowFragment;
 }
 
-const createDonationRow = (data: DonationTableRowFragment): DonationRow => ({
+export const createDonationRow = (
+  data: DonationTableRowFragment,
+): DonationRow => ({
   id: data.id,
   date: DateTime.fromISO(data.donationDate),
   contactId: data.donorAccount.contacts.nodes[0]?.id ?? null,

diff --git a/src/components/Tool/Appeal/AppealDetails/AppealsMainPanel/AppealsMainPanel.tsx b/src/components/Tool/Appeal/AppealDetails/AppealsMainPanel/AppealsMainPanel.tsx
@@ -13,8 +13,6 @@ export const AppealsMainPanel: React.FC = () => {
   const {
     accountListId,
     appealId,
-    activeFilters,
-    starredFilter,
     searchTerm,
     setContactFocus,
     viewMode,
@@ -41,10 +39,6 @@ export const AppealsMainPanel: React.FC = () => {
         ) : (
           <DynamicContactFlow
             accountListId={accountListId ?? ''}
-            selectedFilters={{
-              ...activeFilters,
-              ...starredFilter,
-            }}
             searchTerm={searchTerm}
             onContactSelected={setContactFocus}
             appealInfo={appealInfo}