fix(#2386): add close button in popup

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

@@ -1,4 +1,8 @@
-import { useEffect, useState } from 'react'
+import {
+  useEffect,
+  useState,
+  MouseEvent,
+} from 'react'
 
 import { Loader } from 'features/Loader'
 import { useLexicsStore } from 'features/LexicsStore'
@@ -15,6 +19,7 @@ import { ScModal, LoaderWrapper } from './styled'
 type Props = {
   open: boolean,
   selectedPackage: MatchPackage,
+  setIsOpenBrasilian: (open: boolean) => void,
 }
 
 type ResponsePayment = {
@@ -26,6 +31,7 @@ type ResponsePaymentArray =Array<ResponsePayment | null>
 export const BrazilPayment = ({
   open,
   selectedPackage,
+  setIsOpenBrasilian,
 }: Props) => {
   const {
     name,
@@ -38,6 +44,11 @@ export const BrazilPayment = ({
   const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name
   const pack = translate(String(pass))
 
+  const closePopup = (e?: MouseEvent) => {
+    e?.stopPropagation()
+    setIsOpenBrasilian(false)
+  }
+
   useEffect(() => {
     if (open) {
       (async () => {
@@ -49,9 +60,9 @@ export const BrazilPayment = ({
   }, [selectedPackage, open])
 
   return (
-    <ScModal isOpen={open} withCloseButton={false}>
+    <ScModal isOpen={open} withCloseButton close={closePopup}>
       {src && open ? (
-        <iframe title='BrazilPayment' src={src} height={600} width={isMobileDevice ? 350 : 800} />
+        <iframe title='BrazilPayment' src={src} height={600} width={isMobileDevice ? 350 : 700} />
       ) : (
         <LoaderWrapper>
           <Loader color='#515151' />

src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx

@@ -9,7 +9,7 @@ export const ScModal = styled(BaseModal)`
   background-color: rgba(0, 0, 0, 0.7);
 
   ${ModalWindow} {
-    padding: 0;
+    padding: 50px;
     background-color: #333333;
     border-radius: 5px;
 

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

@@ -108,7 +108,11 @@ export const PackageSelectionStep = () => {
         )}
       </Footer>
       {selectedPackage && isOpenBrasilian && (
-        <BrazilPayment open={isOpenBrasilian} selectedPackage={selectedPackage} />
+        <BrazilPayment
+          open={isOpenBrasilian}
+          selectedPackage={selectedPackage}
+          setIsOpenBrasilian={setIsOpenBrasilian}
+        />
       )}
     </Wrapper>
   )