feat: APP-222 web3 confirmation email (#2590)

Author: blushi

web-marketplace/src/components/organisms/LoginFlow/hooks/useEmailConfirmationData.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useLingui } from '@lingui/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { postData } from 'utils/fetch/postData';
 
 import { apiUri } from 'lib/apiUri';
@@ -18,7 +18,6 @@ import { onPostData } from 'components/organisms/LoginButton/hooks/onLoginPostDa
 import { useTimer } from 'components/organisms/LoginButton/hooks/useTimer';
 import { getEmailModalError } from 'components/organisms/LoginButton/utils/getEmailModalError';
 import { EmailFormSchemaType } from 'components/organisms/LoginModal/LoginModal.schema';
-import { CONNECTED_EMAIL_ERROR } from 'components/organisms/UserAccountSettings/UserAccountSettings.constants';
 
 import {
   DEFAULT_RESEND_ERROR,
@@ -27,6 +26,8 @@ import {
   RESEND_SUCCES,
   RESEND_TIMER,
 } from '../../LoginButton/LoginButton.constants';
+import { CONNECTED_EMAIL_ERROR } from 'components/organisms/RegistryLayout/RegistryLayout.constants';
+import { connectedEmailErrorModalAtom } from 'lib/atoms/modals.atoms';
 
 type EmailConfirmationDataParams = {
   emailConfirmationText?: string;
@@ -40,8 +41,9 @@ export const useEmailConfirmationData = ({
   const { _ } = useLingui();
   const reactQueryClient = useQueryClient();
   const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
-  const [isConnectedEmailErrorModalOpen, setIsConnectedEmailErrorModalOpen] =
-    useState(false);
+  const setConnectedEmailErrorModalAtom = useSetAtom(
+    connectedEmailErrorModalAtom,
+  );
   const [emailModalErrorCode, setEmailModalErrorCode] = useState('');
   const [email, setEmail] = useState('');
   const { privActiveAccount, activeAccount } = useAuth();
@@ -58,8 +60,7 @@ export const useEmailConfirmationData = ({
   const { track } = useTracker();
 
   const onConfirmationModalClose = () => setIsConfirmationModalOpen(false);
-  const onConnectedEmailErrorModalClose = () =>
-    setIsConnectedEmailErrorModalOpen(false);
+
   const onResendPasscode = async () => {
     if (token && resendTimeLeft === null) {
       startTimer();
@@ -156,7 +157,10 @@ export const useEmailConfirmationData = ({
         });
         if (response.error) {
           if (response.error === CONNECTED_EMAIL_ERROR) {
-            setIsConnectedEmailErrorModalOpen(true);
+            setConnectedEmailErrorModalAtom(atom => {
+              atom.open = true;
+              atom.email = email;
+            });
           }
         }
       } catch (e) {
@@ -176,8 +180,6 @@ export const useEmailConfirmationData = ({
     onResendPasscode,
     setIsConfirmationModalOpen,
     onEmailSubmit,
-    isConnectedEmailErrorModalOpen,
-    onConnectedEmailErrorModalClose,
     retryCsrfRequest,
   };
 };

…untSettings.ConnectedEmailErrorModal.tsx …istryLayout.ConnectedEmailErrorModal.tsxweb-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.ConnectedEmailErrorModal.tsx renamed to web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.ConnectedEmailErrorModal.tsx web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.ConnectedEmailErrorModal.tsx renamed to web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.ConnectedEmailErrorModal.tsx

@@ -1,24 +1,37 @@
+import { useCallback } from 'react';
 import { useLingui } from '@lingui/react';
+import { useAtom } from 'jotai';
 
 import { RegenModalProps } from 'web-components/src/components/modal';
 import { SadBeeModal } from 'web-components/src/components/modal/SadBeeModal/SadBeeModal';
 import { Body, Title } from 'web-components/src/components/typography';
 
+import { connectedEmailErrorModalAtom } from 'lib/atoms/modals.atoms';
+
 import {
   CONNECTED_EMAIL_ERROR_DESCRIPTION_END,
   CONNECTED_EMAIL_ERROR_DESCRIPTION_START,
   CONNECTED_EMAIL_ERROR_TITLE,
-} from './UserAccountSettings.constants';
+} from './RegistryLayout.constants';
 
-interface Props extends RegenModalProps {
+export interface ConnectedEmailErrorModalProps extends RegenModalProps {
   email: string;
 }
 
-export const ConnectedEmailErrorModal = ({ open, onClose, email }: Props) => {
+export const RegistryLayoutConnectedEmailErrorModal = () => {
   const { _ } = useLingui();
+  const [connectedEmailErrorModal, setConnectedEmailErrorModalAtom] = useAtom(
+    connectedEmailErrorModalAtom,
+  );
+  const { open, onClose, email } = connectedEmailErrorModal;
+
+  const onCloseModal = useCallback(() => {
+    setConnectedEmailErrorModalAtom(atom => void (atom.open = false));
+    if (onClose) onClose();
+  }, [setConnectedEmailErrorModalAtom, onClose]);
 
   return (
-    <SadBeeModal open={open} onClose={onClose}>
+    <SadBeeModal open={open ?? false} onClose={onCloseModal}>
       <Title variant="h4" align="center" sx={{ my: 5 }}>
         {_(CONNECTED_EMAIL_ERROR_TITLE)}
       </Title>

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.constants.ts

@@ -27,3 +27,9 @@ export const TERRAOS_POWERED_BY = msg`Powered by`;
 export const TERRAOS_COPYRIGHT = msg`© 2024 Terrasos SAS | All rights reserved`;
 export const TERRASOS_COMPANY_DESCRIPTION = msg`We are a company specialized in structuring and operating environmental investments.`;
 export const TERRASOS_LOGO_ALT = msg`Terrasos Logo`;
+
+export const CONNECTED_EMAIL_ERROR = 'email.already_connected';
+export const CONNECTED_EMAIL_ERROR_TITLE = msg`Sorry, this email is already connected to another account`;
+export const CONNECTED_EMAIL_ERROR_DESCRIPTION_START = msg`You entered: `;
+export const CONNECTED_EMAIL_ERROR_DESCRIPTION_END = msg`. Please use a different email address.`;
+export const EMAIL_ADDED = msg`Log in email successfully added`;

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.tsx

@@ -24,6 +24,7 @@ import { RegistryLayoutTxBuySuccessfulModal } from './RegistryLayout.TxBuySucces
 import { RegistryLayoutTxErrorModal } from './RegistryLayout.TxErrorModal';
 import { RegistryLayoutTxSuccessfulModal } from './RegistryLayout.TxSuccessfulModal';
 import { RegistryLayoutWarningBannerModal } from './RegistryLayout.WarningBanner';
+import { RegistryLayoutConnectedEmailErrorModal } from './RegistryLayout.ConnectedEmailErrorModal';
 
 const RegistryLayout: React.FC = () => {
   return (
@@ -51,6 +52,7 @@ const RegistryLayout: React.FC = () => {
       <RegistryLayoutTxBuySuccessfulModal />
       <RegistryLayoutWarningBannerModal />
       <RegistryLayoutChooseHowToPurchaseModal />
+      <RegistryLayoutConnectedEmailErrorModal />
     </>
   );
 };

web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.constants.ts

@@ -1,8 +1,3 @@
 import { msg } from '@lingui/macro';
 
-export const CONNECTED_EMAIL_ERROR =
-  'Sorry, this email is already connected to another account';
-export const CONNECTED_EMAIL_ERROR_TITLE = msg`Sorry, this email is already connected to another account`;
-export const CONNECTED_EMAIL_ERROR_DESCRIPTION_START = msg`You entered: `;
-export const CONNECTED_EMAIL_ERROR_DESCRIPTION_END = msg`. Please use a different email address.`;
 export const EMAIL_ADDED = msg`Log in email successfully added`;

web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.stories.tsx

@@ -49,10 +49,6 @@ const args = {
       action('email submit')({ email, callback });
       return Promise.resolve();
     },
-    isConnectedEmailErrorModalOpen: false,
-    onConnectedEmailErrorModalClose: action(
-      'close connected email error modal',
-    ),
   },
 };
 

web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.tsx

@@ -25,7 +25,6 @@ import {
 import { getResendCodeButtonLink } from '../LoginButton/utils/getResendCodeButtonLink';
 import { getResendCodeLabel } from '../LoginButton/utils/getResendCodeLabel';
 import { emailFormSchema } from '../LoginModal/LoginModal.schema';
-import { ConnectedEmailErrorModal } from './UserAccountSettings.ConnectedEmailErrorModal';
 import { ConnectField } from './UserAccountSettings.ConnectField';
 import { UserAccountSettingsProps } from './UserAccountSettings.types';
 
@@ -52,8 +51,6 @@ export const UserAccountSettings = ({
     onMailCodeChange,
     onResendPasscode,
     onEmailSubmit,
-    isConnectedEmailErrorModalOpen,
-    onConnectedEmailErrorModalClose,
   } = emailConfirmationData;
 
   const form = useZodForm({
@@ -116,11 +113,6 @@ export const UserAccountSettings = ({
         error={emailModalError}
         onCodeChange={onMailCodeChange}
       />
-      <ConnectedEmailErrorModal
-        open={isConnectedEmailErrorModalOpen}
-        onClose={onConnectedEmailErrorModalClose}
-        email={email}
-      />
       <div className="flex flex-col gap-30">
         <div className="flex flex-col gap-10">
           <Subtitle size="lg">

web-marketplace/src/components/organisms/UserAccountSettings/UserAccountSettings.types.ts

@@ -42,8 +42,6 @@ export interface UserAccountSettingsProps {
     | 'onMailCodeChange'
     | 'onResendPasscode'
     | 'onEmailSubmit'
-    | 'isConnectedEmailErrorModalOpen'
-    | 'onConnectedEmailErrorModalClose'
   >;
 }
 

web-marketplace/src/lib/atoms/modals.atoms.ts

@@ -8,6 +8,7 @@ import { TxSuccessfulModalProps } from 'web-components/src/components/modal/TxSu
 
 import { AccountSwitchModalProps } from 'components/organisms/AccountSwitchModal/AccountSwitchModal';
 import { ChooseHowToPurchaseModalProps } from 'components/organisms/ChooseHowToPurchaseModal/ChooseHowToPurchaseModal';
+import { ConnectedEmailErrorModalProps } from 'components/organisms/RegistryLayout/RegistryLayout.ConnectedEmailErrorModal';
 
 export const errorModalAtom = atomWithImmer({
   title: '',
@@ -62,3 +63,11 @@ export const chooseHowToPurchaseModalAtom = atomWithImmer({
   open: false,
   projectId: '',
 } as Partial<ChooseHowToPurchaseModalProps>);
+
+type ConnectedEmailErrorModal = RegenModalProps & {
+  email: string;
+};
+export const connectedEmailErrorModalAtom = atomWithImmer({
+  open: false,
+  email: '',
+} as Partial<ConnectedEmailErrorModal>);