@salesgenterp/ui-components 0.4.93 → 0.4.95

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { Stack, Tooltip, TableCell, TableContainer as TableContainer$1, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent, TableHead as TableHead$1, Paper, TablePagination, Typography, CardMedia, CardContent, Button, ListItemIcon, Collapse, Divider, List, ListItemText, ListItem, CssBaseline, Drawer } from '@mui/material';
+import { Stack, Tooltip, TableCell, TableContainer as TableContainer$1, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent, TableHead as TableHead$1, Paper, TablePagination, Typography, CardMedia, CardContent, Button, ListItemIcon, ListItem, Collapse, Divider, List, ListItemText, CssBaseline, Toolbar, IconButton, Box as Box$1, Drawer } from '@mui/material';
 import React__default, { useState, useEffect, createElement, forwardRef } from 'react';
 import { GrClose, GrRadialSelected, GrStackOverflow } from 'react-icons/gr';
 import 'react-icons/gi';
@@ -15,15 +15,15 @@ import TableRow$1 from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import { BiNotepad, BiWallet } from 'react-icons/bi';
 import { CgProfile } from 'react-icons/cg';
-import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdPersonOutline, MdOutlineCall, MdMailOutline, MdMonetizationOn, MdRemoveRedEye, MdOutlineFileDownload, MdExpandMore, MdExpandLess, MdDashboard } from 'react-icons/md';
+import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdPersonOutline, MdOutlineCall, MdMailOutline, MdMonetizationOn, MdRemoveRedEye, MdOutlineFileDownload, MdExpandMore, MdExpandLess, MdDashboard, MdShoppingCart, MdPeopleAlt, MdLibraryBooks, MdOutlineMenuOpen, MdMenu } from 'react-icons/md';
 import { Controller, useForm } from 'react-hook-form';
 import { HiOutlineChevronDown } from 'react-icons/hi';
 import Cards from 'react-credit-cards';
 import { FiTruck } from 'react-icons/fi';
+import { styled as styled$1, useTheme } from '@mui/material/styles';
 import moment from 'moment';
 import { isEmpty, get, isPlainObject } from 'lodash';
 import axios from 'axios';
-import { makeStyles, createStyles } from '@mui/styles';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -3489,8 +3489,8 @@ function _finallyRethrows(body, finalizer) {
 
 var API_END_POINT = '';
 var STORAGE_KEYS = {
-  ACCESS_TOKEN: 'accessToken',
-  REFRESH_TOKEN: 'refreshToken',
+  ACCESS_TOKEN: 'token',
+  REFRESH_TOKEN: 'Retoken',
   TABLE_STATE: 'TABLE_STATE',
   TABLE_DATA: 'TABLE_DATA'
 };
@@ -3554,6 +3554,22 @@ var getLocalTime = function getLocalTime(_ref) {
 
   return convertedTime;
 };
+function hexToRgbA(hex) {
+  var c;
+
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    c = hex.substring(1).split('');
+
+    if (c.length == 3) {
+      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+    }
+
+    c = '0x' + c.join('');
+    return [c >> 16 & 255, c >> 8 & 255, c & 255].join(',');
+  }
+
+  throw new Error('Bad Hex');
+}
 
 var erLocalStorage = {
   setItem: function setItem(key, value) {
@@ -4246,6 +4262,8 @@ var Dashboard = function Dashboard(_ref) {
       dashboardData = _useState2[0],
       setDashboardData = _useState2[1];
 
+  var _useState3 = useState([null, null]);
+
   var getJSONItem = erLocalStorage.getJSONItem;
   var STORE_IDS = STORAGE_KEYS.STORE_IDS;
 
@@ -4333,7 +4351,7 @@ var Dashboard = function Dashboard(_ref) {
         }
       }, /*#__PURE__*/React__default.createElement(MdRemoveRedEye, {
         style: {
-          fontSize: 26
+          fontSize: '2rem'
         }
       })), /*#__PURE__*/React__default.createElement(Button, {
         onClick: function onClick() {
@@ -4381,12 +4399,16 @@ var Dashboard = function Dashboard(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer, {
     primaryColor: primaryColor,
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("strong", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerDto) === null || _customerData$custome === void 0 ? void 0 : _customerData$custome.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
+  }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("b", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerDto) === null || _customerData$custome === void 0 ? void 0 : _customerData$custome.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h4",
     gutterBottom: true,
     backgroundColor: backgroundColor,
     fontColor: fontColor
-  }, "Welcome Back To Your Dashboard")), /*#__PURE__*/React__default.createElement(CardContainer, {
+  }, /*#__PURE__*/React__default.createElement("b", {
+    style: {
+      fontSize: '2rem'
+    }
+  }, "Welcome Back To Your Dashboard"))), /*#__PURE__*/React__default.createElement(CardContainer, {
     primaryColor: primaryColor,
     secondaryColor: secondaryColor
   }, /*#__PURE__*/React__default.createElement(CardContent, {
@@ -4414,7 +4436,7 @@ var Dashboard = function Dashboard(_ref) {
     primaryColor: primaryColor,
     secondaryColor: secondaryColor,
     fontColor: fontColor
-  }, /*#__PURE__*/React__default.createElement("strong", null, /*#__PURE__*/React__default.createElement("span", null, "Meet Your "), "Account Representative")), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement("b", null, /*#__PURE__*/React__default.createElement("span", null, "Meet Your "), "Account Representative")), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -4518,13 +4540,11 @@ var Dashboard = function Dashboard(_ref) {
     fontColor: fontColor
   })));
 };
