xpay-redirect 0.3.0 → 1.0.0

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

@@ -1,377 +0,0 @@
-import { CalendarMonth, Https, Person, Phone } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
-import { Box, Grid, InputAdornment, TextField, Typography } from '@mui/material';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import axios from 'axios';
-import React from 'react';
-// images
-import FTBAccountVerify from '../../../assets/ai Icon/ai Icon-3.png';
-
-export default function RegNewAccount(props) {
-    const { config, baseurl, sessionid, setAcctOrCardNumber, regSentOTP, setRegSentOTP, setOpenCreateAccount, startTimer } = props;
-    const [regUserError, setRegUserError] = React.useState('');
-    const [regAccountNum, setRegAccountNum] = React.useState('');
-    const [regDOB, setRegDOB] = React.useState(null);
-    const [regMobileNum, setRegMobileNum] = React.useState('');
-    const [regAcctLoading, setRegAcctLoading] = React.useState(false);
-    const [regOTPNum, setRegOTPNum] = React.useState('');
-    const [regOTPConfirming, setRegOTPConfirming] = React.useState(false);
-    
-    const onResponse = config?.onResponse
-        ? config.onResponse
-        : (data) => {
-            console.log("Xpay account register Response ::> ", data);
-        };
-    const onError = config?.onError
-        ? config.onError
-        : (err) => {
-            throw err;
-        };
-    
-    const newRegisterSubmit = (event) => {
-        event.preventDefault();
-        
-        let jobj = {
-            "sessionid": sessionid, 
-            "accountNumber": regAccountNum, 
-            "mobileNumber": regMobileNum, 
-            "dateOfBirth": Number(regDOB.toISOString().split('T')[0].replaceAll('-',''))
-        };
-        setRegAcctLoading(true);
-        
-        axios({
-            method: "post",
-            url: `${baseurl}/RequestEnrollUser`,
-            timeout: 1000 * 40, // Wait for 40 seconds
-            headers: {
-                "Content-Type": "application/json"
-            },
-            data: jobj
-            })
-            .then(response => {
-                onResponse({"at":"/RequestEnrollUser", "response":response.data});
-                if (response.data.result === 0) {
-                    setRegSentOTP(true);
-                    setRegUserError('');
-                } else {
-                    setRegSentOTP(false);
-                    setRegUserError(response.data.message);
-                }
-                setRegAcctLoading(false);
-            })
-            .catch(error => {
-                onError({"at":"/RequestEnrollUser", "error":error?.response?.data || error?.message || error});
-                setRegSentOTP(false);
-                setRegAcctLoading(false);
-            });
-    };
-
-    const confirmNewReg = (event) => {
-        event.preventDefault();
-
-        let jobj = {
-            "sessionid": sessionid || '',
-            "otp": regOTPNum, 
-            "accountNumber": regAccountNum
-        };
-        setRegOTPConfirming(true);
-
-        axios({
-            method: "post",
-            url: `${baseurl}/VerifyandEnrollUser`,
-            // timeout: 1000 * 40, // Wait for 40 seconds
-            headers: {
-                "Content-Type": "application/json"
-            },
-            data: jobj
-            })
-            .then(response => {
-                onResponse({"at":"/VerifyandEnrollUser", "response":response.data});
-                //   ----------------
-                setRegSentOTP(false);
-                setAcctOrCardNumber(response?.data?.accountNumber || '');
-                setRegOTPConfirming(false);
-                startTimer();
-                setOpenCreateAccount(false);
-            })
-            .catch(error => {
-                onError({"at":"/VerifyandEnrollUser", "error":error?.response?.data || error?.message || error})
-                //   ----------------
-                setRegOTPConfirming(false);
-            });
-    };
-
-    return (
-        <div>
-            {regSentOTP ? (<>
-                <Typography variant='h6' component={'div'} style={{ color:'#0a4e9c',textAlign:'center',fontWeight:'bold' }}>
-                    Account Verification
-                </Typography>
-
-                <Box
-                    sx={{ 
-                        flexGrow: 1,
-                        backgroundColor: '#fff',
-                        p: 2,
-                        mx: 'auto',
-                        minWidth: 300,
-                        maxWidth: 400,
-                    }}
-                >
-                    <Box
-                        sx={{
-                            flexGrow: 1,
-                            backgroundColor: '#0a4e9c',
-                            p:2,
-                            my: 2,
-                            mx: 3,
-                            borderRadius:3,
-                            color:'#fff'
-                        }}
-                    >
-                        <center>
-                            <img src={FTBAccountVerify} alt='Account Profile' />
-                            <div style={{ lineHeight:2 }}>Customer Name: <b>Pen Dara</b></div>
-                            <div style={{ lineHeight:2 }}>Account Number: <b>USD-00131</b></div>
-                        </center>
-                    </Box>
-
-                    {/* --------- FORM ERROR DISPLAY --------- */}
-                    <div 
-                        style={{ 
-                          color:'#ff0000',
-                          padding:'12px 40px ',
-                          fontSize:'12px',
-                          textAlign:'center',
-                        }}
-                    >Please input OTP send to your registered phone {'0xxxx xxx02'}.
-                    </div>
-
-                    <form onSubmit={(e)=>confirmNewReg(e)}>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <TextField
-                                    required
-                                    fullWidth
-                                    autoFocus
-                                    variant={'outlined'}
-                                    id="input-with-icon-otp-number"
-                                    label={regOTPNum?"OTP Number":''}
-                                    InputProps={{
-                                        startAdornment: (
-                                            <InputAdornment position="start">
-                                                <Https sx={{ color:'#0a4e9c' }}/>
-                                            </InputAdornment>
-                                        ),
-                                    }}
-                                    value={regOTPNum}
-                                    size="small"
-                                    autoComplete='off'
-                                    onKeyPress={(event) => {
-                                        if (!/[0-9.]/.test(event.key)) {
-                                            event.preventDefault();
-                                        }
-                                    }}
-                                    placeholder="OTP number"
-                                    onChange={(event) => {
-                                        setRegOTPNum(event.target.value);
-                                    }}
-                                    sx={{
-                                        '& fieldset': {
-                                            borderRadius: '30px',
-                                        },
-                                    }}
-                                />
-                            </Grid>
-                            
-                            {/* --------- OTP CONFIRM BUTTON --------- */}
-                            <Grid item xs={12}>
-                                <center>
-                                    <LoadingButton 
-                                        variant='contained'
-                                        type='submit'
-                                        loading={regOTPConfirming}
-                                        sx={{
-                                            borderRadius: '30px',
-                                            backgroundColor:'#0a4e9c',
-                                            '&:active, &:focus, &:hover': {
-                                                backgroundColor:'#053e88'
-                                            }
-                                        }}
-                                    >
-                                        &nbsp;Confirm&nbsp;
-                                    </LoadingButton>
-                                </center>
-                            </Grid>
-                        </Grid>
-                    </form>
-                </Box>
-            </>):(<>
-                <Typography variant='h6' component={'div'} style={{ color:'#0a4e9c',textAlign:'center',fontWeight:'bold' }}>
-                    Account Registration
-                </Typography>
-
-                <Box 
-                    sx={{ 
-                    flexGrow: 1,
-                    backgroundColor: '#fff',
-                    p: 2,
-                    mt: 2,
-                    mx: 'auto',
-                    minWidth: 300,
-                    maxWidth: 400,
-                    }}
-                >
-                    {/* --------- NEW ACCOUNT REGISTER --------- */}
-                    <form onSubmit={(e)=>newRegisterSubmit(e)}>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12}>
-                                <TextField
-                                    required
-                                    fullWidth
-                                    autoFocus
-                                    variant={'outlined'}
-                                    id="input-with-icon-account-number"
-                                    label={regAccountNum?"Account Number":''}
-                                    InputProps={{
-                                        startAdornment: (
-                                            <InputAdornment position="start">
-                                                <Person sx={{ color:'#0a4e9c' }}/>
-                                            </InputAdornment>
-                                        ),
-                                    }}
-                                    value={regAccountNum}
-                                    size="small"
-                                    autoComplete='off'
-                                    onKeyPress={(event) => {
-                                        if (!/[0-9.]/.test(event.key)) {
-                                            event.preventDefault();
-                                        }
-                                    }}
-                                    placeholder="Account number"
-                                    onChange={(event) => {
-                                        setRegAccountNum(event.target.value);
-                                    }}
-                                    sx={{
-                                        '& fieldset': {
-                                        borderRadius: '30px',
-                                        },
-                                    }}
-                                />
-                            </Grid>
-
-                            <Grid item xs={12}>
-                                <LocalizationProvider dateAdapter={AdapterDateFns}>
-                                    <MobileDatePicker
-                                        label={regDOB?"Date Of Birth":''}
-                                        inputFormat="MM/dd/yyyy"
-                                        value={regDOB}
-                                        disableFuture
-                                        onChange={(newValue) => {
-                                            setRegDOB(newValue);
-                                        }}
-                                        InputProps={{
-                                            startAdornment: (
-                                                <InputAdornment position="start">
-                                                    <CalendarMonth sx={{ color:'#0a4e9c' }}/>
-                                                </InputAdornment>
-                                            ),
-                                        }}
-                                        error={false}
-                                        helperText={null}
-                                        renderInput={(params) => 
-                                            <TextField 
-                                                {...params} 
-                                                required
-                                                fullWidth
-                                                size='small'
-                                                placeholder="Date Of Birth"
-                                                sx={{
-                                                    '& fieldset': {
-                                                        borderRadius: '30px',
-                                                    },
-                                                }}
-                                            />
-                                        }
-                                        
-                                    />
-                                </LocalizationProvider>
-                            </Grid>
-
-                            <Grid item xs={12}>
-                                <TextField
-                                    required
-                                    fullWidth
-                                    variant={'outlined'}
-                                    id="input-with-icon-mobile-number"
-                                    label={regMobileNum?"Mobile Number":''}
-                                    InputProps={{
-                                        startAdornment: (
-                                            <InputAdornment position="start">
-                                                <Phone sx={{ color:'#0a4e9c' }}/>
-                                            </InputAdornment>
-                                        ),
-                                    }}
-                                    value={regMobileNum}
-                                    size="small"
-                                    autoComplete='off'
-                                    onKeyPress={(event) => {
-                                        if (!/[0-9.]/.test(event.key)) {
-                                            event.preventDefault();
-                                        }
-                                    }}
-                                    placeholder="Mobile number"
-                                    onChange={(event) => {
-                                        setRegMobileNum(event.target.value);
-                                    }}
-                                    sx={{
-                                        '& fieldset': {
-                                            borderRadius: '30px',
-                                        },
-                                    }}
-                                />
-                            </Grid>
-
-                            {/* --------- FORM ERROR DISPLAY --------- */}
-                            <Grid item xs={12}>
-                                <div 
-                                    style={{ 
-                                        color:'#ff0000',
-                                        padding:'0px 40px ',
-                                        fontSize:'12px',
-                                        textAlign:'center',
-                                        display:!regUserError?'none':'block'
-                                    }}
-                                >
-                                    {regUserError}
-                                </div>
-                            </Grid>
-
-                            {/* --------- FORM SUBMIT BUTTON --------- */}
-                            <Grid item xs={12}>
-                                <center>
-                                    <LoadingButton 
-                                        variant='contained'
-                                        type='submit'
-                                        loading={regAcctLoading}
-                                        sx={{
-                                            borderRadius: '30px',
-                                            backgroundColor:'#0a4e9c',
-                                            '&:active, &:focus, &:hover': {
-                                                backgroundColor:'#053e88'
-                                            }
-                                        }}
-                                    >
-                                        &nbsp;Submit&nbsp;
-                                    </LoadingButton>
-                                </center>
-                            </Grid>
-                        </Grid>
-                    </form>
-                </Box>
-            </>)}
-        </div>
-    )
-};

