xpay-redirect 0.2.0

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

@@ -0,0 +1,732 @@
+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>}
+    </>);
+}