@salesgenterp/ui-components 0.4.310 → 0.4.311

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import { Button, CircularProgress, TextField, Grid, Typography, Stack, Skeleton as Skeleton$1, CssBaseline, Box, InputAdornment, IconButton, TableHead, TableRow, Paper, TableContainer as TableContainer$2, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle, RadioGroup, Radio, FormControlLabel, FormControl, FormLabel, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox, Card, CardHeader, Tabs, Tab, Toolbar, Drawer, Tooltip, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent } from '@mui/material';
 import React__default, { useState, useEffect, forwardRef, createElement, memo, useCallback, useRef } from 'react';
-import { AiOutlineHome, AiOutlineRight, AiOutlineRise, AiOutlineShoppingCart, AiOutlineHeart, AiOutlineCreditCard, AiOutlineFileText, AiOutlineSetting, AiOutlineLeft, AiOutlineMinus, AiOutlinePlus, AiOutlineClose, AiOutlineDelete, AiOutlineCheckCircle, AiOutlineCheck } from 'react-icons/ai';
+import { AiOutlineHome, AiOutlineRight, AiOutlinePlus, AiOutlineRise, AiOutlineShoppingCart, AiOutlineHeart, AiOutlineCreditCard, AiOutlineFileText, AiOutlineSetting, AiOutlineLeft, AiOutlineMinus, AiOutlineClose, AiOutlineDelete, AiOutlineCheckCircle, AiOutlineCheck } from 'react-icons/ai';
 import styled, { ThemeProvider } from 'styled-components';
 import axios from 'axios';
 import { isEmpty, get, template, isPlainObject, includes, values, filter, cloneDeep, omit, sortBy, uniqBy, isObject, isNumber, remove, sumBy } from 'lodash';
@@ -1877,7 +1877,6 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     visible = _ref.visible,
     onCancel = _ref.onCancel,
     styles = _ref.styles,
-    fontColor = _ref.fontColor,
     customerId = _ref.customerId,
     setListUpdate = _ref.setListUpdate;
   var _useForm = useForm({
@@ -1885,7 +1884,8 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     }),
     handleSubmit = _useForm.handleSubmit,
     control = _useForm.control,
-    setValue = _useForm.setValue;
+    setValue = _useForm.setValue,
+    watch = _useForm.watch;
   var _useState = useState(false),
     submitLoading = _useState[0],
     setSubmitLoading = _useState[1];
@@ -1895,6 +1895,11 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
   var _useState3 = useState([]),
     states = _useState3[0],
     setStates = _useState3[1];
+  var cardNumber = watch('cardNumber');
+  var expirationYear = watch('expirationYear');
+  var expirationMonth = watch('expirationMonth');
+  var firstName = watch('firstName');
+  var lastName = watch('lastName');
   var getCountryData = function getCountryData() {
     try {
       var _temp = _catch(function () {
@@ -2001,7 +2006,11 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
       },
       onClick: onCancel
     }, "Cancel"))))
-  }, /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Cards, {
+    expiry: (expirationMonth || '') + " " + (expirationYear || '') || '----',
+    name: (firstName || '') + " " + (lastName || ''),
+    number: cardNumber || ''
+  }), /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     columnSpacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -2013,7 +2022,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     name: "firstName",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2023,7 +2032,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     name: "lastName",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -2033,7 +2042,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     type: "number",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2044,7 +2053,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     type: "number",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2055,7 +2064,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     type: "number",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2066,7 +2075,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     type: "number",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2080,7 +2089,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     valueKey: "id",
     labelKey: "code",
     onChangeField: onUpdateCountry,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2093,7 +2102,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     options: states,
     valueKey: "id",
     labelKey: "name",
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2103,7 +2112,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     name: "city",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2113,7 +2122,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
     name: "zipcode",
     required: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   }))))));
 };
 
