sag_components 1.0.1068 → 1.0.1069

package/dist/stories/components/CampaignTool/PopupFieldsRules.js

@@ -9,160 +9,160 @@ var _Phone = require("../../utils/regex/Phone.regex");
 var _LatinWithSpaces = require("../../utils/regex/LatinWithSpaces.regex");
 const getPopupFieldsRules = name => {
   switch (name) {
-    case "AllowInStoreGroups":
+    case 'AllowInStoreGroups':
       return {
         required: false
       };
-    case "BlockInStoreGroups":
+    case 'BlockInStoreGroups':
       return {
         required: false
       };
-    case "BrandDescription":
+    case 'BrandDescription':
       return {
         required: false
       };
-    case "BrandName":
+    case 'BrandName':
       return {
         required: false
       };
-    case "Broker":
+    case 'Broker':
       return {
         required: false
       };
-    case "Budget":
+    case 'Budget':
       return {
         required: false
       };
-    case "Category":
+    case 'Category':
       return {
-        required: "Category is required"
+        required: 'Category is required'
       };
-    case "CategoryLevel1":
+    case 'CategoryLevel1':
       return {
         required: false
       };
-    case "CategoryManager":
+    case 'CategoryManager':
       return {
         required: false
       };
-    case "ConditionMinBasketValue":
+    case 'ConditionMinBasketValue':
       return {
         required: false
       };
-    case "ConditionMinQuantityPurchased":
+    case 'ConditionMinQuantityPurchased':
       return {
         required: false
       };
-    case "ConsiderStoreAvailability":
+    case 'ConsiderStoreAvailability':
       return {
         required: false
       };
-    case "ContactEmail":
+    case 'ContactEmail':
       return {
-        required: "Contact Email is required",
+        required: 'Contact Email is required',
         pattern: {
           value: _Email.EmailRegex,
-          message: "invalid contact email address"
+          message: 'invalid contact email address'
         }
       };
-    case "ContactName":
+    case 'ContactName':
       return {
-        required: "Contact Name is required",
+        required: 'Contact Name is required',
         maxLength: {
           value: 17,
-          message: "Maximum 17 letters"
+          message: 'Maximum 17 letters'
         },
         minLength: {
           value: 2,
-          message: "Contact Name should include at least two letters"
+          message: 'Contact Name should include at least two letters'
         },
         pattern: {
           value: _LatinWithSpaces.OnlyLatinWithSpacesRegex,
-          message: "Only english letters allowed"
+          message: 'Only english letters allowed'
         }
       };
-    case "ContactPhone":
+    case 'ContactPhone':
       return {
         required: false,
         pattern: {
           value: _Phone.PhoneRegex,
-          message: "Please provide a valid phone number"
+          message: 'Please provide a valid phone number'
         }
       };
-    case "DescriptionLowCase":
+    case 'DescriptionLowCase':
       return {
         required: false
       };
-    case "DiscountType":
+    case 'DiscountType':
       return {
         required: false
       };
-    case "FundationSource":
+    case 'FundationSource':
       return {
-        required: "Fundation Source is required"
+        required: 'Fundation Source is required'
       };
-    case "Image":
+    case 'Image':
       return {
         required: false
       };
-    case "MaxIssuances":
+    case 'MaxIssuances':
       return {
         required: false
       };
-    case "MaxTransactions":
+    case 'MaxTransactions':
       return {
         required: false
       };
-    case "OfferInventory":
+    case 'OfferInventory':
       return {
         required: false
       };
-    case "PurchaseOrder":
+    case 'PurchaseOrder':
       return {
         required: false
       };
-    case "PurchaseOrderPDN":
+    case 'PurchaseOrderPDN':
       return {
         required: false
       };
-    case "RedemptionID":
+    case 'RedemptionID':
       return {
         required: false
       };
-    case "RewardQuantity":
+    case 'RewardQuantity':
       return {
         required: false
       };
-    case "SummaryPodHeader":
+    case 'SummaryPodHeader':
       return {
         required: false
       };
-    case "Supplier":
+    case 'Supplier':
       return {
-        required: "Supplier is required"
+        required: 'Supplier is required'
       };
-    case "SupplierOfferID":
+    case 'SupplierOfferID':
       return {
         required: false
       };
-    case "TargetAudienceType":
+    case 'TargetAudienceType':
       return {
         required: false
       };
-    case "TargetingNotes":
+    case 'TargetingNotes':
       return {
         required: false
       };
-    case "TypeReward":
+    case 'TypeReward':
       return {
         required: false
       };
-    case "VendorID":
+    case 'VendorID':
       return {
         required: false
       };
     default:
-      return "";
+      return '';
   }
 };
 exports.getPopupFieldsRules = getPopupFieldsRules;

