oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js

@@ -0,0 +1,362 @@
+"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/es.symbol.description.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+var _CustomUpload = _interopRequireDefault(require("../../components/oa-component-upload/CustomUpload"));
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
+var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
+var _CustomTextArea = _interopRequireDefault(require("../../components/oa-component-textarea/CustomTextArea"));
+var _CustomSteps = _interopRequireDefault(require("../../components/oa-component-steps/CustomSteps"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _utils = require("../../utils");
+var _styles = require("./styles");
+const _excluded = ["data", "data-test", "current", "initialAnswers", "onComplete", "onStepChange", "style", "showSubmitButton"];
+/* eslint-disable */
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+/**
+ * ProgressiveStepsWidget: Advanced progressive question stepper with answer capturing
+ * - Shows questions progressively as user answers previous ones
+ * - Handles different answer types (singleSelect, text, upload, etc.)
+ * - Manages internal state and emits complete answers
+ * - Uses the original CustomSteps component for step display
+ */
+function ProgressiveStepsWidget(_ref) {
+  let {
+      data,
+      "data-test": dataTest,
+      current: externalCurrent,
+      initialAnswers = {},
+      onComplete,
+      onStepChange,
+      style,
+      showSubmitButton = true
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  const [currentStep, setCurrentStep] = (0, _react.useState)(externalCurrent || 0);
+  const [answers, setAnswers] = (0, _react.useState)(initialAnswers);
+  const [visibleSteps, setVisibleSteps] = (0, _react.useState)(1);
+  const steps = (data === null || data === void 0 ? void 0 : data.steps) || [];
+
+  // Update current step when external prop changes
+  (0, _react.useEffect)(() => {
+    if (externalCurrent !== undefined) {
+      setCurrentStep(externalCurrent);
+    }
+  }, [externalCurrent]);
+
+  // Initialize answers with provided initialAnswers
+  (0, _react.useEffect)(() => {
+    if (Object.keys(initialAnswers).length > 0) {
+      setAnswers(initialAnswers);
+    }
+  }, [initialAnswers]);
+
+  // Calculate visible steps based on current step
+  (0, _react.useEffect)(() => {
+    // Show current step + 1 (for the disabled next step)
+    const maxVisible = Math.min(currentStep + 2, steps.length);
+    setVisibleSteps(maxVisible);
+  }, [currentStep, steps.length]);
+  const handleAnswer = (stepIndex, answer) => {
+    const step = steps[stepIndex];
+    const stepId = step.key || stepIndex;
+    const newAnswers = _objectSpread(_objectSpread({}, answers), {}, {
+      [stepId]: answer
+    });
+    setAnswers(newAnswers);
+
+    // Only auto-advance if this is the current active step and not the last step
+    if (stepIndex === currentStep && stepIndex < steps.length - 1) {
+      const nextStep = stepIndex + 1;
+      setCurrentStep(nextStep);
+      if (onStepChange) {
+        onStepChange(nextStep, newAnswers, stepId);
+      }
+    } else if (onStepChange) {
+      // For editing previous answers, just notify about the change
+      onStepChange(currentStep, newAnswers, stepId);
+    }
+  };
+  const handleSubmit = () => {
+    if (onComplete) {
+      onComplete(answers, currentStep);
+    }
+  };
+
+  // Check if all steps are completed (including pre-populated ones)
+  const isAllStepsCompleted = () => steps.every((step, index) => {
+    const stepId = step.key || index;
+    return answers[stepId] !== undefined;
+  });
+  const renderAnswerInput = (step, stepIndex) => {
+    const {
+      answerType,
+      answerOptions,
+      placeholder,
+      customComponent
+    } = step;
+    const stepId = step.key || stepIndex;
+    const currentAnswer = answers[stepId];
+    switch (answerType) {
+      case "singleSelect":
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "optionBtnSec"
+        }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+          key: idx,
+          type: currentAnswer === (option.value || option) ? "primary" : "secondary",
+          onClick: () => handleAnswer(stepIndex, option.value || option),
+          label: option.label || option,
+          "data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
+        })));
+      case "button":
+        return /*#__PURE__*/_react.default.createElement("div", null, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+          key: idx,
+          type: option.type || "primary",
+          onClick: () => {
+            // Execute custom click function if provided
+            if (option.onClick) {
+              option.onClick(option.value || option, stepIndex, answers);
+            }
+            // Optionally also save the answer if needed
+            if (option.saveAnswer !== false) {
+              handleAnswer(stepIndex, option.value || option);
+            }
+          },
+          label: option.label || option,
+          size: option.size || "default",
+          "data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
+        })));
+      case "custom":
+        // Render custom component with props for integration
+        if (customComponent) {
+          const CustomComponent = customComponent;
+          return /*#__PURE__*/_react.default.createElement(CustomComponent, _extends({
+            value: currentAnswer,
+            onChange: value => handleAnswer(stepIndex, value),
+            stepIndex: stepIndex,
+            dataTest: dataTest ? "".concat(dataTest, "--custom-").concat(stepIndex) : undefined
+          }, step.customProps));
+        }
+        return null;
+      case "paymentOptions":
+        return /*#__PURE__*/_react.default.createElement("ul", {
+          className: "bankDetailSec"
+        }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement("li", {
+          key: idx
+          // onClick={() => handleAnswer(stepIndex, option.value || option)}
+          ,
+          "data-test": dataTest ? "".concat(dataTest, "--payment-option-").concat(stepIndex, "-").concat(idx) : undefined
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          typography: "type-button-500"
+        }, option.label || option), option.description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          typography: "type-b2-400",
+          color: "secondary-content"
+        }, option.description)), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+          type: "text-only",
+          size: "medium",
+          label: option.detailsText || "Enter details",
+          onClick: e => {
+            e.stopPropagation();
+            if (option.onDetailsClick) {
+              option.onDetailsClick(option.value || option);
+            }
+          }
+        }))));
+      case "text":
+        return /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+          placeholder: placeholder || "Enter your answer...",
+          value: currentAnswer || "",
+          onChange: e => handleAnswer(stepIndex, e.target.value),
+          "data-test": dataTest ? "".concat(dataTest, "--text-input-").concat(stepIndex) : undefined
+        });
+      case "textarea":
+        return /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
+          placeholder: placeholder || "Enter your answer...",
+          value: currentAnswer || "",
+          onChange: e => handleAnswer(stepIndex, e.target.value),
+          rows: 4,
+          "data-test": dataTest ? "".concat(dataTest, "--textarea-").concat(stepIndex) : undefined
+        });
+      case "upload":
+        return /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
+          beforeUpload: file => {
+            handleAnswer(stepIndex, file);
+            return false; // Prevent default upload
+          },
+          "data-test": dataTest ? "".concat(dataTest, "--upload-").concat(stepIndex) : undefined
+        }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+          iconConfig: {
+            icon: /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null),
+            position: "left"
+          },
+          label: "Upload File"
+        }));
+      case "radio":
+        return /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+          value: currentAnswer,
+          onChange: e => handleAnswer(stepIndex, e.target.value),
+          "data-test": dataTest ? "".concat(dataTest, "--radio-").concat(stepIndex) : undefined
+        }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+          key: idx,
+          value: option.value || option,
+          label: option.label || option
+        })));
+      case "checkbox":
+        return /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default.Group, {
+          value: currentAnswer || [],
+          onChange: values => handleAnswer(stepIndex, values),
+          "data-test": dataTest ? "".concat(dataTest, "--checkbox-").concat(stepIndex) : undefined
+        }, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+          key: idx,
+          value: option.value || option,
+          label: option.label || option
+        })));
+      case "select":
+        return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+          placeholder: placeholder || "Select an option...",
+          value: currentAnswer,
+          onSelectionChange: value => handleAnswer(stepIndex, value.value),
+          options: answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => ({
+            label: option.label || option,
+            value: option.value || option
+          })),
+          "data-test": dataTest ? "".concat(dataTest, "--select-").concat(stepIndex) : undefined
+        });
+      default:
+        return null;
+    }
+  };
+
+  // Prepare steps data for CustomSteps component
+  const prepareStepsForCustomSteps = () => steps.map((step, stepIndex) => {
+    const stepId = step.key || stepIndex;
+    const isActive = stepIndex === currentStep;
+    const isCompleted = stepIndex < currentStep && answers[stepId] !== undefined;
+    const isDisabled = stepIndex > currentStep;
+    const isVisible = stepIndex < visibleSteps;
+    const hasAnswer = answers[stepId] !== undefined;
+    if (!isVisible) return null;
+
+    // Get dynamic content based on answer state
+    const getDynamicContent = () => {
+      if (!hasAnswer || !step.dynamicContent) return null;
+      const {
+        dynamicContent
+      } = step;
+
+      // Check if we should show dynamic content for this answer
+      const shouldShowDynamic = typeof dynamicContent.showFor === "function" ? dynamicContent.showFor(answers[stepId]) : dynamicContent.showFor === answers[stepId] || dynamicContent.showFor === true;
+      if (!shouldShowDynamic) return null;
+      return {
+        title: dynamicContent.title || step.title,
+        description: typeof dynamicContent.description === "function" ? dynamicContent.description(answers[stepId]) : dynamicContent.description,
+        descriptionStyle: dynamicContent.descriptionStyle,
+        hideAnswerInput: dynamicContent.hideAnswerInput || false
+      };
+    };
+    const dynamicContent = getDynamicContent();
+    const displayTitle = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.title) || step.title;
+    const displayDescription = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.description) || step.description;
+    const displayDescriptionStyle = dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.descriptionStyle;
+    const shouldHideAnswerInput = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.hideAnswerInput) || false;
+
+    // Create the step content with question and answer
+    const stepContent = /*#__PURE__*/_react.default.createElement("div", {
+      className: "stepQanAnsBox"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: isActive ? "primary-content" : isCompleted ? "secondary-content" : isDisabled ? "secondary-content" : "secondary-content",
+      typography: isActive ? "type-button-500" : isCompleted ? "type-b2-400" : isDisabled ? "type-b2-400" : "type-b2-400"
+    }, (0, _utils.isString)(displayTitle) || (0, _utils.isNumber)(displayTitle) ? /*#__PURE__*/_react.default.createElement("span", {
+      "data-test": "".concat(dataTest, "--title-(").concat(displayTitle, ")")
+    }, displayTitle) : displayTitle), displayDescription && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({}, displayDescriptionStyle, {
+      color: "secondary-content",
+      typography: "type-b2-400"
+    }), displayDescription)), (isActive || isCompleted) && !shouldHideAnswerInput && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-12"
+    }, renderAnswerInput(step, stepIndex)));
+    return {
+      key: step.key || stepIndex,
+      title: stepContent,
+      disabled: isDisabled
+    };
+  }).filter(Boolean); // Remove null entries
+  return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, null, /*#__PURE__*/_react.default.createElement(_CustomSteps.default, _extends({
+    data: {
+      steps: prepareStepsForCustomSteps()
+    },
+    current: currentStep,
+    direction: "vertical",
+    "data-test": dataTest
+  }, otherProps)), showSubmitButton && isAllStepsCompleted() && /*#__PURE__*/_react.default.createElement(_styles.SubmitButton, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "primary",
+    size: "large",
+    onClick: handleSubmit,
+    label: "Submit All Answers",
+    "data-test": dataTest ? "".concat(dataTest, "--submit-button") : undefined
+  })));
+}
+ProgressiveStepsWidget.propTypes = {
+  data: _propTypes.default.shape({
+    steps: _propTypes.default.arrayOf(_propTypes.default.shape({
+      key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      title: _propTypes.default.node,
+      description: _propTypes.default.node,
+      answerType: _propTypes.default.oneOf(["singleSelect", "button", "paymentOptions", "text", "textarea", "upload", "radio", "checkbox", "select", "custom"]),
+      answerOptions: _propTypes.default.array,
+      placeholder: _propTypes.default.string,
+      customComponent: _propTypes.default.elementType,
+      customProps: _propTypes.default.object,
+      dynamicContent: _propTypes.default.shape({
+        showFor: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.func]),
+        title: _propTypes.default.node,
+        description: _propTypes.default.node,
+        descriptionStyle: _propTypes.default.object,
+        hideAnswerInput: _propTypes.default.bool
+      })
+    }))
+  }),
+  "data-test": _propTypes.default.string,
+  current: _propTypes.default.number,
+  initialAnswers: _propTypes.default.object,
+  onComplete: _propTypes.default.func,
+  onStepChange: _propTypes.default.func,
+  style: _propTypes.default.object,
+  showSubmitButton: _propTypes.default.bool
+};
+ProgressiveStepsWidget.defaultProps = {
+  data: {
+    steps: []
+  },
+  "data-test": null,
+  current: 0,
+  initialAnswers: {},
+  onComplete: undefined,
+  onStepChange: undefined,
+  style: {},
+  showSubmitButton: true
+};
+var _default = exports.default = ProgressiveStepsWidget;

