@stokr/components-library 2.3.63-beta.2 → 2.3.65-beta.1

package/dist/components/Payment/TimerComponent.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TimerComponent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useTimer = require("../../hooks/useTimer");
+var _moment = require("../../utils/moment");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _Text = require("../Text/Text.styles");
+var _Icon = require("../Icon/Icon.style");
+var _Grid = require("../Grid/Grid.styles");
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const TimerBlock = _styledComponents.default.div.withConfig({
+  displayName: "TimerComponent__TimerBlock",
+  componentId: "sc-1gskuum-0"
+})(["background-color:", ";padding:24px 27px;text-align:start;max-width:", ";margin:auto;strong{font-weight:600;}p{font-size:14px !important;margin:0 !important;}", " ", ":first-child{margin-bottom:16px;}", ""], _colors.default.grey3, props => props.maxWidth || '550px', _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    p {\n      font-size: 16px !important;\n    }\n  "]))), _Text.Text, props => props.red && "\n    #timer-text {\n      color: ".concat(_colors.default.darkRed, ";\n    }\n  "));
+const TimerComponent = exports.TimerComponent = /*#__PURE__*/(0, _react.memo)(_ref => {
+  let {
+    timerId,
+    onTimerExpired,
+    warningThreshold = 60 * 5,
+    // 5 minutes
+    // Customizable text props
+    title = 'This offer is time-limited',
+    description = 'Please note that this offer is valid only for a limited period and will expire in',
+    // Style props
+    containerStyle,
+    timerBlockStyle,
+    className,
+    maxWidth,
+    // Icon props
+    icon = _Icon.iconsMap.inProgress,
+    iconSize = 16,
+    showIcon = true
+  } = _ref;
+  const {
+    secondsRemaining,
+    hasTimerFinished,
+    stopTimer
+  } = (0, _useTimer.useTimer)(timerId);
+
+  // Handle timer expiration
+  _react.default.useEffect(() => {
+    if (hasTimerFinished) {
+      stopTimer();
+      if (onTimerExpired) {
+        onTimerExpired();
+      }
+    }
+  }, [hasTimerFinished, onTimerExpired, stopTimer]);
+  const isWarning = secondsRemaining < warningThreshold;
+  const formattedTime = _moment.moment.utc(secondsRemaining * 1000).format('HH:mm:ss');
+  return /*#__PURE__*/_react.default.createElement(TimerBlock, {
+    red: isWarning,
+    maxWidth: maxWidth,
+    style: timerBlockStyle,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: containerStyle
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, /*#__PURE__*/_react.default.createElement(_Grid.FlexContainer, {
+    itemsCenter: true,
+    style: {
+      gap: 8
+    }
+  }, showIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: icon,
+    size: iconSize
+  }), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, title)))), /*#__PURE__*/_react.default.createElement(_Text.Text, null, /*#__PURE__*/_react.default.createElement("p", null, description, " ", /*#__PURE__*/_react.default.createElement("strong", {
+    id: "timer-text"
+  }, formattedTime)))));
+});
+TimerComponent.displayName = 'TimerComponent';
+var _default = exports.default = TimerComponent;

