authscape 1.0.121 → 1.0.122

package/components/Datatable.js

@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+//import {apiService} from 'authscape';
+import DataTable, {createTheme} from "react-data-table-component";
+
+export class Datatable extends Component {
+
+    static defaultProps = {
+        options: {}
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            pageNumber : 1,
+            pageLength : props.pageLength ? props.pageLength : 10,
+            data: [],
+            loading: false,
+            totalRows: 0
+        };
+    }
+
+    componentDidMount = async () => {
+        await this.GetDataFromUrl(this.state.pageNumber, this.state.pageLength, this.props.params);
+        createTheme('dataTable', {
+            text:{
+
+            }
+        })
+    }
+
+    reload = async (reset = false) => {
+      
+        if (reset === true)
+        {
+            this.setState({pageNumber: 1}, async () => {
+                await this.GetDataFromUrl(this.state.pageNumber, this.state.pageLength, this.props.params);
+            })
+        }
+        else
+        {
+            await this.GetDataFromUrl(this.state.pageNumber, this.state.pageLength, this.props.params);
+        }
+
+       
+    }
+
+    GetDataFromUrl = (page, length, postData = {}) => {
+
+        this.setState({
+            loading: true
+        }, async function () {
+
+            let data = postData;
+
+            data.offset = page;
+            data.length = length;
+
+            let response = null;
+            if (this.props.methodType == "get")
+            {
+                response = await apiService().get(this.props.url);
+            }
+            else
+            {
+                response = await apiService().post(this.props.url, postData);
+            }
+            
+            if (response != null && response.status === 200)
+            {
+                if (this.props.returnResult != null)
+                {
+                    this.props.returnResult(response.data.data);
+                }
+
+                this.setState({
+                    totalRows: response.data.recordsTotal,
+                    data: response.data.data,
+                    loading: false
+                });
+            }
+            else
+            {
+                //console.error(response.status + " - " + response.data);
+            }
+
+        });
+        
+    }
+
+    handlePageChange = async page => {
+        const { pageLength } = this.state;
+        this.setState({pageNumber: page});
+        await this.GetDataFromUrl(page, pageLength, this.props.params);
+    };
+
+    render() {
+
+        return (
+        <div>
+                <DataTable
+                    title={this.props.title}
+                    columns={this.props.columns}
+                    data={this.state.data}
+                    paginationRowsPerPageOptions={this.props.pageLength ? [this.props.pageLength] : [10]}
+                    progressPending={this.state.loading}
+                    //customStyles={this.props.customStyles}
+                    paginationPerPage={this.props.pageLength ? this.props.pageLength : 10}
+                    paginationServer
+                    pagination
+                    {...this.props.options}
+                    //expandableRows={this.props.expandableRows}
+                    //expandableRowsComponent={this.props.expandableRowsComponent}
+                    paginationTotalRows={this.state.totalRows}
+                    // onChangeRowsPerPage={this.handlePerRowsChange}
+                    onChangePage={this.handlePageChange}
+                    noDataComponent={this.props.noDataComponent}
+                />
+        </div>);
+    }
+}

package/components/FileUploader.js

