oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-plan-card/PlanCard.js

@@ -0,0 +1,183 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _FlashOn = _interopRequireDefault(require("@material-ui/icons/FlashOn"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * PlanCard component renders a card with plan details.
+ * It displays the plan heading, heading2, heading3, price, subText, benefits and buttons.
+ * The benefits are displayed as a list of items.
+ * The buttons are displayed as a list of items.
+ * The component also renders a modal with the title "See All Benefits" and lists all the benefits.
+ * The modal is displayed when the user clicks on the "See All Benefits" button.
+ * @param {object} props - The props object.
+ * @param {string} props['data-test'] - The data-test attribute.
+ * @param {object} props.cardData - The card data.
+ * @param {string} props.cardData.heading1 - The heading1 of the card.
+ * @param {string} props.cardData.heading2 - The heading2 of the card.
+ * @param {string} props.cardData.heading3 - The heading3 of the card.
+ * @param {string} props.cardData.topRightText - The top right text of the card.
+ * @param {string} props.cardData.iconLink - The icon link of the card.
+ * @param {array} props.cardData.annotatedTexts - The annotated texts of the card.
+ * @param {array} props.cardData.buttons - The buttons of the card.
+ * @param {function} props.onClickofSeeBenefits - The callback function when the user clicks on the "See All Benefits" button.
+ */
+function PlanCard(_ref) {
+  var _cardData$iconLink, _cardData$buttons, _cardData$buttons2, _cardData$buttons$0$i, _cardData$buttons$;
+  let {
+    'data-test': dataTest,
+    cardData,
+    onClickofSeeBenefits
+  } = _ref;
+  const [isModalVisible, setIsModalVisible] = (0, _react.useState)(false);
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+  const showModal = () => {
+    onClickofSeeBenefits();
+    setIsModalVisible(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.PlanCardStyle, {
+    "data-test": dataTest
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "planCard"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "damage-protection-plan"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "plan-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "planHeader"
+  }, /*#__PURE__*/_react.default.createElement("div", null, (cardData === null || cardData === void 0 ? void 0 : cardData.heading1) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData === null || cardData === void 0 ? void 0 : cardData.heading1)), (cardData === null || cardData === void 0 ? void 0 : cardData.topRightText) && /*#__PURE__*/_react.default.createElement("span", {
+    className: "top-right-text"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData === null || cardData === void 0 ? void 0 : cardData.topRightText)), /*#__PURE__*/_react.default.createElement("div", null, cardData.heading2 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "primary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.heading2))), cardData.heading3 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-8 flexMin"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "secondary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.heading3)), (cardData === null || cardData === void 0 ? void 0 : cardData.heading3TooltipText) && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    isDisplayed: true,
+    title: /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.heading3TooltipText)
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _InfoOutlined.default,
+    color: "primary",
+    size: 20
+  }))))), (cardData === null || cardData === void 0 || (_cardData$iconLink = cardData.iconLink) === null || _cardData$iconLink === void 0 ? void 0 : _cardData$iconLink.length) > 0 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
+    src: cardData === null || cardData === void 0 ? void 0 : cardData.iconLink,
+    alt: "category"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "planContent"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "price"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-h3-500",
+    color: "primary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.text)), ' ', cardData.strikethroughText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "placeholder-text"
+  }, /*#__PURE__*/_react.default.createElement("strike", null, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.strikethroughText))), ' ', cardData.inlineText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "positive",
+    className: "type-button-500"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.inlineText))), cardData.subText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "secondary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData.subText)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "benefits"
+  }, cardData.annotatedTexts.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "benefit-item"
+  }, item.iconType === 'LIGHTNING' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", null, item.texts.map((benefit, i) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _FlashOn.default,
+    size: 20,
+    color: "tags"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, benefit)))))), item.iconType === 'VERIFIED' && /*#__PURE__*/_react.default.createElement("ul", null, item.texts.map((benefit, i) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CheckCircle.default,
+    size: 20,
+    color: "positive"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, benefit)))))))), (cardData === null || cardData === void 0 || (_cardData$buttons = cardData.buttons) === null || _cardData$buttons === void 0 || (_cardData$buttons = _cardData$buttons[0]) === null || _cardData$buttons === void 0 || (_cardData$buttons = _cardData$buttons.value) === null || _cardData$buttons === void 0 ? void 0 : _cardData$buttons.text) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexEnd"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, cardData === null || cardData === void 0 || (_cardData$buttons2 = cardData.buttons) === null || _cardData$buttons2 === void 0 || (_cardData$buttons2 = _cardData$buttons2[0]) === null || _cardData$buttons2 === void 0 || (_cardData$buttons2 = _cardData$buttons2.value) === null || _cardData$buttons2 === void 0 ? void 0 : _cardData$buttons2.text),
+    className: "action-button",
+    onClick: showModal,
+    type: "secondary",
+    size: "large"
+  })))), /*#__PURE__*/_react.default.createElement(_styles.BenfitsModalStyle, null, /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    title: "See All Benefits",
+    open: isModalVisible,
+    onCancel: handleCancel,
+    footer: null,
+    className: "seeAllBenefits",
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement("ul", null, (_cardData$buttons$0$i = cardData === null || cardData === void 0 || (_cardData$buttons$ = cardData.buttons[0]) === null || _cardData$buttons$ === void 0 || (_cardData$buttons$ = _cardData$buttons$.infoPoints) === null || _cardData$buttons$ === void 0 ? void 0 : _cardData$buttons$.map((item, index) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CheckCircle.default,
+    size: 20,
+    color: "positive"
+  }), /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, item)))) !== null && _cardData$buttons$0$i !== void 0 ? _cardData$buttons$0$i : 'No Benfits Found'))))));
+}
+PlanCard.propTypes = {
+  'data-test': _propTypes.default.string,
+  onClickofSeeBenefits: _propTypes.default.func,
+  cardData: _propTypes.default.shape({
+    heading1: _propTypes.default.string.isRequired,
+    heading2: _propTypes.default.string.isRequired,
+    heading3: _propTypes.default.string.isRequired,
+    heading3TooltipText: _propTypes.default.string,
+    text: _propTypes.default.string.isRequired,
+    strikethroughText: _propTypes.default.string.isRequired,
+    inlineText: _propTypes.default.string.isRequired,
+    subText: _propTypes.default.string.isRequired,
+    topRightText: _propTypes.default.string,
+    // Optional
+    iconLink: _propTypes.default.string,
+    // Optional
+    annotatedTexts: _propTypes.default.arrayOf(_propTypes.default.shape({
+      texts: _propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired,
+      iconType: _propTypes.default.string // Optional
+    })).isRequired,
+    buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.number.isRequired,
+      value: _propTypes.default.shape({
+        text: _propTypes.default.string.isRequired
+      }).isRequired,
+      infoPoints: _propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired
+    })).isRequired
+  }).isRequired
+};
+PlanCard.defaultProps = {
+  'data-test': null,
+  onClickofSeeBenefits: () => {}
+};
+var _default = exports.default = PlanCard;

