oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-viewer/CustomViewer.js

@@ -0,0 +1,273 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+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");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url-search-params.js");
+require("core-js/modules/es.array.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+var _Rotate90DegreesCcw = _interopRequireDefault(require("@material-ui/icons/Rotate90DegreesCcw"));
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+var _ArrowBackIos = _interopRequireDefault(require("@material-ui/icons/ArrowBackIos"));
+var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
+var _reactPdf = require("react-pdf");
+require("react-pdf/dist/esm/Page/AnnotationLayer.css");
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+var _CustomLoader = _interopRequireDefault(require("../oa-component-loader/CustomLoader"));
+var _CustomModal = _interopRequireDefault(require("../oa-component-modal/CustomModal"));
+var _common = _interopRequireDefault(require("../../utils/common"));
+var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+const _excluded = ["downloadCallback", "title", "selectedDocumentData", "previewFile", "fileName"],
+  _excluded2 = ["zoomIn", "zoomOut"];
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const supportedImage = ['png', 'jpeg', 'jpg'];
+const supportedPdf = ['pdf'];
+
+/**
+ * Renders content based on the specified format.
+ *
+ * @param {string} format - The format of the content to render ('PDF' or 'IMAGE').
+ * @param {boolean} file - Indicates if a file is present.
+ * @param {string} url - The URL of the file to render.
+ * @param {number} pageNumber - The page number to render for PDF files.
+ * @param {function} onDocumentLoadSuccess - Callback function to handle successful document load.
+ *
+ * @returns {React.ReactElement} - A React element representing the rendered content.
+ * If the format is 'PDF' and a file is present, it renders a PDF document.
+ * If the format is 'IMAGE' and a file is present, it renders an image.
+ * Displays a loader if the file is not present.
+ * Returns a message for unsupported file formats.
+ */
+const renderContent = (format, file, url, pageNumber, onDocumentLoadSuccess) => {
+  if (format === 'PDF') {
+    return file ? /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+      file: url,
+      onLoadSuccess: onDocumentLoadSuccess
+    }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+      pageNumber: pageNumber
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+  }
+  if (format === 'IMAGE') {
+    return file ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "overflowScroll"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      alt: "example",
+      style: {
+        width: '100%'
+      },
+      src: url
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", null, "Unsupported file format");
+};
+
+/**
+ * Component that renders controls for zooming, rotating and navigating through the pages of a PDF document.
+ *
+ * @param {function} setRotationDegree - Callback function to change the rotation degree of the document.
+ * @param {number} pageNumber - The current page number of the document.
+ * @param {number} numPages - The total number of pages in the document.
+ * @param {function} setPageNumber - Callback function to change the current page number of the document.
+ * @param {function} getFileFormat - Function that returns the format of the document ('PDF' or 'IMAGE').
+ * @param {function} handleZoomIn - Callback function to handle zooming in.
+ * @param {function} handleZoomOut - Callback function to handle zooming out.
+ *
+ * @returns {React.ReactElement} - A React element that renders the controls.
+ */
+function Controls(_ref) {
+  let {
+    setRotationDegree,
+    pageNumber,
+    numPages,
+    setPageNumber,
+    getFileFormat,
+    handleZoomIn,
+    handleZoomOut
+  } = _ref;
+  const rotate = () => {
+    setRotationDegree(prevRotationDegree => prevRotationDegree + 90);
+  };
+  const handleKeyPress = (event, callback) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      callback();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledZoom, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flextBodyContain"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleZoomIn,
+    onKeyDown: event => handleKeyPress(event, handleZoomIn),
+    className: "iconWidthPad"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Add.default,
+    color: "primary"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleZoomOut,
+    onKeyDown: event => handleKeyPress(event, handleZoomOut),
+    className: "iconWidthPad"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Remove.default,
+    color: "primary"
+  }))), getFileFormat === 'PDF' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flextBodyContain pdfFlexStyles"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    tabIndex: 0,
+    onClick: () => setPageNumber(pageNumber - 1),
+    onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber - 1)),
+    className: "iconWidthPad iconWidthPadPdf",
+    disabled: pageNumber <= 1
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _ArrowBackIos.default
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, "Page", ' ', pageNumber, ' ', "of", ' ', numPages), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    tabIndex: 0,
+    onClick: () => setPageNumber(pageNumber + 1),
+    onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber + 1)),
+    className: "iconWidthPad iconWidthPadPdf",
+    disabled: pageNumber >= numPages
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _ArrowForwardIos.default
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: rotate,
+    onKeyDown: event => handleKeyPress(event, rotate),
+    className: "iconWidthPad posroated"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Rotate90DegreesCcw.default,
+    color: "primary"
+  })));
+}
+Controls.propTypes = {
+  setRotationDegree: _propTypes.default.func.isRequired,
+  pageNumber: _propTypes.default.number.isRequired,
+  numPages: _propTypes.default.number.isRequired,
+  setPageNumber: _propTypes.default.func.isRequired,
+  getFileFormat: _propTypes.default.string.isRequired,
+  handleZoomIn: _propTypes.default.func.isRequired,
+  handleZoomOut: _propTypes.default.func.isRequired
+};
+function CustomViewer(_ref2) {
+  let {
+      downloadCallback,
+      title,
+      selectedDocumentData,
+      previewFile,
+      fileName = 'download'
+    } = _ref2,
+    antDesignProps = _objectWithoutProperties(_ref2, _excluded);
+  console.log(downloadCallback, title, selectedDocumentData, previewFile, fileName, antDesignProps, 'antDesignProps');
+  const [rotationDegree, setRotationDegree] = (0, _react.useState)(0);
+  const [numPages, setNumPages] = (0, _react.useState)(null);
+  const [pageNumber, setPageNumber] = (0, _react.useState)(1);
+  const [initialScale, setInitialScale] = (0, _react.useState)(1);
+  const [scale, setScale] = (0, _react.useState)(1);
+  const onDocumentLoadSuccess = _ref3 => {
+    let {
+      numPages: pages
+    } = _ref3;
+    setNumPages(pages);
+    setPageNumber(1);
+  };
+  const handleZoomIn = () => {
+    setScale(scale + 0.1);
+  };
+  const handleZoomOut = () => {
+    if (scale > initialScale) {
+      setScale(scale - 0.1);
+    }
+  };
+  const getUrl = (0, _react.useMemo)(() => {
+    if (typeof previewFile === 'string') {
+      return previewFile;
+    }
+    if (typeof previewFile === 'object' && previewFile) {
+      return URL.createObjectURL(previewFile.originFileObj);
+    }
+    return null;
+  }, [previewFile]);
+  const getFileFormat = (0, _react.useMemo)(() => {
+    var _previewFile$type;
+    const fileExtension = typeof previewFile === 'string' ? title === null || title === void 0 ? void 0 : title.split('.').pop().toLowerCase() : previewFile === null || previewFile === void 0 || (_previewFile$type = previewFile.type) === null || _previewFile$type === void 0 ? void 0 : _previewFile$type.split('/')[1];
+    if (supportedImage.includes(fileExtension)) {
+      return 'IMAGE';
+    }
+    if (supportedPdf.includes(fileExtension)) {
+      return 'PDF';
+    }
+    return 'UNSUPPORTED';
+  }, [previewFile, title]);
+  console.log(getUrl, 'getUrl');
+  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, _extends({
+    width: 860,
+    className: "imageZoom",
+    buttonConfig: [{
+      callback: () => {
+        downloadCallback(selectedDocumentData);
+      },
+      label: 'Download'
+    }]
+  }, antDesignProps), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref4 => {
+    let {
+        zoomIn,
+        zoomOut
+      } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded2);
+    return /*#__PURE__*/_react.default.createElement(_styles.PdfStyles, null, /*#__PURE__*/_react.default.createElement(Controls, {
+      setRotationDegree: setRotationDegree,
+      pageNumber: pageNumber,
+      numPages: numPages,
+      setPageNumber: setPageNumber,
+      getFileFormat: getFileFormat,
+      handleZoomIn: handleZoomIn,
+      handleZoomOut: handleZoomOut
+    }), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        transform: "rotate(".concat(rotationDegree, "deg) scale(").concat(scale, ")")
+      }
+    }, renderContent(getFileFormat, previewFile, getUrl, pageNumber, onDocumentLoadSuccess))));
+  }));
+}
+CustomViewer.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  previewFile: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
+  fileName: _propTypes.default.string,
+  antDesignProps: _propTypes.default.object,
+  downloadCallback: _propTypes.default.func,
+  selectedDocumentData: _propTypes.default.object
+};
+CustomViewer.defaultProps = {
+  fileName: 'download',
+  antDesignProps: {},
+  downloadCallback: () => {},
+  selectedDocumentData: {}
+};
+var _default = exports.default = CustomViewer;

