feat(#2386): add brazilian payment

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

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+import { Loader } from 'features/Loader'
+
+import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl'
+import type { SubscriptionResponse } from 'requests/getSubscriptions'
+
+import { ScModal, LoaderWrapper } from './styled'
+
+type Props = {
+  item: SubscriptionResponse,
+  open: boolean,
+  product_name: string,
+}
+
+export const BrazilPayment = ({
+  item,
+  open,
+  product_name,
+}: Props) => {
+  const [src, setSrc] = useState('')
+
+  useEffect(() => {
+    if (open) {
+      (async () => {
+        const json: any = await getBrazilPaymentUrl({ item, product_name })
+        setSrc(json[0]?.url)
+      })()
+    }
+  }, [item, open, product_name])
+
+  return (
+    <ScModal isOpen={open} withCloseButton={false}>
+      {src && open ? (
+        <iframe title='BrazilPayment' src={src} height={600} width={400} />
+      ) : (
+        <LoaderWrapper>
+          <Loader color='#515151' />
+        </LoaderWrapper>
+      )}
+    </ScModal>
+  )
+}

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

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+
+export const ScModal = styled(BaseModal)`
+  background-color: rgba(0, 0, 0, 0.7);
+
+  ${ModalWindow} {
+    padding: 0;
+    background-color: #333333;
+    border-radius: 5px;
+
+    ${isMobileDevice
+    ? css`
+      width: calc(100vw - 60px);
+      @media screen and (orientation: landscape){
+        max-width: calc(100vw - 80px);
+        height: calc(100vh - 60px);
+        overflow: auto;
+      }
+    `
+    : ''};
+  }
+`
+
+export const LoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -1,18 +1,23 @@
-import { Fragment, useEffect } from 'react'
+import {
+  Fragment,
+  useEffect,
+  useState,
+  MouseEvent,
+} from 'react'
 
 import isNull from 'lodash/isNull'
 
 import { MDASH } from 'config'
 
-import {
+import { clientCountry } from 'helpers/clientCountry'
-  CloseButton,
+
-  HeaderActions,
+import { CloseButton, HeaderActions } from 'features/PopupComponents'
-} from 'features/PopupComponents'
 import { T9n } from 'features/T9n'
 import { Name } from 'features/Name'
 import { useCardsStore } from 'features/CardsStore'
 import { ArrowLoader } from 'features/ArrowLoader'
 import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
+import { BrazilPayment } from '../BrazilPayment'
 
 import { useBuyMatchPopupStore } from '../../store'
 import { SelectedCard } from '../SelectedCard'
@@ -28,10 +33,8 @@ import {
 } from '../../styled'
 
 export const PackageSelectionStep = () => {
-  const {
+  const { cards, fetchCards } = useCardsStore()
-    cards,
+  const [isOpenBrasilian, setIsOpenBrasilian] = useState(false)
-    fetchCards,
-  } = useCardsStore()
 
   const {
     close,
@@ -52,6 +55,16 @@ export const PackageSelectionStep = () => {
 
   if (!match) return null
 
+  const isBrasil = clientCountry() === 'TH'
+
+  const onHandleClick = (e?: MouseEvent<HTMLButtonElement>) => {
+    if (isBrasil) {
+      setIsOpenBrasilian(true)
+    } else {
+      onBuyClick(e)
+    }
+  }
+
   return (
     <Wrapper>
       <Header>
@@ -63,15 +76,15 @@ export const PackageSelectionStep = () => {
           </HeaderActions>
         )}
         <HeaderTitle>
-          {hasPreviousStep && selectedSubscription
+          {hasPreviousStep && selectedSubscription ? (
-            ? <T9n t={selectedSubscription?.lexic} />
+            <T9n t={selectedSubscription?.lexic} />
-            : (
+          ) : (
-              <Fragment>
+            <Fragment>
-                <Name nameObj={match.team1} />
+              <Name nameObj={match.team1} />
-                {` ${MDASH} `}
+              {` ${MDASH} `}
-                <Name nameObj={match.team2} />
+              <Name nameObj={match.team2} />
-              </Fragment>
+            </Fragment>
-            )}
+          )}
         </HeaderTitle>
         <HeaderActions position='right'>
           <CloseButton onClick={close} />
@@ -79,20 +92,27 @@ export const PackageSelectionStep = () => {
       </Header>
       <Body marginTop={20}>
         <Packages />
-        <SelectedCard />
+        {isBrasil ? null : <SelectedCard />}
       </Body>
       <Footer>
-        {loader
+        {loader ? (
-          ? <ArrowLoader width='204px' disabled />
+          <ArrowLoader width='204px' disabled />
-          : (
+        ) : (
-            <Button
+          <Button
-              disabled={!selectedPackage}
+            disabled={!selectedPackage}
-              onClick={onBuyClick}
+            onClick={onHandleClick}
-            >
+          >
-              <T9n t='buy_subscription' />
+            <T9n t='buy_subscription' />
-            </Button>
+          </Button>
-          )}
+        )}
       </Footer>
+      {selectedPackage && isOpenBrasilian && (
+        <BrazilPayment
+          item={selectedPackage?.originalObject}
+          open={isOpenBrasilian}
+          product_name={selectedPackage?.pass || ''}
+        />
+      )}
     </Wrapper>
   )
 }

src/helpers/clientCountry/index.tsx

@@ -0,0 +1,6 @@
+export const clientCountry = () => {
+  const country = JSON.parse(
+    localStorage.getItem('oidc.user:https://auth.instat.tv:ott-web') || '',
+  ).profile.country_code
+  return country
+}

src/requests/getBrazilPaymentUrl.tsx

@@ -0,0 +1,21 @@
+import { API_ROOT } from 'config'
+import { callApi } from 'helpers'
+import type { SubscriptionResponse } from 'requests/getSubscriptions'
+
+type Props = {
+  item: SubscriptionResponse,
+  product_name: string,
+}
+
+export const getBrazilPaymentUrl = async ({ item, product_name }: Props) => {
+  const config = {
+    body: {
+      item: { ...item, product_name },
+    },
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/account/payment/pagbrasil`,
+  })
+}