package/build/widgets/oa-widget-progressive-steps/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitButton = exports.StepsContainer = 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) } })); }
+const StepsContainer = exports.StepsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .stepQanAnsBox {\n    line-height: normal;\n    margin-bottom: 24px;\n  }\n  .ant-steps.ant-steps-vertical > .ant-steps-item .ant-steps-item-icon {\n    margin-inline-end: 12px;\n    border: none;\n    width: 28px;\n    height: 28px;\n    line-height: normal;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .ant-steps\n    .ant-steps-item-process\n    > .ant-steps-item-container\n    > .ant-steps-item-tail::after,\n  .ant-steps\n    .ant-steps-item-finish\n    > .ant-steps-item-container\n    > .ant-steps-item-tail::after {\n    background-color: #e0e0e0;\n  }\n  .ant-steps .ant-steps-item-finish .ant-steps-item-icon {\n    background-color: #00875a;\n  }\n  .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {\n    color: #fff;\n  }\n  .ant-steps .ant-steps-item-process .ant-steps-item-icon {\n    background-color: #014fc5;\n  }\n  .ant-steps.ant-steps-vertical > .ant-steps-item .ant-steps-item-title {\n    padding-inline-end: 0;\n    line-height: normal;\n    width: 100%;\n  }\n\n  ul.bankDetailSec {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    padding: 0;\n    margin: 0;\n  }\n  ul.bankDetailSec li {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-direction: row;\n    border: 1px solid rgb(217, 217, 217);\n    border-radius: 6px;\n    padding: 12px;\n    margin: 0;\n  }\n\n  .ant-steps-item-tail {\n    inset-inline-start: 15px !important;\n  }\n  .optionBtnSec {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n  .optionBtnSec button {\n    width: 50%;\n  }\n  .optionBtnSec button {\n    width: calc(50% - 6px);\n  }\n"])));
+const SubmitButton = exports.SubmitButton = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 32px;\n  text-align: center;\n  padding-top: 20px;\n  border-top: 1px solid #f0f0f0;\n"])));

package/build/widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ReimbursementBreakupWidget;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+var _utils = require("../../utils");
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A React component that displays a reimbursement amount breakup in a modal dialog.
+ * It renders data in either a grid or non-grid format based on the `tableType` specified in `cardData`.
+ *
+ * @param {Object} props - The component properties
+ * @param {Array} props.cardData - An array of card data objects containing details for the table
+ * @param {function} props.closeBreakUpModal - A callback function to close the modal
+ * @param {string} props['data-test'] - An optional test identifier
+ * @param {boolean} props.visible - Determines if the modal is visible
+ * @param {string} props.heading - The title of the modal
+ *
+ * @returns {React.ReactElement} The rendered reimbursement breakup widget
+ */
+function ReimbursementBreakupWidget(props) {
+  const {
+    cardData,
+    closeBreakUpModal,
+    'data-test': dataTest,
+    visible,
+    heading
+  } = props;
+  const btnConfig = [{
+    label: 'Okay',
+    callback: closeBreakUpModal
+  }];
+
+  /**
+   * Determines the class name based on the type of table row.
+   * @param {string} type - The type of the table row
+   * @returns {string} The class name for the table row
+   */
+  const getClassForTableRow = type => {
+    switch (type) {
+      case 'HEADER':
+        return 'gridTableHeader';
+      case 'FOOTER':
+        return 'gridtableFooter';
+      default:
+        return '';
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    open: visible,
+    title: heading,
+    onClose: closeBreakUpModal
+  }, /*#__PURE__*/_react.default.createElement(_styles.WidgetContainer, null, cardData === null || cardData === void 0 ? void 0 : cardData.map(item => {
+    var _item$tableRows, _item$gridInfo, _item$gridInfo2, _item$gridInfo3, _item$gridInfo4, _item$tableRows2, _item$tableRows3;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "rmbsProdAmt",
+      key: (0, _utils.getUUID)()
+    }, item.tableType === 'NON_GRID' && /*#__PURE__*/_react.default.createElement("ul", {
+      className: "calSecBox",
+      id: "Claimgrid"
+    }, item === null || item === void 0 || (_item$tableRows = item.tableRows) === null || _item$tableRows === void 0 ? void 0 : _item$tableRows.map(tableRow => {
+      var _tableRow$data;
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: getClassForTableRow(tableRow.type),
+        key: (0, _utils.getUUID)()
+      }, tableRow === null || tableRow === void 0 || (_tableRow$data = tableRow.data) === null || _tableRow$data === void 0 ? void 0 : _tableRow$data.map((innerItem, index) => /*#__PURE__*/_react.default.createElement("aside", {
+        key: (0, _utils.getUUID)(),
+        className: innerItem.isBold ? 'boldText' : ''
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          color: tableRow.color
+        }
+      }, innerItem.text, ' ', innerItem.scroll && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoRounded.default,
+        size: 12,
+        "data-test": dataTest ? "".concat(dataTest, "--info-button-").concat(index) : null
+        // onClick={this.scrollToRef}
+      })), ' ')));
+    })), (item === null || item === void 0 || (_item$gridInfo = item.gridInfo) === null || _item$gridInfo === void 0 ? void 0 : _item$gridInfo.length) > 0 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      className: "margin-bottom-8 margin-top-4",
+      color: "primary-content"
+    }, item === null || item === void 0 || (_item$gridInfo2 = item.gridInfo) === null || _item$gridInfo2 === void 0 || (_item$gridInfo2 = _item$gridInfo2[0]) === null || _item$gridInfo2 === void 0 ? void 0 : _item$gridInfo2.title), (item === null || item === void 0 || (_item$gridInfo3 = item.gridInfo) === null || _item$gridInfo3 === void 0 ? void 0 : _item$gridInfo3.length) > 0 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      className: "margin-bottom-16",
+      color: "secondary-content"
+    }, item === null || item === void 0 || (_item$gridInfo4 = item.gridInfo) === null || _item$gridInfo4 === void 0 || (_item$gridInfo4 = _item$gridInfo4[0]) === null || _item$gridInfo4 === void 0 ? void 0 : _item$gridInfo4.description), item.tableType === 'GRID' && (item === null || item === void 0 || (_item$tableRows2 = item.tableRows) === null || _item$tableRows2 === void 0 ? void 0 : _item$tableRows2.length) && /*#__PURE__*/_react.default.createElement("ul", {
+      className: "listofProd",
+      id: "gridView"
+    }, item === null || item === void 0 || (_item$tableRows3 = item.tableRows) === null || _item$tableRows3 === void 0 ? void 0 : _item$tableRows3.map(tableRow => {
+      var _tableRow$data2;
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: tableRow.type === 'HEADER' ? 'nonGridTableHeader' : ''
+      }, tableRow === null || tableRow === void 0 || (_tableRow$data2 = tableRow.data) === null || _tableRow$data2 === void 0 ? void 0 : _tableRow$data2.map(innerItem => /*#__PURE__*/_react.default.createElement("aside", {
+        className: innerItem.isBold ? 'boldText' : ''
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          color: tableRow.color
+        }
+      }, innerItem.text), innerItem.scroll && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoRounded.default,
+        size: 12
+      }))));
+    })));
+  })));
+}
+ReimbursementBreakupWidget.propTypes = {
+  cardData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    cardType: _propTypes.default.oneOf(['tableCard']).isRequired,
+    rowSeparator: _propTypes.default.bool.isRequired,
+    tableType: _propTypes.default.oneOf(['NON_GRID', 'GRID']).isRequired,
+    tableRows: _propTypes.default.arrayOf(_propTypes.default.shape({
+      type: _propTypes.default.oneOf(['DATA', 'FOOTER']).isRequired,
+      data: _propTypes.default.arrayOf(_propTypes.default.shape({
+        text: _propTypes.default.string.isRequired,
+        isBold: _propTypes.default.bool
+      })).isRequired,
+      color: _propTypes.default.string // Optional, only for FOOTER type
+    })).isRequired
+  })),
+  closeBreakUpModal: _propTypes.default.func,
+  'data-test': _propTypes.default.string,
+  visible: _propTypes.default.bool,
+  heading: _propTypes.default.string
+};
+ReimbursementBreakupWidget.defaultProps = {
+  cardData: null,
+  closeBreakUpModal: () => {},
+  'data-test': null,
+  visible: true,
+  heading: 'Reimbursement Amount breakup'
+};