-var Root$1 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 2rem;\n"])), function (props) {
-  return props.backgroundColor;
-});
-var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  strong {\n    color: ", ";\n    font-size: 2.5rem;\n  }\n"])), function (props) {
+var Root$1 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose([""])));
+var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  b {\n    color: ", ";\n    font-size: 2.5rem;\n  }\n"])), function (props) {
   return props.primaryColor;
 });
-var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  strong {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
+var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  b {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
   return props.primaryColor;
 }, function (props) {
   return props.fontColor;
@@ -4537,7 +4557,7 @@ var CardContainer = styled(Stack)(_templateObject6$8 || (_templateObject6$8 = _t
   return props.secondaryColor;
 });
 var TotalRoot = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n"])));
-var TotalContainer = styled(Stack)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background-color: ", ";\n  padding: 1.5rem 1rem;\n  box-shadow: 0px 0px 4px 0px;\n  p {\n    font-size: 18px;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 27px;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 38px;\n    color: ", ";\n  }\n"])), function (props) {
+var TotalContainer = styled(Stack)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background-color: ", ";\n  padding: 1.5rem 1rem;\n  box-shadow: 0px 0px 4px 0px;\n  p {\n    font-size: 1.2rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 2rem;\n    color: ", ";\n  }\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
@@ -4552,14 +4572,16 @@ var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
       onClick = props.onClick,
       link = props.link,
-      children = props.children;
+      children = props.children,
+      primaryColor = props.primaryColor;
 
   if (!link || typeof link !== 'string') {
     return /*#__PURE__*/React__default.createElement(ListItem, {
       button: true,
       className: className,
       children: children,
-      onClick: onClick
+      onClick: onClick,
+      primaryColor: primaryColor
     });
   }
 
@@ -4583,8 +4605,9 @@ var SideMenuItem = function SideMenuItem(props) {
       link = props.link,
       Icon = props.Icon,
       _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items;
-  var classes = useStyles();
+      items = _props$items === void 0 ? [] : _props$items,
+      primaryColor = props.primaryColor,
+      list = props.list;
   var isExpandable = items && items.length > 0;
 
   var _React$useState = React__default.useState(false),
@@ -4595,10 +4618,12 @@ var SideMenuItem = function SideMenuItem(props) {
     setOpen(!open);
   }
 
-  var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponent, {
-    className: classes.menuItem,
+  var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponentContainer, {
     link: link,
-    onClick: handleClick
+    onClick: handleClick,
+    primaryColor: primaryColor,
+    open: open,
+    list: list
   }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(ListItemText, {
     primary: name,
     inset: !Icon
@@ -4612,63 +4637,179 @@ var SideMenuItem = function SideMenuItem(props) {
     disablePadding: true
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
-      key: index
+      key: index,
+      primaryColor: primaryColor,
+      list: true
     }));
   }))) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
 };
-
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    menuItem: {
-      '&.active': {
-        background: 'rgba(0, 0, 0, 0.08)',
-        '& .MuiListItemIcon-root': {
-          color: '#fff'
-        }
-      }
+var ListItemIconContainer = styled(ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n  min-width: 40px;\n"])));
+var SideMenuItemComponentContainer = styled$1(SideMenuItemComponent)(function (_ref) {
+  var primaryColor = _ref.primaryColor,
+      list = _ref.list;
+  return {
+    background: list ? "rgba(" + hexToRgbA(primaryColor) + ",0.9)" : "rgba(" + hexToRgbA(primaryColor) + ")",
+    color: '#fff',
+    '& .MuiTypography-root': {
+      fontWeight: '600 '
+    },
+    '&:hover': {
+      background: "rgba(" + hexToRgbA(primaryColor) + ",0.8)"
+    },
+    '& svg': {
+      fontSize: 22
     }
-  });
+  };
 });
