refact: integrate attachments and ExpenseDrawer

opencollective · Oct 1, 2024 · fd508a8 · fd508a8
1 parent 373d0cb
commit fd508a8
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 15 deletions.
diff --git a/components/FilesViewerModal.tsx b/components/FilesViewerModal.tsx
@@ -134,6 +134,7 @@ type FilesViewerModalProps = {
   allowOutsideInteraction?: boolean;
   canDownload?: boolean;
   canOpenInNewWindow?: boolean;
+  hideCloseButton?: boolean;
 };
 
 export default function FilesViewerModal({
@@ -144,6 +145,7 @@ export default function FilesViewerModal({
   openFileUrl,
   canDownload = true,
   canOpenInNewWindow = true,
+  hideCloseButton = false,
 }: FilesViewerModalProps) {
   const intl = useIntl();
   const initialIndex = openFileUrl ? files?.findIndex(f => f.url === openFileUrl) : 0;
@@ -217,7 +219,7 @@ export default function FilesViewerModal({
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
           <div
             className={clsx(
-              'absolute inset-0 z-[1500] bg-foreground/25 backdrop-blur-sm',
+              'absolute inset-0 z-[1500] backdrop-blur-sm',
               open ? 'animate-in fade-in-0' : 'animate-out fade-out-0',
             )}
             onClick={onClose}
@@ -279,16 +281,18 @@ export default function FilesViewerModal({
                 </ButtonLink>
               </StyledTooltip>
             )}
-            <StyledTooltip
-              containerCursor="pointer"
-              noArrow
-              content={intl.formatMessage({ id: 'Close', defaultMessage: 'Close' })}
-              delayHide={0}
-            >
-              <Button onClick={onClose}>
-                <X size="24" aria-hidden="true" />
-              </Button>
-            </StyledTooltip>
+            {!hideCloseButton && (
+              <StyledTooltip
+                containerCursor="pointer"
+                noArrow
+                content={intl.formatMessage({ id: 'Close', defaultMessage: 'Close' })}
+                delayHide={0}
+              >
+                <Button onClick={onClose}>
+                  <X size="24" aria-hidden="true" />
+                </Button>
+              </StyledTooltip>
+            )}
           </Flex>
         </Header>
         {hasMultipleFiles && (

diff --git a/components/budget/ExpenseBudgetItem.js b/components/budget/ExpenseBudgetItem.js
@@ -444,7 +444,7 @@ const ExpenseBudgetItem = ({
                       fontSize="11px"
                       cursor="pointer"
                       buttonSize="tiny"
-                      onClick={() => setShowFilesViewerModal(true)}
+                      onClick={useDrawer ? expandExpense : () => setShowFilesViewerModal(true)}
                       px={2}
                       ml={-2}
                       isBorderless

diff --git a/components/expenses/Expense.tsx b/components/expenses/Expense.tsx
@@ -18,9 +18,10 @@ import { formatErrorMessage, getErrorFromGraphqlException } from '../../lib/erro
 import { getFilesFromExpense, getPayoutProfiles } from '../../lib/expenses';
 import { API_V2_CONTEXT } from '../../lib/graphql/helpers';
 import { ExpenseStatus } from '../../lib/graphql/types/v2/graphql';
-import useKeyboardKey, { E } from '../../lib/hooks/useKeyboardKey';
+import useKeyboardKey, { E, ESCAPE_KEY } from '../../lib/hooks/useKeyboardKey';
 import useLoggedInUser from '../../lib/hooks/useLoggedInUser';
 import { usePrevious } from '../../lib/hooks/usePrevious';
+import { useWindowResize, VIEWPORTS } from '../../lib/hooks/useWindowResize';
 import { itemHasOCR } from './lib/ocr';
 
 import ConfirmationModal from '../ConfirmationModal';
@@ -116,6 +117,7 @@ function Expense(props) {
     legacyExpenseId,
     isDrawer,
     enableKeyboardShortcuts,
+    onClose,
   } = props;
   const { LoggedInUser, loadingLoggedInUser } = useLoggedInUser();
   const intl = useIntl();
@@ -222,12 +224,24 @@ function Expense(props) {
     },
   });
 
+  useKeyboardKey({
+    keyMatch: ESCAPE_KEY,
+    callback: e => {
+      if (props.isDrawer && state.status !== PAGE_STATUS.EDIT) {
+        e.preventDefault();
+        onClose?.();
+      }
+    },
+  });
+
   const [editExpense] = useMutation(editExpenseMutation, {
     context: API_V2_CONTEXT,
   });
 
   const expenseTopRef = useRef(null);
   const { status, editedExpense } = state;
+  const { viewport } = useWindowResize();
+  const isDesktop = viewport === VIEWPORTS.LARGE;
 
   const expense = data?.expense;
   const loggedInAccount = data?.loggedInAccount;
@@ -394,6 +408,11 @@ function Expense(props) {
 
   const files = React.useMemo(() => getFilesFromExpense(expense, intl), [expense]);
 
+  useEffect(() => {
+    const showFilesViewerModal = isDrawer && isDesktop && files?.length > 0;
+    setState(state => ({ ...state, showFilesViewerModal }));
+  }, [files, isDesktop, isDrawer]);
+
   const confirmSaveButtons = (
     <Flex flex={1} flexWrap="wrap" gridGap={[2, 3]}>
       <StyledButton
@@ -784,7 +803,10 @@ function Expense(props) {
             { expenseId: expense.legacyId },
           )}
           openFileUrl={openUrl}
-          onClose={() => setState(state => ({ ...state, showFilesViewerModal: false }))}
+          onClose={
+            isDrawer && isDesktop ? onClose : () => setState(state => ({ ...state, showFilesViewerModal: false }))
+          }
+          hideCloseButton={isDrawer && isDesktop}
         />
       )}
     </Box>
@@ -805,6 +827,7 @@ Expense.propTypes = {
   fetchMore: PropTypes.func,
   startPolling: PropTypes.func,
   stopPolling: PropTypes.func,
+  onClose: PropTypes.func,
   isRefetchingDataForUser: PropTypes.bool,
   drawerActionsContainer: PropTypes.object,
   isDrawer: PropTypes.bool,

diff --git a/components/expenses/ExpenseDrawer.tsx b/components/expenses/ExpenseDrawer.tsx
@@ -58,6 +58,7 @@ export default function ExpenseDrawer({ openExpenseLegacyId, handleClose, initia
         startPolling={startPolling}
         stopPolling={stopPolling}
         isDrawer
+        onClose={handleClose}
         enableKeyboardShortcuts={hasKeyboardShortcutsEnabled}
       />
     </Drawer>

diff --git a/components/expenses/ExpenseSummaryAdditionalInformation.js b/components/expenses/ExpenseSummaryAdditionalInformation.js
@@ -271,7 +271,7 @@ const ExpenseSummaryAdditionalInformation = ({
                     ? VIRTUAL_CARD
                     : expense.payoutMethod?.type
               }
-              name={expense?.virtualCard?.name && `${expense.virtualCard.name} Card (${expense.virtualCard.last4})`}
+              name={expense.virtualCard?.name && `${expense.virtualCard.name} Card (${expense.virtualCard.last4})`}
             />
           </Box>
           <Container data-cy="expense-summary-payout-method-data" wordBreak="break-word">