package/build/components/oa-component-viewer/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mainStyle = exports.StyledZoom = exports.PdfStyles = void 0;
+var _antd = require("antd");
+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 mainStyle = exports.mainStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nposition: relative;\nbackground: red;\n"])));
+const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.flextBodyContain{\n    position: absolute;\n    right: 52px;\n    bottom: 116px;\n    flex-direction: column;\n    z-index: 9999;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n    position: absolute;\n    right: 52px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    top: 68px;\n    z-index: 999;\n    border-radius: 4px;\n}\n.iconWidthPad{\n    cursor: pointer;\n    background: var(--color-primary-background);    \n    padding: 6px;\n    height: 32px;\n    width: 32px;\n    border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n    border: none;\n}\n@media screen and (max-width: 992px) {\n    .posroated,.flextBodyContain{\n        right: 38px;\n    }\n  }\n"])));
+const PdfStyles = exports.PdfStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ncanvas{\n    margin: 0 auto;\n}\n.pdfFlexStyles{\n    left: 0;\n    right: 0;\n    bottom: 92px;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: #fff;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 8px;\n    gap: 12px;\n}\n.iconWidthPadPdf {\n    width: auto;\n    height: auto;\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border: none;\n    border-bottom: none;\n}\n\nbutton:disabled {\n    color: var(--color-disabled-button);\n    cursor: not-allowed; \n    border:none;\n  }\n  button{\n    color: var(--color-primary-content);\n  }\n@media screen and (max-width: 600px) {\n\n    canvas {\n        width: 100% !important;\n        height: auto !important;\n    }\n  }\n"])));

package/build/constants/ratingConstants.js

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rateTextAndDescriptionMap = exports.RatingConstants = void 0;
+const RatingConstants = exports.RatingConstants = {
+  SDT_VIDEO: {
+    5: [{
+      label: 'Easy activation',
+      value: 'Easy activation'
+    }, {
+      label: 'Video Guide',
+      value: 'Video Guide'
+    }, {
+      label: 'Clear Instructions',
+      value: 'Clear Instructions'
+    }, {
+      label: 'Affordable price',
+      value: 'Affordable price'
+    }, {
+      label: 'Buying process',
+      value: 'Buying process'
+    }],
+    4: [{
+      label: 'Easy activation',
+      value: 'Easy activation'
+    }, {
+      label: 'Video Guide',
+      value: 'Video Guide'
+    }, {
+      label: 'Clear Instructions',
+      value: 'Clear Instructions'
+    }, {
+      label: 'Affordable price',
+      value: 'Affordable price'
+    }, {
+      label: 'Buying process',
+      value: 'Buying process'
+    }],
+    3: [{
+      label: 'Video Guide',
+      value: 'Video Guide'
+    }, {
+      label: 'Activation process',
+      value: 'Activation process'
+    }, {
+      label: 'Plan pricing',
+      value: 'Plan pricing'
+    }, {
+      label: 'Plan benefits',
+      value: 'Plan benefits'
+    }, {
+      label: 'Buying process',
+      value: 'Buying process'
+    }],
+    2: [{
+      label: 'Video Guide',
+      value: 'Video Guide'
+    }, {
+      label: 'Activation process',
+      value: 'Activation process'
+    }, {
+      label: 'Plan pricing',
+      value: 'Plan pricing'
+    }, {
+      label: 'Plan benefits',
+      value: 'Plan benefits'
+    }, {
+      label: 'Buying process',
+      value: 'Buying process'
+    }],
+    1: [{
+      label: 'Video Guide',
+      value: 'Video Guide'
+    }, {
+      label: 'Activation process',
+      value: 'Activation process'
+    }, {
+      label: 'Plan pricing',
+      value: 'Plan pricing'
+    }, {
+      label: 'Plan benefits',
+      value: 'Plan benefits'
+    }, {
+      label: 'Buying process',
+      value: 'Buying process'
+    }]
+  },
+  DEFAULT: {
+    5: [{
+      label: 'Seamless Experience',
+      value: 'Seamless Experience'
+    }, {
+      label: 'Clear Instructions',
+      value: 'Clear Instructions'
+    }, {
+      label: 'Fast Process',
+      value: 'Fast Process'
+    }, {
+      label: 'Excellent Customer Support',
+      value: 'Excellent Customer Support'
+    }, {
+      label: 'Highly Satisfied',
+      value: 'Highly Satisfied'
+    }],
+    4: [{
+      label: 'Smooth Process',
+      value: 'Smooth Process'
+    }, {
+      label: 'Helpful Guide',
+      value: 'Helpful Guide'
+    }, {
+      label: 'Good Value',
+      value: 'Good Value'
+    }, {
+      label: 'Minor Delays',
+      value: 'Minor Delays'
+    }, {
+      label: 'Satisfied',
+      value: 'Satisfied'
+    }],
+    3: [{
+      label: 'Average Experience',
+      value: 'Average Experience'
+    }, {
+      label: 'Sufficient Information',
+      value: 'Sufficient Information'
+    }, {
+      label: 'Pricing Could Be Better',
+      value: 'Pricing Could Be Better'
+    }, {
+      label: 'Some Confusion',
+      value: 'Some Confusion'
+    }, {
+      label: 'Acceptable Service',
+      value: 'Acceptable Service'
+    }],
+    2: [{
+      label: 'Slow Process',
+      value: 'Slow Process'
+    }, {
+      label: 'Confusing Instructions',
+      value: 'Confusing Instructions'
+    }, {
+      label: 'Overpriced',
+      value: 'Overpriced'
+    }, {
+      label: 'Need More Support',
+      value: 'Need More Support'
+    }, {
+      label: 'Dissatisfied',
+      value: 'Dissatisfied'
+    }],
+    1: [{
+      label: 'Very Slow Process',
+      value: 'Very Slow Process'
+    }, {
+      label: 'Incomplete Information',
+      value: 'Incomplete Information'
+    }, {
+      label: 'Misleading Pricing',
+      value: 'Misleading Pricing'
+    }, {
+      label: 'Poor Customer Support',
+      value: 'Poor Customer Support'
+    }, {
+      label: 'Highly Dissatisfied',
+      value: 'Highly Dissatisfied'
+    }]
+  }
+};
+const rateTextAndDescriptionMap = exports.rateTextAndDescriptionMap = {
+  1: {
+    heading: 'What could be improved?',
+    rateText: 'Poor'
+  },
+  2: {
+    heading: 'What could be improved?',
+    rateText: 'Bad'
+  },
+  3: {
+    heading: 'What could be improved?',
+    rateText: 'Average'
+  },
+  4: {
+    heading: 'What did you like most?',
+    rateText: 'Good'
+  },
+  5: {
+    heading: 'What did you like most?',
+    rateText: 'Awesome'
+  }
+};