oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget.js

@@ -0,0 +1,395 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomPinPatternCaptureWidget;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactPatternLock = _interopRequireDefault(require("react-pattern-lock"));
+var _antd = require("antd");
+var _styles = require("./styles");
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _modalImg = _interopRequireDefault(require("../../images/modal-img.svg"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+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; }
+/**
+ * CustomPinPatternCaptureWidget is a component for capturing and verifying a
+ * user's PIN or pattern input. It supports both PIN and pattern modes, allowing
+ * users to either enter a PIN or draw a pattern. The component handles the
+ * input, confirmation, and validation process, providing feedback for mismatches
+ * and options to reset the input. It offers configurable options such as showing
+ * numbers on pattern dots and disabling grey dots. The component also ensures
+ * that the user's PIN or pattern is securely handled and used only for device
+ * condition checks during repairs.
+ *
+ * Props:
+ * - type: string indicating the type of input ('pin' or 'pattern').
+ * - initialPattern: array for initializing the pattern.
+ * - prePoluatedPattern: array for pre-populating the pattern input.
+ * - showButtons: boolean for displaying action buttons.
+ * - finalPattern: function to handle the final pattern submission.
+ * - showNumbersOnDots: boolean for displaying numbers on pattern dots.
+ * - greyDisabledDots: boolean for styling disabled dots in grey.
+ */
+function CustomPinPatternCaptureWidget(_ref) {
+  var _increaseValueIndexby;
+  let {
+    type,
+    initialPattern = [],
+    prePoPulatedPattern,
+    showButtons,
+    finalPatternOrPassword,
+    showNumbersOnDots,
+    greyDisabledDots,
+    heading,
+    hideFooter,
+    showSequence,
+    minAllowedlength,
+    onStep2Cancel
+  } = _ref;
+  const [pin, setPin] = (0, _react.useState)('');
+  const decreaseValueIndexbyOne = array => array.map(num => num - 1);
+  const increaseValueIndexbyOne = array => {
+    const newArray = array;
+    return newArray.map(num => num + 1);
+  };
+  const [form] = _antd.Form.useForm();
+  const [confirmPin, setConfirmPin] = (0, _react.useState)('');
+  const [pinError, setPinError] = (0, _react.useState)(false);
+  const [pattern, setPattern] = (0, _react.useState)((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+  const [isPatternConfirmed, setIsPatternConfirmed] = (0, _react.useState)(false);
+  const [savedPattern, setSavedPattern] = (0, _react.useState)((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []); // for prepopulating pattern
+  const [step, setStep] = (0, _react.useState)('input'); // for managing pattern input/confirm steps
+  const [step1Pattern, setStep1Pattern] = (0, _react.useState)([]);
+  const [patternMismatch, setPatternMismatch] = (0, _react.useState)(false);
+  const [prePopulatedPattern, setprePopulatedPattern] = (0, _react.useState)((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+  const [modalInfo, setModalInfo] = (0, _react.useState)({
+    heading: '',
+    type: '',
+    description: ''
+  });
+  (0, _react.useEffect)(() => {
+    setprePopulatedPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+    setPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+    setSavedPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+  }, [prePoPulatedPattern]);
+
+  /**
+   * Validates the PIN form and handles the submission of the PIN to the parent component.
+   * It checks if the PIN length is at least 4 characters, and if the confirm PIN matches the PIN.
+   * If the PIN is valid, it calls the finalPatternOrPassword callback with the PIN as the first argument.
+   */
+  const handlePinSave = () => {
+    form.validateFields().then(values => {
+      // Passing the form data upto the parent.
+      if (values.confirmPin.length < minAllowedlength) {
+        form.setFields([{
+          name: 'pin',
+          errors: ['Pin/Pattern must be at least 4 characters long']
+        }]);
+        return;
+      }
+      if (values.pin !== values.confirmPin) {
+        form.setFields([{
+          name: 'confirmPin',
+          errors: ['Confirm Pin/Password does not match']
+        }]);
+        return;
+      }
+      finalPatternOrPassword(values.confirmPin, 'pin');
+      // This resets the form upon confirm.
+      form.resetFields();
+    }).catch(error => console.log(error));
+  };
+
+  // Pattern handling
+  const handlePatternComplete = patternArray => {};
+
+  // Pattern handling
+  const handleSubmitPatternComplete = () => {
+    if (pattern.length < minAllowedlength) {
+      setModalInfo({
+        heading: 'Short Pattern',
+        type: 'short-pattern',
+        description: 'The pattern you have entered is too short. Please redraw pattern.'
+      });
+      setPatternMismatch(true);
+      return;
+    }
+    if (step === 'input') {
+      setSavedPattern(pattern);
+      setStep('confirm');
+      setPattern([]);
+    } else if (step === 'confirm') {
+      if (JSON.stringify(savedPattern) === JSON.stringify(pattern)) {
+        finalPatternOrPassword(increaseValueIndexbyOne(pattern), 'pattern');
+      } else {
+        setPatternMismatch(true);
+        setModalInfo({
+          heading: 'Pattern Mismatch',
+          type: 'pattern-mismatch',
+          description: 'The pattern you have entered is not matching. Please redraw pattern.'
+        });
+      }
+    }
+  };
+
+  /**
+   * Resets the state of the pattern input/confirm flow.
+   *
+   * When called, it resets the following state variables:
+   *
+   * - `pattern`: resets to an empty array
+   * - `patternMismatch`: resets to false
+   * - `prepopulatedPattern`: resets to an empty array
+   * - `step`: resets to 'input'
+   * - `isPatternConfirmed`: resets to false
+   * - `savedPattern`: resets to the `initialPattern` prop
+   * - `step1Pattern`: resets to an empty array
+   *
+   * This is useful when the user wants to start over with a new pattern.
+   */
+  const handleReset = () => {
+    setPattern([]);
+    setModalInfo({
+      heading: '',
+      type: '',
+      description: ''
+    });
+    setPatternMismatch(false);
+    setprePopulatedPattern([]);
+    setStep('input');
+    setIsPatternConfirmed(false);
+    setSavedPattern(initialPattern); // for prepopulating pattern
+    setStep1Pattern([]);
+  };
+  // Helper to render numbers on dots
+  const renderNumbersOnDots = () => {
+    if (!showNumbersOnDots) return null;
+    const gridSize = 3; // Assuming 3x3 grid
+    const numbers = Array.from({
+      length: gridSize * gridSize
+    }, (_, index) => index + 1);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "numbers-overlay"
+    }, numbers.map((num, index) => /*#__PURE__*/_react.default.createElement("span", {
+      className: pattern.indexOf(index) > -1 ? 'activedotoverlay dot-number' : 'dot-number',
+      key: num
+    }, /*#__PURE__*/_react.default.createElement("span", null, num))));
+  };
+
+  /**
+   * Helper function to check if a field has at least the minimum allowed length.
+   * If the length is less than the minimum allowed length, it sets an error on the field.
+   * @param {String} field - The name of the field to check.
+   */
+  const checkIfMinLength = field => {
+    if (form.getFieldValue(field).length && form.getFieldValue(field).length < minAllowedlength) {
+      form.setFields([{
+        name: field,
+        errors: ['Pin/Pattern must be at least 4 characters long']
+      }]);
+    }
+  };
+  /**
+   * Cancels the mismatch modal and resets the state.
+   *
+   * This callback is passed to the mismatch modal and is called when the user clicks the cancel button.
+   *
+   * When called, it resets the following state variables:
+   * - `patternMismatch`: resets to false
+   * - `step`: resets to 'input'
+   * - `pattern`: resets to an empty array
+   * - `isPatternConfirmed`: resets to false
+   * - `savedPattern`: resets to the `initialPattern` prop
+   * - `step1Pattern`: resets to an empty array
+   *
+   * This is useful when the user wants to cancel the mismatch modal and start over with a new pattern.
+   */
+  const onCancelOfMisMatchModal = () => {
+    setPatternMismatch(false);
+    setModalInfo({
+      heading: '',
+      type: '',
+      description: ''
+    });
+    setStep('input');
+    setPattern([]);
+    setIsPatternConfirmed(false);
+    setSavedPattern(initialPattern); // for prepopulating pattern
+    setStep1Pattern([]);
+  };
+  // const onCancelOfShortPatternModal = () => {
+  //   setPattern([]);
+  //   setPatternMismatch(false);
+  //   setModalInfo({
+  //     heading: '',
+  //     type: '',
+  //     description: '',
+  //   })
+  // };
+
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, type === 'pin' ? /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    layout: "vertical"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexAlignPattern"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-32 alignLeft"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t2-700",
+    color: "primary-content"
+  }, heading.length === 0 ? 'Enter Pin/Password' : heading)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "pin",
+    className: "margin-bottom-32",
+    rules: [{
+      required: true,
+      message: 'Required'
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content"
+  }, "Enter Pin/Password", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*"))), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    onBlur: e => {
+      const trimmedValue = e.target.value.trim();
+      form.setFieldsValue({
+        pin: trimmedValue
+      });
+      checkIfMinLength('pin');
+    }
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "confirmPin",
+    className: "margin-bottom-32",
+    rules: [{
+      required: true,
+      message: 'Required'
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content"
+  }, "Re-enter Pin/Password", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*"))), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    onBlur: e => {
+      const trimmedValue = e.target.value.trim();
+      form.setFieldsValue({
+        confirmPin: trimmedValue
+      });
+      checkIfMinLength('confirmPin');
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "primary",
+    onClick: handlePinSave,
+    label: "Save",
+    size: "large"
+  }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexAlignPattern"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-8 padding-top-48"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, heading.length === 0 && (step === 'input' ? 'Draw lock screen pattern' : 'Draw lock screen pattern again'), heading && heading.length > 0 ? heading : '')), showSequence && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b3-400",
+    color: "placeholder-text"
+  }, "Sequence: \xA0", (_increaseValueIndexby = increaseValueIndexbyOne(pattern)) === null || _increaseValueIndexby === void 0 ? void 0 : _increaseValueIndexby.map((num, i) => {
+    const isLastElement = i === pattern.length - 1; // Check if it's the last element
+
+    if (isLastElement) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: num
+      }, num); // Use 'num' as key, no arrow for the last element
+    }
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: num
+    }, num, /*#__PURE__*/_react.default.createElement("em", null, "\u2192"), ' ');
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: greyDisabledDots ? 'greyDisabledDots' : ''
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "posRelative"
+  }, /*#__PURE__*/_react.default.createElement(_reactPatternLock.default, {
+    width: 300,
+    size: 3,
+    connectorThickness: 2,
+    allowJumping: true,
+    path: (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0 ? prePopulatedPattern : pattern // Prepopulate pattern
+    ,
+    onChange: patternArray => setPattern(patternArray),
+    onFinish: () => handlePatternComplete(pattern),
+    disabled: (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0
+  }), renderNumbersOnDots())), /*#__PURE__*/_react.default.createElement("div", null, showButtons && /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttonAlign"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    onClick: step === 'confirm' ? () => {
+      handleReset();
+      onStep2Cancel();
+    } : handleReset,
+    label: step === 'confirm' ? 'Cancel' : 'Reset',
+    size: "large"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "primary",
+    onClick: handleSubmitPatternComplete,
+    disabled: !(pattern !== null && pattern !== void 0 && pattern.length) || (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0,
+    label: step === 'confirm' ? 'Save' : 'Next',
+    size: "large"
+  })), !hideFooter && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textInfo"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b3-400",
+    color: "secondary-content"
+  }, "Note: Your device PIN/Pattern is 100% secure with us. It will only be used to check your device condition during repair."))))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    buttonConfig: [{
+      callback: onCancelOfMisMatchModal,
+      label: 'Redraw pattern',
+      type: 'primary'
+    }],
+    imgSrc: _modalImg.default,
+    open: patternMismatch,
+    onCancel: handleReset,
+    title: modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.heading
+  }, modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.description));
+}
+CustomPinPatternCaptureWidget.propTypes = {
+  type: _propTypes.default.string,
+  initialPattern: _propTypes.default.array,
+  prePoPulatedPattern: _propTypes.default.array,
+  showButtons: _propTypes.default.bool,
+  finalPatternOrPassword: _propTypes.default.func,
+  showNumbersOnDots: _propTypes.default.bool,
+  greyDisabledDots: _propTypes.default.bool,
+  heading: _propTypes.default.string,
+  hideFooter: _propTypes.default.bool,
+  showSequence: _propTypes.default.bool,
+  minAllowedlength: _propTypes.default.number,
+  onStep2Cancel: _propTypes.default.func
+};
+CustomPinPatternCaptureWidget.defaultProps = {
+  type: 'pattern',
+  initialPattern: '',
+  prePoPulatedPattern: [],
+  showButtons: true,
+  finalPatternOrPassword: () => {},
+  showNumbersOnDots: false,
+  greyDisabledDots: false,
+  heading: '',
+  hideFooter: false,
+  showSequence: true,
+  minAllowedlength: 0,
+  onStep2Cancel: () => {}
+};