package/src/Screens/FTBScreen/index.jsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import FTBxPAYPage from './FTB/FTBTransactionPage';
-import FTBName from '../../assets/ai Icon/ai Icon-2.png';
-import { useMediaQuery } from '@mui/material';
-import axios from 'axios';
-
-export default function FtbScreenIndex({config}) {
-    // consumer data
-    const { baseurl } = config;
-    // for calling only once (react18 useEffect calls twice)
-    const callingOnce = React.useRef(true);
-    // If its reloaded
-    const [pageReloaded, setPageReloaded] = React.useState(false);
-    // make page fullScreen or not
-    const largeScreen = useMediaQuery('(min-width:480px)');
-    
-    // session id and payment token id
-    const sessionid = sessionStorage.getItem("sessionid");
-    const paymenttokenid = sessionStorage.getItem("paymenttokenid");
-    // allow user to access payment gateway
-    const allowUser = sessionid && paymenttokenid
-
-    const onResponse = config?.onResponse
-        ? config.onResponse
-        : (data) => {
-            console.log("Page Response ::> ", data);
-        };
-    const onError = config?.onError
-        ? config.onError
-        : (err) => {
-            throw err;
-        };
-    
-    // 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});
-        } catch (error) {
-            onError({"at":"/CloseSession", "error":error?.response?.data || error?.message || error});
-        }
-    }
-
-    React.useEffect(() => {
-        if (performance?.navigation?.type === 1) {
-            setPageReloaded(true);
-            if(callingOnce.current) {
-                callingOnce.current=false;
-                CancelSession();
-            }
-            console.log("This page is reloaded");
-        } else if (performance?.navigation?.type === 2) {
-            setPageReloaded(true);
-            if(callingOnce.current) {
-                callingOnce.current=false;
-                CancelSession();
-            }
-            console.log("This page is back forwarded");
-        } else {
-            console.log("This page is navigated");
-        }
-
-        return()=>{}
-    });
-    
-    return (<center>
-        {pageReloaded?
-        <div style={{ padding:'2rem' }}>
-            <img src={FTBName} alt='FTB Name' width={300} />
-            <div style={{ color:'red',fontWeight:'600',padding:'2rem' }}>
-                Session has been closed. Please don't refresh/reload and back forward the page again!
-            </div>
-            <a href={config?.merchantUrl}>
-                Back to Merchant
-            </a>
-        </div>:<>
-            {allowUser ?
-                <FTBxPAYPage
-                    config={config}
-                    baseurl={baseurl}
-                    largeScreen={largeScreen}
-                    sessionid={sessionid}
-                    paymenttokenid={paymenttokenid}
-                    initialHours={0}   // default zero 
-                    initialMinutes={3} // default three 
-                    initialSeconds={0} // default zero 
-                />
-            :
-            <div style={{ padding:'2rem' }}>
-                <img src={FTBName} alt='FTB Name' width={300} />
-                <div style={{ color:'red',fontWeight:'600',padding:'2rem' }}>
-                    Please come through clicking the pay-now btn from Merchant Site!
-                </div>
-                <a href={config?.merchantUrl}>
-                    Back to Merchant
-                </a>
-            </div>}
-        </>}
-    </center>);
-}

package/src/Screens/index.jsx

@@ -1,2 +0,0 @@
-export * from './FTBScreen';
-export * from './BtnScreen';

package/src/index.css

@@ -1,40 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 14px;
- 
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
-
-p {
-  font-family: 'Source Sans Pro', sans-serif;
-}
-
-::-webkit-scrollbar{
-  width: 8px;
-}
-
-/* ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-  border-radius: 10px;
-  background-color: #f1f1f1;
-} */
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
-  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-  background-color: #f1f1f1;
-}

package/src/main.jsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App';
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)

package/vite.config.js

@@ -1,31 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), cssInjectedByJsPlugin()],
-  server: {
-    port: 3040
-  },
-  build: {
-    lib: {
-      entry: "src/Screens/index.jsx",
-      name: "xpayroute",
-      fileName: "xpayroute",
-    },
-
-    rollupOptions: {
-      external: ["react", "react-dom"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-        manualChunks: undefined,
-
-        // This is the important part
-      },
-    },
-  },
-})