package/build/widgets/oa-widget-reimbursement-breakup/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WidgetContainer = 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 WidgetContainer = exports.WidgetContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaReimbursFlow {\n    background: #fff;\n    border-radius: 8px 8px 0px 0px;\n    color: #212121;\n    padding: 16px 12px;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .amoutCalculat {\n    color: #0282f0;\n    padding: 16px 12px 0;\n    border-top: solid 1px var(--color-divider);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 150%;\n    width: calc(100% + 24px);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    margin: 12px 0 0 -12px;\n    cursor: pointer;\n    justify-content: space-between;\n  }\n\n  .rmbsProdAmt {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .rmbsProdAmt h5 {\n    font-style: normal;\n    color: #212121;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 22px;\n    border-top: solid 1px var(--color-divider);\n    padding: 36px 0 16px;\n  }\n\n  ul.calSecBox {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n  }\n\n  ul.calSecBox li {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    margin: 0 0 16px;\n    gap: 16px;\n  }\n  ul.calSecBox li:last-child {\n    padding-bottom: 16px;\n  }\n\n  .gridtableFooter {\n    border-top: solid 1px var(--color-divider);\n    border-bottom: solid 1px var(--color-divider);\n    padding: 16px 0 0 0;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 22px;\n  }\n\n  .gridtableFooter aside {\n    font-weight: 700;\n  }\n  .gridtableFooter aside p {\n    color: var(--color-positive) !important;\n  }\n  ul.calSecBox li aside {\n    color: #212121;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n  .gridtableFooter aside p {\n    font-weight: 700;\n  }\n\n  ul.calSecBox li aside + aside {\n    font-weight: 700;\n    text-align: right;\n  }\n\n  ul.calSecBox li aside p {\n    margin: 0;\n  }\n\n  .infoIconScroll img {\n    width: 12px;\n    height: 12px;\n    margin: 0 0 0 5px;\n  }\n\n  .rmbsProdAmt ul.listofProd {\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px 4px 0px 0px;\n    border: 1px solid #f6f6f6;\n    overflow: hidden;\n    border-top: none !important;\n    border-bottom: none !important;\n    background: #fff;\n    margin: 0;\n    padding: 0;\n  }\n\n  .rmbsProdAmt ul.listofProd li {\n    border-bottom: solid 1px var(--color-divider);\n    padding: 16px;\n    display: flex;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .nonGridTableHeader {\n    background: #f6f6f6;\n    border-bottom: none;\n  }\n\n  .rmbsProdAmt ul.listofProd li aside {\n    color: #212121;\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  .rmbsProdAmt ul.listofProd li aside.boldText {\n    font-weight: 700;\n  }\n  .nonGridTableHeader aside {\n    white-space: nowrap;\n    color: var(--color-secondary-content) !important;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 16px; /* 133.333% */\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n  #gridView {\n    border: solid 1px var(--color-divider);\n  }\n  .rmbsProdAmt ul#gridView {\n    border: solid 1px var(--color-divider);\n    border-radius: 4px;\n    border-top: solid 1px var(--color-divider) !important;\n  }\n  #gridView li aside {\n    font-size: 14px !important;\n    line-height: 20px !important;\n  }\n  #gridView li.nonGridTableHeader aside {\n    font-size: 12px !important;\n    white-space: normal;\n    font-weight: 700 !important;\n    line-height: 16px; /* 133.333% */\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n"])));

package/build/widgets/oa-widget-repair-service/RepairServiceWidget.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RepairServiceWidget;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+var _utils = require("../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A widget for displaying a repair service.
+ *
+ * @param {string} text - The text to display in the widget.
+ * @param {ReactElement} icon - The icon to display in the widget.
+ * @param {string} [subText] - The secondary text to display in the widget.
+ * @param {Function} [onClick] - The callback to call when the widget is clicked.
+ * @param {boolean} [disabled=false] - Whether the widget is disabled.
+ * @param {string|ReactElement} [info] - The information to display below the widget.
+ * @returns {ReactElement} The widget.
+ */
+function RepairServiceWidget(_ref) {
+  let {
+    text,
+    icon,
+    subText,
+    onClick,
+    disabled,
+    info
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.RepairService, null, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    onClick: onClick,
+    onKeyPress: e => e.preventDefault(),
+    tabIndex: 0,
+    className: disabled ? 'disabled' : ''
+  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexBody"
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, text), subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-b2-400"
+  }, subText)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: icon,
+    size: 16
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "InfoSec"
+  }, ((0, _utils.isString)(info) || (0, _utils.isNumber)(info)) && /*#__PURE__*/_react.default.createElement("p", {
+    className: "type-b2-400",
+    style: {
+      // paddingLeft: '12px'
+    }
+  }, info) || /*#__PURE__*/_react.default.isValidElement(info) && info || undefined))));
+}
+RepairServiceWidget.propTypes = {
+  text: _propTypes.default.string.isRequired,
+  subText: _propTypes.default.string,
+  icon: _propTypes.default.object,
+  // Assuming that icon is a Material UI icon component
+  onClick: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  info: _propTypes.default.node
+};
+RepairServiceWidget.defaultProps = {
+  subText: '',
+  icon: null,
+  // Assuming that icon is a Material UI icon component
+  onClick: () => {},
+  disabled: false,
+  info: null
+};
+
+// export default RepairServiceWidget;

package/build/widgets/oa-widget-repair-service/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RepairService = 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 RepairService = exports.RepairService = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\nul{\n    display: flex;\n    flex-direction: column;\n    padding: 16px 0;\n    margin: 0;\n    list-style: none;\n    border-bottom: 1px solid var(--color-divider);\n}\n  .flexBody{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    \n  }\n  .InfoSec section{\n    margin: 8px 0 0;\n  }\n  .disabled .InfoSec .type-b2-400{\n    color: var(--color-primary-content) !important;\n  }\n  .disabled .InfoSec svg{\n    color: rgb(255, 153, 31) !important;\n  }\n  ul li span{\n    display: block;\n  }\n  ul li:last-child{\n    margin: 0 0 0 16px;\n    display: flex;\n  }\n  li span:nth-child(2){\n    padding: 8px 0 0;\n  }\n  .disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n .disabled  svg,.disabled .type-t2-700, .disabled .type-b2-400 {\n    color: var(--color-disabled-button) !important;\n  }\n\n"])));