package/build/widgets/oa-widget-plan-card/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PlanCardStyle = exports.BenfitsModalStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const PlanCardStyle = exports.PlanCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .planCard{\n    border-radius: 12px;\n    border: 1px solid var(--color-divider);\n    background: #FFF;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    padding: 36px 16px 24px;\n    position: relative;\n    overflow: hidden;\n  }\n    .top-right-text{\n    border-radius: 4px;\n    background: var(--color-positive);\n    color: var(--color-primary-background);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px; \n    padding: 4px;\n    position: absolute;\n    right: 0;\n    top: 0;\n    }\n    .flexMin{\n    display: flex;\n    gap: 4px;\n    }\n    .planContent{\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n    }\n        .price{\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        }\n        ul{\n            list-style: none;\n            list-style-position: inside;\n            padding: 0;\n            margin: 0;\n        }\n            .planHeader{\n            display: flex;\n            gap: 16px;\n            padding: 0 0 16px;\n            }\n    ul li{\n        display: flex;\n        align-items: flex-start;\n        gap: 8px;\n        padding: 0 0 8px;\n    }\n    .flexMin svg{\n      cursor: pointer;\n    }  \n    .flexEnd{\n       display: flex;\n    justify-content: end;\n       }\n    .benefits{\n        display: flex;\n        gap: 16px;\n        flex-direction: column;\n    }\n        \n"])));
+const BenfitsModalStyle = exports.BenfitsModalStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n}\n    .seeAllBenefits ul li{\n          display: flex !important;\n        gap: 8px !important;\n        padding: 0 0 16px !important;\n        }\n        .seeAllBenefits ul {\n          list-style: none !important;\n          list-style-position: inside !important;\n              padding: 0 !important;\n        }\n\n"])));

