sag_components 2.0.0-beta89 → 2.0.0-beta90

package/dist/index.d.ts

@@ -1258,4 +1258,42 @@ declare function InsightsCarousel({ className, children, onClose, title, icon, t
     navColor?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseData, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, TwoBarCharts };
+declare function DownloadProgress(props: any): react_jsx_runtime.JSX.Element;
+declare namespace DownloadProgress {
+    namespace propTypes {
+        const title: PropTypes.Requireable<string>;
+        const succeededMessage: PropTypes.Requireable<string>;
+        const failedMessage: PropTypes.Requireable<string>;
+        const downloadStatus: PropTypes.Requireable<string>;
+        const showShadow: PropTypes.Requireable<boolean>;
+        const progressPercent: PropTypes.Requireable<number>;
+        const refreshInterval: PropTypes.Requireable<number>;
+        const progressBarColor: PropTypes.Requireable<string>;
+        const onTryAgainClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const className: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const title_1: string;
+        export { title_1 as title };
+        const succeededMessage_1: string;
+        export { succeededMessage_1 as succeededMessage };
+        const failedMessage_1: string;
+        export { failedMessage_1 as failedMessage };
+        const downloadStatus_1: string;
+        export { downloadStatus_1 as downloadStatus };
+        const showShadow_1: boolean;
+        export { showShadow_1 as showShadow };
+        const progressPercent_1: number;
+        export { progressPercent_1 as progressPercent };
+        const refreshInterval_1: number;
+        export { refreshInterval_1 as refreshInterval };
+        const progressBarColor_1: string;
+        export { progressBarColor_1 as progressBarColor };
+        export function onTryAgainClick_1(): void;
+        export { onTryAgainClick_1 as onTryAgainClick };
+        const className_1: string;
+        export { className_1 as className };
+    }
+}
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseData, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, TwoBarCharts };

package/dist/index.esm.js

@@ -34154,5 +34154,250 @@ const InsightsCarousel = _ref => {
   })))));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseData, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, TwoBarCharts };
+// eslint-disable-next-line react/prop-types
+const ErrorIcon = _ref => {
+  let {
+    color = '#FF3949',
+    width = '18',
+    height = '18'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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.div`  
+  width: ${props => props.width};
+  background-color: #F2F2F2;
+  border-radius: 12px;
+  height:  ${props => props.height};
+  margin: 5px 0;  
+`;
+const ProgressBarFiller = styled.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] = useState(0);
+  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]);
+  useEffect(() => {
+    setProgress(progressPercent);
+  }, [progressPercent]);
+  return /*#__PURE__*/React$1.createElement(ProgressBarContainer, {
+    className: "ProgressBarContainer",
+    width: width,
+    height: height
+  }, /*#__PURE__*/React$1.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.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.div` 
+  display: flex;
+  align-items: center;
+  margin: 0 10px;
+  gap: 10px;
+`;
+const DownloadProgressTitle = styled.h3`  
+  font-weight: 400;
+  margin: 10px;  
+`;
+const DownloadProgressStatusMessage = styled.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] = useState(downloadStatus);
+  useEffect(() => {
+    setDownloadStatus(downloadStatus);
+  }, [downloadStatus]);
+  const displayProgressContent = () => {
+    let content = '';
+    switch (DownloadStatus) {
+      case 'inProgress':
+        content = /*#__PURE__*/React$1.createElement(DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/React$1.createElement(ProgressBar, {
+          className: "ProgressBar",
+          color: progressBarColor,
+          progressPercent: progressPercent,
+          refreshInterval: refreshInterval,
+          width: "100%"
+        }));
+        break;
+      case 'succeeded':
+        content = /*#__PURE__*/React$1.createElement(DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/React$1.createElement(DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_succeeded"
+        }, succeededMessage), /*#__PURE__*/React$1.createElement(SucceededIcon, {
+          color: "#92CF17",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      case 'failed':
+        content = /*#__PURE__*/React$1.createElement(DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/React$1.createElement(DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_failed"
+        }, failedMessage), /*#__PURE__*/React$1.createElement(DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_TryAgain",
+          onClick: () => onTryAgainClick({
+            eventName: 'onTryAgainClick'
+          })
+        }, "Try again"), /*#__PURE__*/React$1.createElement(ErrorIcon, {
+          color: "#FF3949",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return content;
+  };
+  return /*#__PURE__*/React$1.createElement(DownloadProgressMainContainer, {
+    className: className,
+    showShadow: showShadow
+  }, /*#__PURE__*/React$1.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'
+};
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseData, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, TwoBarCharts };
 //# sourceMappingURL=index.esm.js.map