sag_components 2.0.0-beta151 → 2.0.0-beta153

package/dist/index.esm.js

@@ -3099,6 +3099,25 @@ const InfoIcon = _ref => {
   }));
 };
 
+const UploadIcon = _ref => {
+  let {
+    clicked,
+    color = '#757575',
+    width = '18',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M9.3125 1.65625C9.3125 1.30078 9.58594 1 9.96875 1H14.3164C14.6992 1 14.9727 1.30078 14.9727 1.65625V6.03125C14.9727 6.41406 14.6992 6.6875 14.3164 6.6875C13.9609 6.6875 13.6602 6.41406 13.6602 6.03125V3.24219L7.5625 9.33984C7.31641 9.61328 6.90625 9.61328 6.66016 9.33984C6.38672 9.09375 6.38672 8.68359 6.66016 8.41016L12.7578 2.3125H9.96875C9.58594 2.3125 9.3125 2.03906 9.3125 1.65625ZM2.96875 1.875H6.46875C6.82422 1.875 7.125 2.17578 7.125 2.53125C7.125 2.91406 6.82422 3.1875 6.46875 3.1875H2.96875C2.58594 3.1875 2.3125 3.48828 2.3125 3.84375V13.0312C2.3125 13.4141 2.58594 13.6875 2.96875 13.6875H12.1562C12.5117 13.6875 12.8125 13.4141 12.8125 13.0312V9.53125C12.8125 9.17578 13.0859 8.875 13.4688 8.875C13.8242 8.875 14.125 9.17578 14.125 9.53125V13.0312C14.125 14.125 13.2227 15 12.1562 15H2.96875C1.875 15 1 14.125 1 13.0312V3.84375C1 2.77734 1.875 1.875 2.96875 1.875Z",
+    fill: color
+  }));
+};
+
 const LinkButton = _ref => {
   let {
     text = '',
@@ -3252,6 +3271,14 @@ const LinkButton = _ref => {
           width: iconWidth,
           color: color
         }));
+      case 'upload':
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+          className: "UploadIcon"
+        }, /*#__PURE__*/React$1.createElement(UploadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
       default:
         return '';
     }
@@ -10320,24 +10347,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('');
@@ -10779,23 +10805,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('');
@@ -23906,22 +23931,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("");
@@ -24318,24 +24342,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('');
@@ -35567,9 +35590,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 {
@@ -52056,6 +52079,15 @@ const ItemManagerPanel = _ref => {
     });
     setScreen("subitem");
   };
