sag_components 2.0.0-beta89 → 2.0.0-beta90

package/dist/index.js

@@ -34164,6 +34164,251 @@ const InsightsCarousel = _ref => {
   })))));
 };
 
+// eslint-disable-next-line react/prop-types
+const ErrorIcon = _ref => {
+  let {
+    color = '#FF3949',
+    width = '18',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM7 3.5C7.30469 3.5 7.5625 3.75781 7.5625 4.0625V6.6875C7.5625 7.01562 7.30469 7.25 7 7.25C6.67188 7.25 6.4375 7.01562 6.4375 6.6875V4.0625C6.4375 3.75781 6.67188 3.5 7 3.5ZM7.75 8.75C7.75 9.17188 7.39844 9.5 7 9.5C6.57812 9.5 6.25 9.17188 6.25 8.75C6.25 8.35156 6.57812 8 7 8C7.39844 8 7.75 8.35156 7.75 8.75Z",
+    fill: color
+  }));
+};
+
+// eslint-disable-next-line react/prop-types
+const SucceededIcon = _ref => {
+  let {
+    color = '#92CF17',
+    width = '18',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7 1.625C5.24219 1.625 3.64844 2.5625 2.75781 4.0625C1.89062 5.58594 1.89062 7.4375 2.75781 8.9375C3.64844 10.4609 5.24219 11.375 7 11.375C8.73438 11.375 10.3281 10.4609 11.2188 8.9375C12.0859 7.4375 12.0859 5.58594 11.2188 4.0625C10.3281 2.5625 8.73438 1.625 7 1.625ZM7 12.5C4.84375 12.5 2.875 11.375 1.79688 9.5C0.71875 7.64844 0.71875 5.375 1.79688 3.5C2.875 1.64844 4.84375 0.5 7 0.5C9.13281 0.5 11.1016 1.64844 12.1797 3.5C13.2578 5.375 13.2578 7.64844 12.1797 9.5C11.1016 11.375 9.13281 12.5 7 12.5ZM9.64844 5.39844L6.64844 8.39844C6.41406 8.63281 6.0625 8.63281 5.85156 8.39844L4.35156 6.89844C4.11719 6.6875 4.11719 6.33594 4.35156 6.125C4.5625 5.89062 4.91406 5.89062 5.14844 6.125L6.25 7.22656L8.85156 4.625C9.0625 4.39062 9.41406 4.39062 9.64844 4.625C9.85938 4.83594 9.85938 5.1875 9.64844 5.39844Z",
+    fill: color
+  }));
+};
+
+// Styled-components for the progress container and the filler
+const ProgressBarContainer = styled__default["default"].div`  
+  width: ${props => props.width};
+  background-color: #F2F2F2;
+  border-radius: 12px;
+  height:  ${props => props.height};
+  margin: 5px 0;  
+`;
+const ProgressBarFiller = styled__default["default"].div`
+  background-color: ${props => props.color};
+  height: 100%;
+  text-align: center;
+  border-radius: 12px;
+  transition: width 0.5s ease-in-out;
+  width: ${props => props.progress}%;
+`;
+
+const ProgressBar = props => {
+  const {
+    progressPercent,
+    refreshInterval,
+    height,
+    width,
+    color
+  } = props;
+  const [progress, setProgress] = React$1.useState(0);
+  React$1.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(currentProgress => {
+        const newProgress = currentProgress + 1;
+        if (newProgress > 100) {
+          clearInterval(timer);
+          return 100;
+        }
+        return newProgress;
+      });
+    }, refreshInterval);
+    return () => clearInterval(timer);
+  }, [progressPercent, refreshInterval]);
+  React$1.useEffect(() => {
+    setProgress(progressPercent);
+  }, [progressPercent]);
+  return /*#__PURE__*/React__default["default"].createElement(ProgressBarContainer, {
+    className: "ProgressBarContainer",
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default["default"].createElement(ProgressBarFiller, {
+    className: "ProgressBarFiller",
+    color: color,
+    progress: progress
+  }));
+};
+ProgressBar.propTypes = {
+  progressPercent: PropTypes.number,
+  refreshInterval: PropTypes.number,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};
+ProgressBar.defaultProps = {
+  progressPercent: 0,
+  refreshInterval: 100,
+  width: '100%',
+  height: '9px',
+  color: '#066768'
+};
+
+const DownloadProgressMainContainer = styled__default["default"].div`
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 400;
+  color: #212121;
+  line-height: 14px;
+  position: relative;
+  margin: 0;
+  padding: 10px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
+`;
+const DownloadProgressContentContainer = styled__default["default"].div` 
+  display: flex;
+  align-items: center;
+  margin: 0 10px;
+  gap: 10px;
+`;
+const DownloadProgressTitle = styled__default["default"].h3`  
+  font-weight: 400;
+  margin: 10px;  
+`;
+const DownloadProgressStatusMessage = styled__default["default"].h3`   
+  margin: 3px 0;
+  &.DownloadProgressStatusMessage_succeeded{
+    font-weight: 500;  
+  }
+  &.DownloadProgressStatusMessage_failed{
+    color: #7F7D7D;
+    font-weight: 400;  
+  }
+  &.DownloadProgressStatusMessage_TryAgain{
+    color: #1B30AA;
+    font-weight: 400;
+    text-decoration: underline;  
+    &:hover {
+    background-Color: #f1f1f1;
+    cursor: pointer;
+  } 
+  }
+`;
+
+const DownloadProgress = props => {
+  const {
+    title,
+    succeededMessage,
+    failedMessage,
+    downloadStatus,
+    showShadow,
+    progressPercent,
+    refreshInterval,
+    progressBarColor,
+    onTryAgainClick,
+    className
+  } = props;
+  const [DownloadStatus, setDownloadStatus] = React$1.useState(downloadStatus);
+  React$1.useEffect(() => {
+    setDownloadStatus(downloadStatus);
+  }, [downloadStatus]);
+  const displayProgressContent = () => {
+    let content = '';
+    switch (DownloadStatus) {
+      case 'inProgress':
+        content = /*#__PURE__*/React__default["default"].createElement(DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/React__default["default"].createElement(ProgressBar, {
+          className: "ProgressBar",
+          color: progressBarColor,
+          progressPercent: progressPercent,
+          refreshInterval: refreshInterval,
+          width: "100%"
+        }));
+        break;
+      case 'succeeded':
+        content = /*#__PURE__*/React__default["default"].createElement(DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/React__default["default"].createElement(DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_succeeded"
+        }, succeededMessage), /*#__PURE__*/React__default["default"].createElement(SucceededIcon, {
+          color: "#92CF17",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      case 'failed':
+        content = /*#__PURE__*/React__default["default"].createElement(DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/React__default["default"].createElement(DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_failed"
+        }, failedMessage), /*#__PURE__*/React__default["default"].createElement(DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_TryAgain",
+          onClick: () => onTryAgainClick({
+            eventName: 'onTryAgainClick'
+          })
+        }, "Try again"), /*#__PURE__*/React__default["default"].createElement(ErrorIcon, {
+          color: "#FF3949",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return content;
+  };
+  return /*#__PURE__*/React__default["default"].createElement(DownloadProgressMainContainer, {
+    className: className,
+    showShadow: showShadow
+  }, /*#__PURE__*/React__default["default"].createElement(DownloadProgressTitle, {
+    className: "DownloadProgressTitle"
+  }, title), displayProgressContent());
+};
+DownloadProgress.propTypes = {
+  title: PropTypes.string,
+  succeededMessage: PropTypes.string,
+  failedMessage: PropTypes.string,
+  downloadStatus: PropTypes.string,
+  showShadow: PropTypes.bool,
+  progressPercent: PropTypes.number,
+  refreshInterval: PropTypes.number,
+  progressBarColor: PropTypes.string,
+  onTryAgainClick: PropTypes.func,
+  className: PropTypes.string
+};
+DownloadProgress.defaultProps = {
+  title: 'CPG presentation shopper marketing, supplier name ',
+  succeededMessage: 'File Downloaded',
+  failedMessage: 'Something went wrong',
+  downloadStatus: 'inProgress',
+  showShadow: true,
+  progressPercent: 0,
+  refreshInterval: 100,
+  progressBarColor: '#92CF17',
+  onTryAgainClick: () => {},
+  className: 'DownloadProgressMainContainer'
+};
+
 exports.AreaChart = AreaChart;
 exports.BannerEventBoxList = BannerEventBoxList;
 exports.BarChart = BarChart;
@@ -34180,6 +34425,7 @@ exports.CollapseHeader = CollapseHeader;
 exports.DialogOverlay = DialogOverlay;
 exports.DoubleBarSingleLine = DoubleBarSingleLine;
 exports.DoublePanelDataRow = DoublePanelDataRow;
+exports.DownloadProgress = DownloadProgress;
 exports.EventDetailsCard = EventDetailsCard;
 exports.EventList = EventList;
 exports.FilterPanel = FilterPanel;