sag_components 1.0.85 → 1.0.86-7.2

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartsContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  z-index: 100;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["  \n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 18px;\n  background-color: #fefefe;\n  padding: 20px 30px 20px 40px;\n  border: 1px solid #888;\n  border-radius: 10px;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 10px 0;\n  margin: 0;\n  border-bottom: 1px solid #b1b1b1;\n"])));
+const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 24px;\n  margin: 0;\n"])));
+const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr); /* 3 columns */\n  flex-wrap: wrap;  \n  overflow-y: auto;\n  ", "\n  max-height:  ", ";\n  height: ", ";\n  padding: 10px 0 0 0;\n"])), scrollableStyles, props => props.maxHeight, props => props.height);
+const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n // display: flex;\n  margin: 10px 10px 10px 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n  padding-right: 10px;\n  \n"])));
+const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 20px 10px;\n"])));
+const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0 10px;\n  color: ", ";\n"])), props => props.subtitleTextColor);
+const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 10px;\n"])));
+const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n  border-radius: 12px;\n"])));
+const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: 0;\n  cursor: pointer;\n"])));

package/dist/stories/components/PopupCharts.js

@@ -0,0 +1,244 @@
+"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 _TotalDoughnutChart = require("./TotalDoughnutChart");
+var _BarChartsByWeeks = require("./BarChartsByWeeks");
+var _TotalHorizontalCharts = require("./TotalHorizontalCharts");
+var _MarketShareDescription = require("./MarketShareDescription");
+var _SalesAndROI = require("./SalesAndROI");
+var _CloseXIcon = require("./icons/CloseXIcon");
+var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("./icons/HannafordIcon_new");
+var _PopupCharts = require("./PopupCharts.style");
+const PopupCharts = props => {
+  const {
+    title,
+    chartType,
+    popupChartsItemsData,
+    isPopupChartsOpen,
+    width,
+    height,
+    subtitleTextColor,
+    onCloseClick
+  } = props;
+  const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
+  const divRef = (0, _react.useRef)(null);
+  const [divHeight, setDivHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (divRef.current) {
+      const {
+        top,
+        bottom
+      } = divRef.current.getBoundingClientRect();
+      const newHeight = bottom - top;
+      setDivHeight(newHeight);
+    }
+  }, [height]);
+  (0, _react.useEffect)(() => {
+    setIsPopupChartsOpen(isPopupChartsOpen);
+  }, [isPopupChartsOpen]);
+  const closePopupCharts = e => {
+    setIsPopupChartsOpen(false);
+    onCloseClick(e);
+  };
+  const displayRetailerIcon = retailer => {
+    switch (retailer) {
+      case 'Food Lion':
+        return /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null);
+      case 'Hannaford':
+        return /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null);
+      case 'Stop&Shop':
+        return /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null);
+      case 'The Giant Company':
+        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null);
+      case 'Giant Food':
+        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null);
+      default:
+        return '';
+    }
+  };
+  const displayDoughnutChart = rowsData => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
+    currencySign: true,
+    dotCut: true,
+    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    height: "270px",
+    width: "100%",
+    itemsValuesSeparateLine: false,
+    isPercent: true
+  });
+  const displayBarChartsByWeeks = (rowsData, showTwoBars) => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
+    showTwoBars: showTwoBars,
+    headerValueTopTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueTopTitle,
+    headerValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValue,
+    headerValueBottomTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueBottomTitle,
+    HeaderValueIsPercent: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue,
+    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
+    showLegend: rowsData === null || rowsData === void 0 ? void 0 : rowsData.showLegend,
+    barChartColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartColor,
+    barChartSecondColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartSecondColor,
+    barChartData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartData,
+    endWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.endWeekRange,
+    startWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.startWeekRange,
+    title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
+    tooltipTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipTitle,
+    tooltipSecondTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipSecondTitle,
+    height: "240px",
+    width: "100%",
+    xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor,
+    isPercentValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue
+  });
+  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
+    currencySign: true,
+    dotCut: true,
+    chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    showOutgoingBanner: false,
+    height: "240px",
+    width: "100%"
+  });
+  const displayMarketShareDescription = rowsData => {
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MarketShareDescription, {
+      marketShareData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.marketShareData,
+      height: "240px",
+      width: "100%",
+      iconColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.iconColor // "#229E38"
+    });
+    return content;
+  };
+  const displaySalesAndROI = rowsData => {
+    const content = /*#__PURE__*/_react.default.createElement(_SalesAndROI.SalesAndROI, {
+      title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
+      dotCut: rowsData === null || rowsData === void 0 ? void 0 : rowsData.dotCut,
+      currencySign: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencySign,
+      currencyType: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencyType,
+      salesData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.salesData,
+      noDataText: rowsData === null || rowsData === void 0 ? void 0 : rowsData.noDataText,
+      showBanner: false,
+      showBorderShadow: false,
+      height: "280px",
+      width: "100%"
+    });
+    return content;
+  };
+  const displayChart = item => {
+    var _item$rowsData, _item$rowsData2, _item$rowsData3, _item$rowsData4, _item$rowsData5, _item$rowsData6;
+    let content;
+    switch (chartType) {
+      case 'TotalDoughnutChart':
+        content = displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails);
+        break;
+      case 'TotalHorizontalCharts':
+        content = displayTotalHorizontalCharts((_item$rowsData2 = item.rowsData) === null || _item$rowsData2 === void 0 ? void 0 : _item$rowsData2.TotalHorizontalChartsDetails);
+        break;
+      case 'BarChartsByWeeks':
+        content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails, false);
+        break;
+      case 'BarChartsByWeeksTwoBars':
+        content = displayBarChartsByWeeks((_item$rowsData4 = item.rowsData) === null || _item$rowsData4 === void 0 ? void 0 : _item$rowsData4.BarChartsByWeeksDetails, true);
+        break;
+      case 'MarketShareDescription':
+        content = displayMarketShareDescription((_item$rowsData5 = item.rowsData) === null || _item$rowsData5 === void 0 ? void 0 : _item$rowsData5.MarketShareDescriptionDetails);
+        break;
+      case 'SalesAndROI':
+        content = displaySalesAndROI((_item$rowsData6 = item.rowsData) === null || _item$rowsData6 === void 0 ? void 0 : _item$rowsData6.SalesAndROIDetails);
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", null, content);
+  };
+  const displayChartItem = item => /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
+    id: "ChartItemMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
+    id: "ChartItemContainer",
+    style: {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
+    id: "ChartItemIconContainer"
+  }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
+    id: "ChartItemTitle",
+    subtitleTextColor: subtitleTextColor
+  }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
+    id: "ChartContentContainer"
+  }, displayChart(item)));
+  return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
+    id: "MainContainer"
+  }, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
+    id: "ModalOverlay",
+    className: "modal-overlay"
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalContent, {
+    id: "ModalContent",
+    ref: divRef,
+    className: "modal-content",
+    height: height,
+    width: width,
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
+    onClick: e => closePopupCharts(e)
+  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartsContainer, {
+    id: "ChartsContainer",
+    maxHeight: divHeight ? (divHeight - 110).toString().concat('', 'px') : null,
+    height: (popupChartsItemsData === null || popupChartsItemsData === void 0 ? void 0 : popupChartsItemsData.length) < 4 ? '45%' : '100%'
+  }, popupChartsItemsData.map(item => displayChartItem(item))))));
+};
+var _default = exports.default = PopupCharts;
+PopupCharts.defaultProps = {
+  title: 'Switching Pattern',
+  chartType: 'TotalDoughnutChart',
+  isPopupChartsOpen: true,
+  popupChartsItemsData: [{
+    title: 'Item 1',
+    chartType: 'TotalDoughnutChart',
+    value: 100,
+    legendData: [{
+      color: '#FF0000',
+      name: 'Red',
+      value: 50
+    }, {
+      color: '#00FF00',
+      name: 'Green',
+      value: 30
+    }, {
+      color: '#0000FF',
+      name: 'Blue',
+      value: 20
+    }],
+    noDataText: 'No data available'
+  }, {
+    title: 'Item 2',
+    chartType: 'TotalHorizontalCharts',
+    value: 200,
+    chartsData: [{
+      label: 'Label 1',
+      value: 50
+    }, {
+      label: 'Label 2',
+      value: 100
+    }, {
+      label: 'Label 3',
+      value: 150
+    }],
+    noDataText: 'No data available'
+  }
+  // Add more items as needed
+  ],
+  width: '1700px',
+  height: '800px',
+  onCloseClick: () => {},
+  subtitleTextColor: '#7E7E7E'
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartsContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  z-index: 100;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["  \n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 18px;\n  background-color: #fefefe;\n  padding: 20px 30px 20px 40px;\n  border: 1px solid #888;\n  border-radius: 10px;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 10px 0;\n  margin: 0;\n  border-bottom: 1px solid #b1b1b1;\n"])));
+const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 24px;\n  margin: 0;\n"])));
+const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr); /* 3 columns */\n  flex-wrap: wrap;  \n  overflow-y: auto;\n  ", "\n  max-height:  ", ";\n  height: ", ";\n  padding: 10px 0 0 0;\n"])), scrollableStyles, props => props.maxHeight, props => props.height);
+const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n // display: flex;\n  margin: 10px 10px 10px 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n  padding-right: 10px;\n  \n"])));
+const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 20px 10px;\n"])));
+const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0 10px;\n  color: ", ";\n"])), props => props.subtitleTextColor);
+const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 10px;\n"])));
+const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n  border-radius: 12px;\n"])));
+const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: 0;\n  cursor: pointer;\n"])));

