fix(591): display error message and styles (#264)

src/config/lexics/public.tsx

@@ -1,5 +1,6 @@
 export const publicLexics = {
   error_account_blocked: 12909,
+  error_email_already_in_use: 11156,
   error_empty_email: 2498,
   error_empty_password: 2499,
   error_fill_out_required_fields: 12911,

src/features/AuthStore/hooks/useRegister.tsx

@@ -12,12 +12,7 @@ export const useRegister = () => {
     history.replace(`${PAGES.register}/successful`)
   }
 
-  const showError = (message: string) => {
-    // eslint-disable-next-line no-alert
-    window.alert(message)
-  }
-
   return async (args: Args) => (
-    register(args).then(goToRegistrationSuccess, showError)
+    register(args).then(goToRegistrationSuccess)
   )
 }

src/features/Common/Input/styled.tsx

@@ -47,7 +47,7 @@ export const LabelTitle = styled.p<TitleProps>`
   padding-top: 2px;
   color: ${({ theme: { colors } }) => colors.secondary};
   width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
-  
+
   @media ${devices.laptop} {
     ${({ isUserAccountPage }) => (!isUserAccountPage
     ? css`
@@ -131,7 +131,7 @@ export const InputStyled = styled.input<InputProps>`
       }
     `
     : '')}
-    
+
   }
 
   @media ${devices.tablet} {
@@ -157,7 +157,7 @@ export const InputStyled = styled.input<InputProps>`
 export const InputWrapper = styled.div<WrapperProps>`
   position: relative;
   ${wrapperStyles}
-  
+
 
   @media ${devices.mobile} {
     height: 40px;
@@ -215,7 +215,7 @@ export const Error = styled(T9n)<ErrorProps>`
 
   ${({ marginBottom }) => (
     marginBottom
-      ? `margin-bottom: ${marginBottom}px`
+      ? `margin-bottom: ${marginBottom}px;`
       : ''
   )}
 

src/features/Login/index.tsx

@@ -54,7 +54,7 @@ const LoginForm = () => {
         />
 
         <ButtonsBlock>
-          <Error t={requestError || ''} marginBottom={8} />
+          <Error t={requestError || ''} marginBottom={27} />
           <ButtonSolid type='submit'>
             <T9n t='login' />
           </ButtonSolid>

src/features/Login/styled.tsx

@@ -60,28 +60,31 @@ export const BlockTitle = styled(T9n)`
   }
 `
 
-export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
+type ButtonsBlockProps = {
+  marginTop?: number,
+}
+
+export const ButtonsBlock = styled.div<ButtonsBlockProps>`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')};
-  margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')};
   position: relative;
+  margin-top: ${({ marginTop = 2 }) => marginTop}px;
 
   @media ${devices.laptop} {
-    margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '32px')};
+    margin-top: 32px;
   }
 
   @media ${devices.mobile} {
-    bottom: ${({ forSubsPage }) => (forSubsPage ? '20px' : '10px')};
-    margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '0' : '')};
-    position: ${({ forSubsPage }) => (forSubsPage ? 'absolute' : 'relative')};
+    bottom: 10px;
+    margin-bottom: 0;
+    position: relative;
   }
 `
 
 export const RegisterButton = styled(Link)`
   ${outlineButtonStyles}
-  margin-top: 40px;
+  margin-top: 15px;
   display: flex;
   align-items: center;
   justify-content: center;

src/features/Register/components/CardStep/index.tsx

@@ -34,7 +34,7 @@ export const CardStep = () => {
           />
         </Row>
       </Card>
-      <ButtonsBlock>
+      <ButtonsBlock marginTop={60}>
         <ButtonSolid type='submit'>
           <T9n t='next' />
         </ButtonSolid>

src/features/Register/components/RegistrationStep/hooks/useSubmitHandler.tsx

@@ -11,7 +11,7 @@ import { useValidateForm } from './useValidateForm'
 
 export const useSubmitHandler = () => {
   const { register } = useAuthStore()
-  const { readFormValue } = useForm()
+  const { readFormValue, updateFormError } = useForm()
   const validateForm = useValidateForm()
 
   const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName))