@@ -0,0 +1,346 @@
+import React, { useState, useRef, useEffect } from "react";
+import { apiService } from "../services/authService";
+import LinearProgress from "@mui/material/LinearProgress";
+import { Box } from "@mui/system";
+import { Grid } from "@mui/material";
+import FileCopyRoundedIcon from "@mui/icons-material/FileCopyRounded";
+import UploadRoundedIcon from "@mui/icons-material/UploadRounded";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import IconButton from "@mui/material/IconButton";
+import DeleteIcon from "@mui/icons-material/Delete";
+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";
+import Tooltip from '@mui/material/Tooltip';
+import Backdrop from '@mui/material/Backdrop';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function FileUploader({
+  url,
+  params,
+  multiple = false,
+  fileLoaderUri = null,
+  children,
+  isHidden = false,
+  refOveride = null,
+  primaryColor = "#000",
+  deleteUri = "/Storage/RemoveFile?orderFileId="
+}) {
+  // Declare a new state variable, which we'll call "count"
+  const [message, setMessage] = useState("");
+  const [loaded, setLoaded] = useState(0);
+  // const [selectedFile, setSelectedFile] = useState(null);
+  const [uploading, setUploading] = useState(false);
+
+  const [viewDeleteDialog, setViewDeleteDialog] = useState(false);
+
+  const [filesUploaded, setFilesUploaded] = useState([]);
+
+  const [orderFileId, setOrderFileId] = useState(null);
+
+  const [filesDownloadable, setFilesDownloadable] = useState(null);
+
+  const [parameters, setParameters] = useState([]);
+
+  const fileUploader = useRef();
+
+  const handleUpload = async (event) => {
+    let selectedFiles = event.target.files;
+
+    setLoaded(0);
+    setMessage(event.target.files[0] ? event.target.files[0].name : "");
+
+    if (uploading) return;
+    if (!selectedFiles) {
+      setMessage("Select a file first");
+      return;
+    }
+
+    setUploading(true);
+
+    let fileCount = selectedFiles.length;
+    let fileIndex = 1;
+
+    for (
+      let selectedIndex = 0;
+      selectedIndex < selectedFiles.length;
+      selectedIndex++
+    ) {
+      const selectedFile = selectedFiles[selectedIndex];
+
+      const data = new FormData();
+      data.append("file", selectedFile, selectedFile.name);
+
+      for (let index = 0; index < parameters.length; index++) {
+        const element = parameters[index];
+        data.append(element.key, element.value);
+      }
+
+      try {
+        await apiService().post(url, data, {
+          onUploadProgress: (ProgressEvent) => {
+            let loadedTotal = Math.round(
+              (ProgressEvent.loaded / ProgressEvent.total) * 100
+            );
+            let percent = (fileIndex / fileCount) * 100;
+            setLoaded(percent);
+
+            if (percent == 100) {
+              setTimeout(() => {
+                setLoaded(0);
+                setMessage("");
+                reloadFiles();
+              }, 2000);
+            }
+          },
+        });
+      } catch (err) {
+        setUploading(false);
+        setMessage("Failed to upload");
+      }
+
+      fileIndex++;
+    }
+
+    setUploading(false);
+    setMessage("Uploaded successfully");
+  };
+
+  const handleUploadFileInput = () => {
+    fileUploader.current.click();
+  };
+
+  useEffect(() => {
+    if (params != null) {
+      const propertyNames = Object.keys(params);
+      const propertyValues = Object.values(params);
+
+      let array = [];
+
+      for (let index = 0; index < propertyNames.length; index++) {
+        array.push({
+          key: propertyNames[0],
+          value: propertyValues[0],
+        });
+      }
+
+      setParameters(array);
+    }
+  }, [params]);
+
+  const reloadFiles = async () => {
+    let response = await apiService().get(fileLoaderUri);
+    if (response != null && response.status == 200) {
+      setFilesDownloadable(response.data);
+    }
+  };
+
+  useEffect(() => {
+    if (fileLoaderUri != null) {
+      const fetchAsync = async () => {
+        await reloadFiles();
+      };
+      fetchAsync();
+    }
+  }, [fileLoaderUri]);
+
+  return (
+    <Box sx={{ marginTop: 1, display: isHidden ? "none" : "block" }}>
+      
+      <input
+        className="inputfile"
+        id="file"
+        type="file"
+        name="file"
+        multiple={multiple}
+        ref={fileUploader}
+        onChange={handleUpload}
+        style={{ display: "none" }}
+      />
+
+      <Grid container spacing={2}>
+        <Grid ref={refOveride} item xs={4} onClick={handleUploadFileInput}>
+          <Grid
+            container
+            sx={{
+              padding: 2,
+              backgroundColor: "#ECEDED",
+              fontSize: "14px",
+              cursor: "pointer",
+              borderRadius: "8px",
+              border: "1px dashed #C8D4D5",
+            }}
+          >
+            <Grid item xs={2}>
+              <Box>
+                <FileCopyRoundedIcon
+                  sx={{ fill: "#C8D4D5", width: 50, height: 50 }}
+                />
+              </Box>
+            </Grid>
+            <Grid item xs={10}>
+              <Box>Drag and drop files here or</Box>
+              <Box sx={{ marginTop: 1 }}>
+                <Stack direction="row" spacing={2}>
+                  <UploadRoundedIcon
+                    sx={{ fill: primaryColor, width: 30, height: 30 }}
+                  />
+                  <Typography
+                    variant="h3"
+                    component={"span"}
+                    sx={{ color: primaryColor, paddingTop: 0.6 }}
+                  >
+                    Upload
+                  </Typography>
+                </Stack>
+              </Box>
+            </Grid>
+            <Grid item xs={12}>
+              {loaded > 0 && (
+                <LinearProgress
+                  variant="buffer"
+                  value={loaded}
+                  sx={{ marginTop: 2 }}
+                />
+              )}
+
+              {loaded == 100 && (
+                <Typography
+                  variant="h3"
+                  component={"span"}
+                  sx={{ color: primaryColor, paddingTop: 0.6 }}>
+                  Completed
+                </Typography>
+              )}
+            </Grid>
+          </Grid>
+        </Grid>
+
+        {children}
+
+        <Grid container sx={{ paddingTop: 1 }}>
+          {filesDownloadable != null &&
+            filesDownloadable.map((fileUpload, idx) => {
+              return (
+                <Grid
+                  key={"fileDownloadable-" + idx}
+                  item
+                  xs={8}
+                  sm={8}
+                  md={5}
+                  lg={3}
+                  sx={{
+                    marginLeft: 2,
+                    padding: 1,
+                    marginTop: 1,
+                    backgroundColor: "#ECEDED",
+                    position: "relative",
+                    fontSize: "14px",
+                    cursor: "pointer",
+                    borderRadius: "8px",
+                    border: "1px solid #54C7DD",
+                  }}
+                  onClick={async () => {
+                    window.open(fileUpload.uri);
+                  }}
+                >
+                  <Tooltip placement="left" arrow title={fileUpload.name}>
+                    <Stack    
+                      direction="row"
+                      spacing={1}
+                      display="flex"
+                      justifyContent={"space-between"}
+                    >
+                      <Box display={"flex"} alignItems="center">
+                        <FileDownloadOutlinedIcon sx={{ fill: "#92D6E3" }} />
+                        <Box
+                          sx={{
+                            paddingTop: 0.6,
+                            marginLeft: "5px",
+                          }}
+                        >
+                          <Typography
+                            sx={{
+                              overflow: "hidden",
+                              whiteSpace: "nowrap",
+                              textOverflow: "ellipsis",
+                              width:"350px"
+                            }}
+                          >
+                            {fileUpload.name}
+                          </Typography>
+                        </Box>
+
+                        <IconButton
+                          aria-label="delete"
+                          sx={{ position: "absolute", right: "0" }}
+                          onClick={(evt) => {
+                            evt.stopPropagation();
+                            setOrderFileId(fileUpload.id);
+                            setViewDeleteDialog(true);
+                          }}
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      </Box>
+                    </Stack>
+                  </Tooltip>
+                </Grid>
+              );
+            })}
+        </Grid>
+      </Grid>
+
+      <Dialog
+        open={viewDeleteDialog}
+        fullWidth={true}
+        maxWidth={"xs"}
+        onClose={() => {
+          setViewDeleteDialog(false);
+        }}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description">
+        <DialogTitle id="alert-dialog-title">Remove File</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            Are you sure you want to remove this file?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              setViewDeleteDialog(false);
+            }}
+          >
+            No
+          </Button>
+          <Button
+            onClick={async () => {
+
+                let response = await apiService().delete(
+                  deleteUri + orderFileId
+              );
+              if (response != null && response.status == 200) {
+                setViewDeleteDialog(false);
+                await reloadFiles();
+              }
+
+            }}
+            autoFocus
+          >
+            Yes
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+        <Backdrop sx={{ color: '#fff', zIndex: 99999 }} open={uploading}>
+          <CircularProgress color="inherit" />
+        </Backdrop>
+    </Box>
+  );
+}

package/jsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.121",
+  "version": "1.0.122",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -8,8 +8,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@stripe/react-stripe-js": "^2.1.0",
+    "@stripe/stripe-js": "^1.53.0",
+    "axios": "^1.4.0",
+    "js-file-download": "^0.4.12",
     "next": "13.4.4",
+    "nookies": "^2.5.2",
+    "query-string": "^8.1.0",
     "react": "18.2.0",
+    "react-data-table-component": "^7.5.3",
     "react-dom": "18.2.0"
   }
 }

package/pages/Test.js

@@ -1,8 +0,0 @@
-
-export default function Test() {
-  return (
-    <div>
-      This is a test
-    </div>
-  )
-}

package/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>