feat(ott-2356): add comany info

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

@@ -21,11 +21,13 @@ const ChangePassword = lazy(() => import('../ChangePassword'))
 
 const Main = styled.main`
   width: 100%;
+  overflow-y: scroll;
+  
   ${isMobileDevice
     ? css`
       padding: 0 12px;
         @media screen and (orientation: landscape){
-          min-height: 100vh;
+          max-height: 100vh;
         }
       `
     : ''};

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

@@ -19,8 +19,10 @@ import {
   ButtonSolid,
   Error,
   LanguageSelectWrapper,
+  Wrapper,
 } from '../../styled'
 import { RegisterButton } from './styled'
+import { CompanyInfo } from '../../../CompanyInfo'
 
 const Login = () => {
   const {
@@ -49,71 +51,74 @@ const Login = () => {
   } = useLoginForm()
 
   return (
-    <CenterBlock>
+    <Wrapper>
-      <Logo />
+      <CenterBlock>
-      <Form
+        <Logo />
-        method='POST'
+        <Form
-        ref={formRef}
+          method='POST'
-        action={url}
+          ref={formRef}
-        onSubmit={handleSubmit}
+          action={url}
-      >
+          onSubmit={handleSubmit}
-        <BlockTitle t='step_title_login' />
+        >
+          <BlockTitle t='step_title_login' />
 
-        <InputGroup>
+          <InputGroup>
-          <Input
+            <Input
-            autoFocus
+              autoFocus
-            type='email'
+              type='email'
-            name='email'
+              name='email'
-            autoComplete='email'
+              autoComplete='email'
-            placeholderLexic='form_email'
+              placeholderLexic='form_email'
-            value={email}
+              value={email}
-            onChange={onEmailChange}
+              onChange={onEmailChange}
-            onBlur={onEmailBlur}
+              onBlur={onEmailBlur}
-          />
+            />
-          <PasswordInput
+            <PasswordInput
-            type='password'
+              type='password'
-            name='password'
+              name='password'
-            autoComplete='current-password'
+              autoComplete='current-password'
-            placeholderLexic='form_password'
+              placeholderLexic='form_password'
-            value={password}
+              value={password}
-            onChange={onPasswordChange}
+              onChange={onPasswordChange}
-            onBlur={onPasswordBlur}
+              onBlur={onPasswordBlur}
-          />
+            />
-          <input type='hidden' name='client_id' value={client_id} />
+            <input type='hidden' name='client_id' value={client_id} />
-          <input type='hidden' name='response_mode' value={response_mode} />
+            <input type='hidden' name='response_mode' value={response_mode} />
-          <input type='hidden' name='response_type' value={response_type} />
+            <input type='hidden' name='response_type' value={response_type} />
-          <input type='hidden' name='scope' value={scope} />
+            <input type='hidden' name='scope' value={scope} />
-          <input type='hidden' name='lang' value={lang} />
+            <input type='hidden' name='lang' value={lang} />
-          <input type='hidden' name='redirect_uri' value={redirect_uri} />
+            <input type='hidden' name='redirect_uri' value={redirect_uri} />
-        </InputGroup>
+          </InputGroup>
 
-        <ButtonsBlock>
+          <ButtonsBlock>
-          <Error>
+            <Error>
-            <T9n t={formError} />
+              <T9n t={formError} />
-            <T9n t={authError} />
+              <T9n t={authError} />
-          </Error>
+            </Error>
-          <ButtonSolid type='submit' disabled={isSubmitDisabled}>
+            <ButtonSolid type='submit' disabled={isSubmitDisabled}>
-            {
+              {
-              isFetching
+                isFetching
-                ? <ArrowLoader />
+                  ? <ArrowLoader />
-                : <T9n t='login' />
+                  : <T9n t='login' />
-            }
+              }
-          </ButtonSolid>
+            </ButtonSolid>
-          <RegisterButton to={`${PAGES.registration}${window.location.search}`}>
+            <RegisterButton to={`${PAGES.registration}${window.location.search}`}>
-            <T9n t='register' />
+              <T9n t='register' />
-          </RegisterButton>
+            </RegisterButton>
-        </ButtonsBlock>
+          </ButtonsBlock>
-        <Container>
+          <Container>
-          <ForgotPass onClick={handleModalOpen}>
+            <ForgotPass onClick={handleModalOpen}>
-            <T9n t='forgot_password' />
+              <T9n t='forgot_password' />
-          </ForgotPass>
+            </ForgotPass>
-          <LanguageSelectWrapper>
+            <LanguageSelectWrapper>
-            <LanguageSelect />
+              <LanguageSelect />
-          </LanguageSelectWrapper>
+            </LanguageSelectWrapper>
-        </Container>
+          </Container>
-      </Form>
+        </Form>
-      <RecoveryPopup isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+        <RecoveryPopup isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
-    </CenterBlock>
+      </CenterBlock>
+      <CompanyInfo textAlign='center' width='450px' />
+    </Wrapper>
   )
 }
 

src/features/AuthServiceApp/styled.tsx

@@ -16,7 +16,23 @@ export const InputGroup = styled.div`
   ${client.styles.inputGroup}
 `
 
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  align-items: center;
+  padding-bottom: 1%;
+
+  ${isMobileDevice
+    ? css`
+      @media screen and (orientation: landscape) {
+        min-height: 450px;
+      }
+    ` : ''};
+`
+
 export const CenterBlock = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

