Dogfooding Fixes: Microcredit (#498)

Co-authored-by: Hugo Marques <[email protected]>

src/api/user.ts

@@ -116,20 +116,6 @@ export const userApi = emptySplitApi.injectEndpoints({
                 url: 'users'
             })
         }),
-        // Get notifications
-        getNotifications: builder.mutation<
-            Notification[],
-            { limit: number; offset: number }
-        >({
-            query: ({ limit, offset }) => ({
-                method: 'GET',
-                url: `users/notifications?${
-                    !!offset ? `&offset=${offset}` : ''
-                }${!!limit ? `&limit=${limit}` : ''}`
-            }),
-            transformResponse: (response: { data: Notification[] }) =>
-                response.data
-        }),
         // Get preSigned URL for image upload
         getPreSigned: builder.mutation<PreSigned, void>({
             query: (type) => ({
@@ -190,7 +176,6 @@ export const {
     useAnonymousReportMutation,
     useCreateUserMutation,
     useDeleteUserMutation,
-    useGetNotificationsMutation,
     useGetUserMutation,
     useGetUserByIdMutation,
     useRecoverAccountMutation,

src/components/FlexibleTab.tsx

@@ -9,11 +9,12 @@ export type TabItem = {
 
 type FlexibleTabProps = {
     tabs: TabItem[];
+    index?: number;
 };
 
-const FlexibleTab: React.FC<FlexibleTabProps> = ({ tabs }) => {
+const FlexibleTab: React.FC<FlexibleTabProps> = ({ tabs, index }) => {
     return (
-        <Tabs>
+        <Tabs defaultIndex={index}>
             <TabList>
                 {tabs.map((tab, index) => (
                     <Tab

src/components/Sidebar.tsx

@@ -14,7 +14,6 @@ import {
 import { formatAddress } from '../utils/formatAddress';
 import { getCookie, hasCookie, setCookie } from 'cookies-next';
 import { getImage } from '../utils/images';
-import { getNotifications } from '../state/slices/notifications';
 import { getUserMenu } from './UserMenu';
 import { getUserName } from '../utils/users';
 import { languagesOptions } from 'src/utils/languages';
@@ -246,7 +245,6 @@ const SidebarMobileActions = (props: { user?: User }) => {
 const Sidebar = () => {
     const { asPath, locale, push, replace } = useRouter();
     const { user } = useSelector(selectCurrentUser);
-    const { notifications } = useSelector(getNotifications);
     const { address } = useWallet();
 
     const [data, setData] = useState<MenusState | undefined>();
@@ -298,11 +296,16 @@ const Sidebar = () => {
 
         setData({
             commonMenu,
-            flags: notifications,
+            flags: [
+                {
+                    key: 'notifications',
+                    value: user?.notificationsCount
+                }
+            ],
             footerMenu,
             menus
         });
-    }, [asPath, user, notifications, locale, address]);
+    }, [asPath, user, locale, address]);
 
     const footerMenu = () => {
         const userBeneficiary = user?.roles?.includes('beneficiary');

src/helpers/handleKnownErrors.tsx

@@ -0,0 +1,16 @@
+import { toast } from '@impact-market/ui';
+import Message from 'src/libs/Prismic/components/Message';
+
+export const handleKnownErrors = (error: any) => {
+    const errorMessage = error.toString().toLowerCase();
+
+    if (errorMessage.includes('insufficient funds')) {
+        toast.error(<Message id="insufficientFunds" />);
+    } else if (errorMessage.includes("don't have enough funds to borrow")) {
+        toast.error(<Message id="notEnoughFunds" />);
+    } else if (errorMessage.includes('user already has an active loan')) {
+        toast.error(<Message id="alreadyHasLoan" />);
+    } else {
+        toast.error(<Message id="errorOccurred" />);
+    }
+};

src/hooks/useNotifications.ts

@@ -20,7 +20,7 @@ export function useNotifications(filters?: any[]) {
         }).then((res) => res.json());
 
     const { data, mutate, error } = useSWR(
-        `/users/notifications/${
+        `/users/notifications?${
             !!filters?.length
                 ? filters?.map((filter: any) => filter).join('&')
                 : ''

src/modals/Microcredit/ApproveLoan.tsx

@@ -24,9 +24,13 @@ import useTranslations from 'src/libs/Prismic/hooks/useTranslations';
 
 const ApproveLoan = () => {
     const { extractFromView } = usePrismicData();
-    const { enterLoanMaturity, approveLoan } = extractFromView(
-        'messages'
-    ) as any;
+    const {
+        enterLoanMaturity,
+        approveLoan,
+        loansApproved,
+        loanMaturityHint,
+        enterLoanAmount
+    } = extractFromView('messages') as any;
 
     const { handleClose, address, mutate } = useModal();
     const { t } = useTranslations();
@@ -96,7 +100,7 @@ const ApproveLoan = () => {
 
             if (status) {
                 mutate();
-                toast.success('Loan(s) approved successfully!');
+                toast.success(loansApproved);
                 handleClose();
             } else {
                 toast.error(<Message id="errorOccurred" />);
@@ -148,11 +152,11 @@ const ApproveLoan = () => {
                             control={control}
                             name="period"
                             withError={!!errors?.period}
-                            hint="Max. 12 months"
+                            hint={loanMaturityHint}
                         />
                         <Input
                             type="number"
-                            placeholder="Enter loan amount..."
+                            placeholder={enterLoanAmount}
                             wrapperProps={{
                                 mt: 1,
                                 w: '100%'
@@ -202,7 +206,7 @@ const ApproveLoan = () => {
                             }
                             isLoading={isSubmitting}
                         >
-                            Approve Loan
+                            {approveLoan}
                         </Button>
                     </Box>
                 </Box>

src/modals/Signature.tsx

@@ -11,27 +11,35 @@ import { handleSignature } from 'src/helpers/handleSignature';
 import { useRouter } from 'next/router';
 import { useSignatures } from '@impact-market/utils/useSignatures';
 import Message from 'src/libs/Prismic/components/Message';
-import React from 'react';
+import React, { useState } from 'react';
 import String from '../libs/Prismic/components/String';
 import processTransactionError from 'src/utils/processTransactionError';
+import useTranslations from 'src/libs/Prismic/hooks/useTranslations';
 import useWallet from 'src/hooks/useWallet';
 
 const Signature = () => {
+    const { t } = useTranslations();
     const { signMessage, signTypedData } = useSignatures();
     const { disconnect } = useWallet();
     const { handleClose } = useModal();
     const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
 
     const handleSignMessage = async () => {
         try {
+            setIsLoading(true);
+
             await handleSignature(signMessage, signTypedData);
-            toast.success('Logged in successfully.');
+
+            setIsLoading(false);
+            toast.success(t('loggedIn'));
             handleClose();
         } catch (error) {
             console.log(error);
             processTransactionError(error, 'global_signature');
             toast.error(<Message id="errorOccurred" />);
         }
+        setIsLoading(false);
     };
 
     const handleDisconnectClick = async () => {
@@ -51,7 +59,7 @@ const Signature = () => {
                 <Message g500 small id="validateSignature" />
                 <Box mt={1.25} flex style={{ gap: '1rem' }}>
                     <Button
-                        isLoading={false}
+                        isLoading={isLoading}
                         onClick={() => {
                             handleSignMessage();
                         }}
@@ -65,7 +73,7 @@ const Signature = () => {
                             handleDisconnectClick();
                         }}
                     >
-                        Logout
+                        {t('logout')}
                     </Button>
                 </Box>
             </Box>

src/pages/_app.tsx

@@ -9,7 +9,6 @@ import {
 } from '@impact-market/ui';
 import { PrismicDataProvider } from '../libs/Prismic/components/PrismicDataProvider';
 import { Provider, useSelector } from 'react-redux';
-import { addNotification } from '../state/slices/notifications';
 import { getCookie, hasCookie } from 'cookies-next';
 import {
     selectCurrentUser,
@@ -20,7 +19,6 @@ import { setRates } from '../state/slices/rates';
 import { store } from '../state/store';
 import { useAccount } from 'wagmi';
 import { useGetExchangeRatesMutation } from '../api/generic';
-import { useNotifications } from 'src/hooks/useNotifications';
 import ErrorPage from 'next/error';
 import GoogleAnalytics from '../components/GoogleAnalytics';
 import React, { useEffect } from 'react';
@@ -71,26 +69,6 @@ const InnerApp = (props: AppProps) => {
         init();
     }, []);
 
-    const { notifications } = useNotifications([
-        `unreadOnly=true`,
-        `isWebApp=true`
-    ]);
-
-    useEffect(() => {
-        try {
-            store.dispatch(
-                addNotification({
-                    notification: {
-                        key: 'notifications',
-                        value: notifications?.rows || 0
-                    }
-                })
-            );
-        } catch (error) {
-            console.log(error);
-        }
-    }, [notifications]);
-
     const Content = Component as any;
 
     return (

src/state/store.ts

@@ -1,7 +1,6 @@
 import { emptySplitApi as api } from '../api';
 import { configureStore } from '@reduxjs/toolkit';
 import authReducer from './slices/auth';
-import notificationsReducer from './slices/notifications';
 import ratesReducer from './slices/rates';
 
 import learnAndEarnReduce from './slices/learnAndEarn';
@@ -14,7 +13,6 @@ export const store = configureStore({
     reducer: {
         auth: authReducer,
         learnAndEarn: learnAndEarnReduce,
-        notifications: notificationsReducer,
         rates: ratesReducer,
         [api.reducerPath]: api.reducer
     }

src/views/MicrocreditManager/ApproveRejectTab/BorrowersList.tsx

@@ -63,9 +63,9 @@ const loanStatus = (status: any) => {
         case 3: // Requested Changes
             badgeContent = (
                 <>
-                    <Icon icon={'menu'} p700 mr={0.2} />
+                    <Icon icon={'edit'} p700 mr={0.2} />
                     <Text g900 extrasmall medium>
-                        In Revision
+                        {t('revise')}
                     </Text>
                 </>
             );
@@ -389,7 +389,7 @@ const getColumns = (props: any) => {
         {
             minWidth: 10,
             render: (data: any) => loanStatus(data?.application?.status),
-            title: 'Status',
+            title: t('status'),
             value: 'status',
             width: '15%'
         },
@@ -413,6 +413,14 @@ const getColumns = (props: any) => {
                             rejectLoan(auth, data?.application?.id, mutate),
                         title: rejectLoanText
                     },
+                    // {
+                    //     icon: 'bookOpen',
+                    //     onClick: () =>
+                    //         router.push(
+                    //             `/microcredit/form/${data?.application?.id}`
+                    //         ),
+                    //     title: 'Loan Application'
+                    // },
                     {
                         icon: 'user',
                         onClick: () => router.push(`/user/${data.address}`),