package/build/widgets/oa-widget-preview/Preview.js

@@ -0,0 +1,172 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Preview;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ZoomImageComponent = _interopRequireDefault(require("./ZoomImageComponent"));
+var _leftIcon = _interopRequireDefault(require("../../images/left-icon.svg"));
+var _rightIcon = _interopRequireDefault(require("../../images/right-icon.svg"));
+var _zoom = _interopRequireDefault(require("../../images/zoom.svg"));
+var _close = _interopRequireDefault(require("../../images/close.svg"));
+var _utils = require("../../utils");
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
+/**
+ * Preview component for displaying a carousel of images and videos.
+ *
+ * Props:
+ * - srcArray: An array of media objects containing `src`, `text`, and `type` ('image' or 'video').
+ * - initialImageIndex: The initial index of the media to be displayed.
+ *
+ * State:
+ * - currentImageIndex: Index of the currently displayed media.
+ * - selectedMedia: URL of the currently selected media.
+ * - isModalOpen: Boolean indicating if the zoom modal is open.
+ *
+ * Behavior:
+ * - Allows navigation between media items using left and right icons.
+ * - Supports zooming into an image by opening a modal.
+ * - Provides keyboard accessibility for navigating and selecting media.
+ */
+function Preview(_ref) {
+  var _srcArray$initialImag, _srcArray$currentImag;
+  let {
+    srcArray = [],
+    // Array of media (images/videos)
+    initialImageIndex = 0 // The starting index of the image/video
+  } = _ref;
+  const [currentImageIndex, setCurrentImageIndex] = (0, _react.useState)(initialImageIndex);
+  const [selectedMedia, setSelectedMedia] = (0, _react.useState)(((_srcArray$initialImag = srcArray[initialImageIndex]) === null || _srcArray$initialImag === void 0 ? void 0 : _srcArray$initialImag.src) || '');
+  const [isModalOpen, setModalOpen] = (0, _react.useState)(false);
+  const isSingleMedia = srcArray.length <= 1;
+  const isVideo = ((_srcArray$currentImag = srcArray[currentImageIndex]) === null || _srcArray$currentImag === void 0 ? void 0 : _srcArray$currentImag.type) === 'video';
+  (0, _react.useEffect)(() => {
+    var _srcArray$currentImag2;
+    setSelectedMedia((_srcArray$currentImag2 = srcArray[currentImageIndex]) === null || _srcArray$currentImag2 === void 0 ? void 0 : _srcArray$currentImag2.src);
+  }, [currentImageIndex, srcArray]);
+
+  /**
+  * Navigates to the previous media item in the carousel.
+  * Updates the `currentImageIndex` to the previous index, wrapping around
+  * if necessary to cycle through the media items.
+  */
+  const handlePrevious = () => {
+    const newIndex = (currentImageIndex - 1 + srcArray.length) % srcArray.length;
+    setCurrentImageIndex(newIndex);
+  };
+
+  /**
+   * Navigates to the next media item in the carousel.
+   * Updates the `currentImageIndex` to the next index, wrapping around
+   * if necessary to cycle through the media items.
+   */
+  const handleNext = () => {
+    const newIndex = (currentImageIndex + 1) % srcArray.length;
+    setCurrentImageIndex(newIndex);
+  };
+  const handleZoom = () => setModalOpen(true);
+  const handleCancel = () => setModalOpen(false);
+  return /*#__PURE__*/_react.default.createElement(_styles.ImgPreviewStyles, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mainStylePreview"
+  }, !isSingleMedia && /*#__PURE__*/_react.default.createElement("img", {
+    className: "left-icon",
+    onClick: handlePrevious,
+    src: _leftIcon.default,
+    alt: "Previous",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handlePrevious();
+      }
+    }
+  }), selectedMedia && /*#__PURE__*/_react.default.createElement("div", {
+    className: isSingleMedia ? 'singleVideoselected' : 'selected'
+  }, isVideo ? /*#__PURE__*/_react.default.createElement("video", {
+    src: selectedMedia,
+    controls: true,
+    muted: false
+  }, /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "imgContainerHeight"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: selectedMedia,
+    alt: "Selected Media"
+  })), !isVideo && /*#__PURE__*/_react.default.createElement("img", {
+    onClick: handleZoom,
+    src: _zoom.default,
+    className: "zoomIn",
+    alt: "Zoom Icon",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleZoom();
+      }
+    }
+  })), !isSingleMedia && /*#__PURE__*/_react.default.createElement("img", {
+    className: "right-icon",
+    onClick: handleNext,
+    src: _rightIcon.default,
+    alt: "Next",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleNext();
+      }
+    }
+  }), !isSingleMedia && /*#__PURE__*/_react.default.createElement("ul", {
+    className: "imgContainer"
+  }, srcArray.map((media, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: "media-".concat((0, _utils.getUUID)()),
+    className: "imgArea"
+  }, media.type === 'video' ? /*#__PURE__*/_react.default.createElement("video", {
+    className: currentImageIndex === index ? 'selected-thumbnail' : '',
+    src: media.src,
+    onClick: () => setCurrentImageIndex(index)
+  }, ' ', /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })) : /*#__PURE__*/_react.default.createElement("img", {
+    className: currentImageIndex === index ? 'selected-thumbnail' : '',
+    src: media.src,
+    alt: "Thumbnail ".concat(index),
+    onClick: () => setCurrentImageIndex(index),
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        // Add keyboard support
+        setCurrentImageIndex(index);
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: currentImageIndex === index ? 'selected-thumb' : ''
+  }, media.text)))), selectedMedia && /*#__PURE__*/_react.default.createElement(_ZoomImageComponent.default, {
+    isModalOpen: isModalOpen,
+    handleCancel: handleCancel,
+    selectedMedia: selectedMedia,
+    closeIcon: _close.default,
+    isVideo: isVideo
+  })));
+}
+Preview.propTypes = {
+  srcArray: _propTypes.default.arrayOf(_propTypes.default.shape({
+    src: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['image', 'video'])
+  })).isRequired,
+  initialImageIndex: _propTypes.default.number
+};
+Preview.defaultProps = {
+  initialImageIndex: 0
+};

