feat(#179): add error popup to facebook auth

src/components/ErrorPopup/index.tsx

@@ -0,0 +1,34 @@
+import { T9n } from 'features/T9n'
+
+import {
+  ScBody,
+  Modal,
+  ScText,
+  ScWrapper,
+} from './styled'
+
+type Props = {
+  error: string,
+  handleModalClose: () => void,
+  isModalOpen: boolean,
+}
+
+export const ErrorPopup = ({
+  error,
+  handleModalClose,
+  isModalOpen,
+}: Props) => (
+  <Modal
+    close={handleModalClose}
+    isOpen={isModalOpen}
+    withCloseButton
+  >
+    <ScWrapper>
+      <ScBody>
+        <ScText>
+          <T9n t={error} />
+        </ScText>
+      </ScBody>
+    </ScWrapper>
+  </Modal>
+)

src/components/ErrorPopup/styled.tsx

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+import { devices } from 'config/devices'
+
+import { ModalWindow } from 'features/Modal/styled'
+import {
+  Body,
+  Modal as BaseModal,
+} from 'features/AuthServiceApp/components/RegisterPopup/styled'
+
+export const Modal = styled(BaseModal)`
+  ${ModalWindow} {
+    min-height: 220px;
+    padding-top: 0;
+    
+    display: flex;
+    align-items: center;
+
+    ${isMobileDevice
+    ? css`
+          @media ${devices.mobile} {
+            width: 95vw;
+            padding-top: 0;
+          }
+        `
+    : ''};
+  }
+`
+
+export const ScBody = styled(Body)`
+`
+
+export const ScText = styled.span`
+  text-align: center;
+
+  ${isMobileDevice
+    ? css`
+        font-size: 14px;
+      `
+    : ''};
+`
+
+type WrapperProps = {
+  isFetching?: boolean,
+}
+
+export const ScWrapper = styled.div<WrapperProps>`
+  ${({ isFetching }) => (
+    isFetching
+      ? css`pointer-events: none;`
+      : ''
+  )}
+`

src/config/env.tsx

@@ -12,7 +12,7 @@ export const ENV = process.env.REACT_APP_ENV || 'staging'
 
 export const isProduction = ENV === 'production' || ENV === 'preproduction'
 
-export const stageENV = process.env.REACT_APP_STAGE || 'staging'
+export const stageENV = process.env.REACT_APP_STAGE || 'test'
 
 export const STRIPE_PUBLIC_KEY = process.env.REACT_APP_STRIPE_PK || 'pk_test_51J5TEYEDSxVnTgDWhKLstuDAhx9XmGJmj2awyZ1HghpWdU46MhXqbQt1PyW9XsRlES5JFyuQWbPRjoSsiW3wvXOH00KMirJEGZ'
 

src/features/AuthServiceApp/components/Login/index.tsx

@@ -10,6 +10,16 @@ import { PasswordInput } from '../PasswordInput'
 import { Input } from '../../../../components/Input'
 import { Logo } from '../Logo'
 import { useLoginForm } from './hooks'
+
+import {
+  RegisterButton,
+  AuthButtonsContainer,
+  AuthButton,
+  AuthButtonText,
+  AuthButtonImage,
+  ContinueWith,
+} from './styled'
+
 import {
   InputGroup,
   BlockTitle,
@@ -24,14 +34,7 @@ import {
   Wrapper,
   ScLoaderWrapper,
 } from '../../styled'
-import {
-  RegisterButton,
-  AuthButtonsContainer,
-  AuthButton,
-  AuthButtonText,
-  AuthButtonImage,
-  ContinueWith,
-} from './styled'
+
 import { CompanyInfo } from '../../../CompanyInfo'
 
 const Login = () => {
@@ -127,14 +130,14 @@ const Login = () => {
                 <AuthButtonImage authProvider={AuthProviders.Google} />
                 <AuthButtonText>Google</AuthButtonText>
               </AuthButton>
-              {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.Facebook)}> */}
-              {/*  <AuthButtonImage authProvider={AuthProviders.Facebook} /> */}
-              {/*  <AuthButtonText>Facebook</AuthButtonText> */}
+              <AuthButton onClick={handleAuthButtonClick(AuthProviders.Facebook)}>
+                <AuthButtonImage authProvider={AuthProviders.Facebook} />
+                <AuthButtonText>Facebook</AuthButtonText>
+              </AuthButton>
+              {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.AppleID)}> */}
+              {/*  <AuthButtonImage authProvider={AuthProviders.AppleID} /> */}
+              {/*  <AuthButtonText>Apple ID</AuthButtonText> */}
               {/* </AuthButton> */}