-var ListItemIconContainer = styled(ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n"])));
 
 var sideMenuItems = [{
-  name: 'Dashboard',
-  Icon: MdDashboard
+  name: 'My Account',
+  Icon: MdDashboard,
+  items: [{
+    name: 'Dashboard',
+    link: '/',
+    Icon: MdDashboard
+  }, {
+    name: 'My Profile',
+    link: '/',
+    Icon: MdDashboard
+  }, {
+    name: 'Store List',
+    link: '/',
+    Icon: MdDashboard
+  }, {
+    name: 'Statement',
+    link: '/',
+    Icon: MdDashboard
+  }, {
+    name: 'Change Password',
+    link: '/',
+    Icon: MdDashboard
+  }]
+}, {
+  name: 'Order Information',
+  Icon: MdShoppingCart,
+  items: [{
+    name: 'Orders list',
+    link: '/orders',
+    Icon: MdShoppingCart
+  }, {
+    name: 'Return Orders list',
+    link: '/orders',
+    Icon: MdShoppingCart
+  }, {
+    name: 'Wishlist',
+    link: '/orders',
+    Icon: MdShoppingCart
+  }]
+}, {
+  name: 'Payment Information',
+  Icon: MdPeopleAlt,
+  items: [{
+    name: 'Payment List',
+    link: '/customers',
+    Icon: MdPeopleAlt
+  }, {
+    name: 'Store Credit History',
+    link: '/customers',
+    Icon: MdPeopleAlt
+  }, {
+    name: 'Saved Cards',
+    link: '/customers',
+    Icon: MdPeopleAlt
+  }]
+}, {
+  name: 'Nested Pages',
+  Icon: MdLibraryBooks,
+  items: [{
+    name: 'Deals List',
+    link: '/deals',
+    Icon: MdLibraryBooks
+  }]
 }];
 
-var SideMenu = function SideMenu() {
+var SideMenu = function SideMenu(props) {
   return /*#__PURE__*/React__default.createElement(List, {
     component: "nav",
     disablePadding: true
   }, sideMenuItems.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
-      key: index
+      key: index,
+      primaryColor: props.primaryColor
     }));
   }));
 };
 
-var _templateObject$c, _templateObject2$b, _templateObject3$b;
+var _templateObject$c, _templateObject2$b;
+var drawerWidth = 240;
 
 var AccountDetails = function AccountDetails(_ref) {
   var _ref$apiEndPoint = _ref.apiEndPoint,
       apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
       _ref$token = _ref.token,
-      token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NDk5MzU2OCwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjQ5NTc1NjgsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.AZ9BKlpRSQwQtTztiPu8VEYjd3N0zCa6lmKFEtXr8JU' : _ref$token,
+      token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTA4MTY4NiwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjUwNDU2ODYsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.hSh-gHrQHVRjEAnHEpcRwNN0XcGdyZr6G2dINAHC9Ns' : _ref$token,
       _ref$primaryColor = _ref.primaryColor,
       primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor,
       secondaryColor = _ref.secondaryColor,
       backgroundColor = _ref.backgroundColor,
       _ref$fontColor = _ref.fontColor,
-      fontColor = _ref$fontColor === void 0 ? '#000' : _ref$fontColor;
+      fontColor = _ref$fontColor === void 0 ? '#000000D9' : _ref$fontColor;
+  var theme = useTheme();
+
+  var _useState = useState(true),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handleDrawerOpen = function handleDrawerOpen() {
+    setOpen(function (prev) {
+      return !prev;
+    });
+  };
+
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$2, {
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    sx: {
+      display: 'flex'
+    }
   }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
-    variant: "permanent",
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    sx: {
+      width: drawerWidth,
+      flexShrink: 0,
+      '& .MuiDrawer-paper': {
+        width: drawerWidth,
+        boxSizing: 'border-box'
+      }
+    },
+    variant: "persistent",
+    anchor: "left",
+    open: open
   }, /*#__PURE__*/React__default.createElement(SideMenu, {
     primaryColor: primaryColor
-  })), /*#__PURE__*/React__default.createElement(Main, null, /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
+  })), /*#__PURE__*/React__default.createElement(Main, {
+    open: open
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Toolbar, {
+    style: {
+      padding: '0 2px',
+      minHeight: 32
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleDrawerOpen,
+    edge: "start",
+    sx: {
+      mr: 2,
+      '& svg': {
+        fontSize: 26
+      }
+    }
+  }, open ? /*#__PURE__*/React__default.createElement(MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(MdMenu, null)), /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "h6",
+    noWrap: true,
+    component: "div"
+  }, "Dashboard"))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
     apiEndPoint: apiEndPoint,
     token: token,
     primaryColor: primaryColor,
@@ -4677,13 +4818,31 @@ var AccountDetails = function AccountDetails(_ref) {
     fontColor: fontColor
   })))));
 };
-var Root$2 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  // background-color: ", "30;\n"])), function (props) {
-  return props.primaryColor;
-});
-var Main = styled.main(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  overflow: auto;\n"])));
-var ContainerDrawer = styled(Drawer)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .MuiDrawer-paper {\n    position: relative;\n    white-space: nowrap;\n    width: 240px;\n    background-color: ", ";\n    color: #fff;\n    z-index: 1;\n  }\n"])), function (props) {
-  return props.primaryColor;
+var Root$2 = styled(Box$1)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose([""])));
+var Main = styled$1('main', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'open';
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      open = _ref2.open;
+  return _extends({
+    flexGrow: 1,
+    padding: "0 " + theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    marginLeft: "-" + drawerWidth + "px"
+  }, open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    marginLeft: 0
+  });
 });
+var ContainerDrawer = styled(Drawer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .MuiDrawer-paper {\n    position: relative;\n    width: 240px;\n    z-index: 1;\n    overflow: hidden;\n  }\n"])));
 
 var Breakpoint = function Breakpoint() {};