You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.5 KiB
73 lines
1.5 KiB
import { Loader } from 'features/Loader'
|
|
import { MatchPackage, Match } from 'features/BuyMatchPopup/types'
|
|
import { T9n } from 'features/T9n'
|
|
|
|
import { PaymentSystem } from 'config/payments'
|
|
import { isMobileDevice } from 'config'
|
|
|
|
import { useIframePayment } from './hooks'
|
|
|
|
import {
|
|
LoaderWrapper,
|
|
ScModal,
|
|
} from './styled'
|
|
|
|
export type Props = {
|
|
match: Match,
|
|
open: boolean,
|
|
paymentSystem: PaymentSystem,
|
|
selectedPackage: MatchPackage,
|
|
setIsOpenIframe: (open: boolean) => void,
|
|
}
|
|
|
|
export const IframePayment = ({
|
|
match,
|
|
open,
|
|
paymentSystem,
|
|
selectedPackage,
|
|
setIsOpenIframe,
|
|
}: Props) => {
|
|
const {
|
|
error,
|
|
isPaymentProcessing,
|
|
src,
|
|
} = useIframePayment({
|
|
match,
|
|
open,
|
|
paymentSystem,
|
|
selectedPackage,
|
|
setIsOpenIframe,
|
|
})
|
|
|
|
return (
|
|
<ScModal isOpen={open} withCloseButton close={() => setIsOpenIframe(false)}>
|
|
{src && open ? (
|
|
<iframe
|
|
title='Payment'
|
|
frameBorder='0'
|
|
src={src}
|
|
height={isMobileDevice ? 450 : 600}
|
|
width='100%'
|
|
/>
|
|
) : (
|
|
<>
|
|
{error ? (
|
|
<T9n t={error} />
|
|
) : (
|
|
<LoaderWrapper>
|
|
<Loader color='#515151' />
|
|
</LoaderWrapper>
|
|
)}
|
|
</>
|
|
)}
|
|
{
|
|
isPaymentProcessing && (
|
|
<LoaderWrapper>
|
|
<Loader color='#515151' />
|
|
<T9n t='processing' />
|
|
</LoaderWrapper>
|
|
)
|
|
}
|
|
</ScModal>
|
|
)
|
|
}
|
|
|