@@ -26,6 +26,8 @@ export const useSubmitHandler = () => {
       register({
         email,
         password,
+      }).catch((message) => {
+        updateFormError(formIds.formError, message)
       })
     }
   }

src/features/Register/components/RegistrationStep/index.tsx

@@ -44,10 +44,10 @@ const Registration = () => {
         onChange={updateFormValue(formIds.password)}
       />
       <ButtonsBlock>
+        <Error t={readFormError(formIds.formError) || ''} marginBottom={27} />
         <ButtonSolid type='submit'>
           <T9n t='next' />
         </ButtonSolid>
-        <Error t={readFormError(formIds.formError) || ''} />
       </ButtonsBlock>
     </Form>
   )

src/features/Register/components/SubscriptionsStep/index.tsx

@@ -6,7 +6,6 @@ import { PAGES } from 'config'
 import { T9n } from 'features/T9n'
 import { ButtonSolid } from 'features/Common/Button'
 import { ArrowLeft, ArrowRight } from 'features/Common/Arrows'
-import { ButtonsBlock } from 'features/Login/styled'
 import { MainSubscription } from 'features/Register/components/MainSubscription'
 import { AdditionalSubscription } from 'features/Register/components/AdditionalSubscription'
 
@@ -21,6 +20,7 @@ import {
   TotalInfoText,
   TotalPriceAmmount,
   TotalPriceDetails,
+  ButtonsBlock,
 } from './styled'
 
 export const SubscriptionStep = () => {
@@ -53,7 +53,7 @@ export const SubscriptionStep = () => {
           <ArrowRight />
         </PricesBlock>
       </SubscriptionsBlock>
-      <ButtonsBlock forSubsPage>
+      <ButtonsBlock>
         <TotalInfoBlock>
           <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
             <TotalPriceAmmount>6997</TotalPriceAmmount>

src/features/Register/components/SubscriptionsStep/styled.tsx

@@ -2,6 +2,21 @@ import styled from 'styled-components/macro'
 
 import { devices } from 'config/devices'
 
+export const ButtonsBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 80px;
+  margin-bottom: 96px;
+  position: relative;
+
+  @media ${devices.mobile} {
+    bottom: 20px;
+    margin-bottom: 0;
+    position: absolute;
+  }
+`
+
 type SubscriptionsBlockProps = {
   forAdditionalTitle?: boolean,
   isSubsStep?: boolean,

src/requests/login.tsx

@@ -4,7 +4,6 @@ import {
   TOKEN_KEY,
 } from 'config'
 import { callApiBase } from 'helpers/callApi'
-import { checkStatus } from 'helpers/callApi/checkStatus'
 import { parseJSON } from 'helpers/callApi/parseJSON'
 
 const proc = PROCEDURES.auth_user
@@ -51,7 +50,6 @@ export const login = async ({
       config,
       url: DATA_URL,
     })
-    checkStatus(response)
 
     const token = response.headers.get(TOKEN_KEY)
     const { _p_status }: Response = await parseJSON(response)

src/requests/register.tsx

@@ -1,13 +1,17 @@
 import { DATA_URL, PROCEDURES } from 'config'
-import { callApi } from 'helpers'
+import { callApiBase } from 'helpers'
 
 const proc = PROCEDURES.create_user
 
-const responseStatus = {
-  FAILURE: 2,
+const statusCodes = {
+  EMAIL_IN_USE: 2,
   SUCCESS: 1,
 }
 
+const errorMessages = {
+  [statusCodes.EMAIL_IN_USE]: 'error_email_already_in_use',
+}
+
 type Response = {
   _p_error: string | null,
   _p_status: 1 | 2,
@@ -32,14 +36,19 @@ export const register = async ({
     },
   }
 
-  const response: Response = await callApi({
-    config,
-    url: DATA_URL,
-  })
+  try {
+    const response = await callApiBase({
+      config,
+      url: DATA_URL,
+    })
 
-  if (response._p_status === responseStatus.SUCCESS) {
-    return Promise.resolve(response)
-  }
+    const { _p_status }: Response = await response.json()
 
-  return Promise.reject(response._p_error)
+    if (_p_status === statusCodes.SUCCESS) {
+      return Promise.resolve(response)
+    }
+    return Promise.reject(errorMessages[_p_status])
+  } catch {
+    return Promise.reject()
+  }
 }