package/build/widgets/oa-widget-input-pattern-pin/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleContainer = 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 StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: black !important;\n}\n  .pattern-container {\n          position: relative;\n        }\n        .numbers-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-wrap: wrap;\n          right: 0;\n              width: 300px;\n    height: 300px;\n    margin: 0 auto;\n        }\n        .dot-number {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100px;\n          height: 100px;\n        }\n  .react-pattern-lock__point-wrapper{\n      z-index: 9;\n  }\n.flexAlignPattern{\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: calc(100vh - 0px);\n    gap: 24px;\n}\n    .flexAlignPattern .ant-form-item{\n        text-align: left;\n    }\n        .ant-form-item-explain-error{\n        color: var(--color-negative) !important;\n        }\n    .cancelIcon{\n        position: absolute;\n       right: 16px;\n       cursor: pointer;\n    }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: #0275DA !important;\n      min-width: 20px !important;\n    min-height: 20px !important;\n}\n    .react-pattern-lock__point-inner{\n      background: #0275DA;\n      min-width: 20px !important;\n    min-height: 20px !important;\n    }\n\n    .posRelative{\n    position: relative;\n    }\n .disabled  .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: var(--color-placeholder-text) !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n        z-index: 2;\n}\n      .greyDisabledDots .react-pattern-lock__point-inner{\n        background: var(--color-placeholder-text);\n      }  \n        .dot-number span{\n          width: 16px;\n          height: 16px;\n          background: var(--color-divider);\n          z-index: 2;\n          font-size: 11px;\n          font-style: normal;\n          font-weight: 700;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          color: #717171;\n              line-height: 0;\n              z-index: 9;\n        }\n          .activedotoverlay span{\n            background: #0275DA;\n            color: #fff;\n          }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: black !important;\n}\n  .buttonAlign{\n      display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 0 24px;\n  }\n    .buttonAlign button{\n      width: 100%;\n    }\n      .textInfo{\n        padding: 12px;\n            border-top: 1px solid #D9D9D9;\n            text-align: left;\n            margin: 32px 0 0;\n            text-align: left;\n      }\n          .alignLeft{\n          text-align: left;\n          }\n          .selected .react-pattern-lock__point{\n              width: 28px !important;\n              height: 28px !important;\n              background: #DEF1FB !important;\n              border-radius: 50% !important;\n          }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: #0275DA !important;\n}\n   @media screen and (-webkit-min-device-pixel-ratio: 0) {\n        @supports (-webkit-overflow-scrolling: touch) {\n            .react-pattern-lock__pattern-wrapper{\n                    width: 274px !important;\n                    height: 274px !important;\n            }\n}\n            }\n"])));

