sag_components 2.0.0-beta170 → 2.0.0-beta171

package/dist/index.esm.js

@@ -10429,24 +10429,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10888,23 +10887,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24015,22 +24013,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24427,24 +24424,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35682,9 +35678,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -43364,11 +43360,13 @@ const NewItemList = ({
   // Helper to highlight matched portions
   const highlightMatch = (text, query) => {
     if (!query) return text;
-    const regex = new RegExp(`(${query})`, 'ig');
+    const regex = new RegExp(`(${query})`, "ig");
     return text.split(regex).map((part, i) => regex.test(part) ? /*#__PURE__*/React$1.createElement(MarkVendorName, {
       key: i
     }, part) : part);
   };
+  const hasValidStatus = pkg => pkg.hasOwnProperty("status") && pkg.status != null && pkg.status !== undefined && pkg.status !== "";
+  const draftPackages = pkg => pkg.status === 1;
   return /*#__PURE__*/React$1.createElement(VendorSelectionContainer, null, /*#__PURE__*/React$1.createElement(VendorHeader$1, {
     ref: headerRef
   }, /*#__PURE__*/React$1.createElement(VendorRoute, null, /*#__PURE__*/React$1.createElement(VendorBackButton, {
@@ -43380,15 +43378,31 @@ const NewItemList = ({
     onChange: e => setSearch(e.target.value)
   }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
     headerHeight: headerHeight
-  }, /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem, {
-    key: idx,
-    onClick: e => {
-      // Always call onVendorClick - it will handle the conversion from null to []
-      if (onVendorClick) {
-        onVendorClick(item);
+  }, /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => {
+    console.log("item", item);
+    let packagesLength = 0;
+    let sentPackagesLength = 0;
+    if (item.packages !== null) {
+      packagesLength = item.packages.length;
+      sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
+    }
+    return /*#__PURE__*/React$1.createElement(VendorItem, {
+      key: idx,
+      onClick: e => {
+        // Always call onVendorClick - it will handle the conversion from null to []
+        if (onVendorClick) {
+          onVendorClick(item);
+        }
       }
-    }
-  }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), item.packages && /*#__PURE__*/React$1.createElement(VendorPackages, null, `0/${item.packages.length} Packages Sent`)), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null)))))));
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+      const noPackagesSent = sentPackagesLength === 0;
+      if (noPackagesSent) {
+        return `0/${packagesLength} Packages Sent`;
+      } else {
+        return `${sentPackagesLength}/${packagesLength} Packages Sent`;
+      }
+    })())), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null)));
+  }))));
 };
 
 const NewSubitemContainer$1 = styled(Card)`
@@ -43544,7 +43558,7 @@ const Chevron = styled.div`
   align-items: center;
   display: flex;
 `;
-const Trash = styled.div`
+styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43595,12 +43609,6 @@ const NewSubitemList = props => {
     setSelectedPackage(item);
     handleSubitemDetail(item); // Pass the package object for editing
   };
-
-  // useEffect(() => {
-  //   console.log("Vendor items updated:", vendorItems);
-  //   console.log("Props:", props);
-  // }, [vendorItems]);
-
   return /*#__PURE__*/React$1.createElement(NewSubitemContainer$1, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(BackButton$1, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(BackTitle$1, null, "All Vendors")), /*#__PURE__*/React$1.createElement(SelectionTitle$1, null, vendor.name), /*#__PURE__*/React$1.createElement(AddButtonContainer, null, /*#__PURE__*/React$1.createElement(LinkButton, {
@@ -43617,20 +43625,23 @@ const NewSubitemList = props => {
     onClick: e => {
       handleEditExistingPackage(item);
     }
-  }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, null, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash, {
+  }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, null, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+    className: "trash-icon-disabled"
+
+    // ref={(el) => setupTooltip(el, trashTooltipText)}
+  }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
+    width: "22",
+    height: "22"
+  })) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
     className: "trash-icon",
     onClick: e => {
+      e.stopPropagation();
       onDeletePackage(item);
     }
-  }, /*#__PURE__*/React$1.createElement("svg", {
+  }, /*#__PURE__*/React$1.createElement(TrashIcon, {
     width: "14",
-    height: "18",
-    viewBox: "0 0 14 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
-  })))))));
+    height: "18"
+  }))))));
 };
 
 const NewSubitemContainer = styled(Card)`
@@ -52774,9 +52785,9 @@ const ItemManagerPanel = _ref => {
       }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
         const noPackagesSent = sentPackagesLength === 0;
         if (noPackagesSent) {
-          return `0/${packagesLength} sent`;
+          return `0/${packagesLength} Packages Sent`;
         } else {
-          return `${sentPackagesLength}/${packagesLength} sent`;
+          return `${sentPackagesLength}/${packagesLength} Packages Sent`;
         }
       })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
         className: "trash-icon-disabled",