src/features/CompanyInfo/config.tsx

@@ -0,0 +1,6 @@
+export const lexics = [
+  18081,
+  18082,
+  18083,
+  18084,
+]

src/features/CompanyInfo/index.tsx

@@ -0,0 +1,38 @@
+import { T9n } from 'features/T9n'
+import { useLexicsConfig } from 'features/LexicsStore'
+
+import {
+  CompanyInfoText,
+  CompanyInfoWrapper,
+  CompanyName,
+} from './styled'
+import { lexics } from './config'
+
+export type TCompanyInfo = {
+  textAlign?: 'center' | 'left',
+  width?: string,
+}
+
+export const CompanyInfo = ({
+  textAlign = 'left',
+  width = '100%',
+}: TCompanyInfo) => {
+  useLexicsConfig(lexics)
+
+  return (
+    <CompanyInfoWrapper style={{ maxWidth: width, textAlign }}>
+      <CompanyName>
+        <T9n t='18081' />
+      </CompanyName>
+      <CompanyInfoText>
+        <T9n t='18082' />
+      </CompanyInfoText>
+      <CompanyInfoText>
+        <T9n t='18083' />
+      </CompanyInfoText>
+      <CompanyInfoText>
+        <T9n t='18084' />
+      </CompanyInfoText>
+    </CompanyInfoWrapper>
+  )
+}

src/features/CompanyInfo/styled.tsx

@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const CompanyInfoWrapper = styled.div`
+  margin-top: auto;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  color: rgba(255, 255, 255, 0.6);
+
+  ${isMobileDevice ? css`
+    margin-top: 20px;
+  ` : ''}
+`
+
+export const CompanyName = styled.div`
+  color: rgba(255, 255, 255, 0.8);
+`
+export const CompanyInfoText = styled.div``

src/features/UserAccount/components/PersonalInfoForm/styled.tsx

@@ -8,6 +8,8 @@ import { Column, InputWrapper } from 'features/Common/Input/styled'
 export const Form = styled.div`
   padding-top: 26px;
   min-width: 560px;
+  display: flex;
+  flex-direction: column;
 
   ${Column}:first-child ${InputWrapper} {
     margin-top: 0;

src/features/UserAccount/index.tsx

@@ -24,6 +24,7 @@ import {
   StyledLink,
   UserAccountWrapper,
 } from './styled'
+import { CompanyInfo } from '../CompanyInfo'
 
 const UserAccount = () => {
   usePageLogger(PAGES.useraccount)
@@ -68,6 +69,7 @@ const UserAccount = () => {
           <Route path={`${PAGES.useraccount}/payment-history`}>
             <PagePaymentsHistory />
           </Route>
+          <CompanyInfo textAlign='left' />
         </ContentWrapper>
       </Body>
     </UserAccountWrapper>

src/features/UserAccount/styled.tsx

@@ -83,8 +83,10 @@ export const Icon = styled.span<IconProps>`
 export const ContentWrapper = styled.div`
   width: 100%;
   display: flex;
+  flex-direction: column;
   padding-left: 3.3rem;
-
+  height: 100%;
+  
   @media ${devices.tablet} {
     padding-top: 0;
     padding-left: 0;