package/build/widgets/oa-widget-preview/ZoomImageComponent.js

@@ -0,0 +1,95 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
+/**
+ * ZoomMediaComponent
+ *
+ * @param {boolean} isModalOpen - Indicates whether the Modal should be visible or not
+ * @param {function} handleCancel - Callback for when the Modal should be closed
+ * @param {string} selectedMedia - URL of the selected media (image or video)
+ * @param {string} closeIcon - URL of the close icon
+ * @param {boolean} isVideo - Whether the selected media is a video or not
+ *
+ * @returns {React.ReactElement} - A JSX element representing the ZoomModal
+ *
+ * The ZoomModal displays the selected media (image or video) in a Modal.
+ * The Modal is only visible when `isModalOpen` is true.
+ * The Modal can be closed by clicking on the close icon in the top right or by pressing the Escape key.
+ * The Modal can also be closed by calling the `handleCancel` callback.
+ * The selected media is displayed in the Modal with a double click handler that toggles the zoom view.
+ * The zoom view is only enabled on mobile devices.
+ * The selected media is rendered as an image if `isVideo` is false, otherwise it is rendered as a video.
+ */
+function ZoomMediaComponent(_ref) {
+  let {
+    isModalOpen,
+    handleCancel,
+    selectedMedia,
+    closeIcon,
+    isVideo
+  } = _ref;
+  const [zoomView, setZoomView] = (0, _react.useState)(false);
+  const isMobileDevice = window.innerWidth <= 600;
+
+  /**
+  * Toggles the zoom view state for the media in the modal.
+  * Updates the `zoomView` state to either enable or disable the zoom effect.
+  */
+  const handleZoomModal = () => {
+    setZoomView(prev => !prev);
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.ImgPreviewStyles, null, /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    className: "zoomModal",
+    visible: isModalOpen,
+    onCancel: handleCancel,
+    width: 1024,
+    footer: null
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: closeIcon,
+    onClick: handleCancel,
+    className: "closedIcon",
+    alt: "Close Icon",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleCancel();
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, isVideo ? /*#__PURE__*/_react.default.createElement("video", {
+    className: zoomView ? 'zoomActive' : '',
+    onDoubleClick: isMobileDevice ? handleZoomModal : null,
+    controls: true,
+    src: selectedMedia
+  }, /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })) : /*#__PURE__*/_react.default.createElement("img", {
+    className: zoomView ? 'zoomActive' : 'modalImg',
+    onDoubleClick: isMobileDevice ? handleZoomModal : null,
+    src: selectedMedia,
+    alt: "Selected",
+    role: "presentation"
+  }))));
+}
+ZoomMediaComponent.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  handleCancel: _propTypes.default.func.isRequired,
+  selectedMedia: _propTypes.default.string.isRequired,
+  closeIcon: _propTypes.default.string.isRequired,
+  isVideo: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = ZoomMediaComponent;

