@salesgenterp/ui-components 0.4.555 → 0.4.557

package/dist/index.js

@@ -683,6 +683,63 @@ function useSystemFeatureList(_ref) {
     status: status
   };
 }
+function useSystemFeatureByFieldName(_ref2) {
+  var apiEndPoint = _ref2.apiEndPoint,
+    token = _ref2.token,
+    moduleName = _ref2.moduleName,
+    featureName = _ref2.featureName,
+    listUpdate = _ref2.listUpdate;
+  var _useState5 = React.useState(),
+    data = _useState5[0],
+    setData = _useState5[1];
+  var _useState6 = React.useState(false),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = React.useState(false),
+    error = _useState7[0],
+    setError = _useState7[1];
+  var _useState8 = React.useState(false),
+    status = _useState8[0],
+    setStatus = _useState8[1];
+  var _useSystemFeatureList = useSystemFeatureList({
+      apiEndPoint: apiEndPoint,
+      token: token,
+      moduleName: moduleName,
+      listUpdate: listUpdate
+    }),
+    systemFeatureList = _useSystemFeatureList.systemFeatureList;
+  React.useEffect(function () {
+    try {
+      if (apiEndPoint && token && moduleName && systemFeatureList) {
+        setError(false);
+        setStatus(null);
+        setLoading(true);
+        try {
+          var _systemFeatureList$fi, _systemFeatureList$fi2;
+          var modifyData = systemFeatureList === null || systemFeatureList === void 0 ? void 0 : (_systemFeatureList$fi = systemFeatureList.find(function (item) {
+            return (item === null || item === void 0 ? void 0 : item.moduleName) === moduleName;
+          })) === null || _systemFeatureList$fi === void 0 ? void 0 : (_systemFeatureList$fi2 = _systemFeatureList$fi.systemFeatureList) === null || _systemFeatureList$fi2 === void 0 ? void 0 : _systemFeatureList$fi2.find(function (item) {
+            return (item === null || item === void 0 ? void 0 : item.featureName) === featureName;
+          });
+          setData(modifyData);
+          setLoading(false);
+        } catch (e) {
+          setLoading(false);
+          setError(true);
+          setStatus(403);
+        }
+      }
+    } catch (e) {
+      Promise.reject(e);
+    }
+  }, [moduleName, listUpdate, systemFeatureList]);
+  return {
+    systemFeatureData: data,
+    systemFeatureDataLoading: loading,
+    error: error,
+    status: status
+  };
+}
 function useAllSystemFeatureValues(_ref4) {
   var apiEndPoint = _ref4.apiEndPoint,
     token = _ref4.token,
@@ -3138,7 +3195,7 @@ var ExcessPaymentDialog = function ExcessPaymentDialog(_ref2) {
           textAlign: 'center',
           padding: '16px 8px'
         }
-      }, "This excess payment link has already been used. An excess payment was previously added using this link.");
+      }, "This payment link has expired because it has already been used. The payment may have been completed by you or another recipient.");
     }
     return /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
       apiEndPoint: apiEndPoint,
@@ -3187,8 +3244,41 @@ var totalIcons = [{
   name: 'Excess Payment',
   icon: /*#__PURE__*/React__default.createElement(tb.TbFileDollar, null)
 }];