package/dist/stories/components/PopupContent/PopupContent.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PopupContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _FormSelect = require("../FormSelect/FormSelect");
+var _FormInput = require("../FormInput/FormInput");
+var _Datepicker = require("../Datepicker/Datepicker");
+var _PopupContent = require("./PopupContent.style");
+/* PopupContent */
+const PopupContent = props => {
+  let {
+    width,
+    height,
+    children
+  } = props;
+  const methods = (0, _reactHookForm.useFormContext)();
+  const {
+    rowsData,
+    onClick,
+    onChange,
+    borderColor
+  } = props;
+  const [RowsDataState, setRowsDataState] = (0, _react.useState)(rowsData);
+  (0, _react.useEffect)(() => {
+    // console.log("RowsDataState", RowsDataState);
+  }, [RowsDataState]);
+  const displayRowFields = function (data, height) {
+    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
+    if (data && data.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_PopupContent.FieldsContainer, {
+        id: "FieldsContainer",
+        height: height,
+        paddingBottom: paddingBottom
+      }, children, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_PopupContent.FieldContainer, {
+        id: "FieldContainer"
+      }, item.inputType === 'dropdown' ? /*#__PURE__*/_react.default.createElement(_FormSelect.FormSelect, {
+        id: "Select",
+        name: item.name,
+        control: methods.control,
+        errorMessage: "",
+        label: item.label,
+        required: item.required,
+        placeHolder: item.placeHolder
+        // onChange={item.onChange}
+        ,
+        options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
+        height: "45px",
+        width: "100%"
+      }) : item.inputType === 'textbox' ? /*#__PURE__*/_react.default.createElement(_FormInput.FormInput, {
+        id: "FormInput",
+        name: item.name,
+        control: methods.control,
+        borderRadius: "4px",
+        required: item.required,
+        label: item.label,
+        placeholder: item.placeHolder,
+        height: "45px",
+        width: "100%"
+        // onChange={item.onChange}
+        ,
+        borderColor: borderColor
+      }) : item.inputType === 'datepicker' ? /*#__PURE__*/_react.default.createElement(_PopupContent.DatePickerContainer, {
+        id: "DatePickerContainer"
+      }, /*#__PURE__*/_react.default.createElement(_Datepicker.Datepicker, {
+        id: "Datepicker",
+        name: item.name,
+        required: item.required,
+        placeholder: item.placeHolder,
+        borderColor: borderColor,
+        format: "MM/DD/YYYY",
+        labelColor: borderColor,
+        onChange: () => {},
+        shape: "square",
+        text: item.label,
+        height: "45px",
+        width: "100%"
+      })) : '')));
+    }
+  };
+  const displayRows = () => {
+    if (RowsDataState && RowsDataState.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_PopupContent.AllFieldsContainer, {
+        id: "AllFieldsContainer"
+      }, RowsDataState.map((row, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayRowFields(row.fieldsArray, height = '160px', '20px'))));
+    }
+  };
+
+  //= ======================================== MAIN RETURN ====================================
+  return /*#__PURE__*/_react.default.createElement(_PopupContent.MainContainer, {
+    id: "MainContainer",
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_PopupContent.PanelContainer, {
+    id: "PanelContainer"
+  }, displayRows()));
+  //= ======================================== MAIN RETURN END====================================
+};
+exports.PopupContent = PopupContent;
+var _default = exports.default = PopupContent;
+PopupContent.defaultProps = {
+  RowsData: [],
+  borderColor: '#066768',
+  width: '100%',
+  height: '100%',
+  onClick: () => {}
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelContainer = exports.MainContainer = exports.FieldsContainer = exports.FieldTitle = exports.FieldContainer = exports.DatePickerContainer = exports.AllFieldsContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), props => {
+  return props.width;
+}, props => {
+  return props.height;
+});
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 0 10px ;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
+const FieldTitle = exports.FieldTitle = _styledComponents.default.h4(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  white-space: wrap;\n  padding: 10px;\n  gap: 20px;\n  width: 100%;\n \n"])));
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n  width: 100%;\n  margin: 0;\n \n"])));
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));

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

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