sag_components 2.0.0-beta290 → 2.0.0-beta292

package/dist/index.d.ts

@@ -1588,7 +1588,7 @@ declare function ModalDrawer({ open, height, onClose, children, widthPercent }:
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, label, labelEmptyValue, showLabelOnTop, labelColor, placeHolder, placeHolderColor, required, disabled, isDarkerBackground, editableDigitalCoupon, customDisplayText, selectedColor, hoverColor, width, minWidth, dropdownWidth, dropdownMaxHeight, height, margin, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, label, labelEmptyValue, showLabelOnTop, labelColor, placeHolder, placeHolderColor, required, disabled, isDarkerBackground, editableDigitalCoupon, customDisplayText, appliedCouponsCount, selectedColor, hoverColor, width, minWidth, dropdownWidth, dropdownMaxHeight, height, margin, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
@@ -1604,6 +1604,7 @@ declare function OverlayDropdown({ data, value, onSelectClick, label, labelEmpty
     isDarkerBackground?: boolean;
     editableDigitalCoupon?: boolean;
     customDisplayText?: any;
+    appliedCouponsCount?: number;
     selectedColor?: string;
     hoverColor?: string;
     width?: string;

package/dist/index.esm.js

@@ -57892,6 +57892,7 @@ const OverlayDropdown = _ref => {
     isDarkerBackground = false,
     editableDigitalCoupon = false,
     customDisplayText = null,
+    appliedCouponsCount = 0,
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
     width = "100%",
@@ -58043,7 +58044,7 @@ const OverlayDropdown = _ref => {
     if (!showLabelOnTop && open) {
       return "";
     }
-    if (hasValue) {
+    if (hasValue || customDisplayText) {
       return label;
     }
     return labelEmptyValue;
@@ -58065,15 +58066,15 @@ const OverlayDropdown = _ref => {
     return "";
   };
   const getDisplayText = () => {
+    if (open) {
+      return placeHolder;
+    }
     if (customDisplayText) {
       return customDisplayText;
     }
     if (selected) {
       return selected.label;
     }
-    if (open) {
-      return placeHolder;
-    }
     return '';
   };
   return /*#__PURE__*/React$1.createElement(DropdownContainer, {
@@ -58084,7 +58085,7 @@ const OverlayDropdown = _ref => {
     className: "Label",
     isFocused: open,
     labelColor: labelColor,
-    hasValue: hasValue,
+    hasValue: hasValue || !!customDisplayText,
     disabled: disabled,
     showLabelOnTop: showLabelOnTop,
     isDarkerBackground: isDarkerBackground
@@ -58103,7 +58104,7 @@ const OverlayDropdown = _ref => {
     className: "selected",
     onMouseEnter: () => setHoveredText(customDisplayText || selected?.label),
     onMouseLeave: () => setHoveredText(null),
-    color: !selected && open ? placeHolderColor : "inherit"
+    color: !hasValue && !customDisplayText && open ? placeHolderColor : "inherit"
   }, getDisplayText()), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
@@ -58122,52 +58123,66 @@ const OverlayDropdown = _ref => {
     $showBorder: group.overlayName,
     margin: margin,
     key: group.overlayCode
-  }, ["Template Offer", "Last defined by you"].includes(group.overlayName) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
-    key: item.value,
-    selected: item.value === value,
-    selectedColor: selectedColor,
-    hoverColor: hoverColor,
-    onClick: () => {
-      if (onSelectClick && !disabled) {
-        setOpen(false);
-        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 {
-          const result = {
-            ...item,
-            overlayCode: group.overlayCode,
-            overlayName: group.overlayName,
-            templateType: group.templateType
-          };
-          onSelectClick(result);
-        }
-      }
-    }
-  }, /*#__PURE__*/React$1.createElement(TruncatedText, {
-    onMouseEnter: () => setHoveredText(item.label),
-    onMouseLeave: () => setHoveredText(null)
-  }, item.label), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
-    fill: item.value === value ? "#fff" : "#212121"
-  }) : group.templateType === 3 && editableDigitalCoupon ? /*#__PURE__*/React$1.createElement(PenIcon, {
-    fill: item.value === value ? "#fff" : "#212121"
-  }) : item.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
-    width: "22px",
-    height: "22px",
-    color: "#fff"
-  })))))), templateDialog && /*#__PURE__*/React$1.createElement(OverlayTemplateDialog, {
+  }, ["Template Offer", "Last defined by you"].includes(group.overlayName) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => {
+    const isDigitalCoupon = group.templateType === 3 && editableDigitalCoupon;
+    const hasAppliedCoupons = appliedCouponsCount > 0;
+    const penColor = isDigitalCoupon && hasAppliedCoupons ? "#FF8C00" : item.value === value ? "#fff" : "#212121";
+
+    // Update label to show count for digital coupons
+    let displayText = item.label;
+    if (isDigitalCoupon && appliedCouponsCount > 0) {
+      displayText = `Digital Coupon/s (${appliedCouponsCount})`;
+    }
+    return /*#__PURE__*/React$1.createElement(DropdownItem, {
+      key: item.value,
+      selected: item.value === value,
+      selectedColor: selectedColor,
+      hoverColor: hoverColor,
+      onClick: () => {
+        if (onSelectClick && !disabled) {
+          setOpen(false);
+          if (group.templateType === 3 && editableDigitalCoupon) {
+            const result = {
+              ...item,
+              label: item.displayLabel || item.label,
+              overlayCode: group.overlayCode,
+              overlayName: group.overlayName,
+              templateType: group.templateType,
+              isEditableDigitalCoupon: true
+            };
+            onSelectClick(result);
+          } else if (group.templateType === 2) {
+            setTemplateDialog({
+              item,
+              group,
+              params: getTemplateParams(item.displayLabel || item.label)
+            });
+          } else {
+            const result = {
+              ...item,
+              overlayCode: group.overlayCode,
+              overlayName: group.overlayName,
+              templateType: group.templateType
+            };
+            onSelectClick(result);
+          }
+        }
+      }
+    }, /*#__PURE__*/React$1.createElement(TruncatedText, {
+      onMouseEnter: () => setHoveredText(displayText),
+      onMouseLeave: () => setHoveredText(null)
+    }, displayText), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+      fill: item.value === value ? "#fff" : "#212121"
+    }) : isDigitalCoupon ? /*#__PURE__*/React$1.createElement(PenIcon, {
+      color: penColor,
+      width: "16",
+      height: "16"
+    }) : item.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
+      width: "22px",
+      height: "22px",
+      color: "#fff"
+    }));
+  })))), templateDialog && /*#__PURE__*/React$1.createElement(OverlayTemplateDialog, {
     open: true,
     onClose: () => setTemplateDialog(null),
     onApply: handleTemplateApply,