+var DASHBOARD_ORDER_LIST_BY_NAME = {
+  'Sales Order List': {
+    tabValue: 0,
+    label: 'Sales Orders'
+  },
+  'Invoice List': {
+    tabValue: 1,
+    label: 'Recent Invoices'
+  },
+  'Quotation List': {
+    tabValue: 2,
+    label: 'Quotations'
+  },
+  'Credit Memo RMA List': {
+    tabValue: 3,
+    label: 'Return Orders'
+  }
+};
+var parseDashboardOrderListIds = function parseDashboardOrderListIds(value) {
+  if (value == null || value === '' || value === false) return [];
+  if (Array.isArray(value)) {
+    return value.map(function (id) {
+      return Number(id);
+    }).filter(function (id) {
+      return !Number.isNaN(id);
+    });
+  }
+  return String(value).split(',').map(function (id) {
+    return Number(String(id).trim());
+  }).filter(function (id) {
+    return !Number.isNaN(id);
+  });
+};
 var Dashboard = function Dashboard(_ref) {
-  var _queryParams$excessPa, _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
+  var _queryParams$excessPa, _customerData$custome, _selectDates$getDateK, _selectDates$getDateK2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
   var apiEndPoint = _ref.apiEndPoint,
     serviceApiEndPoint = _ref.serviceApiEndPoint,
     token = _ref.token,
@@ -3214,9 +3304,7 @@ var Dashboard = function Dashboard(_ref) {
     hideTotalCardInDashboardSummary = _ref.hideTotalCardInDashboardSummary,
     _ref$showOnlyRecentOr = _ref.showOnlyRecentOrder,
     showOnlyRecentOrder = _ref$showOnlyRecentOr === void 0 ? false : _ref$showOnlyRecentOr,
-    hidePayActionButton = _ref.hidePayActionButton,
-    hideInvoiceTab = _ref.hideInvoiceTab,
-    hideSalesOrderTab = _ref.hideSalesOrderTab;
+    hidePayActionButton = _ref.hidePayActionButton;
   var _useState = React.useState({}),
     customerData = _useState[0],
     setCustomerData = _useState[1];
@@ -3234,6 +3322,14 @@ var Dashboard = function Dashboard(_ref) {
       salesOrders: {
         startDate: null,
         endDate: null
+      },
+      quotations: {
+        startDate: null,
+        endDate: null
+      },
+      returnOrders: {
+        startDate: null,
+        endDate: null
       }
     }),
     selectDates = _useState4[0],
@@ -3251,17 +3347,47 @@ var Dashboard = function Dashboard(_ref) {
     }),
     isExcessPaymentModal = _useState7[0],
     setIsExcessPaymentModal = _useState7[1];
-  var _useState8 = React.useState(0),
+  var _ref2 = useSystemFeatureByFieldName({
+      apiEndPoint: apiEndPoint,
+      token: token,
+      moduleName: 'Ecommerce',
+      featureName: 'dashboardOrderList'
+    }) || {},
+    dashboardOrderListFeature = _ref2.systemFeatureData;
+  var selectedDashboardOrderIds = React.useMemo(function () {
+    return parseDashboardOrderListIds(dashboardOrderListFeature === null || dashboardOrderListFeature === void 0 ? void 0 : dashboardOrderListFeature.featureValue);
+  }, [dashboardOrderListFeature === null || dashboardOrderListFeature === void 0 ? void 0 : dashboardOrderListFeature.featureValue]);
+  var featureValueListById = React.useMemo(function () {
+    var list = dashboardOrderListFeature === null || dashboardOrderListFeature === void 0 ? void 0 : dashboardOrderListFeature.featureValueList;
+    if (!Array.isArray(list)) return {};
+    return list.reduce(function (acc, item) {
+      if ((item === null || item === void 0 ? void 0 : item.id) != null && item !== null && item !== void 0 && item.name) {
+        acc[Number(item.id)] = item.name;
+      }
+      return acc;
+    }, {});
+  }, [dashboardOrderListFeature === null || dashboardOrderListFeature === void 0 ? void 0 : dashboardOrderListFeature.featureValueList]);
+  var visibleTabs = React.useMemo(function () {
+    if (!(selectedDashboardOrderIds !== null && selectedDashboardOrderIds !== void 0 && selectedDashboardOrderIds.length)) return [];
+    return selectedDashboardOrderIds.map(function (id) {
+      var featureName = featureValueListById === null || featureValueListById === void 0 ? void 0 : featureValueListById[id];
+      return featureName ? DASHBOARD_ORDER_LIST_BY_NAME === null || DASHBOARD_ORDER_LIST_BY_NAME === void 0 ? void 0 : DASHBOARD_ORDER_LIST_BY_NAME[featureName] : null;
+    }).filter(Boolean);
+  }, [selectedDashboardOrderIds, featureValueListById]);
+  var _useState8 = React.useState(null),
     value = _useState8[0],
     setValue = _useState8[1];
   React.useEffect(function () {
-    if (hideSalesOrderTab) {
-      setValue(1);
-    }
-    if (hideInvoiceTab) {
-      setValue(0);
+    if (!(visibleTabs !== null && visibleTabs !== void 0 && visibleTabs.length)) return;
+    var isCurrentVisible = value != null && visibleTabs.some(function (tab) {
+      return (tab === null || tab === void 0 ? void 0 : tab.tabValue) === value;
+    });
+    if (!isCurrentVisible) {
+      var _visibleTabs$0$tabVal, _visibleTabs$;
+      setValue((_visibleTabs$0$tabVal = visibleTabs === null || visibleTabs === void 0 ? void 0 : (_visibleTabs$ = visibleTabs[0]) === null || _visibleTabs$ === void 0 ? void 0 : _visibleTabs$.tabValue) != null ? _visibleTabs$0$tabVal : null);
+      setTriggerTableData(getRandomString());
     }
-  }, [hideSalesOrderTab, hideInvoiceTab]);
+  }, [visibleTabs, value]);
   var handleChange = function handleChange(event, newValue) {
     setValue(newValue);
     setTriggerTableData(getRandomString());
@@ -3272,11 +3398,23 @@ var Dashboard = function Dashboard(_ref) {
       'aria-controls': "simple-tabpanel-" + index
     };
   }
