fix: invoices functionality in both frontend and backend.

Author: mmoehabb

apps/dashboard/src/components/Invoices/List.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/components/utils/invoice";
 import { Typography } from "@litespace/ui/Typography";
 import ImageField from "@/components/Common/ImageField";
+import { price } from "@litespace/utils";
 
 const List: React.FC<{
   data: Paginated<IInvoice.Self>;
@@ -58,7 +59,7 @@ const List: React.FC<{
       }),
       columnHelper.accessor("amount", {
         header: intl("dashboard.invoices.amount"),
-        cell: (info) => formatCurrency(info.getValue()),
+        cell: (info) => formatCurrency(price.unscale(info.getValue())),
       }),
       columnHelper.accessor("status", {
         header: intl("dashboard.invoices.status"),

apps/web/src/components/Invoices/CreateDialog/Bank.tsx

@@ -64,10 +64,10 @@ export const Bank: React.FC<{
 
   const options: SelectList<IInvoice.Bank> = useMemo(() => {
     return BANKS.map((bank) => ({
-      label: getBankIntlId(bank),
+      label: intl(getBankIntlId(bank)),
       value: bank,
     }));
-  }, []);
+  }, [intl]);
 
   return (
     <div className="flex flex-col gap-8 md:gap-6">
@@ -108,7 +108,7 @@ export const Bank: React.FC<{
           />
           <PatternInput
             mask=" "
-            format="#### #### #### ####"
+            format="#### #### #### #### ####"
             type="text"
             id="account-number"
             label={intl("invoices.account")}

apps/web/src/components/Invoices/CreateDialog/index.tsx

@@ -42,7 +42,11 @@ export const CreateInvoiceDialog: React.FC<{
 
   const onError = useOnError({
     type: "mutation",
-    handler: () => toast.error({ title: intl("invoices.create-toast.error") }),
+    handler: (error) =>
+      toast.error({
+        title: intl("invoices.create-toast.error"),
+        description: intl(error.messageId),
+      }),
   });
 
   const createInvoice = useCreateInvoice({ onSuccess, onError });

apps/web/src/components/Invoices/InvoicesOverview.tsx

@@ -27,9 +27,9 @@ export const InvoicesOverview: React.FC<{ tutorId?: number }> = ({
       </Typography>
 
       <Overview
-        totalRevenue={query.data?.invoices.total || 0}
+        fulfilledRevenue={query.data?.invoices.fulfilled || 0}
         availableRevenue={query.data?.spendable || 0}
-        pendingInvoicesCount={query.data?.invoices.pending || 0}
+        pendingRevenue={query.data?.invoices.pending || 0}
         futureRevenue={query.data?.income.future || 0}
         loading={query.isPending}
         error={query.isError}

apps/web/src/components/Invoices/List.tsx

@@ -36,9 +36,12 @@ export const List: React.FC<{ userId?: number }> = ({ userId }) => {
 
   const onError = useOnError({
     type: "mutation",
-    handler: () => {
+    handler: (error) => {
       setId(0);
-      toast.error({ title: intl("invoices.cancel-toast.error") });
+      toast.error({
+        title: intl("invoices.cancel-toast.error"),
+        description: intl(error.messageId),
+      });
     },
   });
 
@@ -53,6 +56,7 @@ export const List: React.FC<{ userId?: number }> = ({ userId }) => {
         >
           {intl("invoices.table.title")}
         </Typography>
+
         <Button
           size="large"
           endIcon={<TransactionMinus className="icon stroke-[1.5]" />}
@@ -62,6 +66,7 @@ export const List: React.FC<{ userId?: number }> = ({ userId }) => {
             {intl("invoices.withdrawal-request.create")}
           </Typography>
         </Button>
+
         <CreateInvoiceDialog
           open={open}
           close={() => setOpen(false)}

apps/web/src/components/Invoices/Table.tsx

@@ -1,9 +1,9 @@
 import dayjs from "@/lib/dayjs";
+import { formatBankString } from "@/lib/format";
 import AlertCircle from "@litespace/assets/AlertCircle";
 import Calendar from "@litespace/assets/Calendar";
 import DollarCircle from "@litespace/assets/DollarCircle";
 import EmptyInvoices from "@litespace/assets/EmptyInvoices";
-import TransactionMinus from "@litespace/assets/TransactionMinus";
 import Trash from "@litespace/assets/Trash";
 import Wallet from "@litespace/assets/Wallet";
 import { IInvoice, Void } from "@litespace/types";
@@ -17,6 +17,7 @@ import {
 } from "@litespace/ui/Table";
 import { Typography } from "@litespace/ui/Typography";
 import { formatNumber } from "@litespace/ui/utils";
+import { price } from "@litespace/utils";
 import { createColumnHelper } from "@tanstack/react-table";
 import cn from "classnames";
 import { isEmpty } from "lodash";
@@ -76,7 +77,7 @@ export const Table: React.FC<{
             className="text-natural-800 font-semibold text-body"
           >
             {intl("labels.currency.egp", {
-              value: formatNumber(info.getValue()),
+              value: formatNumber(price.unscale(info.getValue())),
             })}
           </Typography>
         ),
@@ -97,7 +98,9 @@ export const Table: React.FC<{
               tag="p"
               className="text-body font-semibold text-natural-800"
             >
-              {info.row.original.receiver}
+              {info.getValue() !== IInvoice.WithdrawMethod.Bank
+                ? info.row.original.receiver
+                : formatBankString(info.row.original.receiver)}
             </Typography>
           </div>
         ),
@@ -192,14 +195,6 @@ const EmptyList = () => {
         >
           {intl("invoices.table.empty")}
         </Typography>
-        <Button
-          size="large"
-          endIcon={<TransactionMinus className="icon stroke-[1.5]" />}
-        >
-          <Typography tag="span" className="text">
-            {intl("invoices.withdrawal-request.create")}
-          </Typography>
-        </Button>
       </div>
     </div>
   );

apps/web/src/lib/format.ts

@@ -0,0 +1,16 @@
+/**
+ * Bank receiver is assumed to follow this pattern: [bank-name]:[bank-acount-number],
+ * for instance, CIB:123123123123213.
+ */
+export function formatBankString(bankReceiver: string) {
+  const [bankName, bankAccountNumber] = bankReceiver.split(":");
+  const numOfGroups = Math.ceil(bankAccountNumber.length / 4);
+
+  const crafted: string[] = [`${bankName}:`];
+  for (let i = 0; i < numOfGroups; i++) {
+    const k = i * numOfGroups;
+    crafted.push(bankAccountNumber.slice(k, k + 4));
+  }
+
+  return crafted.join("  ");
+}

packages/ui/src/components/InvoicesOverview/InvoicesOverview.stories.tsx

@@ -22,9 +22,9 @@ type Story = StoryObj<typeof InvoicesOverview>;
 
 export const Primary: Story = {
   args: {
-    totalRevenue: faker.number.int({ min: 100, max: 10_000 }),
+    fulfilledRevenue: faker.number.int({ min: 100, max: 10_000 }),
     availableRevenue: faker.number.int({ min: 100, max: 10_000 }),
-    pendingInvoicesCount: faker.number.int({ min: 0, max: 10 }),
+    pendingRevenue: faker.number.int({ min: 0, max: 10 }),
     futureRevenue: faker.number.int({ min: 100, max: 10_000 }),
     loading: false,
     error: false,
@@ -34,9 +34,9 @@ export const Primary: Story = {
 
 export const LargeNumbers: Story = {
   args: {
-    totalRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
+    fulfilledRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
     availableRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
-    pendingInvoicesCount: faker.number.int({ min: 0, max: 10 }),
+    pendingRevenue: faker.number.int({ min: 0, max: 10 }),
     futureRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
     loading: false,
     error: false,
@@ -46,9 +46,9 @@ export const LargeNumbers: Story = {
 
 export const Loading: Story = {
   args: {
-    totalRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
+    fulfilledRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
     availableRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
-    pendingInvoicesCount: faker.number.int({ min: 0, max: 10 }),
+    pendingRevenue: faker.number.int({ min: 0, max: 10 }),
     futureRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
     loading: true,
     error: false,
@@ -58,9 +58,9 @@ export const Loading: Story = {
 
 export const Error: Story = {
   args: {
-    totalRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
+    fulfilledRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
     availableRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
-    pendingInvoicesCount: faker.number.int({ min: 0, max: 10 }),
+    pendingRevenue: faker.number.int({ min: 0, max: 10 }),
     futureRevenue: faker.number.int({ min: 100_000, max: 1_000_000 }),
     loading: false,
     error: true,

packages/ui/src/components/InvoicesOverview/InvoicesOverview.tsx

@@ -8,19 +8,20 @@ import Money from "@litespace/assets/Money";
 import TransactionMinus from "@litespace/assets/TransactionMinus";
 import EmptyWalletTime from "@litespace/assets/EmptyWalletTime";
 import { formatNumber } from "@/components/utils";
+import { price } from "@litespace/utils";
 
 export const InvoicesOverview: React.FC<{
-  totalRevenue: number;
+  fulfilledRevenue: number;
   availableRevenue: number;
-  pendingInvoicesCount: number;
+  pendingRevenue: number;
   futureRevenue: number;
   loading: boolean;
   error: boolean;
   retry: Void;
 }> = ({
-  totalRevenue,
+  fulfilledRevenue,
   availableRevenue,
-  pendingInvoicesCount,
+  pendingRevenue,
   futureRevenue,
   loading,
   error,
@@ -52,9 +53,9 @@ export const InvoicesOverview: React.FC<{
         icon={
           <ChartSquare className="[&>*]:stroke-natural-50 w-3 h-3 md:w-4 md:h-4" />
         }
-        title="tutor-invoices.overview.total-revenue"
+        title="tutor-invoices.overview.fulfilled-revenue"
         value={intl("labels.currency.egp", {
-          value: formatNumber(totalRevenue),
+          value: formatNumber(price.unscale(fulfilledRevenue)),
         })}
         color="brand"
         className="col-span-2 lg:col-span-1"
@@ -64,7 +65,7 @@ export const InvoicesOverview: React.FC<{
         icon={<Money className="[&>*]:stroke-natural-50 h-3 md:w-4 md:h-4" />}
         title="tutor-invoices.overview.available-revenue"
         value={intl("labels.currency.egp", {
-          value: formatNumber(availableRevenue),
+          value: formatNumber(price.unscale(availableRevenue)),
         })}
         color="secondary"
         className="col-span-2 lg:col-span-1"
@@ -75,7 +76,9 @@ export const InvoicesOverview: React.FC<{
           <TransactionMinus className="[&>*]:stroke-natural-50 h-3 md:w-4 md:h-4" />
         }
         title="tutor-invoices.overview.pending-invoices-count"
-        value={formatNumber(pendingInvoicesCount)}
+        value={intl("labels.currency.egp", {
+          value: formatNumber(price.unscale(pendingRevenue)),
+        })}
         color="warning"
         className="col-span-2 lg:col-span-1"
       />
@@ -85,7 +88,7 @@ export const InvoicesOverview: React.FC<{
           <EmptyWalletTime className="[&>*]:stroke-natural-50 h-3 md:w-4 md:h-4" />
         }
         value={intl("labels.currency.egp", {
-          value: formatNumber(futureRevenue),
+          value: formatNumber(price.unscale(futureRevenue)),
         })}
         title="tutor-invoices.overview.future-revenue"
         color="destructive"

packages/ui/src/locales/ar-eg.json

@@ -434,7 +434,7 @@
   "invoices.create-dialog.instapay.label": "ادخل العنوان البريدي الخاص بإنستاباي",
   "invoices.create-dialog.username.label": "اسم المستخدم",
   "invoices.create-dialog.instapay.placeholder": "litespace@instapay",
-  "invoices.create-dialog.account-number.placeholder": "1234567890123456",
+  "invoices.create-dialog.account-number.placeholder": "•••• •••• •••• 1234",
   "invoices.table.empty": "لا توجد طلبات سحب سابقة",
   "invoices.table.loading": "برجاء الانتظار... جاري تحميل طلبات السحب!",
   "invoices.table.error": " عذرًا، حدث خطأ أثناء تحميل طلبات السحب، برجاء المحاولة مرة أخرى",
@@ -721,7 +721,7 @@
   "tutor-settings.topics.selection-dialog.error": "عذرًا، حدث خطأ أثناء تحميل  المجالات المتاحة، برجاء المحاولة مرة أخرى",
   "tutor-settings.account-settings.notifications.title": "الإشعارات",
   "tutor-invoices.overview.title": "الأرباح",
-  "tutor-invoices.overview.total-revenue": "إجمالي الأرباح",
+  "tutor-invoices.overview.fulfilled-revenue": "إجمالي الأرباح",
   "tutor-invoices.overview.available-revenue": "المتاح للسحب",
   "tutor-invoices.overview.pending-invoices-count": "تحت المعالجة",
   "tutor-invoices.overview.future-revenue": "الأرباح القادمة",