fix(#622): india payment PhonePe

This reverts commit 0e147688a5.

.drone.yml

@@ -846,6 +846,7 @@ steps:
 
     depends_on:
       - make-diwansport
+
 ---
 kind: pipeline
 type: docker
@@ -900,3 +901,56 @@ steps:
 
     depends_on:
       - make-fqtv
+
+---
+kind: pipeline
+type: docker
+name: deploy india.insports.tv
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/india.insports.tv
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-india
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make india-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-india
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_india s3://insports-india --delete
+      - aws cloudfront create-invalidation --distribution-id E5DKN8IPOMASO --paths "/*"
+    depends_on:
+      - make-india

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/App/index.tsx

@@ -32,13 +32,24 @@ setClientTitleAndDescription(client.title, client.description)
 
 const Main = () => {
   const [isToken, setIsToken] = useState(false)
-  const { userInfo } = useAuthStore()
+  const { user, userInfo } = useAuthStore()
   const queryClient = new QueryClient()
 
   useEffect(() => {
     if (userInfo) readToken() && setIsToken(true)
   }, [userInfo])
 
+  // отправляем идентификаторы пользователей в гугл аналитику
+  useEffect(() => {
+    if (user) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any)?.dataLayer.push({
+        event: 'userData',
+        userId: user.profile?.sub,
+      })
+    }
+  }, [user])
+
   // имеется действующий токен
   return isToken ? (
     <ErrorBoundary>

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

@@ -1,22 +1,35 @@
+/* eslint-disable no-console */
 import {
   MouseEvent,
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react'
 
-import { PAGES, ProfileTypes } from 'config'
+// import { useQuery } from 'react-query'
-import { ClientNames } from 'config/clients/types'
-import { payments, PaymentSystem } from 'config/payments'
 
 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 {
-import { getPaymentUrl } from 'requests/getPaymentUrl'
+  getPaymentOTTUrl,
+  getPaymentPayUrl,
+  getMatchInfo,
+  SubscriptionAction,
+} from 'requests'
 
 import { redirectToUrl } from 'helpers'
 
@@ -49,6 +62,7 @@ export const useIframePayment = ({
     nameLexic,
     originalObject,
     pass,
+    type,
   } = selectedPackage
 
   const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name
@@ -60,6 +74,13 @@ export const useIframePayment = ({
     sportType,
   })
 
+  const defaultAction: SubscriptionAction = useMemo(() => {
+    if (type === SubscriptionType.Month) {
+      return SubscriptionAction.CreateSubscription
+    }
+    return SubscriptionAction.OnePayment
+  }, [type])
+
   const closePopup = useCallback(async (e?: MouseEvent) => {
     e?.stopPropagation()
 
@@ -78,25 +99,25 @@ export const useIframePayment = ({
     }
   }, [close, error, id, matchLink, setIsOpenIframe, sportType])
 
-  const paymentRequest = async () => {
+  const paymentRequestOTT = async () => {
     let url_cancel
     let url_return
-    let action: Parameters<typeof getPaymentUrl>[0]['action']
+    let action: SubscriptionAction
 
     switch (paymentSystem) {
       case PaymentSystem.Paymee:
-        url_cancel = `${window.origin}/failed-paymee`
+        url_cancel = `${window.origin}${PAGES.failedPaymee}`
         url_return = null
         // paymee не умеет работать с подписками
-        action = 'one_payment'
+        action = SubscriptionAction.OnePayment
         break
       default:
         url_return = `${window.location.origin}${PAGES.thanksForSubscribe}`
-        action = pass === 'pass_match_access' ? 'one_payment' : 'create_subscription'
+        action = defaultAction
         break
     }
 
-    const payment: ResponsePaymentArray = await getPaymentUrl({
+    const payment: ResponsePaymentArray = await getPaymentOTTUrl({
       action,
       item: originalObject,
       product_name: `${pack} ${teams}`,
@@ -107,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') {
@@ -116,6 +153,7 @@ export const useIframePayment = ({
     }
   }
 
+  // отслеживание оплаты для Paymee
   useEffect(() => {
     let interval: ReturnType<typeof setInterval>
     let timeout: ReturnType<typeof setTimeout>
@@ -150,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) {
+    switch (true) {
-      case CountryCode.BR:
+      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) {
+    switch (true) {
-      case CountryCode.BR:
+      case countryCode?.country_code === CountryCode.BR:
-      case CountryCode.TN:
+      case countryCode?.country_code === CountryCode.TN:
+      case countryCode?.country_code === CountryCode.IN:
+      case client.name === ClientNames.India:
         return true
       default:
         return false

src/features/BuyMatchPopup/index.tsx

@@ -23,10 +23,10 @@ export const BuyMatchPopup = () => {
   const {
     close,
     currentStep,
-    match,
+    isPopupOpen,
   } = useBuyMatchPopupStore()
 
-  if (!match || !currentStep) return null
+  if (!isPopupOpen || !currentStep) return null
 
   const Step = components[currentStep]
 

src/features/BuyMatchPopup/store/hooks/index.tsx

@@ -33,6 +33,9 @@ import {
   SubscriptionType,
 } from 'features/BuyMatchPopup/types'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
+
+import { useToggle } from 'hooks'
 
 import { isSubscribePopup } from 'helpers'
 
@@ -57,6 +60,11 @@ export const useBuyMatchPopup = () => {
   const [disabledBuyBtn, setDisabledBuyBtn] = useState(false)
   const [showClearBtn, setShowClearBtn] = useState(false)
   const [lastSelectedPackage, setLastSelectedPackage] = useState('')
+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
   const setDataHighlights = useSetRecoilState(dataForPayHighlights)
 
   const goTo = useCallback(
@@ -93,8 +101,9 @@ export const useBuyMatchPopup = () => {
 
   const openPopup = useCallback((matchData: Match) => {
     setMatch(matchData)
+    open()
     setSteps([])
-  }, [])
+  }, [open])
 
   useEffect(() => {
     if (isEmpty(matchSubscriptions)) return
@@ -108,7 +117,7 @@ export const useBuyMatchPopup = () => {
   }, [matchSubscriptions, onSubscriptionSelect])
 
   const closePopup = () => {
-    setMatch(null)
+    close()
     setSteps([])
     setError('')
     resetSubscriptions()
@@ -132,6 +141,7 @@ export const useBuyMatchPopup = () => {
   const postPaymentHandler = () => {
     if (!match) return
     if (!isSubscribePopup()) {
+      setMatch((prev) => prev && { ...prev, access: MatchAccess.RedirectToProfile })
       redirectToMatchProfile(match)
     }
     closePopup()
@@ -215,6 +225,7 @@ export const useBuyMatchPopup = () => {
     goBack,
     goTo,
     hasPreviousStep: size(steps) > 1,
+    isPopupOpen: isOpen,
     lastSelectedPackage,
     loader,
     match,

src/features/BuyMatchPopup/types.tsx

@@ -2,6 +2,7 @@ import type { SubscriptionResponse, Subscription } from 'requests/getSubscriptio
 
 import type { LexicsId, Values } from 'features/LexicsStore/types'
 import type { Match as MatchBase } from 'features/Matches/hooks'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
 export enum Steps {
   CardSelection = 'CardSelection',
@@ -42,7 +43,9 @@ export type Match = Pick<MatchBase, (
   | 'tournament'
   | 'calc'
   | 'hasVideo'
-)>
+)> & {
+  access?: MatchAccess,
+}
 
 export type MatchSubscription = Pick<Subscription, (
   'id'

src/features/MatchPage/components/SubscriptionGuard/index.tsx

@@ -1,13 +1,19 @@
 import type { ReactNode } from 'react'
 import { Fragment, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 
-import { usePageParams } from 'hooks/usePageParams'
+import { PAGES } from 'config'
+
+import { usePageParams } from 'hooks'
 
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
 import { useMatchPageStore } from 'features/MatchPage/store'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
 import { isSubscribePopup } from 'helpers'
 
+import { getMatchInfo } from 'requests'
+
 import { prepareMatchProfile } from '../../helpers/prepareMatchProfile'
 import { useAuthStore } from '../../../AuthStore'
 
@@ -16,14 +22,26 @@ type Props = {
 }
 
 export const SubscriptionGuard = ({ children }: Props) => {
-  const { profile: matchProfile } = useMatchPageStore()
+  const { profile: matchProfile, setMatchProfile } = useMatchPageStore()
-  const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
+  const { match, open: openBuyMatchPopup } = useBuyMatchPopupStore()
   const { profileId: matchId, sportType } = usePageParams()
   const { user } = useAuthStore()
+  const history = useHistory()
+
+  const checkAccess = async () => {
+    const profile = await getMatchInfo(sportType, matchId)
+
+    if (!profile?.sub) {
+      history.replace(PAGES.home)
+    }
+  }
 
   useEffect(() => {
+    let timer: NodeJS.Timeout
+
     if ((user && matchProfile
-      && !matchProfile.sub)
+      && !matchProfile.sub
+      && match?.access !== MatchAccess.RedirectToProfile)
       || (matchProfile && isSubscribePopup())) {
       const profile = prepareMatchProfile({
         matchId,
@@ -32,12 +50,26 @@ export const SubscriptionGuard = ({ children }: Props) => {
       })
       openBuyMatchPopup(profile)
     }
+
+    if (match?.access === MatchAccess.RedirectToProfile) {
+      setMatchProfile((profile) => profile && {
+        ...profile,
+        access: true,
+        sub: true,
+      })
+
+      timer = setTimeout(checkAccess, 30000)
+    }
+
+    return () => timer && clearTimeout(timer)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     matchId,
     openBuyMatchPopup,
-    matchProfile,
+    matchProfile?.sub,
     sportType,
     user,
+    match?.access,
   ])
 
   return (

src/features/MatchPage/store/hooks/index.tsx

@@ -453,6 +453,7 @@ export const useMatchPage = () => {
     setIsPlayingFiltersEpisodes: isStatsPlaylist
       ? setStatsIsPlayinFiltersEpisodes
       : setIsPlayersStatsFetching,
+    setMatchProfile,
     setPlaingOrder: isStatsPlaylist ? setStatsPlaingOrder : setPlaingOrder,
     setPlayingData,
     setPlayingProgress,

src/features/UserAccount/index.tsx

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

src/helpers/callApi/logoutIfUnauthorized.tsx

@@ -1,12 +1,11 @@
-import * as Sentry from '@sentry/react'
+// import * as Sentry from '@sentry/react'
 
 export const logoutIfUnauthorized = async (response: Response) => {
   /* отключили из-за доступа без авторизации */
-  const body = await response.json()
 
-  if (response.status === 400) {
+  // if (response.status === 400) {
-    Sentry.captureException(body)
+  //   Sentry.captureException(body)
-  }
+  // }
 
   if (response.status === 401 || response.status === 403) {
     window.dispatchEvent(new Event('FORBIDDEN_REQUEST'))
@@ -16,5 +15,6 @@ export const logoutIfUnauthorized = async (response: Response) => {
   // eslint-disable-next-line no-console
   console.error(error)
 
+  const body = await response.json()
   return Promise.reject(body)
 }

src/index.tsx

@@ -5,24 +5,23 @@ import {
 } from 'react'
 import ReactDOM from 'react-dom'
 
-import * as Sentry from '@sentry/react'
+import { isIOS } from 'config/userAgent'
-import { BrowserTracing } from '@sentry/react'
+// import { makeServer } from 'utilits/mirage/server'
-
-import { isIOS, ENV } from 'config'
-
-// import { makeServer } from 'utilits/mirage/Mirage'
 
+// import * as Sentry from '@sentry/react'
+// import { BrowserTracing } from '@sentry/react'
 import * as serviceWorker from './serviceWorker'
-
+// import { ENV } from './config'
-if (process.env.NODE_ENV !== 'development') {
+
-  Sentry.init({
+// if (process.env.NODE_ENV !== 'development') {
-    dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21',
+//   Sentry.init({
-    environment: ENV,
+//     dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21',
-    integrations: [new BrowserTracing()],
+//     environment: ENV,
-    normalizeDepth: 5,
+//     integrations: [new BrowserTracing()],
-    tracesSampleRate: 1.0,
+//     normalizeDepth: 5,
-  })
+//     tracesSampleRate: 1.0,
-}
+//   })
+// }
 
 export const App = process.env.REACT_APP_TYPE === 'auth-service'
   ? lazy(() => import('features/AuthServiceApp'))

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

@@ -4,8 +4,13 @@ import { callApi } from 'helpers'
 
 import type { SubscriptionResponse } from 'requests/getSubscriptions'
 
+export enum SubscriptionAction {
+  CreateSubscription = 'create_subscription',
+  OnePayment = 'one_payment'
+}
+
 type Props = {
-  action: 'one_payment' | 'create_subscription',
+  action: SubscriptionAction,
   item: SubscriptionResponse,
   product_name: string,
   service: string,
@@ -13,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'