fix(#188): tunisia payment part 2

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',
 }

src/config/currencies.tsx

@@ -12,5 +12,6 @@ export const currencySymbols = {
   KZT: '₸',
   MDL: 'L',
   RUB: '₽',
+  TND: 'DT',
   USD: '$',
 } as const

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',
+  [ClientNames.Tunisia]: PaymentSystem.Paymee,
-  brasil: 'pag_brasil',
+  brasil: PaymentSystem.PagBrazil,
-  [ClientNames.India]: 'paytm',
+  [ClientNames.India]: PaymentSystem.Paytm,
-  [ClientNames.Insports]: 'stripe',
+  [ClientNames.Insports]: PaymentSystem.Stripe,
-  [ClientNames.Instat]: 'stripe',
+  [ClientNames.Instat]: PaymentSystem.Stripe,
-  [ClientNames.Facr]: 'stripe',
+  [ClientNames.Facr]: PaymentSystem.Stripe,
-  [ClientNames.Lff]: 'stripe',
+  [ClientNames.Lff]: PaymentSystem.Stripe,
 }

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)
     }
-  }
+  }, [close, history, id, matchLink, setIsOpenIframe, sportType])
-
-  // 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,
-  //   )
-  // }
 
   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) => {
+        paymentCallback,
-          if (event.data.event_id === 'paymee.complete') {
+        false,
-            closePopup()
-          }
-        }, false,
       )
     }
-  }
+    return () => {
+      window.removeEventListener(
+        'message',
+        paymentCallback,
+        false,
+      )
+    }
+  }, [closePopup, paymentSystem])
 
   useEffect(() => {
     if (open) {

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 = ({
     <ScModal isOpen={open} withCloseButton close={closePopup}>
       {src && open ? (
         <iframe
-          title='BrazilPayment'
+          title='Payment'
           frameBorder='0'
           src={src}
           height={600}

src/requests/getPaymentUrl.tsx

@@ -1,4 +1,4 @@
-import { API_ROOT, PAGES } from 'config'
+import { API_ROOT } from 'config'
 
 import { callApi } from 'helpers'
 
@@ -9,6 +9,7 @@ type Props = {
   item: SubscriptionResponse,
   product_name: string,
   service: string,
+  url_return?: string,
 }
 
 export const getPaymentUrl = async ({
@@ -16,13 +17,14 @@ export const getPaymentUrl = async ({
   item,
   product_name,
   service,
+  url_return,
 }: Props) => {
   const config = {
     body: {
       action,
       data: {
         item: { ...item, product_name },
-        url_return: `${window.location.origin}${PAGES.thanksForSubscribe}`,
+        url_return,
       },
       service,
     },