Merge pull request #413 from team-monite/chore/merge-dev-to-main

chore(proposal): merge dev to main
team-monite · Nov 12, 2024 · 25afec4 · 25afec4
2 parents 9c1b7bf + 1a272f3
commit 25afec4
Show file tree

Hide file tree

Showing 67 changed files with 1,377 additions and 617 deletions.
diff --git a/.changeset/beige-steaks-deliver.md b/.changeset/beige-steaks-deliver.md
@@ -0,0 +1,5 @@
+---
+'@monite/sdk-react': patch
+---
+
+feat(DEV-13151): expand tax value check for non-vat supported countries
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -5,7 +5,7 @@
   "fixed": [["@monite/sdk-react", "@monite/sdk-api"]],
   "linked": [],
   "access": "public",
-  "baseBranch": "origin/main",
+  "baseBranch": "origin/dev",
   "updateInternalDependencies": "patch",
   "ignore": ["sdk-demo-with-nextjs-and-clerk-auth"]
 }
diff --git a/.changeset/hot-games-cheer.md b/.changeset/hot-games-cheer.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/odd-horses-rest.md b/.changeset/odd-horses-rest.md
@@ -0,0 +1,23 @@
+---
+'@monite/sdk-react': minor
+---
+
+introduce Custom Tabs for `<ReceivablesTable/>`
+
+### Description
+
+Implemented the ability to configure custom tabs for Receivables using MUI. Users can now select the specific tabs they
+need, while backward compatibility is maintained. By default, the standard tabs Invoices, Quotes, and Credit Notes are
+displayed.
+
+### Breaking Changes
+
+The `<ReceivablesTable/>` component interface has changed. Instead of using `ReceivablesTableTabEnum` for the active
+tab, you now need to pass a `number` representing the tab index. Additionally, the default tab indices have been
+updated:
+
+- **Invoices**: 0 (previously 1)
+- **Quotes**: 1 (previously 0)
+- **Credit Notes**: 2 (unchanged)
+
+Please update any existing integrations to reflect these changes.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,16 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@team-monite/e2e": "1.0.1",
+    "sdk-demo-with-nextjs-and-clerk-auth": "0.1.0",
+    "@team-monite/eslint-plugin": "2.0.3",
+    "@team-monite/rollup-config": "1.2.0",
+    "@monite/sdk-api": "3.17.0",
+    "@team-monite/sdk-demo": "1.9.0",
+    "@monite/sdk-drop-in": "1.7.0",
+    "@monite/sdk-react": "3.17.0",
+    "@team-monite/sdk-themes": "0.2.1"
+  },
+  "changesets": []
+}
diff --git a/.changeset/strong-parents-admire.md b/.changeset/strong-parents-admire.md
@@ -0,0 +1,5 @@
+---
+'@monite/sdk-react': minor
+---
+
+feat: introduce icon wrapper component for all close icons to be cusotmisable from theme props
diff --git a/.changeset/three-planets-drum.md b/.changeset/three-planets-drum.md
@@ -0,0 +1,5 @@
+---
+'@monite/sdk-react': patch
+---
+
+hide email section for upload bill dropdown
diff --git a/.changeset/tricky-keys-smoke.md b/.changeset/tricky-keys-smoke.md
@@ -0,0 +1,5 @@
+---
+'@monite/sdk-react': minor
+---
+
+feat: add integration of payment flow with iframe modal
diff --git a/examples/with-nextjs-and-clerk-auth/src/components/NavigationMenu/NavigationList.tsx b/examples/with-nextjs-and-clerk-auth/src/components/NavigationMenu/NavigationList.tsx
@@ -71,9 +71,6 @@ export const NavigationList = () => {
           <NavigationListItem icon={<IconFileHeart />}>
             {t(i18n)`Invoice Design`}
           </NavigationListItem>
-          <NavigationListItem icon={<IconFilesLandscapes />}>
-            {t(i18n)`Message Templates`}
-          </NavigationListItem>
           <NavigationListItem icon={<IconEnvelopeHeart />}>
             {t(i18n)`Email Templates`}
           </NavigationListItem>

diff --git a/examples/with-nextjs-and-clerk-auth/src/locales/en/messages.po b/examples/with-nextjs-and-clerk-auth/src/locales/en/messages.po
@@ -44,15 +44,15 @@ msgstr "Dark Mode"
 msgid "Dashboard"
 msgstr "Dashboard"
 
-#: src/components/NavigationMenu/NavigationList.tsx:78
+#: src/components/NavigationMenu/NavigationList.tsx:75
 msgid "Email Templates"
 msgstr "Email Templates"
 
 #: src/components/ThemeSelect/ThemeSelect.tsx:121
 msgid "English"
 msgstr "English"
 
-#: src/components/NavigationMenu/NavigationList.tsx:97
+#: src/components/NavigationMenu/NavigationList.tsx:94
 msgid "Get Help"
 msgstr "Get Help"
 
@@ -86,8 +86,8 @@ msgid "Material UI"
 msgstr "Material UI"
 
 #: src/components/NavigationMenu/NavigationList.tsx:75
-msgid "Message Templates"
-msgstr "Message Templates"
+#~ msgid "Message Templates"
+#~ msgstr "Message Templates"
 
 #: src/components/ThemeSelect/ThemeSelect.tsx:45
 #: src/components/ThemeSelect/useThemeSelect.ts:19
@@ -134,7 +134,7 @@ msgstr "Roles & Approvals"
 #~ msgid "Subtotal"
 #~ msgstr "Subtotal"
 
-#: src/components/NavigationMenu/NavigationList.tsx:81
+#: src/components/NavigationMenu/NavigationList.tsx:78
 msgid "Tags"
 msgstr "Tags"
 

diff --git a/packages/sdk-react/mui-styles.d.ts b/packages/sdk-react/mui-styles.d.ts
@@ -7,6 +7,7 @@ import { type MonitePayableStatusChipProps } from '@/components/payables/Payable
 import { type MoniteInvoiceRecurrenceIterationStatusChipProps } from '@/components/receivables/InvoiceRecurrenceIterationStatusChip/InvoiceRecurrenceIterationStatusChip';
 import { type MoniteInvoiceRecurrenceStatusChipProps } from '@/components/receivables/InvoiceRecurrenceStatusChip/InvoiceRecurrenceStatusChip';
 import { type MoniteInvoiceStatusChipProps } from '@/components/receivables/InvoiceStatusChip/InvoiceStatusChip';
+import { type MoniteIconWrapperProps } from '@/ui/iconWrapper/IconWrapper';
 import { type MoniteTablePaginationProps } from '@/ui/table/TablePagination';
 import {
   ComponentsOverrides,
@@ -43,6 +44,7 @@ declare module '@mui/material/styles' {
     MoniteCounterpartStatusChip: 'root';
     MoniteApprovalStatusChip: 'root';
     MonitePayableTable: 'never';
+    MoniteReceivablesTable: 'never';
   }
 
   /**
@@ -59,6 +61,8 @@ declare module '@mui/material/styles' {
     MoniteCounterpartStatusChip: Partial<MoniteCounterpartStatusChipProps>;
     MonitePayableTable: Partial<MonitePayableTableProps>;
     MoniteApprovalStatusChip: Partial<MoniteApprovalStatusChipProps>;
+    MoniteReceivablesTable: Partial<MoniteReceivablesTableProps>;
+    MoniteIconWrapper: Partial<MoniteIconWrapperProps>;
   }
 
   interface MoniteOptions {
@@ -81,5 +85,7 @@ declare module '@mui/material/styles' {
     MoniteInvoiceRecurrenceIterationStatusChip?: ComponentType<'MoniteInvoiceRecurrenceIterationStatusChip'>;
     MoniteCounterpartStatusChip?: ComponentType<'MoniteCounterpartStatusChip'>;
     MoniteApprovalStatusChip?: ComponentType<'MoniteApprovalStatusChip'>;
+    MoniteReceivablesTable?: ComponentType<'MoniteReceivablesTable'>;
+    MoniteIconWrapper?: ComponentType<'MoniteIconWrapper'>;
   }
 }
diff --git a/...ovalPolicyDetails/ApprovalPolicyDetailsFormAdvanced/ApprovalPolicyDetailsFormAdvanced.tsx b/...ovalPolicyDetails/ApprovalPolicyDetailsFormAdvanced/ApprovalPolicyDetailsFormAdvanced.tsx
@@ -8,6 +8,7 @@ import { useApprovalPolicyDetails } from '@/components/approvalPolicies/Approval
 import { RHFTextField } from '@/components/RHF/RHFTextField';
 import { MoniteScopedProviders } from '@/core/context/MoniteScopedProviders';
 import { useIsActionAllowed } from '@/core/queries/usePermissions';
+import { IconWrapper } from '@/ui/iconWrapper';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { I18n } from '@lingui/core';
 import { t } from '@lingui/macro';
@@ -21,7 +22,6 @@ import {
   DialogContent,
   DialogTitle,
   Divider,
-  IconButton,
   Link,
   Typography,
 } from '@mui/material';
@@ -135,14 +135,14 @@ export const ApprovalPolicyDetailsFormAdvancedBase = ({
               : t(i18n)`Create Approval Policy`}
           </Typography>
           {dialogContext?.isDialogContent && (
-            <IconButton
+            <IconWrapper
               edge="start"
               color="inherit"
               onClick={dialogContext.onClose}
               aria-label={t(i18n)`Close approval policy details`}
             >
               <CloseIcon />
-            </IconButton>
+            </IconWrapper>
           )}
         </Box>
       </DialogTitle>

diff --git a/...mponents/approvalPolicies/ApprovalPolicyDetails/ApprovalPolicyForm/ApprovalPolicyForm.tsx b/...mponents/approvalPolicies/ApprovalPolicyDetails/ApprovalPolicyForm/ApprovalPolicyForm.tsx
@@ -20,6 +20,7 @@ import { RHFTextField } from '@/components/RHF/RHFTextField';
 import { useMoniteContext } from '@/core/context/MoniteContext';
 import { useCurrencies } from '@/core/hooks';
 import { MoniteCurrency } from '@/ui/Currency';
+import { IconWrapper } from '@/ui/iconWrapper';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Trans } from '@lingui/macro';
 import { t } from '@lingui/macro';
@@ -33,7 +34,6 @@ import {
   DialogContent,
   Divider,
   Grid,
-  IconButton,
   MenuItem,
   Stack,
   Typography,
@@ -643,14 +643,14 @@ export const ApprovalPolicyForm = ({
             </Typography>
           )}
           {dialogContext?.isDialogContent && (
-            <IconButton
+            <IconWrapper
               edge="start"
               color="inherit"
               onClick={dialogContext.onClose}
               aria-label={t(i18n)`Close approval policy details`}
             >
               <CloseIcon />
-            </IconButton>
+            </IconWrapper>
           )}
         </Box>
       </DialogTitle>

diff --git a/...mponents/approvalPolicies/ApprovalPolicyDetails/ApprovalPolicyView/ApprovalPolicyView.tsx b/...mponents/approvalPolicies/ApprovalPolicyDetails/ApprovalPolicyView/ApprovalPolicyView.tsx
@@ -13,6 +13,7 @@ import {
 } from '@/components/approvalPolicies/useApprovalPolicyTrigger';
 import { getCounterpartName } from '@/components/counterparts/helpers';
 import { useMoniteContext } from '@/core/context/MoniteContext';
+import { IconWrapper } from '@/ui/iconWrapper';
 import { t, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import CloseIcon from '@mui/icons-material/Close';
@@ -24,7 +25,6 @@ import {
   DialogActions,
   DialogContent,
   Divider,
-  IconButton,
   List,
   ListItem,
   Typography,
@@ -225,14 +225,14 @@ export const ApprovalPolicyView = ({
             {approvalPolicy?.name}
           </Typography>
           {dialogContext?.isDialogContent && (
-            <IconButton
+            <IconWrapper
               edge="start"
               color="inherit"
               onClick={dialogContext.onClose}
               aria-label={t(i18n)`Close approval policy details`}
             >
               <CloseIcon />
-            </IconButton>
+            </IconWrapper>
           )}
         </Box>
       </DialogTitle>

diff --git a/...cyDetails/ExistingApprovalPolicyDetailsAdvanced/ExistingApprovalPolicyDetailsAdvanced.tsx b/...cyDetails/ExistingApprovalPolicyDetailsAdvanced/ExistingApprovalPolicyDetailsAdvanced.tsx
@@ -2,6 +2,7 @@ import { components } from '@/api';
 import { useDialog } from '@/components';
 import { MoniteScopedProviders } from '@/core/context/MoniteScopedProviders';
 import { useIsActionAllowed } from '@/core/queries/usePermissions';
+import { IconWrapper } from '@/ui/iconWrapper';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import CloseIcon from '@mui/icons-material/Close';
@@ -14,7 +15,6 @@ import {
   DialogContent,
   DialogTitle,
   Divider,
-  IconButton,
   Link,
   Typography,
   Paper,
@@ -67,14 +67,14 @@ const ExistingApprovalPolicyDetailsAdvancedBase = ({
             {approvalPolicy?.name}
           </Typography>
           {dialogContext?.isDialogContent && (
-            <IconButton
+            <IconWrapper
               edge="start"
               color="inherit"
               onClick={dialogContext.onClose}
               aria-label={t(i18n)`Close approval policy details`}
             >
               <CloseIcon />
-            </IconButton>
+            </IconWrapper>
           )}
         </Box>
       </DialogTitle>

diff --git a/...eact/src/components/approvalRequests/ApprovalRequestsTable/ApprovalRequestsTable.test.tsx b/...eact/src/components/approvalRequests/ApprovalRequestsTable/ApprovalRequestsTable.test.tsx
@@ -59,21 +59,23 @@ describe('ApprovalRequestTable', () => {
   });
 
   describe('# Public API', () => {
-    test('should trigger a `onRowClick` callback when click on a row', async () => {
+    //TODO: fix this test after we solve problem with multiple spinners on waitUntilTableIsLoaded
+    test.skip('should trigger an `onRowClick` callback when clicking on a row', async () => {
       const onRowClickMock = jest.fn();
 
       renderWithClient(<ApprovalRequestsTable onRowClick={onRowClickMock} />);
 
       const firstApproval = approvalRequestsListFixture[0];
       expect(firstApproval.id).toBeDefined();
 
-      const firstRow = await waitFor(async () => {
-        const rows = await screen.findAllByRole('row');
-        expect(rows.length).toBeGreaterThan(1);
-        return rows[1]; // skip the header row
+      const rows = await waitFor(async () => {
+        const tableRows = await screen.findAllByRole('row');
+        expect(tableRows.length).toBeGreaterThan(1); // Ensure data rows are loaded
+        return tableRows;
       });
 
-      fireEvent.click(firstRow);
+      const firstDataRow = rows[1];
+      fireEvent.click(firstDataRow);
 
       expect(onRowClickMock).toHaveBeenCalledWith(firstApproval.id);
     });

diff --git a/...ounterpartDetails/CounterpartForm/CounterpartIndividualForm/CounterpartIndividualForm.tsx b/...ounterpartDetails/CounterpartForm/CounterpartIndividualForm/CounterpartIndividualForm.tsx
@@ -8,6 +8,7 @@ import { useDialog } from '@/components/Dialog';
 import { useIsActionAllowed } from '@/core/queries/usePermissions';
 import { LanguageCodeEnum } from '@/enums/LanguageCodeEnum';
 import { AccessRestriction } from '@/ui/accessRestriction';
+import { IconWrapper } from '@/ui/iconWrapper';
 import { LoadingPage } from '@/ui/loadingPage';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { t } from '@lingui/macro';
@@ -26,7 +27,6 @@ import {
   ListItemButton,
   ListItemText,
   Grid,
-  IconButton,
 } from '@mui/material';
 
 import { getIndividualName } from '../../../helpers';
@@ -177,13 +177,13 @@ export const CounterpartIndividualForm = (props: CounterpartsFormProps) => {
         </Grid>
         <Grid item xs={1}>
           {dialogContext?.isDialogContent && (
-            <IconButton
+            <IconWrapper
               aria-label={t(i18n)`Counterpart Close`}
               onClick={dialogContext.onClose}
               color="inherit"
             >
               <CloseIcon />
-            </IconButton>
+            </IconWrapper>
           )}
         </Grid>
       </Grid>

diff --git a/...erpartDetails/CounterpartForm/CounterpartOrganizationForm/CounterpartOrganizationForm.tsx b/...erpartDetails/CounterpartForm/CounterpartOrganizationForm/CounterpartOrganizationForm.tsx
@@ -8,6 +8,7 @@ import { useDialog } from '@/components/Dialog';
 import { useIsActionAllowed } from '@/core/queries/usePermissions';
 import { LanguageCodeEnum } from '@/enums/LanguageCodeEnum';
 import { AccessRestriction } from '@/ui/accessRestriction';
+import { IconWrapper } from '@/ui/iconWrapper';
 import { LoadingPage } from '@/ui/loadingPage';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { t } from '@lingui/macro';
@@ -26,7 +27,6 @@ import {
   ListItemButton,
   ListItemText,
   Grid,
-  IconButton,
 } from '@mui/material';
 
 import { CounterpartAddressForm } from '../../CounterpartAddressForm';
@@ -184,13 +184,13 @@ export const CounterpartOrganizationForm = (props: CounterpartsFormProps) => {
         </Grid>
         <Grid item xs={1}>
           {dialogContext?.isDialogContent && (
-            <IconButton
+            <IconWrapper
               aria-label={t(i18n)`Counterpart Close`}
               onClick={dialogContext.onClose}
               color="inherit"
             >
               <CloseIcon />
-            </IconButton>
+            </IconWrapper>
           )}
         </Grid>
       </Grid>