package/dist/stories/components/CampaignTool/Table.style.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-/* eslint-disable import/prefer-default-export */
-
 const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
   background-color: white;

package/dist/stories/components/FilterButton.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FilterButton = require("./FilterButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+const FilterButton = props => {
+  const {
+    color,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick
+  } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(!activeState);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
+    height: height,
+    color: activeState ? activeColor : color,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+    width: iconWidth,
+    height: iconHeight,
+    color: activeState ? activeColor : color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
+};
+exports.FilterButton = FilterButton;
+var _default = exports.default = FilterButton;
+FilterButton.defaultProps = {
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};

package/dist/stories/components/FilterButton.style.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.FilterButtonWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/LinnerDataBox.js

@@ -26,6 +26,7 @@ const LinnerDataBox = props => {
     height: height || "200px",
     customDataFormat: customDataFormat
   }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxWrap, {
+    key: `${item.title}`,
     width: `${100 / data.length}%`
   }, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, item.title && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, {
     className: "DataBoxTitle"

package/dist/stories/components/Modal.style.js

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const fadeIn = (0, _styledComponents.keyframes)`
   from {

package/dist/stories/components/NewInput.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _NewInput = require("./NewInput.style");
+const NewInput = props => {
+  const {
+    labelText,
+    inputType,
+    onTyping
+  } = props;
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+    onTyping(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldContainer, null, /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldInput, {
+    type: inputType,
+    value: inputValue,
+    onChange: handleInputChange
+    // placeholder={labelText}
+  }), /*#__PURE__*/_react.default.createElement(_NewInput.Label, null, labelText));
+};
+var _default = exports.default = NewInput;
+NewInput.defaultProps = {
+  labelText: '',
+  inputType: 'text',
+  onTyping: () => {}
+};

package/dist/stories/components/NewInput.style.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldInput = exports.TextFieldContainer = exports.Label = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px;\n  font-size: 16px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n\n  &:focus + label,\n  &:not(:placeholder-shown) + label {\n    top: -8px;\n    font-size: 12px;\n    color: #007bff;\n    background-color: white;\n  }\n"])));
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 12px;\n  left: 10px;\n  transition: all 0.3s ease;\n  pointer-events: none;\n  font-size: 16px;\n  color: #555;\n"])));

package/dist/stories/components/QuickFilterDropdownMultiSelection.js

@@ -73,7 +73,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
       if (index !== lastIndex) {
         parts.push(text.slice(lastIndex, index));
       }
-      parts.push( /*#__PURE__*/_react.default.createElement("span", {
+      parts.push(/*#__PURE__*/_react.default.createElement("span", {
         key: index,
         className: "highlight"
       }, text.slice(index, index + highlight.length)));

package/dist/stories/components/QuickFilterDropdownSingle.js

@@ -45,7 +45,7 @@ const QuickFilterDropdownSingle = _ref => {
       if (index !== lastIndex) {
         parts.push(text.slice(lastIndex, index));
       }
-      parts.push( /*#__PURE__*/_react.default.createElement("span", {
+      parts.push(/*#__PURE__*/_react.default.createElement("span", {
         key: index,
         className: "highlight"
       }, text.slice(index, index + highlight.length)));

package/dist/stories/components/QuickFilterDropdownSingle.style.js

@@ -11,7 +11,7 @@ const QuickFilterInput = exports.QuickFilterInput = _styledComponents.default.di
   align-content: center;
   justify-content: center;
   align-items: flex-start;
-  width: ${props => props.width || "auto"};
+  width: ${props => props.width || 'auto'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -20,7 +20,7 @@ const QuickFilterInput = exports.QuickFilterInput = _styledComponents.default.di
 const Label = exports.Label = _styledComponents.default.label`
   font-size: 14px;
   font-weight: 500;
-  color: ${props => props.disabled ? "#D0D0D0" : "212121"};
+  color: ${props => props.disabled ? '#D0D0D0' : '212121'};
   font-family: "Poppins";
   white-space: nowrap;
 `;
@@ -36,28 +36,28 @@ const InputContainer = exports.InputContainer = _styledComponents.default.div`
   width: 256px;
   height: 24px;
   border: 1px solid
-    ${props => props.disabled ? "#bdbdbd" : props.error ? "red" : "#B1B1B1"};
+    ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   border-radius: 9px;
   outline: none;
-  color: ${props => props.disabled ? "#888" : "#212121"};
+  color: ${props => props.disabled ? '#888' : '#212121'};
 
   &:hover {
     border: 1px solid
-      ${props => props.disabled ? "#bdbdbd" : props.error ? "red" : props.hoverColor || "#212121"};
-    cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
+      ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.hoverColor || '#212121'};
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 
   &:focus {
     border: 1px solid
-      ${props => props.disabled ? "#bdbdbd" : props.error ? "red" : props.labelColor || "#212121"};
+      ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 `;
 const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div`
   display: flex;
-  color: ${props => props.disabled ? "#888" : "#212121"};
+  color: ${props => props.disabled ? '#888' : '#212121'};
   gap: 8px;
 `;
 const StyledInput = exports.StyledInput = _styledComponents.default.input`
@@ -67,11 +67,11 @@ const StyledInput = exports.StyledInput = _styledComponents.default.input`
   font-weight: 400;
   font-size: 14px;
   outline: none;
-  color: ${props => props.disabled ? "#888" : "#212121"};
+  color: ${props => props.disabled ? '#888' : '#212121'};
   border: none;
   background-color: transparent;
   &::placeholder {
-    color: ${props => props.disabled ? "#D0D0D0" : "#b1b1b1"};
+    color: ${props => props.disabled ? '#D0D0D0' : '#b1b1b1'};
   }
 `;
 const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div`
@@ -83,7 +83,7 @@ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.di
   background-color: #fff;
   display: ${props => {
   var _props$filteredoption;
-  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? "block" : "none";
+  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
 }};
 `;
 const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul`
@@ -101,7 +101,7 @@ const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.defa
   background-color: white;
   display: ${props => {
   var _props$filteredoption2;
-  return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? "block" : "none";
+  return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? 'block' : 'none';
 }};
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
   max-height: 400px;
@@ -116,7 +116,7 @@ const OptionItem = exports.OptionItem = _styledComponents.default.li`
   font-style: normal;
   font-weight: 400;
   transition: background-color 0.3s;
-  background-color: ${props => props.selected ? "#C7E4FF" : "#fff"};
+  background-color: ${props => props.selected ? '#C7E4FF' : '#fff'};
   &:hover {
     background-color: #edf6ff;
   }

package/dist/stories/components/ReportTable.js

@@ -292,7 +292,7 @@ const ReportTable = props => {
   })), (() => {
     const pages = [];
     const range = 2;
-    pages.push( /*#__PURE__*/_react.default.createElement("span", {
+    pages.push(/*#__PURE__*/_react.default.createElement("span", {
       key: 1,
       className: `page-number ${currentPage === 1 ? "active" : ""}`,
       onClick: () => handlePageChange(1)
@@ -302,7 +302,7 @@ const ReportTable = props => {
     }
     if (totalPages <= 10) {
       for (let i = 2; i <= totalPages; i++) {
-        pages.push( /*#__PURE__*/_react.default.createElement("span", {
+        pages.push(/*#__PURE__*/_react.default.createElement("span", {
           key: i,
           className: `page-number ${currentPage === i ? "active" : ""}`,
           onClick: () => handlePageChange(i)
@@ -321,23 +321,23 @@ const ReportTable = props => {
       end = totalPages - 1;
     }
     if (start > 2) {
-      pages.push( /*#__PURE__*/_react.default.createElement("span", {
+      pages.push(/*#__PURE__*/_react.default.createElement("span", {
         key: "ellipsis-start"
       }, "..."));
     }
     for (let i = start; i <= end; i++) {
-      pages.push( /*#__PURE__*/_react.default.createElement("span", {
+      pages.push(/*#__PURE__*/_react.default.createElement("span", {
         key: i,
         className: `page-number ${currentPage === i ? "active" : ""}`,
         onClick: () => handlePageChange(i)
       }, i));
     }
     if (end < totalPages - 1) {
-      pages.push( /*#__PURE__*/_react.default.createElement("span", {
+      pages.push(/*#__PURE__*/_react.default.createElement("span", {
         key: "ellipsis-end"
       }, "..."));
     }
-    pages.push( /*#__PURE__*/_react.default.createElement("span", {
+    pages.push(/*#__PURE__*/_react.default.createElement("span", {
       key: totalPages,
       className: `page-number ${currentPage === totalPages ? "active" : ""}`,
       onClick: () => handlePageChange(totalPages)

package/dist/stories/components/ReportTable.style.js

@@ -239,8 +239,8 @@ const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
   height: ${props => `${props.height}`};
   white-space: nowrap;
   border: 1px solid #dddddd;
-  border-radius: ${props => props.columnsNumber > props.maxColumnsNumber ? " 12px 12px 6px 6px" : "12px"};
-  overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? "auto" : "hidden"};
+  border-radius: ${props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px'};
+  overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
   ${scrollableStyles}
 `;
 const Table = exports.Table = _styledComponents.default.table`