+  var getInvoicePathByTab = function getInvoicePathByTab(tabValue) {
+    if (tabValue === 0) return 'salesOrder';
+    if (tabValue === 1) return 'sales-order';
+    if (tabValue === 2) return 'quotation';
+    if (tabValue === 3) return 'rma/product';
+  };
   var openInvoiceData = function openInvoiceData(orderId) {
     if (serviceApiEndPoint) {
-      window.open(serviceApiEndPoint + "/" + (value === 0 ? 'salesOrder' : 'sales-order') + "/invoice/" + orderId + "?token=" + token + "&defaultStoreId=" + defaultStoreId + "&storeIdList=" + storeIdList + "&isEcommerce=true", '_blank', 'noopener,noreferrer');
+      window.open(serviceApiEndPoint + "/" + getInvoicePathByTab(value) + "/invoice/" + orderId + "?token=" + token + "&defaultStoreId=" + defaultStoreId + "&storeIdList=" + storeIdList + "&isEcommerce=true", '_blank', 'noopener,noreferrer');
     }
   };
+  var getDateKey = function getDateKey(tabValue) {
+    if (tabValue === 0) return 'salesOrders';
+    if (tabValue === 1) return 'recentInvoices';
+    if (tabValue === 2) return 'quotations';
+    if (tabValue === 3) return 'returnOrders';
+  };
   var onDateChange = function onDateChange(data) {
     var startDate = moment(data === null || data === void 0 ? void 0 : data.startDate).startOf('day');
     var endDate = moment(data === null || data === void 0 ? void 0 : data.endDate).endOf('day');
@@ -3290,7 +3428,7 @@ var Dashboard = function Dashboard(_ref) {
     };
     setSelectDates(function (prev) {
       var _extends2;
-      return _extends({}, prev, (_extends2 = {}, _extends2[value === 0 ? 'recentInvoices' : 'salesOrders'] = newDates, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[getDateKey(value)] = newDates, _extends2));
     });
     setTriggerTableData(getRandomString());
   };
@@ -3303,6 +3441,7 @@ var Dashboard = function Dashboard(_ref) {
         token: token
       })).then(function (data) {
         if (data) {
+          var _link$parentNode;
           var blob = new Blob([data]);
           var url1 = window.URL.createObjectURL(blob);
           var link = document.createElement('a');
@@ -3310,7 +3449,7 @@ var Dashboard = function Dashboard(_ref) {
           link.setAttribute('download', "invoice-" + orderId + ".xls");
           document.body.appendChild(link);
           link.click();
-          link.parentNode.removeChild(link);
+          (_link$parentNode = link.parentNode) === null || _link$parentNode === void 0 ? void 0 : _link$parentNode.removeChild(link);
         }
       });
     } catch (e) {
@@ -3360,13 +3499,11 @@ var Dashboard = function Dashboard(_ref) {
   }, {
     id: 'trackingNumber',
     label: 'Tracking No.',
-    format: function format(value, _ref2) {
-      var trackingNumber = _ref2.trackingNumber,
-        trackingNumberUrl = _ref2.trackingNumberUrl;
+    format: function format(value, record) {
       return /*#__PURE__*/React__default.createElement("a", {
-        href: trackingNumberUrl,
+        href: record === null || record === void 0 ? void 0 : record.trackingNumberUrl,
         target: '_blank'
-      }, trackingNumber);
+      }, record === null || record === void 0 ? void 0 : record.trackingNumber);
     }
   }, !hideInvoiceAction && {
     id: 'orderId',
@@ -3463,6 +3600,101 @@ var Dashboard = function Dashboard(_ref) {
       })));
     }
   }];
