sag_components 2.0.0-beta288 → 2.0.0-beta289

package/dist/index.esm.js

@@ -10590,24 +10590,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('');
@@ -11049,23 +11048,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('');
@@ -24176,22 +24174,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("");
@@ -24643,26 +24640,25 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36202,9 +36198,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 {
@@ -57883,26 +57879,21 @@ OverlayTemplateDialog.propTypes = {
 // OverlayDropdown.jsx
 const OverlayDropdown = _ref => {
   let {
-    // Data / selection
     data = [],
     value,
     onSelectClick,
-    // Label / placeholder
     label,
     labelEmptyValue,
     showLabelOnTop,
     labelColor,
     placeHolder,
     placeHolderColor,
-    // Behavior
     required = false,
     disabled = false,
     isDarkerBackground = false,
     editableDigitalCoupon = false,
-    // Appearance
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
-    // Sizing
     width = "100%",
     minWidth = "unset",
     dropdownWidth = "100%",
@@ -57919,8 +57910,6 @@ const OverlayDropdown = _ref => {
   const buttonRef = useRef(null);
   const dropdownRef = useRef(null);
   const containerRef = useRef(null);
-
-  // Click outside to close dropdown
   useEffect(() => {
     const handleClickOutside = event => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -57936,20 +57925,13 @@ const OverlayDropdown = _ref => {
       document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [open]);
-
-  // Calculate dropdown position when opening
   useEffect(() => {
     if (open && buttonRef.current) {
       const buttonRect = buttonRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const dropdownHeight = parseInt(dropdownMaxHeight, 10);
-
-      // Space available below the button
       const spaceBelow = viewportHeight - buttonRect.bottom;
-      // Space available above the button
       const spaceAbove = buttonRect.top;
-
-      // If there's not enough space below, but more space above, position above
       if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
         setDropdownPosition("above");
       } else {
@@ -57957,8 +57939,6 @@ const OverlayDropdown = _ref => {
       }
     }
   }, [open, dropdownMaxHeight, margin]);
-
-  // Combine original data with "Last defined by you" group
   const getDataWithLastDefined = () => {
     const combinedData = [...data];
     if (lastDefinedGroup) {
@@ -57966,8 +57946,6 @@ const OverlayDropdown = _ref => {
     }
     return combinedData;
   };
-
-  // Find selected item across all groups
   const findSelectedItem = () => {
     const allData = getDataWithLastDefined();
     for (const group of allData) {
@@ -57982,40 +57960,30 @@ const OverlayDropdown = _ref => {
   const hasValue = !!selected;
   const getTemplateParams = label => {
     if (!label) return [];
-
-    // Pattern 1: "Buy X & Get Y% Off" - X and Y must be standalone capital letters
-    // Using word boundaries for better browser compatibility
     const buyGetOffPattern = /^(.*?)\bX\b(.*?)\bY\b(.*)$/;
     const buyGetOffMatch = label.match(buyGetOffPattern);
     if (buyGetOffMatch) {
       const [, beforeX, betweenXY, afterY] = buyGetOffMatch;
       return [{
         label: beforeX.trim(),
-        // "Buy "
         type: "number",
         suffix: ""
       }, {
         label: betweenXY.trim(),
-        // " & Get "
         type: "number",
-        suffix: afterY.trim() // " % Off"
+        suffix: afterY.trim()
       }];
     }
-
-    // Pattern 2: Single variable patterns - X or Y must be standalone capital letters
     const singleVariablePattern = /^(.*?)\b([XY])\b(.*)$/;
     const singleVariableMatch = label.match(singleVariablePattern);
     if (singleVariableMatch) {
       const [, beforeVar, variable, afterVar] = singleVariableMatch;
       return [{
         label: beforeVar.trim(),
-        // "Buy "
         type: "number",
-        suffix: afterVar.trim() // " of item(s), Get Free Item"
+        suffix: afterVar.trim()
       }];
     }
-
-    // Fallback: if no pattern matches, treat as single input
     return [{
       label: "Value",
       type: "number",
@@ -58024,51 +57992,38 @@ const OverlayDropdown = _ref => {
   };
   const generateFinalSentence = (template, values) => {
     let sentence = template.label;
-
-    // Pattern 1: "Buy X & Get Y% Off" - X and Y must be standalone capital letters
     const buyGetOffPattern = /^(.*?)\bX\b(.*?)\bY\b(.*)$/;
     const buyGetOffMatch = sentence.match(buyGetOffPattern);
     if (buyGetOffMatch && values.length >= 2) {
       const [, beforeX, betweenXY, afterY] = buyGetOffMatch;
       return beforeX + values[0] + betweenXY + values[1] + afterY;
     }
-
-    // Pattern 2: Single variable patterns - X or Y must be standalone capital letters
     const singleVariablePattern = /^(.*?)\b([XY])\b(.*)$/;
     const singleVariableMatch = sentence.match(singleVariablePattern);
     if (singleVariableMatch && values.length >= 1) {
       const [, beforeVar, variable, afterVar] = singleVariableMatch;
       return beforeVar + values[0] + afterVar;
     }
-
-    // Fallback
     return sentence;
   };
   const handleTemplateApply = fields => {
     if (templateDialog && onSelectClick) {
       const finalSentence = generateFinalSentence(templateDialog.item, fields);
-
-      // Create new item for "Last defined by you" group
       const newItem = {
         ...templateDialog.item,
         label: finalSentence,
         value: templateDialog.item.value,
-        // Unique value
         overlayCode: templateDialog.group.overlayCode,
         overlayName: templateDialog.group.overlayName,
         templateType: templateDialog.group.templateType,
         appliedValues: fields
       };
-
-      // Update "Last defined by you" group - add to existing or create new
       if (lastDefinedGroup) {
-        // Add to existing group
         setLastDefinedGroup({
           ...lastDefinedGroup,
-          items: [newItem, ...lastDefinedGroup.items] // Add new item at the beginning
+          items: [newItem, ...lastDefinedGroup.items]
         });
       } else {
-        // Create new group
         setLastDefinedGroup({
           overlayCode: "last_defined",
           overlayName: "Last defined by you",
@@ -58077,8 +58032,6 @@ const OverlayDropdown = _ref => {
         });
       }
       setTemplateDialog(null);
-
-      // Select the new item
       onSelectClick(newItem);
     }
   };
@@ -58135,6 +58088,7 @@ const OverlayDropdown = _ref => {
     content: selected?.label,
     showTooltip: !!selected
   }, /*#__PURE__*/React$1.createElement(Wrapper, null, /*#__PURE__*/React$1.createElement(TruncatedText, {
+    className: "selected",
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
     color: !selected && open ? placeHolderColor : "inherit"
@@ -58164,24 +58118,29 @@ const OverlayDropdown = _ref => {
     onClick: () => {
       if (onSelectClick && !disabled) {
         setOpen(false);
-        if (group.templateType === 2) {
-          // Open template dialog
+        if (group.templateType === 3 && editableDigitalCoupon) {
+          const result = {
+            ...item,
+            overlayCode: group.overlayCode,
+            overlayName: group.overlayName,
+            templateType: group.templateType,
+            isEditableDigitalCoupon: true
+          };
+          onSelectClick(result);
+        } else if (group.templateType === 2) {
           setTemplateDialog({
             item,
             group,
             params: getTemplateParams(item.label)
           });
         } else {
-          // Regular selection
-          if (onSelectClick) {
-            const result = {
-              ...item,
-              overlayCode: group.overlayCode,
-              overlayName: group.overlayName,
-              templateType: group.templateType
-            };
-            onSelectClick(result);
-          }
+          const result = {
+            ...item,
+            overlayCode: group.overlayCode,
+            overlayName: group.overlayName,
+            templateType: group.templateType
+          };
+          onSelectClick(result);
         }
       }
     }