xpay-redirect 0.4.0 → 1.0.0

package/src/Screens/FTBScreen/FTB/FTBTransactionPage.jsx

@@ -1,732 +0,0 @@
-import * as React from 'react';
-// Material UI 
-import { 
-    Box, 
-    Button, 
-    Dialog, 
-    Grid, 
-    IconButton, 
-    Paper, 
-    Stack, 
-    styled, 
-    TextField, 
-    Typography
-} from '@mui/material';
-import { LoadingButton } from '@mui/lab';
-// Icons
-import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
-import KeyboardBackspaceRoundedIcon from '@mui/icons-material/KeyboardBackspaceRounded';
-// images
-import FTBLogo from '../../../assets/ai Icon/ai Icon-4.png';
-import FTBName from '../../../assets/ai Icon/ai Icon-2.png';
-import FTBSuccess from '../../../assets/ai Icon/ai Icon-1.png';
-// files
-import RegNewAccount from './RegNewAccount';
-import axios from 'axios';
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December'
-];
-
-function formatAMPM(date) {
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
-  var ampm = hours >= 12 ? 'pm' : 'am';
-  hours = hours % 12;
-  hours = hours ? hours : 12; // the hour '0' should be '12'
-  minutes = minutes < 10 ? '0'+minutes : minutes;
-
-  var strTime = months[date.getMonth()]+' '+date.getDate()+', '+ date.getFullYear()+' '+hours+':'+minutes+' '+ampm;
-  return strTime;
-};
-
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
-    '& .MuiDialog-paper': {
-        borderRadius: '1.6rem',
-        backgroundColor: '#0a4e9c',
-    },
-    // '& .MuiDialogContent-root': {
-    //   padding: '16px',
-    // },
-    // '& .MuiDialogActions-root': {
-    //   padding: '8px',
-    // },
-}));
-  
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    backgroundColor: '#fff',
-    fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-    fontWeight: '400',
-    fontSize: '0.875rem',
-    lineHeight: '1.43',
-    letterSpacing: '0.01071em',
-    // padding: '16px',
-    minWidth: 300,
-    maxWidth: 400,
-    color: 'rgba(0, 0, 0, 0.87)',
-}));
-
-export default function FTBxPAYPage(props) {
-    const { 
-        config, baseurl, largeScreen, sessionid, paymenttokenid,  initialHours=0, initialMinutes=5, initialSeconds=0 
-    } = props;
-
-    // default 3minutes timer 
-    const timeControl = React.useRef(true);
-    const [timer, setTimer] = React.useState(null);
-    const [time, setTime] = React.useState({
-      h: initialHours,
-      m: initialMinutes,
-      s: initialSeconds,
-    });
-    
-    const onResponse = config?.onResponse
-        ? config.onResponse
-        : (data) => {
-            console.log("Xpay Response ::> ", data);
-            };
-    const onError = config?.onError
-        ? config.onError
-        : (err) => {
-            throw err;
-            };
-
-    // it disables the acct number or card details 
-    const [cardDisable, setCardDisable] = React.useState(false);
-    // it shows card details and otp input
-    // const [pageDisplay, setPageDisplay] = React.useState(false);
-    // check bank account or card number is valid and details
-    const [acctOrCardNumber, setAcctOrCardNumber] = React.useState('');
-    const [acctOrCardFetching, setAcctOrCardFetching] = React.useState(false);
-    // verification failed
-    const [acctOrCardErrorMsg, setAcctOrCardErrorMsg] = React.useState(false);
-    // details after verifying bank account or card number
-    const [customerName, setCustomerName] = React.useState('');
-    const [accountNumber, setAccountNumber] = React.useState('');
-    const [debitAccount, setDebitAccount] = React.useState('');
-  
-    // disable otp till it get to activate
-    const [otpInputDisabled, setOtpInputDisabled] = React.useState(true);
-    // create account page
-    const [openCreateAccount, setOpenCreateAccount] = React.useState(false);
-  
-    // OTP validation
-    const [otpNumber, setOtpNumber] = React.useState('');
-    const [otpValidFetching, setOtpValidFetching] = React.useState(false); 
-    // error message for OTP
-    const [otpError, setOtpError] = React.useState('');
-    const [otpErrorMsg, setOtpErrorMsg] = React.useState('');
-    // details after verifying OTP
-    const [otpSuccessPopup, setOtpSuccessPopup] = React.useState(false);
-    const [otpValidDetail, setOtpValidDetail] = React.useState('');
-  
-    // For new account register
-    const [regSentOTP, setRegSentOTP] = React.useState(false);
-
-    // ---------- Time Access (start) ----------
-    const startTimer = () => {
-        let myInterval = setInterval(() => {
-        setTime((time) => {
-            const updatedTime = { ...time };
-            if (time.s > 0) {
-                updatedTime.s--;
-            }
-
-            if (time.s === 0) {
-            if (time.h === 0 && time.m === 0) {
-                clearInterval(myInterval);
-            } else if (time.m > 0) {
-                updatedTime.m--;
-                updatedTime.s = 59;
-            } else if (updatedTime.h > 0) {
-                updatedTime.h--;
-                updatedTime.m = 59;
-                updatedTime.s = 59;
-            }
-            }
-
-            return updatedTime;
-        });
-        }, 1000);
-        setTimer(myInterval);
-    };
-
-    const pauseTimer = () => {
-        clearInterval(timer);
-    };
-
-    const cancelTimer = () => {
-        clearInterval(timer);
-        setTime({
-            h: initialHours,
-            m: initialMinutes,
-            s: initialSeconds,
-        });
-    };
-
-    React.useEffect(() => {
-        if (timeControl.current) {
-            timeControl.current = false
-            startTimer();
-        }
-      
-        return () => { }
-    }, []);
-    // ---------- Time Access (end) ----------
-
-    const handleClearAll = () => {
-        setAcctOrCardNumber("");      // acct or card num input empty value 
-        setCustomerName("");          // customer name empty
-        setAccountNumber("");         // acct num empty
-        setDebitAccount("");          // debit acct empty
-        setAcctOrCardErrorMsg('');    // clear error msg of card
-        
-        setOtpInputDisabled(true);    // first page otp input makes disable
-        setOtpNumber('');             // otp input empty
-        setOtpSuccessPopup(false);    // final pop up close
-        
-        setOpenCreateAccount(false);  // register page closed access
-        setRegSentOTP(false);         // register page otp page closed access
-    };
-
-    // cancel session
-    const CancelSession = async() => {
-        let text = {
-            "sessionid": sessionid
-        };
-        
-        try {
-            const res = await axios({
-                method: 'post',
-                url: `${baseurl}/CloseSession`,
-                data: text
-            });
-            onResponse({"at":"/CloseSession", "response":res.data});
-            handleClearAll();
-            sessionStorage.removeItem("sessionid");
-            sessionStorage.removeItem("paymenttokenid");
-            sessionStorage.clear();
-            window.history.back();
-            // cancelTimer();
-        } catch (error) {
-            onError({"at":"/CloseSession", "error":error?.response?.data || error?.message || error});
-        }
-    }
-
-    // Account validation
-    const acctOrCardNumberSubmit = async(e) => {
-        e.preventDefault();
-        setAcctOrCardFetching(true);
-        try {
-            let jobj = {
-                "sessionid": sessionid || '', 
-                "ptokenId": paymenttokenid || '', 
-                "userdetails": {
-                  "userid": acctOrCardNumber || '',
-                  "cardName":'',
-                  "cardExpiry":'',
-                  "validThrough":'',
-                  "paymentOption":'2',
-                  "xcif": acctOrCardNumber||''
-                }
-            };
-
-            const response = await axios({
-                method: 'post',
-                url: `${baseurl}/identifyUser`,
-                data: jobj,
-            });
-            onResponse({ 'at':'/identifyUser', 'response':response.data});
-
-            if(response.data._result === 'success') {
-                setCustomerName(response?.data?._username);
-                setAccountNumber(response?.data?._userid);
-                setDebitAccount(response?.data?.accountlist?.toString());
-
-                // send security code otp
-                try {
-                    let jobjdata = {
-                        "sessionid": sessionid || '', 
-                        "ptokenId": paymenttokenid || '', 
-                        "userdetails": {
-                            "userid": acctOrCardNumber || '',
-                            "cardName":'',
-                            "cardExpiry":'',
-                            "validThrough":'',
-                            "paymentOption":'2',
-                            "xcif": acctOrCardNumber||''
-                        }
-                    };
-        
-                    const res = await axios({
-                        method: 'post',
-                        url: `${baseurl}/SendSecurityCode`,
-                        data: jobjdata,
-                    });
-                    onResponse({ 'at':'/SendSecurityCode', 'response':res.data});
-                } catch (error) {
-                    onError({ 'at':'/SendSecurityCode', 'error':error?.response?.data || error?.message || error});
-                }
-                setOtpInputDisabled(false);
-                setAcctOrCardErrorMsg('');
-                setOtpErrorMsg('');
-                setOtpError('');
-            } else {
-                setAcctOrCardErrorMsg(response?.data?._message || 'Error');
-                setCustomerName("");
-                setAccountNumber("");
-                setDebitAccount(""); 
-            }
-            setAcctOrCardFetching(false);
-        } catch (error) {
-            onError({ 'at':'/identifyUser', 'error':error?.response?.data || error?.message || error});
-            setAcctOrCardErrorMsg(error?.response?.data || error?.message || error);
-            setAcctOrCardFetching(false);
-            setOtpInputDisabled(true);
-        }
-    };
-    
-    // OTP Token validation
-    const otpNumberSubmit = async(e) => {
-        e.preventDefault();
-        setOtpValidFetching(true);
-        try {
-            let jobj = {
-                "sessionid": sessionid || '', 
-                "ptokenId": paymenttokenid || '', 
-                "userdetails": {
-                    "userid": acctOrCardNumber || '',
-                    "cardName":'',
-                    "cardExpiry":'',
-                    "validThrough":'',
-                    "paymentOption":'2',
-                    "xcif": acctOrCardNumber||''
-                },
-                "credential": otpNumber
-            };
-
-            const response = await axios({
-                method: 'post',
-                url: `${baseurl}/verifyTransaction`,
-                data: jobj,
-            });
-            onResponse({"at":"/verifyTransaction", "response":response.data});
-            setOtpValidDetail(response.data);
-            setOtpSuccessPopup(true);
-            setOtpErrorMsg('');
-            setOtpError(false);
-            setOtpValidFetching(false);
-        } catch (error) {
-            setOtpSuccessPopup(false);
-            setOtpError(true);
-            setOtpErrorMsg("Sorry, One Time Password is invalid, Please enter again!" || "Sorry, One Time Password expired!!!")
-            setOtpValidFetching(false);
-        }
-    };
-
-    React.useEffect(() => {
-        if(time.h<=0 && time.m<=0 && time.s<=0 ) {
-          setCardDisable(true);
-          handleClearAll();
-          // setPageDisplay(false);
-        }
-      
-        return () => {}
-    });
-
-    return (<>
-        <Box
-            sx={{
-                color:'#fff',
-                backgroundColor:'#0a4e9c',
-                borderRadius: '1.6rem',
-                marginTop:largeScreen?1:0,
-                minWidth:largeScreen?'420px':'auto',
-                width:largeScreen?'max-content':'100%'
-            }}
-        >
-            {/* --------- Box Header --------- */}
-            <div
-                style={{ 
-                    margin: 0, padding:'12px 16px 8px',
-                    display:'flex',
-                    alignItems:'center',
-                    justifyContent:'space-between'
-                }}
-            >
-                <img src={FTBLogo} alt='FTB' width={70} height={25} />
-                <IconButton
-                    aria-label="close"
-                    onClick={() => { CancelSession(); }}
-                    sx={{
-                        // position: 'absolute',
-                        // right: 8,
-                        // top: 8,
-                        color: '#fff',
-                    }}
-                >
-                    <HighlightOffRoundedIcon />
-                </IconButton>
-            </div>
-
-            {/* --------- Box Content --------- */}
-            <div 
-                style={{
-                    backgroundColor:'#fff',
-                    borderRadius:'1.6rem 1.6rem 0 0',
-                    padding:'16px',
-                    border: '1px solid #afafaf'
-                }}
-            >
-                {/* --------- CREATE NEW ACCOUNT MODULE --------- */}
-                {openCreateAccount ? 
-                    <RegNewAccount 
-                        config={config}
-                        baseurl={baseurl}
-                        startTimer={startTimer}
-                        sessionid={sessionid}
-                        setAcctOrCardNumber={setAcctOrCardNumber}
-                        regSentOTP={regSentOTP} 
-                        setRegSentOTP={setRegSentOTP}
-                        setOpenCreateAccount={setOpenCreateAccount}
-                    />
-                :
-                    <React.Fragment>
-                        {/* --------- FORM TOKEN VALIDATE MODULE --------- */}
-
-                        {/* --------- 5MINS TIMER TRANSACTION PROCESS --------- */}
-                        <Typography 
-                            style={{ 
-                                backgroundColor:'#a68206',
-                                borderRadius:'0.6rem',
-                                padding:'0.6rem',
-                                fontSize:'13px', 
-                                color:'#fff',
-                                textAlign:'center'
-                            }}
-                        >
-                            {(time.h<=0 && time.m<=0 && time.s<=0 )?
-                                <span style={{ color:'#ff0000',fontWeight:'bold' }}>Payment session expired !</span>
-                            :
-                                <span>
-                                    Payment session will expired in 5mins&nbsp;({time.h<10 && time.h!==0 ? `0${time.h}:` : time.h>=10 && `${time.h}:`}
-                                    {time.m < 10 ? `0${time.m}` : time.m}:
-                                    {time.s < 10 ? `0${time.s}` : time.s})
-                                </span>
-                            }
-                        </Typography>
-                        
-                        {/* --------- TRANSACTION PROCESS DETAILS --------- */}
-                        <Box sx={{ flexGrow: 1, overflow: 'hidden' }}>
-                            <StyledPaper sx={{ my:1, mx:'auto', p:2, }}>
-                                <Grid container spacing={1}>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={6}>Amount</Grid>
-                                        <Grid item xs={2}>:</Grid>
-                                        <Grid item xs={6}><b style={{ color:'#a68206' }}>USD {config?.transactionDetails?.amount}</b></Grid>
-                                    </Grid>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={6}>Merchant Name</Grid>
-                                        <Grid item xs={2}>:</Grid>
-                                        <Grid item xs={6}><div style={{ color:'#a68206' }}>{config?.merchantName}</div></Grid>
-                                    </Grid>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={6}>Transaction ID</Grid>
-                                        <Grid item xs={2}>:</Grid>
-                                        <Grid item xs={6}>{config?.transactionDetails?.txid}</Grid>
-                                    </Grid>
-                                </Grid>
-                            </StyledPaper>
-
-                            <StyledPaper sx={{ my:1, mx:'auto', p:2, }}>
-                                <Grid container spacing={1}>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={12}>
-                                        {/* --------- FORM ERROR DISPLAY --------- */}
-                                        {acctOrCardErrorMsg && 
-                                        <div 
-                                            style={{ 
-                                            color: '#ff0000',
-                                            padding: '0px 12px 5px 12px',
-                                            fontSize: '12px',
-                                            textAlign: 'center'
-                                            }}
-                                        >{acctOrCardErrorMsg} (OR) you can {" "}
-                                            <span 
-                                                style={{
-                                                textDecoration: 'underline',
-                                                WebkitTextDecorationColor: 'red', // Safari 
-                                                textDecorationColor: 'red',
-                                                cursor: 'pointer'
-                                                }} 
-                                                onClick={()=>{
-                                                    pauseTimer();
-                                                    setOpenCreateAccount(true);
-                                                }}
-                                            >
-                                                Register Account Here
-                                            </span>.
-                                        </div>
-                                        }
-                                    
-                                        {/* --------- FORM VALIDATE USER ACCOUNT --------- */}
-                                        <form onSubmit={(e)=>acctOrCardNumberSubmit(e)}>
-                                            <Stack direction="row" spacing={1}>
-                                                <TextField
-                                                    required
-                                                    fullWidth
-                                                    autoFocus
-                                                    variant='outlined'
-                                                    id="acct-card-number"
-                                                    value={acctOrCardNumber}
-                                                    size="small"
-                                                    autoComplete='off'
-                                                    // type="number" 
-                                                    // min="0"
-                                                    onKeyPress={(event) => {
-                                                        if (!/[0-9.]/.test(event.key)) {
-                                                        event.preventDefault();
-                                                        }
-                                                    }}
-                                                    disabled={cardDisable}
-                                                    placeholder="Enter bank account/card number"
-                                                    onChange={(event) => {
-                                                        setAcctOrCardNumber(event.target.value);
-                                                    }}
-                                                    sx={{
-                                                        '& fieldset': {
-                                                            borderRadius: '30px',
-                                                        },
-                                                    }}
-                                                />
-                                                {/* --------- FORM VALIDATE BUTTON --------- */}
-                                                <LoadingButton
-                                                    loading={acctOrCardFetching}
-                                                    variant='contained'
-                                                    type='submit'
-                                                    disabled={cardDisable}
-                                                    sx={{
-                                                        borderRadius: '30px',
-                                                        textTransform: "none",
-                                                        backgroundColor:'#0a4e9c',
-                                                        '&:active, &:focus, &:hover': {
-                                                            backgroundColor:'#053e88'
-                                                        }
-                                                    }}
-                                                >
-                                                    &nbsp;Validate&nbsp;
-                                                </LoadingButton>
-                                            </Stack>
-                                        </form>
-                                    </Grid>
-                                </Grid>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={6}>Customer Name</Grid>
-                                        <Grid item xs={2}>:</Grid>
-                                        <Grid item xs={6}><b style={{ color:'#a68206' }}>{customerName}</b></Grid>
-                                    </Grid>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={6}>Account Number</Grid>
-                                        <Grid item xs={2}>:</Grid>
-                                        <Grid item xs={6}><div style={{ color:'#a68206' }}>{accountNumber}</div></Grid>
-                                    </Grid>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={6}>Debit Account</Grid>
-                                        <Grid item xs={2}>:</Grid>
-                                        <Grid item xs={6}>{debitAccount}</Grid>
-                                    </Grid>
-                                </Grid>
-                                
-                            </StyledPaper>
-
-                            <Box 
-                                sx={{ 
-                                flexGrow: 1, 
-                                mx:'auto',
-                                backgroundColor: '#fff',
-                                p: 2,
-                                minWidth: 300,
-                                maxWidth: 400,
-                                }}
-                            >
-                                <Grid container spacing={1}>
-                                    <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid item xs={12}>
-                                            {/* --------- FORM OTP TOKEN VALIDATE --------- */}
-                                            <form onSubmit={(e)=>otpNumberSubmit(e)}>
-                                                <Stack direction="row" spacing={1}>
-                                                    <TextField
-                                                        required
-                                                        fullWidth
-                                                        disabled={otpInputDisabled}
-                                                        variant={'outlined'}
-                                                        id="otp-number"
-                                                        value={otpNumber}
-                                                        size="small"
-                                                        autoComplete='off'
-                                                        // type="number" 
-                                                        // min="0"
-                                                        onKeyPress={(event) => {
-                                                            if (!/[0-9.]/.test(event.key)) {
-                                                            event.preventDefault();
-                                                            }
-                                                        }}
-                                                        placeholder="Enter OTP Token"
-                                                        onChange={(event) => {
-                                                            setOtpNumber(event.target.value);
-                                                        }}
-                                                        sx={{
-                                                            '& fieldset': {
-                                                                borderRadius: '30px',
-                                                            },
-                                                        }}
-                                                    />
-                                                    {/* --------- OTP TOKEN VALID BUTTON --------- */}
-                                                    <LoadingButton 
-                                                        variant='contained'
-                                                        type='submit'
-                                                        loading={otpValidFetching}
-                                                        disabled={otpInputDisabled}
-                                                        sx={{
-                                                            borderRadius: '30px',
-                                                            textTransform: "none",
-                                                            backgroundColor:'#0a4e9c',
-                                                            '&:active, &:focus, &:hover': {
-                                                                backgroundColor:'#053e88'
-                                                            }
-                                                        }}
-                                                    >
-                                                        &nbsp;Validate&nbsp;
-                                                    </LoadingButton>
-                                                </Stack>
-                                            </form>
-                                        </Grid>
-                                    </Grid>
-
-                                    {!otpInputDisabled && otpError==='' && <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid 
-                                            item 
-                                            xs={12} 
-                                            style={{ 
-                                                color:'#808080', 
-                                                padding:'8px 12px 0',
-                                                textAlign:'center', 
-                                                fontSize:'12px' 
-                                            }}
-                                        >
-                                            You have mobile one time password security token assigned.
-                                            <br/>
-                                            Please use that for generating OTP.
-                                        </Grid>
-                                    </Grid>}
-
-                                    {/* --------- OTP TOKEN ERROR DISPLAY --------- */}
-                                    {otpError && otpErrorMsg && <Grid container wrap="nowrap" item spacing={1}>
-                                        <Grid 
-                                            item 
-                                            xs={12} 
-                                            style={{ 
-                                                color:'red', 
-                                                padding:'8px 12px 0',
-                                                textAlign:'center', 
-                                                fontSize:'12px' 
-                                            }}
-                                        >
-                                            {otpErrorMsg}
-                                        </Grid>
-                                    </Grid>}
-                                </Grid>
-                            </Box>
-                        </Box>
-                    </React.Fragment>
-                }
-            </div>
-
-            {/* --------- Box Footer --------- */}
-            <div style={{ 
-                display:'flex',
-                justifyContent:openCreateAccount?'space-between':'flex-end', 
-                minHeight:'60px', 
-                padding: '8px 16px 12px' 
-            }}>
-                {/* --------- GET BACK BUTTON --------- */}
-                <IconButton
-                    aria-label="back"
-                    onClick={() => { 
-                        if(regSentOTP) {
-                            setRegSentOTP(false)
-                        } else {
-                            startTimer();
-                            setOpenCreateAccount(false)
-                        }
-                    }}
-                    sx={{
-                        color: '#fff',
-                        display:openCreateAccount?'block':'none'
-                    }}
-                >
-                    <KeyboardBackspaceRoundedIcon />
-                </IconButton>
-
-                <img src={FTBName} alt='FTB Name' width={150} />
-            </div>
-        </Box>
-
-        {otpSuccessPopup && <BootstrapDialog
-            // onClose={() => { setOtpSuccessPopup(false) }}
-            aria-labelledby="customized-otp-success"
-            open={otpSuccessPopup}
-        >
-            <center style={{color:'#fff',padding:'14px',minWidth:'300px',maxWidth:'350px'}}>
-                <img src={FTBSuccess} alt="Payment success" style={{ marginLeft:'33px' }}/>
-                <Typography>Payment received</Typography>
-                <Typography variant='h6' component={'div'} style={{ color:'#a68206',fontWeight:'bold' }}>
-                    USD {otpValidDetail?.usd}
-                </Typography>
-                <div style={{ lineHeight:2 }}>
-                    Transaction ID: <b>{otpValidDetail?.transactionID}</b>
-                </div>
-                <div style={{ lineHeight:2 }}>
-                    Receiver: <b>{otpValidDetail?.merchantName}</b>
-                </div>
-                <div style={{ lineHeight:2 }}>
-                    {formatAMPM(otpValidDetail?.date || new Date())}
-                </div>
-
-                <Button 
-                    variant='outlined'
-                    size='small'
-                    onClick={() => { 
-                        setOtpSuccessPopup(false);
-                        sessionStorage.removeItem("sessionid");
-                        sessionStorage.removeItem("paymenttokenid");
-                        sessionStorage.clear();
-                        window.history.back();
-                    }}
-                    sx={{
-                        borderRadius: '30px',
-                        backgroundColor:'#0a4e9c',
-                        color:'#a68206',
-                        mt:2,
-                        '&:active, &:focus, &:hover': {
-                            backgroundColor:'#053e88',
-                        }
-                    }}
-                >
-                    CLOSE
-                </Button>
-            </center>
-        </BootstrapDialog>}
-    </>);
-}