+  var quotaionColumns = [{
+    id: 'quotationId',
+    label: 'ID'
+  }, {
+    id: 'insertedTimestamp',
+    label: 'Date',
+    format: function format(value) {
+      return getLocalTime({
+        time: value
+      });
+    }
+  }, {
+    id: 'totalAmount',
+    label: 'Total Amount',
+    format: function format(value) {
+      return renderMoney(value);
+    }
+  }, {
+    id: 'status',
+    label: 'Status',
+    format: function format(value) {
+      return /*#__PURE__*/React__default.createElement(material.Grid, {
+        container: true
+      }, /*#__PURE__*/React__default.createElement(StatusContainer, {
+        item: true,
+        primaryColor: primaryColor
+      }, value));
+    }
+  }, !hideInvoiceAction && {
+    id: 'quotationId',
+    label: 'Action',
+    align: 'center',
+    format: function format(value, record) {
+      return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(material.IconButton, {
+        onClick: function onClick() {
+          return openInvoiceData(value);
+        },
+        style: {
+          color: primaryColor,
+          padding: 2
+        }
+      }, /*#__PURE__*/React__default.createElement(md.MdRemoveRedEye, {
+        style: {
+          fontSize: '1.6rem'
+        }
+      })));
+    }
+  }];
+  var returnOrderColumns = [{
+    id: 'returnOrderId',
+    label: 'ID'
+  }, {
+    id: 'insertedTimestamp',
+    label: 'Date',
+    format: function format(value) {
+      return getLocalTime({
+        time: value
+      });
+    }
+  }, {
+    id: 'totalAmount',
+    label: 'Total Amount',
+    format: function format(value) {
+      return renderMoney(value);
+    }
+  }, {
+    id: 'status',
+    label: 'Status',
+    format: function format(value) {
+      return /*#__PURE__*/React__default.createElement(material.Grid, {
+        container: true
+      }, /*#__PURE__*/React__default.createElement(StatusContainer, {
+        item: true,
+        primaryColor: primaryColor
+      }, value));
+    }
+  }];
+  var tableColumnsByTab = {
+    0: salesOrderColumns,
+    1: columns,
+    2: quotaionColumns,
+    3: returnOrderColumns
+  };
+  var tableApiPathByTab = {
+    0: 'salesOrderTable',
+    1: 'orderTable',
+    2: 'quotationTable',
+    3: 'returnOrderTable'
+  };
+  var tableTitleByTab = {
+    0: 'Sales orders',
+    1: 'Recent Invoices',
+    2: 'Quotations',
+    3: 'Return Orders'
+  };
   React.useEffect(function () {
     (function () {
       try {
@@ -3699,10 +3931,10 @@ var Dashboard = function Dashboard(_ref) {
     style: {
       marginTop: '1rem'
     }
-  })))))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(APITable, {
+  })))))), (visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0 && value != null && /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(APITable, {
     key: value,
     cacheFilters: true,
-    extraFilterParams: value === 0 ? selectDates.recentInvoices : selectDates.salesOrders,
+    extraFilterParams: selectDates === null || selectDates === void 0 ? void 0 : selectDates[getDateKey(value)],
     tableHeaderContent: /*#__PURE__*/React__default.createElement(material.Grid, {
       container: true,
       justifyContent: "space-between",
@@ -3721,11 +3953,13 @@ var Dashboard = function Dashboard(_ref) {
       "aria-label": "basic tabs example",
       primaryColor: primaryColor,
       fontColor: fontColor
-    }, !hideSalesOrderTab && /*#__PURE__*/React__default.createElement(material.Tab, _extends({
-      label: "Sales Orders"
-    }, a11yProps(0))), !hideInvoiceTab && /*#__PURE__*/React__default.createElement(material.Tab, _extends({
-      label: "Recent Invoices"
-    }, a11yProps(1)))))), /*#__PURE__*/React__default.createElement(TypographyContainer$2, {
+    }, visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.map(function (tab) {
+      return /*#__PURE__*/React__default.createElement(material.Tab, _extends({
+        key: tab === null || tab === void 0 ? void 0 : tab.tabValue,
+        label: tab === null || tab === void 0 ? void 0 : tab.label,
+        value: tab === null || tab === void 0 ? void 0 : tab.tabValue
+      }, a11yProps(tab === null || tab === void 0 ? void 0 : tab.tabValue)));
+    })))), /*#__PURE__*/React__default.createElement(TypographyContainer$2, {
       variant: "h4",
       gutterBottom: true,
       fontColor: fontColor,
@@ -3735,14 +3969,14 @@ var Dashboard = function Dashboard(_ref) {
         padding: '1rem 0',
         margin: 0
       }
-    }, value === 0 ? 'Sales orders' : 'Recent Invoices'), /*#__PURE__*/React__default.createElement(material.Grid, {
+    }, tableTitleByTab === null || tableTitleByTab === void 0 ? void 0 : tableTitleByTab[value]), /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true
     }, /*#__PURE__*/React__default.createElement(DateRangePicker, {
       fontColor: fontColor,
       primaryColor: primaryColor,
       onChange: onDateChange,
-      initialStartDate: value === 0 ? selectDates === null || selectDates === void 0 ? void 0 : (_selectDates$salesOrd = selectDates.salesOrders) === null || _selectDates$salesOrd === void 0 ? void 0 : _selectDates$salesOrd.startDate : selectDates === null || selectDates === void 0 ? void 0 : (_selectDates$recentIn = selectDates.recentInvoices) === null || _selectDates$recentIn === void 0 ? void 0 : _selectDates$recentIn.startDate,
-      initialEndDate: value === 0 ? selectDates === null || selectDates === void 0 ? void 0 : (_selectDates$salesOrd2 = selectDates.salesOrders) === null || _selectDates$salesOrd2 === void 0 ? void 0 : _selectDates$salesOrd2.endDate : selectDates === null || selectDates === void 0 ? void 0 : (_selectDates$recentIn2 = selectDates.recentInvoices) === null || _selectDates$recentIn2 === void 0 ? void 0 : _selectDates$recentIn2.endDate
+      initialStartDate: selectDates === null || selectDates === void 0 ? void 0 : (_selectDates$getDateK = selectDates[getDateKey(value)]) === null || _selectDates$getDateK === void 0 ? void 0 : _selectDates$getDateK.startDate,
+      initialEndDate: selectDates === null || selectDates === void 0 ? void 0 : (_selectDates$getDateK2 = selectDates[getDateKey(value)]) === null || _selectDates$getDateK2 === void 0 ? void 0 : _selectDates$getDateK2.endDate
     }))),
     listUpdate: triggerTableData,
     pagination: false,