@@ -2124,7 +2133,6 @@ var PaymentModal = function PaymentModal(_ref) {
     visible = _ref.visible,
     onCancel = _ref.onCancel,
     styles = _ref.styles,
-    fontColor = _ref.fontColor,
     orderId = _ref.orderId,
     storeIdList = _ref.storeIdList;
   var _useState = useState(),
@@ -2285,7 +2293,8 @@ var PaymentModal = function PaymentModal(_ref) {
       }
     },
     customerId: orderDto === null || orderDto === void 0 ? void 0 : orderDto.customerId,
-    setListUpdate: setListUpdate
+    setListUpdate: setListUpdate,
+    styles: styles
   }), visible && /*#__PURE__*/React__default.createElement(MuiModal, {
     onClose: onCancel,
     "aria-labelledby": "customized-dialog-title",
@@ -2337,7 +2346,7 @@ var PaymentModal = function PaymentModal(_ref) {
     type: "number",
     required: true,
     control: control,
-    fontColor: fontColor,
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor,
     max: orderDto === null || orderDto === void 0 ? void 0 : orderDto.dueAmount
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -2349,7 +2358,7 @@ var PaymentModal = function PaymentModal(_ref) {
     required: true,
     disabled: true,
     control: control,
-    fontColor: fontColor
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -2359,7 +2368,7 @@ var PaymentModal = function PaymentModal(_ref) {
     name: "paymentModeId",
     required: true,
     control: control,
-    fontColor: fontColor,
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor,
     valueKey: "id",
     labelKey: "name",
     options: (_filter = filter(paymentMethods || [], {
@@ -2385,7 +2394,7 @@ var PaymentModal = function PaymentModal(_ref) {
     name: "authorizeDotNetCard",
     required: true,
     control: control,
-    fontColor: fontColor,
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor,
     options: customerCreditCards === null || customerCreditCards === void 0 ? void 0 : (_customerCreditCards$4 = customerCreditCards.profile) === null || _customerCreditCards$4 === void 0 ? void 0 : (_customerCreditCards$5 = _customerCreditCards$4.paymentProfiles) === null || _customerCreditCards$5 === void 0 ? void 0 : _customerCreditCards$5.map(function (profile) {
       var _profile$payment, _profile$payment$cred, _profile$payment2, _profile$payment2$cre, _profile$payment2$cre2, _profile$payment2$cre3;
       return {
@@ -2394,12 +2403,17 @@ var PaymentModal = function PaymentModal(_ref) {
       };
     })
   })), /*#__PURE__*/React__default.createElement(MuiButton, {
-    variant: "outlined",
     onClick: function onClick() {
       setOpenAddNewCardModal(true);
       setValue('authorizeDotNetCard', null);
-    }
-  }, "Add New Card")))))));
+    },
+    primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
+    startIcon: /*#__PURE__*/React__default.createElement(AiOutlinePlus, {
+      style: {
+        fontSize: 'inherit'
+      }
+    })
+  }, /*#__PURE__*/React__default.createElement("span", null, "Add New Card"))))))));
 };
 
 var _templateObject$c, _templateObject2$6, _templateObject3$3, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
@@ -2422,6 +2436,7 @@ var Dashboard = function Dashboard(_ref) {
     serviceApiEndPoint = _ref.serviceApiEndPoint,
     token = _ref.token,
     queryParams = _ref.queryParams,
+    styles = _ref.styles,
     primaryColor = _ref.primaryColor,
     secondaryColor = _ref.secondaryColor,
     backgroundColor = _ref.backgroundColor,
@@ -2659,7 +2674,8 @@ var Dashboard = function Dashboard(_ref) {
         return Promise.reject(e);
       }
     },
-    orderId: isPaymentModal === null || isPaymentModal === void 0 ? void 0 : isPaymentModal.orderId
+    orderId: isPaymentModal === null || isPaymentModal === void 0 ? void 0 : isPaymentModal.orderId,
+    styles: styles
   }), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     columnSpacing: 4
@@ -4464,6 +4480,7 @@ var AccountDetails = function AccountDetails(_ref) {
           serviceApiEndPoint: serviceApiEndPoint,
           token: token,
           queryParams: queryParams,
+          styles: colors,
           primaryColor: colors.primaryColor,
           secondaryColor: colors.secondaryColor,
           backgroundColor: colors.backgroundColor,