diff --git a/src/config/clients/tunisia.tsx b/src/config/clients/tunisia.tsx index bf16ab99..6a5d8f91 100644 --- a/src/config/clients/tunisia.tsx +++ b/src/config/clients/tunisia.tsx @@ -31,7 +31,7 @@ export const tunisia: ClientConfig = { #2AB7AA 3.27%, #02505C 43.69%, #0B2E4D 100%); `, - logo: 'tunisia-logo.svg', + logo: 'tunis-logo.svg', logoHeight: 1.922, logoLeft: 1.1, logoTop: 1.74, @@ -54,5 +54,5 @@ export const tunisia: ClientConfig = { `, }, termsLink: '/', - title: '', + title: 'Diwan Sport - The home of Tunisian Ligue Professionnelle 1', } diff --git a/src/config/currencies.tsx b/src/config/currencies.tsx index 65d9066f..e346de24 100644 --- a/src/config/currencies.tsx +++ b/src/config/currencies.tsx @@ -12,5 +12,6 @@ export const currencySymbols = { KZT: '₸', MDL: 'L', RUB: '₽', + TND: 'DT', USD: '$', } as const diff --git a/src/config/payments.tsx b/src/config/payments.tsx index 716d82a0..29aba071 100644 --- a/src/config/payments.tsx +++ b/src/config/payments.tsx @@ -1,15 +1,22 @@ import { ClientNames } from './clients/types' +export enum PaymentSystem { + PagBrazil = 'pag_brasil', + Paymee = 'paymee', + Paytm = 'paytm', + Stripe = 'stripe' +} + type PaymentsType = { - [key in ClientNames]: string + [key in ClientNames]: PaymentSystem } export const payments: PaymentsType = { - [ClientNames.Tunisia]: 'paymee', - brasil: 'pag_brasil', - [ClientNames.India]: 'paytm', - [ClientNames.Insports]: 'stripe', - [ClientNames.Instat]: 'stripe', - [ClientNames.Facr]: 'stripe', - [ClientNames.Lff]: 'stripe', + [ClientNames.Tunisia]: PaymentSystem.Paymee, + brasil: PaymentSystem.PagBrazil, + [ClientNames.India]: PaymentSystem.Paytm, + [ClientNames.Insports]: PaymentSystem.Stripe, + [ClientNames.Instat]: PaymentSystem.Stripe, + [ClientNames.Facr]: PaymentSystem.Stripe, + [ClientNames.Lff]: PaymentSystem.Stripe, } diff --git a/src/features/BuyMatchPopup/components/IframePayment/hooks.tsx b/src/features/BuyMatchPopup/components/IframePayment/hooks.tsx index 31d89480..d55f8581 100644 --- a/src/features/BuyMatchPopup/components/IframePayment/hooks.tsx +++ b/src/features/BuyMatchPopup/components/IframePayment/hooks.tsx @@ -1,14 +1,15 @@ import { MouseEvent, + useCallback, useEffect, useState, } from 'react' import { useHistory } from 'react-router-dom' -import { ProfileTypes } from 'config' +import { PAGES, ProfileTypes } from 'config' import { ClientNames } from 'config/clients/types' -import { payments } from 'config/payments' +import { payments, PaymentSystem } from 'config/payments' import isNumber from 'lodash/isNumber' @@ -59,7 +60,7 @@ export const useIframePayment = ({ sportType, }) - const closePopup = async (e?: MouseEvent) => { + const closePopup = useCallback(async (e?: MouseEvent) => { e?.stopPropagation() setIsOpenIframe(false) setError('') @@ -69,35 +70,28 @@ export const useIframePayment = ({ close() history.push(matchLink) } - } - - // const paymentPaymee = async () => { - // const response: ResponseTypeTunis = await getTunisPaymentToken({ - // amount: originalObject.price, - // note: `${pack} ${teams}`, - // vendor: 5020, - // }) - // setSrc(`https://sandbox.paymee.tn/gateway/${response?.data.token}` || '') - // - // window.addEventListener( - // 'message', - // (event) => { - // if (event.data.event_id === 'paymee.complete') { - // // Execute Step 3 - // setSrc(`https://sandbox.paymee.tn/api/v1/payments/${response?.data.token}/check`) - // } - // }, false, - // ) - // } + }, [close, history, id, matchLink, setIsOpenIframe, sportType]) const paymentRequest = async () => { - const json: ResponsePaymentArray = await getPaymentUrl({ + let url_return + + switch (paymentSystem) { + case PaymentSystem.Paymee: + url_return = undefined + break + default: + url_return = `${window.location.origin}${PAGES.thanksForSubscribe}` + break + } + + const payment: ResponsePaymentArray = await getPaymentUrl({ action: pass === 'pass_match_access' ? 'one_payment' : 'create_subscription', item: originalObject, product_name: `${pack} ${teams}`, service: paymentSystem, + url_return, }) - setSrc(json?.url || '') + setSrc(payment?.url || '') } if (paymentSystem === payments[ClientNames.Brasil]) { @@ -107,18 +101,29 @@ export const useIframePayment = ({ closePopup() } } + } + useEffect(() => { + const paymentCallback = (event: any) => { + if (event.data.event_id === 'paymee.complete') { + closePopup() + } + } if (paymentSystem === payments[ClientNames.Tunisia]) { window.addEventListener( 'message', - (event) => { - if (event.data.event_id === 'paymee.complete') { - closePopup() - } - }, false, + paymentCallback, + false, ) } - } + return () => { + window.removeEventListener( + 'message', + paymentCallback, + false, + ) + } + }, [closePopup, paymentSystem]) useEffect(() => { if (open) { diff --git a/src/features/BuyMatchPopup/components/IframePayment/index.tsx b/src/features/BuyMatchPopup/components/IframePayment/index.tsx index 63365967..6da18c7a 100644 --- a/src/features/BuyMatchPopup/components/IframePayment/index.tsx +++ b/src/features/BuyMatchPopup/components/IframePayment/index.tsx @@ -2,6 +2,8 @@ import { Loader } from 'features/Loader' import { MatchPackage, Match } from 'features/BuyMatchPopup/types' import { T9n } from 'features/T9n' +import { PaymentSystem } from 'config/payments' + import { useIframePayment } from './hooks' import { @@ -12,7 +14,7 @@ import { export type Props = { match: Match, open: boolean, - paymentSystem: string, + paymentSystem: PaymentSystem, selectedPackage: MatchPackage, setIsOpenIframe: (open: boolean) => void, } @@ -40,7 +42,7 @@ export const IframePayment = ({ {src && open ? (