Add verify email feature (#730)

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

.eslintrc.js

@@ -11,4 +11,4 @@ module.exports = {
         'no-underscore-dangle': 'off',
         'prefer-destructuring': 'off'
     }
-};
+};

src/api/user.ts

@@ -167,6 +167,15 @@ export const userApi = emptySplitApi.injectEndpoints({
                 url: 'users'
             }),
             transformResponse: (response: { data: User }) => response.data
+        }),
+        // Verify Email
+        verifyEmail: builder.mutation<any, any>({
+            query: (body) => ({
+                body,
+                method: 'POST',
+                url: 'users/verify'
+            }),
+            transformResponse: (response: { data: any }) => response.data
         })
     })
 });
@@ -183,5 +192,6 @@ export const {
     useRecoverAccountMutation,
     useUpdateNotificationsMutation,
     useUpdateUserMutation,
-    useGetPreSignedMutation
+    useGetPreSignedMutation,
+    useVerifyEmailMutation
 } = userApi;

src/pages/_app.tsx

@@ -51,7 +51,8 @@ const apolloClient = new ApolloClient({
 });
 
 const InnerApp = (props: AppProps) => {
-    const { Component, pageProps } = props;
+    const { Component, pageProps, router } = props;
+    const { asPath } = router;
 
     const { withPreview } = pageProps;
     const { authorized, isLoading } = useGuard({ withPreview });
@@ -96,7 +97,7 @@ const InnerApp = (props: AppProps) => {
 
     return (
         <AppContainer>
-            <Sidebar />
+            {!asPath.includes('/verify-email') && <Sidebar />}
             {isLoading ? (
                 <ViewContainer isLoading />
             ) : (

src/pages/verify-email.tsx

@@ -0,0 +1,26 @@
+import { ClientConfig } from '@prismicio/client';
+import { GetStaticProps } from 'next';
+import Prismic from '../libs/Prismic/Prismic';
+import VerifyEmail from 'src/views/VerifyEmail';
+
+export const getStaticProps: GetStaticProps = async ({
+    locale: lang,
+    previewData
+}) => {
+    const clientOptions = previewData as ClientConfig;
+    const data = await Prismic.getByTypes({
+        clientOptions,
+        lang,
+        types: 'pwa-view-beneficiary'
+    });
+
+    return {
+        props: {
+            data,
+            view: 'beneficiary',
+            withPreview: !!previewData
+        }
+    };
+};
+
+export default VerifyEmail;

src/utils/routes.ts

@@ -27,7 +27,8 @@ export const publicRoutes: Routes = [
     '/microcredit/application',
     '/microcredit/apply',
     '/microcredit/form/[id]',
-    '/microcredit'
+    '/microcredit',
+    '/verify-email'
 ];
 
 export const privateRoutes: Routes = ['/profile', '/settings', '/mycommunity'];

src/views/VerifyEmail.tsx

@@ -0,0 +1,90 @@
+import { Box, Button, Text, ViewContainer, toast } from '@impact-market/ui';
+import { useVerifyEmailMutation } from 'src/api/user';
+import CheckPermission from 'src/components/CheckPermission';
+import React, { useEffect, useState } from 'react';
+import useFilters from 'src/hooks/useFilters';
+
+const VerifyEmail: React.FC<{ isLoading?: boolean }> = () => {
+    const { getByKey, update } = useFilters();
+    const [isLoading, setIsLoading] = useState(false);
+    const [emailConfirmed, setEmailConfirmed] = useState(false);
+    const [verifyEmail] = useVerifyEmailMutation();
+
+    useEffect(() => {
+        if (getByKey('verified')) {
+            setEmailConfirmed(true);
+        }
+    }, [getByKey('verified')]);
+
+    const confirmVerification = async () => {
+        try {
+            setIsLoading(true);
+
+            await verifyEmail({
+                code: getByKey('code'),
+                email: getByKey('email'),
+                userId: getByKey('userId')
+            }).unwrap();
+
+            update('verified', 1);
+            setIsLoading(false);
+            setEmailConfirmed(true);
+        } catch (error) {
+            console.log(error);
+            toast.error('Something went wrong. Please try again later.');
+            setIsLoading(false);
+        }
+    };
+
+    const showPage =
+        !!getByKey('code') && !!getByKey('email') && !!getByKey('userId');
+
+    if (!showPage) {
+        return <CheckPermission />;
+    }
+
+    return (
+        <ViewContainer {...({} as any)}>
+            <Box
+                column
+                fLayout="start"
+                flex
+                style={{ gap: '2rem', margin: '0 auto', maxWidth: '500px' }}
+            >
+                <img
+                    alt="impactMarket logo"
+                    src="/img/logo.svg"
+                    width="125px"
+                />
+                <div>
+                    <Text
+                        g900
+                        semibold
+                        style={{ fontSize: '1.5rem', lineHeight: '2rem' }}
+                    >
+                        {emailConfirmed
+                            ? 'Email Confirmed.'
+                            : 'Confirm your email.'}
+                    </Text>
+                    <Text g500 large mt="0.5rem">
+                        {emailConfirmed
+                            ? 'Thanks for confirming your email. You can now close this page and go back to claim your rewards.'
+                            : 'In order to be able to claim your rewards, please confirm your email by clicking the button below.'}
+                    </Text>
+                </div>
+                {!emailConfirmed && (
+                    <Box flex>
+                        <Button
+                            isLoading={isLoading}
+                            onClick={confirmVerification}
+                        >
+                            <Text>Confirm Email Address</Text>
+                        </Button>
+                    </Box>
+                )}
+            </Box>
+        </ViewContainer>
+    );
+};
+
+export default VerifyEmail;