package/dist/components/Payment/TimerComponent.stories.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutIcon = exports.WithCallback = exports.WarningState = exports.VeryShortTimer = exports.ShortTimer = exports.LongTimer = exports.Default = exports.CustomWidth = exports.CustomWarningThreshold = exports.CustomTitle = exports.CustomStyling = exports.CustomDescription = exports.CompleteCustom = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TimerComponent = _interopRequireDefault(require("./TimerComponent"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _TimerService = _interopRequireDefault(require("../../services/TimerService"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+const _excluded = ["timerId", "duration", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var _default = exports.default = {
+  title: 'Components Library/Payment/TimerComponent',
+  component: _TimerComponent.default,
+  argTypes: {
+    timerId: {
+      control: 'text',
+      description: 'Unique identifier for the timer'
+    },
+    onTimerExpired: {
+      action: 'timerExpired',
+      description: 'Callback function called when timer expires'
+    },
+    warningThreshold: {
+      control: 'number',
+      description: 'Seconds remaining before warning state (default: 300 = 5 minutes)',
+      defaultValue: 300
+    },
+    title: {
+      control: 'text',
+      description: 'Title text displayed in the timer component'
+    },
+    description: {
+      control: 'text',
+      description: 'Description text displayed before the timer'
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Maximum width of the timer block'
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Style object for the inner container'
+    },
+    timerBlockStyle: {
+      control: 'object',
+      description: 'Style object for the timer block'
+    },
+    className: {
+      control: 'text',
+      description: 'CSS class name for the timer block'
+    },
+    icon: {
+      control: false,
+      description: 'Icon identifier from iconsMap'
+    },
+    iconSize: {
+      control: 'number',
+      description: 'Size of the icon in pixels'
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Show/hide the icon',
+      defaultValue: true
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
+}; // Helper component to start timer for stories
+const TimerWrapper = _ref => {
+  let {
+      timerId,
+      duration,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  (0, _react.useEffect)(() => {
+    // Start timer when component mounts
+    _TimerService.default.startTimer(timerId, duration, () => {},
+    // onTick callback
+    () => {} // onExpired callback
+    );
+
+    // Cleanup: stop timer when component unmounts
+    return () => {
+      _TimerService.default.stopTimer(timerId);
+    };
+  }, [timerId, duration]);
+  return /*#__PURE__*/_react.default.cloneElement(children, props);
+};
+const Template = args => {
+  const timerId = args.timerId || 'storybook-timer-1';
+  const duration = args.duration || 600; // 10 minutes default
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(TimerWrapper, _extends({
+    timerId: timerId,
+    duration: duration
+  }, args), /*#__PURE__*/_react.default.createElement(_TimerComponent.default, _extends({
+    timerId: timerId
+  }, args))));
+};
+
+// Default timer (10 minutes)
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  timerId: 'storybook-timer-default',
+  duration: 600 // 10 minutes
+};
+
+// Short timer (1 minute) - will show warning immediately
+const ShortTimer = exports.ShortTimer = Template.bind({});
+ShortTimer.args = {
+  timerId: 'storybook-timer-short',
+  duration: 60,
+  // 1 minute
+  warningThreshold: 60
+};
+
+// Warning state (less than 5 minutes)
+const WarningState = exports.WarningState = Template.bind({});
+WarningState.args = {
+  timerId: 'storybook-timer-warning',
+  duration: 240,
+  // 4 minutes - will be in warning state
+  warningThreshold: 300
+};
+
+// Very short timer (30 seconds)
+const VeryShortTimer = exports.VeryShortTimer = Template.bind({});
+VeryShortTimer.args = {
+  timerId: 'storybook-timer-very-short',
+  duration: 30,
+  // 30 seconds
+  warningThreshold: 60
+};
+
+// Custom title
+const CustomTitle = exports.CustomTitle = Template.bind({});
+CustomTitle.args = {
+  timerId: 'storybook-timer-custom-title',
+  duration: 600,
+  title: 'Limited Time Offer',
+  description: 'Hurry up! This special offer expires in'
+};
+
+// Custom description
+const CustomDescription = exports.CustomDescription = Template.bind({});
+CustomDescription.args = {
+  timerId: 'storybook-timer-custom-desc',
+  duration: 600,
+  description: 'Complete your purchase within'
+};
+
+// Without icon
+const WithoutIcon = exports.WithoutIcon = Template.bind({});
+WithoutIcon.args = {
+  timerId: 'storybook-timer-no-icon',
+  duration: 600,
+  showIcon: false
+};
+
+// Custom width
+const CustomWidth = exports.CustomWidth = Template.bind({});
+CustomWidth.args = {
+  timerId: 'storybook-timer-custom-width',
+  duration: 600,
+  maxWidth: '800px'
+};
+
+// Custom styling
+const CustomStyling = exports.CustomStyling = Template.bind({});
+CustomStyling.args = {
+  timerId: 'storybook-timer-custom-style',
+  duration: 600,
+  timerBlockStyle: {
+    backgroundColor: _colors.default.veryLightGreen,
+    border: "1px solid ".concat(_colors.default.freshGreen),
+    borderRadius: '8px'
+  },
+  containerStyle: {
+    padding: '8px'
+  }
+};
+
+// Long timer (1 hour)
+const LongTimer = exports.LongTimer = Template.bind({});
+LongTimer.args = {
+  timerId: 'storybook-timer-long',
+  duration: 3600,
+  // 1 hour
+  warningThreshold: 300
+};
+
+// Custom warning threshold
+const CustomWarningThreshold = exports.CustomWarningThreshold = Template.bind({});
+CustomWarningThreshold.args = {
+  timerId: 'storybook-timer-custom-threshold',
+  duration: 600,
+  warningThreshold: 120 // 2 minutes warning threshold
+};
+
+// Complete custom example
+const CompleteCustom = exports.CompleteCustom = Template.bind({});
+CompleteCustom.args = {
+  timerId: 'storybook-timer-complete',
+  duration: 900,
+  // 15 minutes
+  title: 'Special Promotion Ending Soon',
+  description: "Don't miss out! This exclusive deal will expire in",
+  warningThreshold: 300,
+  maxWidth: '700px',
+  iconSize: 20,
+  timerBlockStyle: {
+    backgroundColor: _colors.default.grey3,
+    borderRadius: '12px',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+  }
+};
+
+// With callback
+const WithCallback = exports.WithCallback = Template.bind({});
+WithCallback.args = {
+  timerId: 'storybook-timer-callback',
+  duration: 60,
+  // 1 minute for quick testing
+  onTimerExpired: () => {
+    console.log('Timer expired!');
+    alert('Timer has expired!');
+  }
+};

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Timeline = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Timeline = require("./Timeline.styles");
+var _TimelineStep = require("./TimelineStep");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Timeline = _ref => {
+  let {
+    steps = [],
+    maxWidth,
+    showInfoIcons = true,
+    infoIconPosition = 'right',
+    // Style props
+    containerStyle,
+    className,
+    stepStyle,
+    iconStyle,
+    contentStyle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Timeline.TimelineContainer, {
+    maxWidth: maxWidth,
+    style: containerStyle,
+    className: className
+  }, steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    const nextStep = !isLast ? steps[index + 1] : null;
+    return /*#__PURE__*/_react.default.createElement(_TimelineStep.TimelineStep, {
+      key: step.id || index,
+      state: step.state || 'inactive',
+      date: step.date,
+      title: step.title,
+      tooltip: step.tooltip,
+      caption: step.caption,
+      isLast: isLast,
+      nextState: nextStep === null || nextStep === void 0 ? void 0 : nextStep.state,
+      customIcon: step.customIcon,
+      showInfoIcon: showInfoIcons,
+      infoIconPosition: infoIconPosition,
+      stepStyle: step.stepStyle || stepStyle,
+      iconStyle: step.iconStyle || iconStyle,
+      contentStyle: step.contentStyle || contentStyle,
+      className: step.className
+    });
+  }));
+};
+exports.Timeline = Timeline;
+var _default = exports.default = Timeline;