@@ -3750,9 +3984,9 @@ var Dashboard = function Dashboard(_ref) {
       x: 1000
     },
     tableId: "master-child-map",
-    columns: value === 0 ? salesOrderColumns : columns,
+    columns: (tableColumnsByTab === null || tableColumnsByTab === void 0 ? void 0 : tableColumnsByTab[value]) || salesOrderColumns,
     apiData: {
-      url: "/ecommerce/dashboard/" + (value === 0 ? 'salesOrderTable' : 'orderTable'),
+      url: "/ecommerce/dashboard/" + ((tableApiPathByTab === null || tableApiPathByTab === void 0 ? void 0 : tableApiPathByTab[value]) || 'salesOrderTable'),
       apiEndPoint: apiEndPoint,
       token: token
     },
@@ -5724,7 +5958,7 @@ var UpcomingACHPayments = function UpcomingACHPayments(_ref) {
 var TableContainer$2 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 14px;\n"])));
 
 var _templateObject$m, _templateObject2$d, _templateObject3$9, _templateObject4$7;
-var _excluded$5 = ["apiEndPoint", "serviceApiEndPoint", "token", "primaryColor", "secondaryColor", "backgroundColor", "fontColor", "darkMode", "onChangeColors", "path", "onChangePath", "maxWidth", "logoUrl", "sectionLeftImageSection", "exploreCategoryImage", "sectionRightImageSection", "discountImageSection", "disabledUpdateProfileFromDashboard", "hideTotalCardInDashboardSummary", "showOnlyRecentOrder", "hidePayActionButton", "hideSalesOrderTab", "hideInvoiceTab", "hideAddAccessPaymentButton"];
+var _excluded$5 = ["apiEndPoint", "serviceApiEndPoint", "token", "primaryColor", "secondaryColor", "backgroundColor", "fontColor", "darkMode", "onChangeColors", "path", "onChangePath", "maxWidth", "logoUrl", "sectionLeftImageSection", "exploreCategoryImage", "sectionRightImageSection", "discountImageSection", "disabledUpdateProfileFromDashboard", "hideTotalCardInDashboardSummary", "showOnlyRecentOrder", "hidePayActionButton", "hideAddAccessPaymentButton"];
 var AccountDetails = function AccountDetails(_ref) {
   var _storeData$map, _storeData$find, _storeData$;
   var apiEndPoint = _ref.apiEndPoint,
@@ -5754,10 +5988,6 @@ var AccountDetails = function AccountDetails(_ref) {
     showOnlyRecentOrder = _ref$showOnlyRecentOr === void 0 ? false : _ref$showOnlyRecentOr,
     _ref$hidePayActionBut = _ref.hidePayActionButton,
     hidePayActionButton = _ref$hidePayActionBut === void 0 ? false : _ref$hidePayActionBut,
-    _ref$hideSalesOrderTa = _ref.hideSalesOrderTab,
-    hideSalesOrderTab = _ref$hideSalesOrderTa === void 0 ? false : _ref$hideSalesOrderTa,
-    _ref$hideInvoiceTab = _ref.hideInvoiceTab,
-    hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _ref$hideInvoiceTab,
     _ref$hideAddAccessPay = _ref.hideAddAccessPaymentButton,
     hideAddAccessPaymentButton = _ref$hideAddAccessPay === void 0 ? false : _ref$hideAddAccessPay,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
@@ -5932,8 +6162,6 @@ var AccountDetails = function AccountDetails(_ref) {
             hideTotalCardInDashboardSummary: hideTotalCardInDashboardSummary,
             showOnlyRecentOrder: showOnlyRecentOrder,
             hidePayActionButton: hidePayActionButton,
-            hideSalesOrderTab: hideSalesOrderTab,
-            hideInvoiceTab: hideInvoiceTab,
             hideAddAccessPaymentButton: hideAddAccessPaymentButton
           });
         case 'myProfile':
@@ -10518,7 +10746,7 @@ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
 };
 
 var _templateObject$B, _templateObject2$r, _templateObject3$l;
-var CartDrawerProduct = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 1rem;\n  user-select: none;\n  background: #f2f2f290;\n  border: 1px solid #f2f2f290;\n  padding: 0.5rem;\n  border-radius: 12px;\n  box-sizing: border-box;\n\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: contain;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    // width: 20%;\n    height: 95%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n      }\n    }\n  }\n  @media only screen and (max-width: 768px) {\n    .closeIcon {\n      font-size: 1rem;\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n    }\n  }\n"])), function (props) {
+var CartDrawerProduct = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 113px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 1rem;\n  user-select: none;\n  background: #f2f2f290;\n  border: 1px solid #f2f2f290;\n  padding: 0.5rem;\n  border-radius: 12px;\n  box-sizing: border-box;\n\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: contain;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    // width: 20%;\n    height: 95%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n      }\n    }\n  }\n  @media only screen and (max-width: 768px) {\n    .closeIcon {\n      font-size: 1rem;\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n    }\n  }\n"])), function (props) {
   return props.color || 'grey';
 });
 var CartDrawerQtBox = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  span {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    font-size: 10px;\n  }\n  @media only screen and (max-width: 340px) {\n    min-width: 50px;\n    aspect-ratio: 1/2;\n    height: 22px;\n    font-size: 8px;\n  }\n"])));