package/build/widgets/oa-widget-preview/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImgPreviewStyles = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const ImgPreviewStyles = exports.ImgPreviewStyles = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.mainStylePreview .selected {\n    width: 302px;\n    margin: 0 auto;\n    height: 56vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.singleVideoselected{\n    max-width: 360px;\n  width: 100%;\n  margin: 0 auto;\n  height: calc(100vh - 101px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.imgContainer {\n  display: flex;\n  overflow-x: auto;\n  background-color: #fafafa;\n  box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 12%);\n  padding: 16px;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n}\n.imgArea {\n  margin-right: 20px;\n  list-style: none;\n  width: 116px;\n}\n.imgArea img,\n.imgArea video {\n  width: 116px !important;\n  height: 116px;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.imgArea video {\n  border: 1px solid var(--color-divider);\n}\n.imgArea span {\n  display: block;\n  text-align: center;\n  margin: 4px 0 0;\n  color: var(--color-primary-content);\n}\n.mainStylePreview .selected img {\n  width: 100%;\n}\n.mainStylePreview .selected img.zoomIn,\n.mismatchDrawer .ovrScroll .deicePic .zoomIn {\n  width: auto;\n  position: absolute;\n  cursor: pointer;\n  opacity: 0.8;\n}\n.left-icon {\n  position: absolute;\n  top: 35%;\n  font-size: 30px;\n  cursor: pointer;\n  left: 40px;\n}\n.right-icon {\n  position: absolute;\n  top: 35%;\n  right: 40px;\n  font-size: 30px;\n  cursor: pointer;\n}\n.zoomModal .ant-modal-body {\n  height: 420px;\n  overflow-x: auto;\n  margin: 16px 0 0;\n}\n.zoomModal .closedIcon {\n  display: none;\n}\n.modalImg {\n  width: 100%;\n}\n  .imgContainerHeight{\n  height: 260px;\n      display: flex;\n  }\n.imgContainer .selected-thumbnail {\n  border: 2px solid var(--color-primary);\n}\n.imgContainer .selected-thumb {\n  color: var(--color-primary);\n}\n.imgContainer span {\n  width: 116px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.mainStylePreview .selected video {\n    height: 260px;\n    width: 100%;\n  }\n  .singleVideoselected img:first-child{\n    width: 100%;\n    margin: 0 auto;\n    display: block;\n  }\n  .singleVideoselected .zoomIn{\n    position: absolute;\n  }\n.singleVideoselected video {\n  height: 440px;\n  width: 100%;\n}\n@media screen and (max-width: 600px) {\n  .zoomModal .ant-modal-content {\n    position: fixed !important;\n  }\n    .imgContainerHeight{\n      height: auto;}\n}\n\n\n"])));

package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ProfileDataWidget;
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+function ProfileDataWidget(_ref) {
+  let {
+    image,
+    title,
+    line1,
+    line2,
+    line3,
+    line4,
+    line5,
+    alignProfile
+  } = _ref;
+  // Determine what to display in the icon
+  const getIconContent = () => {
+    if (!(image !== null && image !== void 0 && image.visible)) return null;
+    if (image.imageType === "source" && image.imageFile) {
+      return /*#__PURE__*/_react.default.createElement("img", {
+        src: image.imageFile,
+        alt: "Profile",
+        style: {
+          width: "100%",
+          height: "100%",
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      });
+    }
+    if (image.imageType === "letterIcon") {
+      const letter = title !== null && title !== void 0 && title.label ? title.label.charAt(0).toUpperCase() : "";
+      return letter;
+    }
+    return null;
+  };
+  const resolveToken = token => "var(--color-".concat(String(token || "").trim(), ")");
+  return /*#__PURE__*/_react.default.createElement(_styles.ProfileDataContainer, {
+    alignProfile: alignProfile
+  }, (image === null || image === void 0 ? void 0 : image.visible) && /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
+    style: {
+      backgroundColor: resolveToken(image === null || image === void 0 ? void 0 : image.bgColor),
+      color: resolveToken(image === null || image === void 0 ? void 0 : image.color)
+    }
+  }, getIconContent()), /*#__PURE__*/_react.default.createElement(_styles.ProfileInfo, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: (title === null || title === void 0 ? void 0 : title.color) || "primary-content",
+    typography: (title === null || title === void 0 ? void 0 : title.typography) || "type-h3-500",
+    className: "company-name"
+  }, (title === null || title === void 0 ? void 0 : title.label) || ""), /*#__PURE__*/_react.default.createElement("div", {
+    className: "company-details"
+  }, line1 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line1.color || "secondary-content",
+    typography: line1.typography || "type-b1-400"
+  }, line1.label || ""), line2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line2.color || "secondary-content",
+    typography: line2.typography || "type-b1-400"
+  }, line2.label || ""), line3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line3.color || "secondary-content",
+    typography: line3.typography || "type-b1-400"
+  }, line3.label || ""), line4 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line4.color || "secondary-content",
+    typography: line4.typography || "type-b1-400"
+  }, line4.label || ""), line5 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: line5.color || "secondary-content",
+    typography: line5.typography || "type-b1-400"
+  }, line5.label || ""))));
+}
+ProfileDataWidget.propTypes = {
+  image: _propTypes.default.shape({
+    visible: _propTypes.default.bool,
+    imageType: _propTypes.default.oneOf(["source", "letterIcon"]),
+    imageFile: _propTypes.default.string,
+    color: _propTypes.default.string,
+    bgColor: _propTypes.default.string
+  }),
+  title: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line1: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line2: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line3: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line4: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  line5: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    typography: _propTypes.default.string,
+    color: _propTypes.default.string
+  }),
+  alignProfile: _propTypes.default.string
+};

