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,6 +53,7 @@ const Registration = () => {
   } = useRegistrationForm()
 
   return (
+    <Wrapper>
       <CenterBlock>
         <Logo />
         <Form onSubmit={handleSubmit}>
@@ -135,6 +138,8 @@ const Registration = () => {
           />
         </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%' />
+          <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,