Merge branch 'develop' into OTT-2362-create-lff-client

src/components/InfoIcon/InfoIcon.tsx

@@ -0,0 +1,5 @@
+import { Icon } from 'features/Icon'
+
+export const InfoIcon = () => (
+  <Icon refIcon='Info' />
+)

src/config/lexics/payment.tsx

@@ -17,4 +17,5 @@ export const paymentLexics = {
   payment_method: 2010,
   subscription_plan: 18182,
   sum: 838,
+  watch_match: 18199,
 }

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,
@@ -35,6 +36,7 @@ export const userAccountLexics = {
   subscriptions: 13016,
   subscriptions_active: 15061,
   subscriptions_removed: 15062,
+  unsubscribe_prompt: 18198,
   user_account: 12928,
   ...navigations,
   ...publicLexics,

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/BuyMatchPopup/components/BrazilPayment/hooks.tsx

@@ -0,0 +1,84 @@
+import {
+  useEffect,
+  useState,
+  MouseEvent,
+} from 'react'
+
+import { useHistory } from 'react-router-dom'
+
+import { ProfileTypes } from 'config'
+
+import isNumber from 'lodash/isNumber'
+
+import { useLexicsStore } from 'features/LexicsStore'
+import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
+import { getProfileUrl } from 'features/ProfileLink/helpers'
+
+import { getMatchInfo } from 'requests/getMatchInfo'
+import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl'
+
+import type { Props } from './index'
+
+type ResponsePayment = {
+  url: string,
+}
+
+type ResponsePaymentArray = ResponsePayment | null
+
+export const useBrazilPayment = ({
+  match,
+  open,
+  selectedPackage,
+  setIsOpenBrasilian,
+}: Props) => {
+  const history = useHistory()
+  const { close } = useBuyMatchPopupStore()
+
+  const [src, setSrc] = useState('')
+  const { translate } = useLexicsStore()
+
+  const { id, sportType } = match
+
+  const {
+    name,
+    nameLexic,
+    originalObject,
+    pass,
+  } = selectedPackage
+
+  const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name
+  const pack = translate(String(pass))
+
+  const matchLink = getProfileUrl({
+    id,
+    profileType: ProfileTypes.MATCHES,
+    sportType,
+  })
+
+  const closePopup = async (e?: MouseEvent) => {
+    e?.stopPropagation()
+    setIsOpenBrasilian(false)
+
+    const accessMatch = await getMatchInfo(sportType, id)
+    if (accessMatch?.access) {
+      close()
+      history.push(matchLink)
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      (async () => {
+        const json: ResponsePaymentArray = await getBrazilPaymentUrl({ item: originalObject, product_name: `${pack} ${teams}` })
+        setSrc(json?.url || '')
+      })()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedPackage, open])
+
+  return {
+    closePopup,
+    matchLink,
+    src,
+  }
+}

src/features/BuyMatchPopup/components/BrazilPayment/index.tsx

@@ -1,66 +1,54 @@
-import {
-  useEffect,
-  useState,
-  MouseEvent,
-} from 'react'
-
 import { Loader } from 'features/Loader'
-import { useLexicsStore } from 'features/LexicsStore'
-import { MatchPackage } from 'features/BuyMatchPopup/types'
+import { MatchPackage, Match } from 'features/BuyMatchPopup/types'
+import { T9n } from 'features/T9n'
 
-import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl'
+import { useBrazilPayment } from './hooks'
 
-import isNumber from 'lodash/isNumber'
+import {
+  LoaderWrapper,
+  ScButton,
+  ScModal,
+} from './styled'
 
-import { ScModal, LoaderWrapper } from './styled'
+import { Button } from '../../styled'
 
-type Props = {
+export type Props = {
+  match: Match,
   open: boolean,
   selectedPackage: MatchPackage,
   setIsOpenBrasilian: (open: boolean) => void,
 }
 
-type ResponsePayment = {
-  url: string,
-}
-
-type ResponsePaymentArray = ResponsePayment | null
-
 export const BrazilPayment = ({
+  match,
   open,
   selectedPackage,
   setIsOpenBrasilian,
 }: Props) => {
   const {
-    name,
-    nameLexic,
-    originalObject,
-    pass,
-  } = selectedPackage
-  const [src, setSrc] = useState('')
-  const { translate } = useLexicsStore()
-  const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name
-  const pack = translate(String(pass))
-
-  const closePopup = (e?: MouseEvent) => {
-    e?.stopPropagation()
-    setIsOpenBrasilian(false)
-  }
-
-  useEffect(() => {
-    if (open) {
-      (async () => {
-        const json: ResponsePaymentArray = await getBrazilPaymentUrl({ item: originalObject, product_name: `${pack} ${teams}` })
-        setSrc(json?.url || '')
-      })()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedPackage, open])
+    closePopup,
+    matchLink,
+    src,
+  } = useBrazilPayment({
+    match,
+    open,
+    selectedPackage,
+    setIsOpenBrasilian,
+  })
 
   return (
     <ScModal isOpen={open} withCloseButton close={closePopup}>
       {src && open ? (
-        <iframe title='BrazilPayment' src={src} height={600} width='100%' />
+        <>
+          <iframe title='BrazilPayment' src={src} height={600} width='100%' />
+          <ScButton>
+            <Button>
+              <a href={matchLink} style={{ color: 'white' }}>
+                <T9n t='watch_match' />
+              </a>
+            </Button>
+          </ScButton>
+        </>
       ) : (
         <LoaderWrapper>
           <Loader color='#515151' />

src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx

@@ -13,6 +13,7 @@ export const ScModal = styled(BaseModal)`
     padding: 50px;
     background-color: #333333;
     border-radius: 5px;
+    justify-content: center;
 
     ${isMobileDevice
     ? css`
@@ -38,3 +39,9 @@ export const LoaderWrapper = styled.div`
   align-items: center;
   justify-content: center;
 `
+
+export const ScButton = styled.div`
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+`

src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx

@@ -109,6 +109,7 @@ export const PackageSelectionStep = () => {
       </Footer>
       {selectedPackage && isOpenBrasilian && (
         <BrazilPayment
+          match={match}
           open={isOpenBrasilian}
           selectedPackage={selectedPackage}
           setIsOpenBrasilian={setIsOpenBrasilian}

src/features/BuyMatchPopup/store/hooks/index.tsx

@@ -30,6 +30,7 @@ import {
   Steps,
   SubscriptionType,
 } from 'features/BuyMatchPopup/types'
+import { useAuthStore } from 'features/AuthStore'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 
 import { useSubscriptions } from './useSubscriptions'
@@ -50,6 +51,7 @@ export const useBuyMatchPopup = () => {
   const [match, setMatch] = useState<Match | null>(null)
   const [error, setError] = useState('')
   const [loader, setLoader] = useState(false)
+  const { user } = useAuthStore()
 
   const goTo = useCallback(
     (step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => {
@@ -105,7 +107,7 @@ export const useBuyMatchPopup = () => {
     setError('')
     resetSubscriptions()
     setSelectedPackage(null)
-    if (isMatchPage()) history.push(PAGES.home)
+    if (isMatchPage() && user?.profile.country_code !== 'BR') history.push(PAGES.home)
   }
 
   const redirectToMatchProfile = ({ id, sportType }: Match) => {

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/components/UnsubscribePrompt/index.tsx

@@ -0,0 +1,32 @@
+import { InfoIcon } from 'components/InfoIcon/InfoIcon'
+import styled, { css } from 'styled-components'
+import { T9n } from 'features/T9n'
+import { isMobileDevice } from 'config/userAgent'
+
+const Wrapper = styled.div`
+  display: flex;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  max-width: 340px;
+  margin-top: 50px;
+
+  ${isMobileDevice
+    ? css`
+    margin-top: 25px;
+    font-size: 12px;
+  `
+    : ''}
+`
+
+const WrapperIcon = styled.div`
+  margin-right: 10px;
+`
+
+export const UnsubscribePrompt = () => (
+  <Wrapper>
+    <WrapperIcon>
+      <InfoIcon />
+    </WrapperIcon>
+    <T9n t='unsubscribe_prompt' />
+  </Wrapper>
+)

src/features/UserAccount/index.tsx

@@ -16,6 +16,7 @@ import { PageBankCards } from './components/PageBankCards'
 import { PageSubscriptions } from './components/PageSubscriptions'
 import { PagePaymentsHistory } from './components/PagePaymentsHistory'
 import { ScoreSwitch } from './components/ScoreSwitch'
+import { UnsubscribePrompt } from './components/UnsubscribePrompt'
 import {
   Aside,
   Body,
@@ -61,8 +62,16 @@ const UserAccount = () => {
             >
               <T9n t='my_devices' />
             </StyledLink>
+            <StyledLink
+              disabled={isProduction}
+              target='_blank'
+              to={{ pathname: PAGES.about_the_project }}
+            >
+              <T9n t='about_the_project' />
+            </StyledLink>
 
             <ScoreSwitch />
+            <UnsubscribePrompt />
           </Navigations>
         </Aside>
         <ContentWrapper>

src/libs/index.ts

@@ -10,3 +10,4 @@ export { Star } from './objects/Star'
 export { Dollar } from './objects/Dollar'
 export { Close } from './objects/Close'
 export { PoweredByInstat } from './objects/PoweredByInstat'
+export { Info } from './objects/Info'

src/libs/objects/Info.tsx

@@ -0,0 +1,14 @@
+export const Info = () => (
+  <svg
+    width='17'
+    height='17'
+    viewBox='0 0 17 17'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M8.5 1.0625C4.39277 1.0625 1.0625 4.39277 1.0625 8.5C1.0625 12.6072 4.39277 15.9375 8.5 15.9375C12.6072 15.9375 15.9375 12.6072 15.9375 8.5C15.9375 4.39277 12.6072 1.0625 8.5 1.0625ZM9.03125 12.0859C9.03125 12.159 8.97148 12.2188 8.89844 12.2188H8.10156C8.02852 12.2188 7.96875 12.159 7.96875 12.0859V7.57031C7.96875 7.49727 8.02852 7.4375 8.10156 7.4375H8.89844C8.97148 7.4375 9.03125 7.49727 9.03125 7.57031V12.0859ZM8.5 6.375C8.29147 6.37074 8.09292 6.28492 7.94695 6.13594C7.80098 5.98696 7.71923 5.7867 7.71923 5.57812C7.71923 5.36955 7.80098 5.16929 7.94695 5.02031C8.09292 4.87133 8.29147 4.78551 8.5 4.78125C8.70853 4.78551 8.90708 4.87133 9.05305 5.02031C9.19902 5.16929 9.28077 5.36955 9.28077 5.57812C9.28077 5.7867 9.19902 5.98696 9.05305 6.13594C8.90708 6.28492 8.70853 6.37074 8.5 6.375Z'
+      fill='white'
+    />
+  </svg>
+)

src/requests/getMatchInfo.tsx

@@ -17,6 +17,7 @@ export type Team = {
 }
 
 export type MatchInfo = {
+  access?: boolean,
   calc: boolean,
   country_id: number,
   date: string,