+  const hasValidStatus = pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '';
+  const hasInvalidStatus = pkg => !hasValidStatus(pkg);
+  const draftPackages = pkg => pkg.status === 1;
+  const unsentPackages = () => {
+    return itemAndPackage.filter(item => item.packages !== null).map(item => ({
+      ...item,
+      packages: item.packages.filter(pkg => hasInvalidStatus(pkg) || draftPackages(pkg))
+    })).filter(item => item.packages.length > 0);
+  };
   const updateExistingPackage = (vendorName, originalPackage, updatedPackageName, updatedComponent) => {
     setItemAndPackage(prev => {
       return prev.map(vendor => {
@@ -52092,7 +52124,7 @@ const ItemManagerPanel = _ref => {
       if (vendor.packages === null || !Array.isArray(vendor.packages)) {
         return false;
       }
-      return vendor.packages.some(pkg => !pkg.hasOwnProperty('status') || pkg.status == null || pkg.status === undefined || pkg.status === '');
+      return vendor.packages.some(hasInvalidStatus);
     });
   }, [itemAndPackage]);
   const actuallyAllFormsSent = AllFormsSent && !hasUnisentPackages;
@@ -52146,7 +52178,7 @@ const ItemManagerPanel = _ref => {
       onCancel: () => setScreen("initial"),
       onConfirm: () => setScreen("success"),
       linkColor: linkColor,
-      vendors: itemAndPackage.filter(item => item.packages !== null).map(item => {
+      vendors: unsentPackages().map(item => {
         return {
           name: item.name,
           newPackages: item.packages.map(pkg => pkg.brands)
@@ -52158,9 +52190,9 @@ const ItemManagerPanel = _ref => {
     return /*#__PURE__*/React$1.createElement(SuccessScreen, {
       width: width,
       height: height,
-      packagesCount: itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0),
-      vendorsCount: itemAndPackage.filter(item => item.packages !== null).length.toString(),
-      vendors: itemAndPackage.filter(item => item.packages !== null).map(item => item.name),
+      packagesCount: unsentPackages().reduce((acc, item) => acc + item.packages?.length, 0),
+      vendorsCount: unsentPackages().length.toString(),
+      vendors: unsentPackages().map(item => item.name),
       maxVisibleVendors: maxVisibleVendors
     });
   }
@@ -52219,7 +52251,7 @@ const ItemManagerPanel = _ref => {
       hoverBorderColor: linkColor
     })), /*#__PURE__*/React$1.createElement(Subtitle$1, {
       color: actuallyAllFormsSent ? "#90CE9C" : "#8b8989"
-    }, actuallyAllFormsSent ? '✔ All Forms Sent' : itemAndPackage.filter(item => item.packages !== null).length > 0 ? `${itemAndPackage.filter(item => item.packages !== null).length.toString()} New Forms` : ''))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+    }, actuallyAllFormsSent ? '✔ All Forms Sent' : itemAndPackage.filter(item => item.packages !== null).length > 0 ? `${unsentPackages().reduce((acc, item) => acc + item.packages?.length, 0)} New Forms` : ''))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
       leftIcon: "Plus",
       onClick: () => setScreen("list"),
       rightIcon: "none",
@@ -52231,37 +52263,37 @@ const ItemManagerPanel = _ref => {
     }))), /*#__PURE__*/React$1.createElement(VendorListWrapper$2, {
       disabled: disableSection,
       headerHeight: headerHeight
-    }, /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem$1, {
-      key: idx
-    }, /*#__PURE__*/React$1.createElement(DotContainer, null, item.packages.length === 0 && /*#__PURE__*/React$1.createElement(RedDot, null)), /*#__PURE__*/React$1.createElement(LineContainer, {
-      onClick: e => {
-        handleVendorClick(item);
-      }
-    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
-      const packagesWithStatus = item.packages.filter(pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '');
-      const allHaveStatus = packagesWithStatus.length === item.packages.length;
-      const noneHaveStatus = packagesWithStatus.length === 0;
-      if (noneHaveStatus) {
-        return `0/${item.packages.length} sent`;
-      } else if (allHaveStatus) {
-        return `${item.packages.length}/${item.packages.length} sent`;
-      } else {
-        return `${packagesWithStatus.length}/${item.packages.length} sent`;
-      }
-    })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
-      className: "trash-icon",
-      onClick: () => {
-        onDeleteVendor(item);
-      }
-    }, /*#__PURE__*/React$1.createElement("svg", {
-      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"
-    }))))))));
+    }, /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => {
+      const packagesLength = item.packages.length;
+      return /*#__PURE__*/React$1.createElement(VendorItem$1, {
+        key: idx
+      }, /*#__PURE__*/React$1.createElement(DotContainer, null, packagesLength === 0 && /*#__PURE__*/React$1.createElement(RedDot, null)), /*#__PURE__*/React$1.createElement(LineContainer, {
+        onClick: e => {
+          handleVendorClick(item);
+        }
+      }, /*#__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 sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
+        const noPackagesSent = sentPackagesLength === 0;
+        if (noPackagesSent) {
+          return `0/${packagesLength} sent`;
+        } else {
+          return `${sentPackagesLength}/${packagesLength} sent`;
+        }
+      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
+        className: "trash-icon",
+        onClick: () => {
+          onDeleteVendor(item);
+        }
+      }, /*#__PURE__*/React$1.createElement("svg", {
+        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"
+      }))));
+    }))));
   }
 };