package/build/widgets/oa-widget-item-info-card/InfoCardListWidget.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.reduce.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ItemInfoCardWidget = _interopRequireDefault(require("./ItemInfoCardWidget"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); } // widgets/oa-widget-item-info-card-list/InfoCardListWidget.js
+const SUCCESS_GREEN = '#00875A';
+function InfoCardListWidget(_ref) {
+  let {
+    items,
+    bordered,
+    customStyle
+  } = _ref;
+  const total = items.reduce((sum, item) => sum + Number(item.props.value || 0), 0);
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, {
+    bordered: bordered,
+    style: customStyle
+  }, items.map(item => /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, _extends({
+    key: item.key
+  }, item.props))), /*#__PURE__*/_react.default.createElement(_styles.TotalRow, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    style: {
+      color: _ColorVariablesMap.default['--color-positive']
+    }
+  }, "Order Total"), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    style: {
+      color: _ColorVariablesMap.default['--color-positive']
+    }
+  }, "\u20B9", total.toLocaleString())));
+}
+InfoCardListWidget.propTypes = {
+  /** all of your info-card items (must have .key and .props.value) */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    props: _propTypes.default.shape({
+      value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    }).isRequired
+  })).isRequired,
+  /** if true, the outer container gets a light grey border */
+  bordered: _propTypes.default.bool,
+  /** optional style object you can use to tweak margin/layout */
+  customStyle: _propTypes.default.object
+};
+InfoCardListWidget.defaultProps = {
+  bordered: false,
+  customStyle: {}
+};
+var _default = exports.default = InfoCardListWidget;

