Merge branch 'main' into dev-13777-backup-pre-rebase-2

team-monite · Feb 17, 2025 · 4667a03 · 4667a03
2 parents 7c1c731 + 0c0892d
commit 4667a03
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 73 deletions.
diff --git a/.changeset/weak-knives-pull.md b/.changeset/weak-knives-pull.md
@@ -0,0 +1,5 @@
+---
+'@monite/sdk-react': minor
+---
+
+Adds option to delete canceled payables
diff --git a/examples/with-nextjs-and-clerk-auth/src/components/Dashboard/Cashflow.tsx b/examples/with-nextjs-and-clerk-auth/src/components/Dashboard/Cashflow.tsx
@@ -9,6 +9,7 @@ import {
   ResponsiveContainer,
   Tooltip,
   XAxis,
+  YAxis,
 } from 'recharts';
 
 import { useMoniteContext } from '@monite/sdk-react';
@@ -180,6 +181,19 @@ export const CashFlowCard = () => {
             }}
           />
 
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value) => {
+              return new Intl.NumberFormat('en-US', {
+                notation: 'compact',
+                compactDisplay: 'short',
+                style: 'currency',
+                currency: 'USD',
+              }).format(Number(value) / 100);
+            }}
+          />
+
           <ReferenceLine y={0} stroke="#eee" />
           <Bar dataKey="paid" fill="#ece2f4" />
           <Bar dataKey="received" fill="#d2f2ec" />

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "lint-staged": "~13.0.2",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
-    "turbo": "~2.4.0",
+    "turbo": "~2.4.2",
     "typescript": "~5.5.4"
   },
   "resolutions": {

diff --git a/packages/sdk-react/src/components/payables/PayableDetails/PayableDetails.tsx b/packages/sdk-react/src/components/payables/PayableDetails/PayableDetails.tsx
@@ -48,6 +48,7 @@ const PayableDetailsBase = ({
   onRejected,
   onApproved,
   onReopened,
+  onDeleted,
   onPay,
   onPayUS,
 }: PayablesDetailsProps) => {
@@ -69,6 +70,7 @@ const PayableDetailsBase = ({
       approveInvoice,
       cancelInvoice,
       reopenInvoice,
+      deleteInvoice,
       isPaymentLinkAvailable,
       modalComponent,
     },
@@ -80,6 +82,7 @@ const PayableDetailsBase = ({
     onRejected,
     onApproved,
     onReopened,
+    onDeleted,
     onPay,
     onPayUS,
   });
@@ -147,6 +150,7 @@ const PayableDetailsBase = ({
           approveInvoice={approveInvoice}
           reopenInvoice={reopenInvoice}
           cancelInvoice={cancelInvoice}
+          deleteInvoice={deleteInvoice}
           payInvoice={payInvoice}
           payableDetailsFormId={payableDetailsFormId}
           onClose={onClose}

diff --git a/...eact/src/components/payables/PayableDetails/PayableDetailsHeader/PayableDetailsHeader.tsx b/...eact/src/components/payables/PayableDetails/PayableDetailsHeader/PayableDetailsHeader.tsx
@@ -34,6 +34,7 @@ export interface PayablesDetailsHeaderProps {
   approveInvoice: () => void;
   cancelInvoice: () => void;
   reopenInvoice: () => void;
+  deleteInvoice: () => void;
   payInvoice: () => void;
   /** The "id" of the form used to edit the Payable */
   payableDetailsFormId: string;
@@ -53,6 +54,7 @@ export const PayableDetailsHeader = ({
   approveInvoice,
   cancelInvoice,
   reopenInvoice,
+  deleteInvoice,
   payInvoice,
   payableDetailsFormId,
   isPaymentLinkAvailable,
@@ -115,6 +117,15 @@ export const PayableDetailsHeader = ({
       onClick: () => setShowCancelationModal(true),
       children: t(i18n)`Cancel bill`,
     },
+    delete: {
+      variant: 'text',
+      color: 'error',
+      onClick: () => {
+        deleteInvoice();
+        onClose?.();
+      },
+      children: t(i18n)`Delete bill`,
+    },
     pay: {
       variant: 'contained',
       onClick: payInvoice,

diff --git a/packages/sdk-react/src/components/payables/PayableDetails/usePayableDetails.tsx b/packages/sdk-react/src/components/payables/PayableDetails/usePayableDetails.tsx
@@ -26,6 +26,7 @@ export type PayableDetailsPermissions =
   | 'reject'
   | 'approve'
   | 'reopen'
+  | 'delete'
   | 'pay';
 
 export type UsePayableDetailsProps = {
@@ -87,6 +88,14 @@ export type UsePayableDetailsProps = {
    */
   onReopened?: (id: string) => void;
 
+  /** Callback function that is called when the payable is deleted
+   *
+   * @param {string} id - The ID of the payable
+   *
+   * @returns {void}
+   */
+  onDeleted?: (id: string) => void;
+
   /**
    * Callback function that is called when the user press the Pay button
    *
@@ -114,6 +123,7 @@ export function usePayableDetails({
   onRejected,
   onApproved,
   onReopened,
+  onDeleted,
   onPay,
   onPayUS,
 }: UsePayableDetailsProps) {
@@ -210,6 +220,12 @@ export function usePayableDetails({
     entityUserId: payable?.was_created_by_user_id,
   });
 
+  const { data: isDeleteAvailable } = useIsActionAllowed({
+    method: 'payable',
+    action: 'delete',
+    entityUserId: payable?.was_created_by_user_id,
+  });
+
   const createMutation = api.payables.postPayables.useMutation(
     {},
     {
@@ -368,6 +384,14 @@ export function usePayableDetails({
     }
   );
 
+  const deleteMutation = api.payables.deletePayablesId.useMutation(undefined, {
+    onSuccess: () =>
+      Promise.all([api.payables.getPayables.invalidateQueries(queryClient)]),
+    onError: (error) => {
+      toast.error(getAPIErrorMessage(i18n, error));
+    },
+  });
+
   const status = payable?.status;
 
   useEffect(() => {
@@ -468,6 +492,13 @@ export function usePayableDetails({
         }
         break;
       }
+
+      case 'canceled': {
+        if (isDeleteAvailable) {
+          setPermissions(['delete']);
+        }
+        break;
+      }
     }
 
     setIsPermissionsLoading(false);
@@ -480,6 +511,7 @@ export function usePayableDetails({
     isSubmitAvailable,
     isUpdatesAvailable,
     isReopenAvailable,
+    isDeleteAvailable,
     status,
     payableId,
     payable?.amount_to_pay,
@@ -756,6 +788,21 @@ export function usePayableDetails({
     }
   };
 
+  const deleteInvoice = async () => {
+    if (payableId) {
+      await deleteMutation.mutateAsync(
+        {
+          path: { payable_id: payableId },
+        },
+        {
+          onSuccess: () => {
+            onDeleted?.(payableId);
+          },
+        }
+      );
+    }
+  };
+
   const payInvoice = useCallback(() => {
     if (payable) {
       // TODO: remove onPayUS prop
@@ -788,6 +835,7 @@ export function usePayableDetails({
       approveInvoice,
       reopenInvoice,
       cancelInvoice,
+      deleteInvoice,
       payInvoice,
       handlePay,
       modalComponent,

diff --git a/packages/sdk-react/src/components/payables/Payables.tsx b/packages/sdk-react/src/components/payables/Payables.tsx
@@ -28,6 +28,7 @@ export type PayablesProps = Pick<
   | 'onRejected'
   | 'onApproved'
   | 'onReopened'
+  | 'onDeleted'
   | 'onPay'
   | 'onPayUS'
 >;
@@ -47,6 +48,7 @@ const PayablesBase = ({
   onRejected,
   onApproved,
   onReopened,
+  onDeleted,
   onPay,
   onPayUS,
 }: PayablesProps) => {
@@ -58,6 +60,14 @@ const PayablesBase = ({
     open: boolean;
   }>({ invoiceId: undefined, open: false });
 
+  const closeEditDialog = () => {
+    setInvoiceIdDialog((prev) => ({
+      ...prev,
+      open: false,
+      invoiceId: undefined,
+    }));
+  };
+
   const [isCreateInvoiceDialogOpen, setIsCreateInvoiceDialogOpen] =
     useState(false);
 
@@ -166,27 +176,26 @@ const PayablesBase = ({
         className={className + '-Dialog-PayableDetails'}
         open={invoiceIdDialog.open}
         container={root}
-        onClose={() => {
-          setInvoiceIdDialog((prev) => ({ ...prev, open: false }));
-        }}
-        onClosed={() => {
-          setInvoiceIdDialog((prev) =>
-            prev.open ? prev : { open: false, invoiceId: undefined }
-          );
-        }}
+        onClose={closeEditDialog}
+        onClosed={closeEditDialog}
         fullScreen
       >
         <PayableDetails
           id={invoiceIdDialog.invoiceId}
-          onClose={() => {
-            setInvoiceIdDialog((prev) => ({ ...prev, open: false }));
-          }}
+          onClose={closeEditDialog}
           onSaved={onSaved}
           onCanceled={onCanceled}
           onSubmitted={onSubmitted}
           onRejected={onRejected}
           onApproved={onApproved}
           onReopened={onReopened}
+          onDeleted={(payableId) => {
+            onDeleted?.(payableId);
+            closeEditDialog();
+            toast(t(i18n)`Bill #${payableId} has been deleted`, {
+              duration: 5000,
+            });
+          }}
           onPay={onPay}
           onPayUS={onPayUS}
         />