feat(DEV-12592): add entity email to invoice uploading menu

packages/sdk-react/src/components/payables/CreatePayableMenu/CreatePayableMenu.tsx

@@ -1,6 +1,7 @@
 import React, { DragEvent, useState } from 'react';
 import { toast } from 'react-hot-toast';
 
+import { useMoniteContext } from '@/core/context/MoniteContext';
 import { useFileInput, useMenuButton } from '@/core/hooks';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -10,7 +11,6 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
-import SettingsIcon from '@mui/icons-material/Settings';
 import {
   Alert,
   alpha,
@@ -21,6 +21,8 @@ import {
   Typography,
 } from '@mui/material';
 
+const MENU_WIDTH = 550;
+
 interface CreatePayableMenuProps {
   isCreateAllowed: boolean;
   onCreateInvoice: () => void;
@@ -36,6 +38,10 @@ export const CreatePayableMenu = ({
   const { buttonProps, menuProps, open, closeMenu } = useMenuButton();
   const { FileInput, openFileInput } = useFileInput();
   const [dragIsOver, setDragIsOver] = useState(false);
+  const { api } = useMoniteContext();
+
+  const { data: mailboxes } = api.mailboxes.getMailboxes.useQuery();
+  const mailboxAddress = mailboxes?.data?.[0]?.mailbox_full_address;
 
   const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -68,11 +74,11 @@ export const CreatePayableMenu = ({
       >
         {t(i18n)`New bill`}
       </Button>
-      <Menu {...menuProps} sx={{ '& > .MuiPaper-root': { width: 550 } }}>
+      <Menu {...menuProps} sx={{ '& > .MuiPaper-root': { width: MENU_WIDTH } }}>
         <Stack
           spacing={3}
           flexDirection="column"
-          sx={{ p: 2, width: 550 }}
+          sx={{ p: 2, width: MENU_WIDTH }}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -85,29 +91,20 @@ export const CreatePayableMenu = ({
               alignItems="center"
               mb={2}
             >
-              <Typography variant="subtitle1">{t(
-                i18n
-              )`Forward to email`}</Typography>
-              <Button
-                variant="text"
-                endIcon={<SettingsIcon />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-              >{t(i18n)`Customise`}</Button>
+              <Typography variant="subtitle1">
+                {t(i18n)`Forward to email`}
+              </Typography>
             </Stack>
             <Alert
               severity="info"
               icon={<MailOutlineIcon color="primary" />}
               action={
                 <Button
+                  disabled={!mailboxAddress}
                   variant="outlined"
                   startIcon={<ContentCopyIcon />}
                   onClick={() => {
-                    navigator.clipboard.writeText(
-                      '[email protected]'
-                    );
+                    navigator.clipboard.writeText(mailboxAddress || '');
                     toast.success(t(i18n)`Copied to clipboard`);
                   }}
                 >
@@ -121,9 +118,7 @@ export const CreatePayableMenu = ({
             >
               <Box>
                 <Typography variant="body1" color="primary">
-                  {/* TODO: add support for email */}
-                  {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
-                  {'[email protected]'}
+                  {mailboxAddress || t(i18n)`No email address`}
                 </Typography>
               </Box>
             </Alert>

packages/sdk-react/src/mocks/handlers.ts

@@ -15,6 +15,7 @@ import { entityOnboardingDataHandlers } from './entitiyOnboardingData';
 import { entityUsersHandlers } from './entityUsers';
 import { filesHandlers } from './files';
 import { lineItemsHandlers } from './lineItems';
+import { mailboxesHandlers } from './mailboxes';
 import { measureUnitsHandlers } from './measureUnits';
 import { onboardingHandlers } from './onboarding';
 import { onboardingDocumentsHandlers } from './onboardingDocuments';
@@ -58,6 +59,7 @@ export const handlers = [
   ...bankAccountsHandlers,
   ...approvalPoliciesHandlers,
   ...approvalRequestsHandlers,
+  ...mailboxesHandlers,
   ...measureUnitsHandlers,
   ...rolesHandlers,
   ...filesHandlers,

packages/sdk-react/src/mocks/index.ts

@@ -8,4 +8,5 @@ export * from './entityUsers';
 export * from './lineItems';
 export * from './receivables/receivablesFixture';
 export * from './authentication';
+export * from './mailboxes';
 export * from './measureUnits';

packages/sdk-react/src/mocks/mailboxes/index.ts

@@ -0,0 +1,2 @@
+export * from './mailboxesHandlers';
+export * from './mailboxesFixture';

packages/sdk-react/src/mocks/mailboxes/mailboxesFixture.ts

@@ -0,0 +1,31 @@
+import { components } from '@/api';
+import { faker } from '@faker-js/faker';
+
+export const mailboxesFixture: components['schemas']['MailboxDataResponse'] = {
+  data: [
+    {
+      id: faker.string.uuid(),
+      mailbox_domain_id: faker.string.uuid(),
+      mailbox_full_address: faker.internet.email(),
+      mailbox_name: faker.company.name(),
+      related_object_type: 'payable',
+      status: 'active',
+    },
+    {
+      id: faker.string.uuid(),
+      mailbox_domain_id: faker.string.uuid(),
+      mailbox_full_address: faker.internet.email(),
+      mailbox_name: faker.company.name(),
+      related_object_type: 'payable',
+      status: 'active',
+    },
+    {
+      id: faker.string.uuid(),
+      mailbox_domain_id: faker.string.uuid(),
+      mailbox_full_address: faker.internet.email(),
+      mailbox_name: faker.company.name(),
+      related_object_type: 'payable',
+      status: 'active',
+    },
+  ],
+};

packages/sdk-react/src/mocks/mailboxes/mailboxesHandlers.ts

@@ -0,0 +1,16 @@
+import { components } from '@/api';
+
+import { http, HttpResponse, delay } from 'msw';
+
+import { mailboxesFixture } from './mailboxesFixture';
+
+export const mailboxesHandlers = [
+  http.get<{}, {}, components['schemas']['MailboxDataResponse']>(
+    '*/mailboxes',
+    async () => {
+      await delay();
+
+      return HttpResponse.json(mailboxesFixture);
+    }
+  ),
+];