authscape 1.0.50 → 1.0.55

package/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-react", "@babel/preset-env"]
+}

package/components/modals/payment/confirmationModal.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+export default function confirmationModal({title, description, cancelClicked, okClicked, open = false, cancelTitle = "Cancel", okTitle = "OK"}) {
+    return (
+        <Dialog
+            open={open}
+            onClose={cancelClicked}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description">
+            <DialogTitle id="alert-dialog-title">
+                {title}
+            </DialogTitle>
+            <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+                {description}
+            </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+            <Button onClick={cancelClicked}>{cancelTitle}</Button>
+            <Button onClick={okClicked}>
+                {okTitle}
+            </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/components/modals/payment/paymentModal.js

@@ -0,0 +1,220 @@
+import React, {useEffect, useState} from 'react';
+import {Elements} from '@stripe/react-stripe-js';
+import {loadStripe} from '@stripe/stripe-js';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import CheckoutForm from './checkoutForm';
+import ApiService from 'authscape/services/apiService';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '@mui/material/Button';
+import PaymentRoundedIcon from '@mui/icons-material/PaymentRounded';
+import apiService from 'authscape/services/apiService';
+import Grid from '@mui/material/Grid';
+
+export default function PaymentModal({title, description, amount, priceId, setIsLoading, isOpen, invoiceId, onModalClose}) {
+
+    const stripePromise = loadStripe(process.env.stripePublicKey);
+    const [options, setOptions] = useState(null);
+    const [value, setValue] = React.useState(0);
+    const [paymentMethods, setPaymentMethods] = React.useState([]);
+    const [paymentMethod, setPaymentMethod] = React.useState(null);
+
+    const paymentMethodOpened = async () => {
+        let response = await ApiService().post("/StripePayment/ConnectCustomer", {
+            paymentRequestType: 3,
+            amount: amount,
+            priceId: priceId
+        });
+
+        setOptions({
+            clientSecret: response.data,
+        });
+
+        let responsePayments = await ApiService().get("/NCAInvoices/GetPaymentMethods");
+        if (responsePayments != null && responsePayments.status == 200)
+        {
+            setPaymentMethods(responsePayments.data);
+        }
+    }
+
+
+    useEffect(() => {
+
+        if (isOpen)
+        {
+            paymentMethodOpened();
+        }
+
+    }, [isOpen]);
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    function a11yProps(index) {
+        return {
+          id: `simple-tab-${index}`,
+          'aria-controls': `simple-tabpanel-${index}`,
+        };
+    }
+
+    const PaymentMethod = ({id, last4, clicked}) => {
+        return (
+            <Box fullWidth={true} sx={{height: 160, width:"100%", marginTop:2, backgroundColor:"#2196F3", position:"relative", border: "1px solid #2196F3", borderRadius: 1, display:"flex", flexDirection:"column", justifyContent:"center", textAlign:"center", cursor:"pointer"}}
+                onClick={() => {
+                    clicked(id);
+                }}>
+                <Typography gutterBottom variant="body" component="div" sx={{fontSize:14, position:"absolute", left:15, top:10, color:"white"}}>
+                    Visa
+                </Typography>
+                <Typography gutterBottom variant="body" component="div" sx={{verticalAlign:"middle", fontSize:18, color:"white"}}>
+                    * * * * &nbsp; * * * * &nbsp; * * * * &nbsp; {last4}
+                </Typography>
+
+                <Grid container spacing={1} sx={{position:"absolute", bottom:8, marginLeft:0, width: "100%"}}>
+                    <Grid item xs={6} sx={{paddingLeft:2}}>
+                        <Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:1, paddingLeft:1, color:"#e9e9e9"}}>
+                            CARD HOLDER
+                        </Typography>
+
+                        <Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:"-9px", paddingLeft:1, color:"white" }}>
+                            Brandon Zuech
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={6} sx={{textAlign:"right", paddingRight:2}}>
+                        <Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:1, color:"#e9e9e9"}}>
+                            EXPIRES
+                        </Typography>
+
+                        <Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:"-9px", color:"white"}}>
+                            08/21
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Box>
+        );
+    };
+
+    function TabPanel(props) {
+        const { children, value, index, ...other } = props;
+      
+        return (
+          <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+          >
+            {value === index && (
+              <Box sx={{ p: 3 }}>
+                <Typography>{children}</Typography>
+              </Box>
+            )}
+          </div>
+        );
+    }
+
+    return (
+            <Dialog
+                fullWidth={true}
+                maxWidth={"sm"}
+                open={isOpen}
+                onClose={() => onModalClose()}>
+                <DialogTitle>{title}
+                
+                    <IconButton
+                        aria-label="close"
+                        onClick={() => {
+                            
+                            onModalClose();
+                        }}
+                        sx={{
+                            position: 'absolute',
+                            right: 8,
+                            top: 8,
+                            color: (theme) => theme.palette.grey[500],
+                        }}>
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    {description}
+
+                    <Box sx={{ width: '100%' }}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                            <Tab label="Existing Payment Method" {...a11yProps(0)} />
+                            <Tab label="Add Payment Method" {...a11yProps(1)} />
+                            </Tabs>
+                        </Box>
+                        <TabPanel value={value} index={0}>
+                            
+                            <Select
+                                sx={{marginTop:4}}
+                                fullWidth={true}
+                                id="demo-simple-select"
+                                value={paymentMethod}
+                                onChange={(val) => {
+                                    setPaymentMethod(val.target.value);
+                                }}>
+                                    {paymentMethods != null && paymentMethods.map((paymentMethod) => {
+                                        return (
+                                        <MenuItem value={paymentMethod.id} fullWidth={true} sx={{width:"100%"}}>
+                                            <PaymentMethod id={paymentMethod.id} last4={paymentMethod.last4} clicked={() => {
+
+                                            }} />
+                                        </MenuItem>)
+                                    })}
+                            </Select>
+
+                            <Button startIcon={<PaymentRoundedIcon/>} type="submit" variant="contained" disabled={paymentMethod == null} sx={{marginTop:2}} onClick={async () => {
+
+                                setIsLoading(true);
+                                let response = await apiService().post("/NCAInvoices/PayInvoice", {
+                                    InvoiceId: invoiceId,
+                                    WalletId: paymentMethod
+                                });
+                                setIsLoading(false);
+
+                                if (response != null && response.status == 200)
+                                {
+                                    window.location.reload();
+                                }
+                                else
+                                {
+                                    alert("We had an issue with the payment method");
+                                }
+                                
+
+                            }}>Pay Now</Button>
+
+                        </TabPanel>
+                        <TabPanel value={value} index={1}>
+                            <div>
+                                <Box mt={4} mb={2}>
+                                    {options != null &&
+                                        <Elements stripe={stripePromise} options={options}>
+                                            <CheckoutForm />
+                                        </Elements>
+                                    }
+                                </Box>
+                            </div>
+                        </TabPanel>
+                    </Box>
+
+                </DialogContent>
+                <DialogActions>
+                </DialogActions>
+            </Dialog>
+    )
+}

package/index.js

@@ -1,6 +1,13 @@
-function awesomeEmojiLog(message) {
-    if (message === undefined) throw new Error("No Message Found");
-    console.log("😎", message)
-};
+import React, { Component } from 'react';
 
-module.exports = awesomeEmojiLog
+export default class DummyComponent extends Component {
+
+    render () {
+
+        return (
+            <div>I am a dummy react npm module</div>
+        )
+
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.50",
+  "version": "1.0.55",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -10,8 +10,13 @@
   "author": "zuechb",
   "license": "ISC",
   "dependencies": {
+    "@babel/cli": "^7.18.6",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.6",
     "@stripe/react-stripe-js": "^1.9.0",
     "@stripe/stripe-js": "^1.32.0",