fix(#622): india payment PhonePe

src/config/clients/india.tsx

@@ -18,4 +18,5 @@ export const india: ClientConfig = {
   },
   disabledHighlights: true,
   name: ClientNames.India,
+  userAccountCardsHidden: true,
 }

src/config/clients/tunisia.tsx

@@ -60,4 +60,5 @@ export const tunisia: ClientConfig = {
   },
   termsLink: '/terms-and-conditions?client_id=insports-ott-web',
   title: 'Diwan Sport - The home of Tunisian Ligue Professionnelle 1',
+  userAccountCardsHidden: true,
 }

src/config/clients/types.tsx

@@ -64,5 +64,6 @@ export type ClientConfig = {
   },
   termsLink: string,
   title: string,
+  userAccountCardsHidden?: boolean,
   userAccountLinksDisabled?: boolean,
 }

src/config/payments.tsx

@@ -3,7 +3,7 @@ import { ClientNames } from './clients/types'
 export enum PaymentSystem {
   PagBrazil = 'pag_brasil',
   Paymee = 'paymee',
-  Paytm = 'paytm',
+  PhonePe = 'phonePe',
   Stripe = 'stripe'
 }
 
@@ -20,7 +20,7 @@ type PaymentsType = {
 export const payments: PaymentsType = {
   [ClientNames.Tunisia]: PaymentSystem.Paymee,
   [ClientNames.Brasil]: PaymentSystem.PagBrazil,
-  [ClientNames.India]: PaymentSystem.Paytm,
+  [ClientNames.India]: PaymentSystem.PhonePe,
   [ClientNames.Insports]: PaymentSystem.Stripe,
   [ClientNames.Instat]: PaymentSystem.Stripe,
   [ClientNames.Facr]: PaymentSystem.Stripe,

src/features/BuyMatchPopup/components/IframePayment/hooks.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import {
   MouseEvent,
   useCallback,
@@ -6,19 +7,29 @@ import {
   useState,
 } from 'react'
 
-import { PAGES, ProfileTypes } from 'config'
-import { ClientNames } from 'config/clients/types'
-import { payments, PaymentSystem } from 'config/payments'
+// import { useQuery } from 'react-query'
 
 import isNumber from 'lodash/isNumber'
 
+import {
+  PAGES,
+  ProfileTypes,
+  // querieKeys,
+} from 'config'
+import { ClientNames } from 'config/clients/types'
+import { payments, PaymentSystem } from 'config/payments'
+
 import { useLexicsStore } from 'features/LexicsStore'
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 import { SubscriptionType } from 'features/BuyMatchPopup/types'
 
-import { getMatchInfo } from 'requests/getMatchInfo'
-import { SubscriptionAction, getPaymentUrl } from 'requests/getPaymentUrl'
+import {
+  getPaymentOTTUrl,
+  getPaymentPayUrl,
+  getMatchInfo,
+  SubscriptionAction,
+} from 'requests'
 
 import { redirectToUrl } from 'helpers'
 
@@ -88,7 +99,7 @@ export const useIframePayment = ({
     }
   }, [close, error, id, matchLink, setIsOpenIframe, sportType])
 
-  const paymentRequest = async () => {
+  const paymentRequestOTT = async () => {
     let url_cancel
     let url_return
     let action: SubscriptionAction
@@ -106,7 +117,7 @@ export const useIframePayment = ({
         break
     }
 
-    const payment: ResponsePaymentArray = await getPaymentUrl({
+    const payment: ResponsePaymentArray = await getPaymentOTTUrl({
       action,
       item: originalObject,
       product_name: `${pack} ${teams}`,
@@ -117,7 +128,23 @@ export const useIframePayment = ({
     setSrc(payment?.url || '')
   }
 
-  if (paymentSystem === payments[ClientNames.Brasil]) {
+  // новое апи для оплаты, в будущем все платежки переедут на него
+  // временно делаем оплату на новой вкладке, а не через iframe
+  const paymentRequestPay = async () => {
+    const payment = await getPaymentPayUrl({
+      item: {
+        ...originalObject,
+      },
+      // url_return: `${window.location.origin}${PAGES.thanksForSubscribe}`,
+      url_return: `${window.location.origin}${matchLink}`,
+    })
+
+    // setSrc(payment?.url || '')
+    redirectToUrl(payment.url)
+  }
+
+  if (paymentSystem === payments.brasil
+    || paymentSystem === payments.india) {
   // eslint-disable-next-line
     window.onmessage = function (event) {
       if (event.data === 'close') {
@@ -126,6 +153,7 @@ export const useIframePayment = ({
     }
   }
 
+  // отслеживание оплаты для Paymee
   useEffect(() => {
     let interval: ReturnType<typeof setInterval>
     let timeout: ReturnType<typeof setTimeout>
@@ -160,11 +188,43 @@ export const useIframePayment = ({
     }
   }, [closePopup, paymentSystem])
 
+  // временное решение для отслеживания доступа к матчу
+  // для платежки PhonePe
+  // const { data: matchAccess } = useQuery({
+  //   queryFn: async () => {
+  //     if (paymentSystem === PaymentSystem.PhonePe) {
+  //       const matchInfo = await getMatchInfo(sportType, id)
+  //       return matchInfo?.access
+  //     }
+  //     return false
+  //   },
+  //   queryKey: querieKeys.getMatchInfo,
+  //   refetchInterval: 5000,
+  // })
+  // console.log('access', matchAccess)
+
+  // useEffect(() => {
+  //   if (matchAccess) {
+  //     setIsPaymentProcessing(false)
+  //     setIsOpenIframe(false)
+  //     setError('')
+  //     close()
+  //     redirectToUrl(matchLink)
+  //   }
+  // }, [matchAccess, close, matchLink, setIsOpenIframe])
+
   useEffect(() => {
     if (open) {
       (async () => {
         try {
-          await paymentRequest()
+          switch (paymentSystem) {
+            case PaymentSystem.PhonePe:
+              await paymentRequestPay()
+              break
+            default:
+              await paymentRequestOTT()
+              break
+          }
         } catch (err) {
           setError('error_payment_unsuccessful')
         }

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

@@ -22,6 +22,7 @@ import { ArrowLoader } from 'features/ArrowLoader'
 import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
 import { useAuthStore } from 'features/AuthStore'
 
+import { ClientNames } from 'config/clients/types'
 import { IframePayment } from '../IframePayment'
 
 import { useBuyMatchPopupStore } from '../../store'
@@ -73,20 +74,25 @@ export const PackageSelectionStep = () => {
   }, [cards, fetchCards])
 
   const paymentSystem = useMemo(() => {
-    switch (countryCode?.country_code) {
-      case CountryCode.BR:
+    switch (true) {
+      case countryCode?.country_code === CountryCode.BR:
         return payments.brasil
-      case CountryCode.TN:
+      case countryCode?.country_code === CountryCode.TN:
         return payments.tunisia
+      case countryCode?.country_code === CountryCode.IN:
+      case client.name === ClientNames.India:
+        return payments.india
       default:
         return payments[client.name]
     }
   }, [countryCode])
 
   const isIframePayment = useMemo(() => {
-    switch (countryCode?.country_code) {
-      case CountryCode.BR:
-      case CountryCode.TN:
+    switch (true) {
+      case countryCode?.country_code === CountryCode.BR:
+      case countryCode?.country_code === CountryCode.TN:
+      case countryCode?.country_code === CountryCode.IN:
+      case client.name === ClientNames.India:
         return true
       default:
         return false

src/features/UserAccount/index.tsx

@@ -54,13 +54,15 @@ const UserAccount = () => {
             </StyledLink>
             {!isLffClient && (
               <Fragment>
-                <StyledLink
-                  disabled={user?.profile?.country_code === 'BR'}
-                  to={`${PAGES.useraccount}/bank-cards`}
-                  id='personal_cards'
-                >
-                  <T9n t='bank_card' />
-                </StyledLink>
+                {!client.userAccountCardsHidden && (
+                  <StyledLink
+                    disabled={user?.profile?.country_code === 'BR'}
+                    to={`${PAGES.useraccount}/bank-cards`}
+                    id='personal_cards'
+                  >
+                    <T9n t='bank_card' />
+                  </StyledLink>
+                )}
                 <StyledLink
                   to={`${PAGES.useraccount}/subscriptions`}
                   id='personal_subscriptions'

src/requests/getMatchInfo.tsx

@@ -50,7 +50,7 @@ export enum MatchStatuses {
 }
 
 export type MatchInfo = {
-  access?: boolean,
+  access?: boolean | null,
   c_match_calc_status: MatchStatuses | null,
   calc: boolean,
   country: TournamentType,

src/requests/getPaymentOTTUrl.tsx

@@ -18,7 +18,7 @@ type Props = {
   url_return?: string | null,
 }
 
-export const getPaymentUrl = async ({
+export const getPaymentOTTUrl = async ({
   action,
   item,
   product_name,

src/requests/getPaymentPayUrl.tsx

@@ -0,0 +1,31 @@
+import { PAYMENT_API_URL } from 'config'
+
+import { callApi } from 'helpers'
+
+import type { SubscriptionResponse } from 'requests/getSubscriptions'
+
+type Props = {
+  item: SubscriptionResponse,
+  url_return?: string | null,
+}
+
+type PaymentResponse = {
+  url: string,
+}
+
+export const getPaymentPayUrl = async ({
+  item,
+  url_return,
+}: Props): Promise<PaymentResponse> => {
+  const config = {
+    body: {
+      item,
+      url_return,
+    },
+  }
+
+  return callApi({
+    config,
+    url: `${PAYMENT_API_URL}/api/v2/phonepe/create-payment-link`,
+  })
+}

src/requests/index.tsx

@@ -34,3 +34,5 @@ export * from './getMatchParticipants'
 export * from './getStatsEvents'
 export * from './getTokenVirtualUser'
 export * from './checkDevice'
+export * from './getPaymentOTTUrl'
+export * from './getPaymentPayUrl'