feat(#2415): added link to the site about company

src/config/lexics/userAccount.tsx

@@ -2,6 +2,7 @@ import { publicLexics } from './public'
 import { paymentLexics } from './payment'
 
 const navigations = {
+  about_the_project: 18170,
   bank_card: 14205,
   logout: 15058,
   my_devices: 15052,

src/config/pages.tsx

@@ -1,4 +1,5 @@
 export const PAGES = {
+  about_the_project: 'https://instatsport.com/InStatTV/ott_platform',
   home: '/',
   match: '/matches',
   player: '/players',

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

@@ -20,6 +20,7 @@ import {
   ButtonSolid,
   Error,
   LanguageSelectWrapper,
+  Wrapper,
 } from '../../styled'
 import {
   Label,
@@ -27,6 +28,7 @@ import {
   ButtonOutline,
   CheckboxWrapper,
 } from './styled'
+import { CompanyInfo } from '../../../CompanyInfo'
 
 const Registration = () => {
   const history = useHistory()
@@ -51,90 +53,93 @@ const Registration = () => {
   } = useRegistrationForm()
 
   return (
-    <CenterBlock>
-      <Logo />
-      <Form onSubmit={handleSubmit}>
-        <BlockTitle t='step_title_registration' />
+    <Wrapper>
+      <CenterBlock>
+        <Logo />
+        <Form onSubmit={handleSubmit}>
+          <BlockTitle t='step_title_registration' />
 
-        <InputGroup>
-          <Input
-            type='email'
-            name='email'
-            autoComplete='email'
-            placeholderLexic='form_email'
-            value={email}
-            onChange={onEmailChange}
-            onBlur={onEmailBlur}
-          />
-          <PasswordInput
-            type='password'
-            name='password'
-            autoComplete='current-password'
-            placeholderLexic='form_password'
-            value={password}
-            onChange={onPasswordChange}
-            onBlur={onPasswordBlur}
-          />
-        </InputGroup>
-        <Error>
-          {formError
-            ? <T9n t={formError} />
-            : <T9n t={authError} />}
-        </Error>
+          <InputGroup>
+            <Input
+              type='email'
+              name='email'
+              autoComplete='email'
+              placeholderLexic='form_email'
+              value={email}
+              onChange={onEmailChange}
+              onBlur={onEmailBlur}
+            />
+            <PasswordInput
+              type='password'
+              name='password'
+              autoComplete='current-password'
+              placeholderLexic='form_password'
+              value={password}
+              onChange={onPasswordChange}
+              onBlur={onPasswordBlur}
+            />
+          </InputGroup>
+          <Error>
+            {formError
+              ? <T9n t={formError} />
+              : <T9n t={authError} />}
+          </Error>
 
-        <CheckboxWrapper>
-          <Checkbox
-            checked={termsAccepted}
-            onChange={onTermsChange}
-            label={(
-              <Label>
-                <T9n t='accept_privacy' />
-                <Link href={client.termsLink} target='_blank'>
-                  <T9n t='terms_and_conditions' />
-                </Link>&nbsp;
-                <T9n t='and' />
-                <Link href={client.privacyLink} target='_blank'>
-                  <T9n t='privacy_policy_and_statement' />
-                </Link>
-              </Label>
-            )}
-          />
-          <Checkbox
-            checked={cookiesAccepted}
-            onChange={onCookiesChange}
-            label={(
-              <Label>
-                <T9n t='accept_cookies' />
-              </Label>
-            )}
-          />
-        </CheckboxWrapper>
+          <CheckboxWrapper>
+            <Checkbox
+              checked={termsAccepted}
+              onChange={onTermsChange}
+              label={(
+                <Label>
+                  <T9n t='accept_privacy' />
+                  <Link href={client.termsLink} target='_blank'>
+                    <T9n t='terms_and_conditions' />
+                  </Link>&nbsp;
+                  <T9n t='and' />
+                  <Link href={client.privacyLink} target='_blank'>
+                    <T9n t='privacy_policy_and_statement' />
+                  </Link>
+                </Label>
+              )}
+            />
+            <Checkbox
+              checked={cookiesAccepted}
+              onChange={onCookiesChange}
+              label={(
+                <Label>
+                  <T9n t='accept_cookies' />
+                </Label>
+              )}
+            />
+          </CheckboxWrapper>
 
-        <ButtonsBlock>
-          <ButtonSolid disabled={isSubmitDisabled} type='submit'>
-            {
-              isFetching
-                ? <ArrowLoader />
-                : <T9n t='sign_up' />
-            }
-          </ButtonSolid>
-          <ButtonOutline
-            type='button'
-            onClick={history.goBack}
-          >
-            <T9n t='go_back' />
-          </ButtonOutline>
-        </ButtonsBlock>
-        <LanguageSelectWrapper>
-          <LanguageSelect />
-        </LanguageSelectWrapper>
-        <RegisterPopup
-          email={email}
-          isModalOpen={isModalOpen}
-          handleModalClose={handleModalClose}
-        />
-      </Form>
-    </CenterBlock>
+          <ButtonsBlock>
+            <ButtonSolid disabled={isSubmitDisabled} type='submit'>
+              {
+                isFetching
+                  ? <ArrowLoader />
+                  : <T9n t='sign_up' />
+              }
+            </ButtonSolid>
+            <ButtonOutline
+              type='button'
+              onClick={history.goBack}
+            >
+              <T9n t='go_back' />
+            </ButtonOutline>
+          </ButtonsBlock>
+          <LanguageSelectWrapper>
+            <LanguageSelect />
+          </LanguageSelectWrapper>
+          <RegisterPopup
+            email={email}
+            isModalOpen={isModalOpen}
+            handleModalClose={handleModalClose}
+          />
+        </Form>
+      </CenterBlock>
+      <CompanyInfo textAlign='center' width='450px' />
+    </Wrapper>
   )
 }
 

src/features/CompanyInfo/config.tsx

@@ -3,4 +3,5 @@ export const lexics = [
   18082,
   18083,
   18084,
+  18170,
 ]

src/features/CompanyInfo/index.tsx

@@ -1,10 +1,11 @@
 import { T9n } from 'features/T9n'
 import { useLexicsConfig } from 'features/LexicsStore'
+import { PAGES } from 'config'
 
 import {
+  CompanyInfoLink,
   CompanyInfoText,
   CompanyInfoWrapper,
-  CompanyName,
 } from './styled'
 import { lexics } from './config'
 
@@ -21,9 +22,15 @@ export const CompanyInfo = ({
 
   return (
     <CompanyInfoWrapper style={{ maxWidth: width, textAlign }}>
-      <CompanyName>
-        <T9n t='18081' />
-      </CompanyName>
+      <CompanyInfoText>
+        <T9n t='18081' />{' | '}
+        <CompanyInfoLink
+          to={{ pathname: PAGES.about_the_project }}
+          target='_blank'
+        >
+          <T9n t='18170' />
+        </CompanyInfoLink>
+      </CompanyInfoText>
       <CompanyInfoText>
         <T9n t='18082' />
       </CompanyInfoText>

src/features/CompanyInfo/styled.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom'
+
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
@@ -8,14 +10,16 @@ export const CompanyInfoWrapper = styled.div`
   font-weight: 400;
   font-size: 12px;
   line-height: 15px;
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, 0.5);
 
   ${isMobileDevice ? css`
     margin-top: 20px;
   ` : ''}
 `
 
-export const CompanyName = styled.div`
-  color: rgba(255, 255, 255, 0.8);
-`
 export const CompanyInfoText = styled.div``
+
+export const CompanyInfoLink = styled(Link)`
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: underline;
+`

src/features/UserAccount/index.tsx

@@ -52,6 +52,13 @@ const UserAccount = () => {
             <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/devices`}>
               <T9n t='my_devices' />
             </StyledLink>
+            <StyledLink
+              disabled={isProduction}
+              target='_blank'
+              to={{ pathname: PAGES.about_the_project }}
+            >
+              <T9n t='about_the_project' />
+            </StyledLink>
 
             <ScoreSwitch />
             <UnsubscribePrompt />