package/build/widgets/oa-widget-profile-data/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfileInfo = exports.ProfileIcon = exports.ProfileDataContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const ProfileDataContainer = exports.ProfileDataContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  gap: 24px;\n  padding: ", ";\n  background: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  max-width: ", ";\n  justify-content: ", ";\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 16px;\n    margin: ", ";\n    padding: 24px;\n  }\n"])), props => props.alignProfile === 'center' ? '32px' : '32px', props => props.alignProfile === 'center' ? 'transparent' : '#ffffff', props => props.alignProfile === 'center' ? '0' : '12px', props => props.alignProfile === 'center' ? '24px auto' : '24px', props => props.alignProfile === 'center' ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.1)', props => props.alignProfile === 'center' ? 'none' : '1px solid #f0f0f0', props => props.alignProfile === 'center' ? '600px' : 'none', props => props.alignProfile === 'center' ? 'center' : 'flex-start', props => props.alignProfile === 'center' ? '16px auto' : '16px');
+const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 48px;\n  font-weight: 700;\n  flex-shrink: 0;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n    font-size: 36px;\n  }\n"])));
+const ProfileInfo = exports.ProfileInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  .company-name {\n    margin-bottom: 4px;\n    font-size: 24px;\n    font-weight: 700;\n    color: #333333;\n  }\n\n  .company-details {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    .ant-typography {\n      font-size: 14px;\n      line-height: 1.5;\n      color: #666666;\n    }\n  }\n"])));