package/build/widgets/oa-widget-item-info-card/ItemInfoCardWidget.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+/**
+ * A simple info card that displays an image, title, subtitle, description, and value.
+ */
+function ItemInfoCardWidget(_ref) {
+  let {
+    title,
+    value,
+    subTitle,
+    description,
+    image,
+    subText,
+    subDescription
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.ItemInfoCard, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "productBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "iconAndtextSec"
+  }, image && /*#__PURE__*/_react.default.createElement("div", {
+    className: "productIcon"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    alt: title,
+    className: "product-image"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "product-info"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, title), subTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4 margin-bottom-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, subTitle)), description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, description), subDescription && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margion-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, subDescription)))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, "\u20B9", value), subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-button-500",
+    color: "secondary-content"
+  }, subText)));
+}
+ItemInfoCardWidget.propTypes = {
+  image: _propTypes.default.string,
+  title: _propTypes.default.string.isRequired,
+  value: _propTypes.default.number.isRequired,
+  subTitle: _propTypes.default.string,
+  subText: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+ItemInfoCardWidget.defaultProps = {
+  image: null,
+  subTitle: "",
+  description: ""
+};
+var _default = exports.default = ItemInfoCardWidget;

package/build/widgets/oa-widget-item-info-card/styles.css

@@ -0,0 +1,50 @@
+.product-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px;
+    border-radius: 12px;
+    background-color: #f9f9f9;
+    width: 100%;
+    max-width: 480px;
+  }
+  
+  .product-image {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+  
+  .product-info {
+    flex: 1;
+  }
+  
+  .product-title-price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .product-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+  }
+  
+  .product-price {
+    font-weight: bold;
+    color: #111;
+  }
+  
+  .product-specs {
+    color: #666;
+    margin-top: 2px;
+  }
+  
+  .product-sku {
+    color: #999;
+    font-size: 12px;
+    margin-top: 2px;
+  }
+  

package/build/widgets/oa-widget-item-info-card/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalRow = exports.ItemInfoCard = exports.Container = 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 Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #ffffff;\n  border-radius: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
+const TotalRow = exports.TotalRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    border-top: 1px solid #e0e0e0;\n    padding: 16px 16px 0 16px;\n    margin: 0 0 0 -16px;\n    width: calc(100% + 32px);\n\n\n    .gstAndCost{display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;}\n"])));
+const ItemInfoCard = exports.ItemInfoCard = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.productBox{width:100%; display:flex; flex-direction:row; justify-content: space-between; padding:12px 0;}\n.productIcon{border-radius: 12px; background: #F6F6F6; width:80px; height:80px; display:flex; align-items:center; justify-content:center;}\n.productIcon img{height:64px;}\n.iconAndtextSec{display:flex; flex-direction:row; gap:12px; width:calc(100% - 88px);}\n.product-info {display: flex; flex-direction: column; width: calc(100% - 92px);}\n"])));
+var _default = exports.default = {};