diff --git a/src/features/BuyMatchPopup/components/BrazilPayment/index.tsx b/src/features/BuyMatchPopup/components/BrazilPayment/index.tsx
new file mode 100644
index 00000000..fb4a509d
--- /dev/null
+++ b/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 (
+
+ {src && open ? (
+
+ ) : (
+
+
+
+ )}
+
+ )
+}
diff --git a/src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx b/src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx
new file mode 100644
index 00000000..d0d8974d
--- /dev/null
+++ b/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;
+`
diff --git a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
index 2059c496..c89fb6d0 100644
--- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
+++ b/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 {
- CloseButton,
- HeaderActions,
-} from 'features/PopupComponents'
+import { clientCountry } from 'helpers/clientCountry'
+
+import { CloseButton, HeaderActions } 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 {
- cards,
- fetchCards,
- } = useCardsStore()
+ const { cards, fetchCards } = useCardsStore()
+ const [isOpenBrasilian, setIsOpenBrasilian] = useState(false)
const {
close,
@@ -52,6 +55,16 @@ export const PackageSelectionStep = () => {
if (!match) return null
+ const isBrasil = clientCountry() === 'TH'
+
+ const onHandleClick = (e?: MouseEvent) => {
+ if (isBrasil) {
+ setIsOpenBrasilian(true)
+ } else {
+ onBuyClick(e)
+ }
+ }
+
return (
@@ -63,15 +76,15 @@ export const PackageSelectionStep = () => {
)}
- {hasPreviousStep && selectedSubscription
- ?
- : (
-
-
- {` ${MDASH} `}
-
-
- )}
+ {hasPreviousStep && selectedSubscription ? (
+
+ ) : (
+
+
+ {` ${MDASH} `}
+
+
+ )}
@@ -79,20 +92,27 @@ export const PackageSelectionStep = () => {
-
+ {isBrasil ? null : }
+ {selectedPackage && isOpenBrasilian && (
+
+ )}
)
}
diff --git a/src/helpers/clientCountry/index.tsx b/src/helpers/clientCountry/index.tsx
new file mode 100644
index 00000000..6d5f215b
--- /dev/null
+++ b/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
+}
diff --git a/src/requests/getBrazilPaymentUrl.tsx b/src/requests/getBrazilPaymentUrl.tsx
new file mode 100644
index 00000000..2859fab1
--- /dev/null
+++ b/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`,
+ })
+}