feat(#2483): add thanks page for brazil payment

src/config/lexics/payment.tsx

@@ -23,12 +23,14 @@ export const paymentLexics = {
   order_received: 18365,
   payment_date: 15603,
   payment_method: 2010,
+  pb_instat: 18274,
   save_sub: 18190,
   still_cancel: 2646,
   sub_not_renewed: 15060,
   subscription_plan: 18182,
   sum: 838,
   thank_you: 6579,
+  thanks_for_sub: 18273,
   unsubscribe: 18188,
   using_payment: 18187,
   watch_match: 18199,

src/config/pages.tsx

@@ -6,6 +6,7 @@ export const PAGES = {
   matomoInstatBaseUrl: 'https://matomo.instat.tv/',
   player: '/players',
   team: '/teams',
+  thanksForSubscribe: '/thanks-for-subscription',
   tournament: '/tournaments',
   useraccount: '/useraccount',
 }

src/features/App/AuthenticatedApp.tsx

@@ -37,6 +37,8 @@ const TournamentPage = lazy(() => import('features/TournamentPage'))
 const SystemSettings = lazy(() => import('features/SystemSettings'))
 const HighlightsPage = lazy(() => import('pages/HighlightsPage'))
 
+const ThanksPage = lazy(() => import('pages/ThanksPage'))
+
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
   return (
@@ -55,7 +57,6 @@ export const AuthenticatedApp = () => {
                           <BuyMatchPopup />
                           { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
                           <NoNetworkPopup />
-
                           {/* в Switch как прямой children
                           можно рендерить только Route или Redirect */}
                           <Switch>
@@ -77,6 +78,9 @@ export const AuthenticatedApp = () => {
                             <Route path={`/:sportName${PAGES.match}/:pageId`}>
                               <MatchPage />
                             </Route>
+                            <Route path={`${PAGES.thanksForSubscribe}`}>
+                              <ThanksPage />
+                            </Route>
                             <Route path={`${PAGES.highlights}`}>
                               <HighlightsPage />
                             </Route>

src/features/AuthStore/helpers.tsx

@@ -17,7 +17,7 @@ interface Settings extends UserManagerSettings {
   state?: string,
 }
 
-const getClientNameByRedirectUri = () => {
+export const getClientNameByRedirectUri = () => {
   switch (client.name) {
     case ClientNames.Lff:
       return 'lff.instat'

src/features/BuyMatchPopup/index.tsx

@@ -30,6 +30,13 @@ export const BuyMatchPopup = () => {
 
   const Step = components[currentStep]
 
+  // eslint-disable-next-line
+  window.onmessage = function (event) {
+    if (event.data === 'close') {
+      close()
+    }
+  }
+
   return (
     <Modal
       isOpen={Boolean(1)}

src/libs/index.ts

@@ -3,6 +3,7 @@ export { Date } from './objects/Date'
 export { Edit } from './objects/Edit'
 export { Calendar } from './objects/Calendar'
 export { Check } from './objects/Check'
+export { CheckCircle } from './objects/CheckCircle'
 export { Basketball } from './objects/Basketball'
 export { Football } from './objects/Football'
 export { Hockey } from './objects/Hockey'

src/libs/objects/CheckCircle.tsx

@@ -0,0 +1,50 @@
+export const CheckCircle = (): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='90'
+    height='90'
+    fill='none'
+    viewBox='0 0 90 90'
+  >
+    <g filter='url(#filter0_d_27718_242270)'>
+      <path
+        fill='#fff'
+        d='M1 44C1 19.7 20.7 0 45 0s44 19.7 44 44-19.7 44-44 44S1 68.3 1 44z'
+      />
+      <path
+        fill='#000'
+        d='M39.857 51.861l-9.073-9.073a1.714 1.714 0 10-2.425 2.424l10.286 10.286c.67.67 1.755.67 2.424 0l20.572-20.572a1.714 1.714 0 10-2.425-2.424l-19.359 19.36z'
+      />
+    </g>
+    <defs>
+      <filter
+        id='filter0_d_27718_242270'
+        width='90'
+        height='90'
+        x='0'
+        y='0'
+        colorInterpolationFilters='sRGB'
+        filterUnits='userSpaceOnUse'
+      >
+        <feFlood floodOpacity='0' result='BackgroundImageFix' />
+        <feColorMatrix
+          in='SourceAlpha'
+          result='hardAlpha'
+          values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+        />
+        <feOffset dy='1' />
+        <feGaussianBlur stdDeviation='0.5' />
+        <feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
+        <feBlend
+          in2='BackgroundImageFix'
+          result='effect1_dropShadow_27718_242270'
+        />
+        <feBlend
+          in='SourceGraphic'
+          in2='effect1_dropShadow_27718_242270'
+          result='shape'
+        />
+      </filter>
+    </defs>
+  </svg>
+)

src/pages/ThanksPage/index.tsx

@@ -0,0 +1,37 @@
+import { Icon } from 'features/Icon'
+import { T9n } from 'features/T9n'
+
+import {
+  ScWrapper,
+  ScLogo,
+  ScTitle,
+  ScText,
+  ScButton,
+  ScBody,
+} from './styled'
+
+const ThanksPage = () => {
+  const onClose = () => {
+    window.parent.postMessage('close')
+  }
+
+  return (
+    <ScWrapper>
+      <ScBody>
+        <ScLogo color='red' />
+        <Icon refIcon='CheckCircle' color='#fff' />
+        <ScTitle>
+          <T9n t='thanks_for_sub' />
+        </ScTitle>
+        <ScText>
+          <T9n t='pb_instat' />
+        </ScText>
+        <ScButton onClick={onClose}>
+          <T9n t='watch_match' />
+        </ScButton>
+      </ScBody>
+    </ScWrapper>
+  )
+}
+
+export default ThanksPage

src/pages/ThanksPage/styled.tsx

@@ -0,0 +1,108 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+import { Logo } from 'features/Logo'
+import { ButtonSolid } from 'features/Common'
+
+export const ScWrapper = styled.div`
+  background: #333333;
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const ScBody = styled.div`
+  background: #333333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 90px 178px 140px;
+
+  ${isMobileDevice
+    ? css`
+        padding: 20px;
+      `
+    : ''};
+
+  > * {
+    margin: 30px 0;
+
+    ${isMobileDevice
+    ? css`
+          margin: 20px 0;
+        `
+    : ''};
+  }
+`
+
+export const ScLogo = styled(Logo)`
+  height: 43px;
+  width: 184px;
+  filter: brightness(0.5);
+
+  ${isMobileDevice
+    ? css`
+        height: 30px;
+        width: 130px;
+      `
+    : ''};
+`
+
+export const ScTitle = styled.span`
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 39px;
+  color: #ffffff;
+  text-align: center;
+
+  ${isMobileDevice
+    ? css`
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 25px;
+      `
+    : ''};
+`
+
+export const ScText = styled.span`
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  color: #ffffff;
+  text-align: center;
+
+  ${isMobileDevice
+    ? css`
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 10px;
+      `
+    : ''};
+`
+
+export const ScButton = styled(ButtonSolid)`
+  min-width: 236px;
+  width: auto;
+  height: 50px;
+  background-color: ${({ theme: { colors } }) => colors.button};
+  color: ${({ theme: { colors } }) => colors.white};
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 20px;
+  ${isMobileDevice
+    ? css`
+        height: 50px;
+        min-width: 300px;
+        font-size: 16px;
+      `
+    : ''};
+
+  :disabled {
+    opacity: 0.5;
+  }
+`

src/requests/getBrazilPaymentUrl.tsx

@@ -1,5 +1,8 @@
-import { API_ROOT } from 'config'
+import { API_ROOT, PAGES } from 'config'
+import { getClientNameByRedirectUri } from 'features/AuthStore/helpers'
+
 import { callApi } from 'helpers'
+
 import type { SubscriptionResponse } from 'requests/getSubscriptions'
 
 type Props = {
@@ -13,6 +16,7 @@ export const getBrazilPaymentUrl = async ({ item, product_name }: Props) => {
       action: 'create_subscription',
       data: {
         item: { ...item, product_name },
+        url_return: `https://${getClientNameByRedirectUri()}.tv${PAGES.thanksForSubscribe}}`,
       },
       service: 'pag_brasil',
     },