-              {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.AppleID)}>
-                <AuthButtonImage authProvider={AuthProviders.AppleID} />
-                <AuthButtonText>Apple ID</AuthButtonText>
-              </AuthButton> */}
             </AuthButtonsContainer>
           </ButtonsBlock>
           <Container>

src/features/AuthServiceApp/components/Oauth/hooks.tsx

@@ -15,6 +15,8 @@ import { API_ROOT } from '../../config/routes'
 export const useOauth = () => {
   const [email, setEmail] = useState('')
   const [error, setError] = useState('')
+  const [errorAuth, setErrorAuth] = useState('')
+  const [isOpenErrorPopup, setIsOpenErrorPopup] = useState(false)
   const [showEmailField, showShowEmailField] = useState(false)
 
   const formRef = useRef<HTMLFormElement>(null)
@@ -37,6 +39,11 @@ export const useOauth = () => {
       if (data.error === 'Token missing email field') {
         showShowEmailField(true)
       }
+
+      if (data.error === 'Email already exists') {
+        setErrorAuth('error_email_already_exist')
+        setIsOpenErrorPopup(true)
+      }
     }
   }, [])
 
@@ -46,6 +53,7 @@ export const useOauth = () => {
 
   const handleEmailFocus = () => {
     setError('')
+    setErrorAuth('')
   }
 
   const handleEmailBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => {
@@ -69,11 +77,14 @@ export const useOauth = () => {
   return {
     email,
     error,
+    errorAuth,
     formRef,
     handleEmailBlur,
     handleEmailChange,
     handleEmailFocus,
     handleSubmit,
+    isOpenErrorPopup,
+    setIsOpenErrorPopup,
     showEmailField,
   }
 }

src/features/AuthServiceApp/components/Oauth/index.tsx

@@ -27,6 +27,7 @@ import {
   StyledLink,
   Error,
 } from './styled'
+import { ErrorPopup } from '../../../../components/ErrorPopup'
 
 const url = `${API_ROOT}/oauth`
 
@@ -57,11 +58,14 @@ const Oauth = () => {
   const {
     email,
     error,
+    errorAuth,
     formRef,
     handleEmailBlur,
     handleEmailChange,
     handleEmailFocus,
     handleSubmit,
+    isOpenErrorPopup,
+    setIsOpenErrorPopup,
     showEmailField,
   } = useOauth()
 
@@ -155,6 +159,11 @@ const Oauth = () => {
             <StyledLink to={PAGES.login}>other method of authorization</StyledLink>
           </Text>
         </Content>
+        <ErrorPopup
+          handleModalClose={() => setIsOpenErrorPopup(false)}
+          isModalOpen={isOpenErrorPopup}
+          error={errorAuth}
+        />
       </Fragment>
     )
   }

src/features/AuthServiceApp/config/lexics.tsx

@@ -9,6 +9,7 @@ export const lexics = {
   confirm_email: 15432,
   consent: 15431,
   error_accept_cookies: 17268,
+  error_email_already_exist: 18253,
   error_email_already_in_use: 11156,
   error_empty_email: 2498,
   error_empty_password: 2499,