oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-collapsible-key-value/CollapsibleKeyValueWidget.js

@@ -0,0 +1,395 @@
+"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.promise.js");
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _KeyboardArrowDownRounded = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDownRounded"));
+var _KeyboardArrowUpRounded = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUpRounded"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _KeyValueWidget = _interopRequireDefault(require("../oa-widget-key-value/KeyValueWidget"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _ItemInfoCardWidget = _interopRequireDefault(require("../oa-widget-item-info-card/ItemInfoCardWidget"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); } /* eslint-disable */
+/**
+ * CollapsibleKeyValueWidget component that renders a list of key-value pairs
+ * with collapsible details. Only one detail can be open at a time.
+ *
+ * @param {Object} props - Component props
+ * @param {Array} props.items - Array of items with infoData (key-value) and moreInfoData (array of objects)
+ * @param {string} [props.title] - Optional title for the widget
+ * @param {string} [props.expandButtonText="View Details"] - Text for expand button
+ * @param {string} [props.collapseButtonText] - Text for collapse button (if not provided, only expand button is shown)
+ * @param {string} [props.expandButtonType="text-only"] - Type of expand button
+ * @param {string} [props.collapseButtonType="text-only"] - Type of collapse button
+ * @param {string} [props.expandButtonSize="small"] - Size of expand button
+ * @param {string} [props.collapseButtonSize="small"] - Size of collapse button
+ * @param {Function} [props.onItemToggle] - Callback when item is expanded/collapsed
+ * @returns {JSX.Element} CollapsibleKeyValueWidget component
+ */
+function CollapsibleKeyValueWidget(_ref) {
+  let {
+    items,
+    title,
+    expandButtonText = "View Details",
+    collapseButtonText,
+    expandButtonType = "text-only",
+    collapseButtonType = "text-only",
+    expandButtonSize = "small",
+    collapseButtonSize = "small",
+    onItemToggle,
+    onFetchMoreInfo,
+    handleCollapsibleKeyData
+  } = _ref;
+  const [openItemId, setOpenItemId] = (0, _react.useState)(null);
+  const [loadingItems, setLoadingItems] = (0, _react.useState)(new Set());
+  const [loadedMoreInfo, setLoadedMoreInfo] = (0, _react.useState)({});
+  const [itemsState, setItemsState] = (0, _react.useState)(items);
+  const handleItemToggle = async (itemId, itemData) => {
+    const newOpenItemId = openItemId === itemId ? null : itemId;
+    setOpenItemId(newOpenItemId);
+
+    // If opening an item and we don't have the data yet, fetch it
+    if (newOpenItemId !== null && !loadedMoreInfo[itemId] && handleCollapsibleKeyData) {
+      setLoadingItems(prev => new Set(prev).add(itemId));
+      try {
+        const {
+          error,
+          data
+        } = await handleCollapsibleKeyData({
+          orderUUID: itemData === null || itemData === void 0 ? void 0 : itemData.orderId
+        });
+        if (error) {
+          console.error("Error fetching more info:", error);
+        } else {
+          // Update the items state to populate the data array in moreInfoData
+          const updatedItems = itemsState.map(item => {
+            if (item.orderId === itemId) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                moreInfoData: _objectSpread(_objectSpread({}, item.moreInfoData), {}, {
+                  data: data.items,
+                  // API returns { items: [...], totalValue: ... }
+                  infoCardFooter: item.moreInfoData.infoCardFooter ? _objectSpread(_objectSpread({}, item.moreInfoData.infoCardFooter), {}, {
+                    value: data.totalValue // Set the total value from API
+                  }) : undefined
+                })
+              });
+            }
+            return item;
+          });
+
+          // Update the items state
+          setItemsState(updatedItems);
+
+          // Mark this item as loaded
+          setLoadedMoreInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
+            [itemId]: true
+          }));
+        }
+      } catch (error) {
+        console.error("Error fetching more info:", error);
+      } finally {
+        setLoadingItems(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(itemId);
+          return newSet;
+        });
+      }
+    }
+    if (onItemToggle) {
+      onItemToggle(itemId, newOpenItemId !== null);
+    }
+  };
+  const isItemOpen = itemId => openItemId === itemId;
+  const renderFieldWidget = (item, index, itemData) =>
+  // This is a simplified version - you can expand this based on your needs
+  // For now, it just returns null to avoid errors
+  null;
+  const renderMoreInfoItem = (item, itemIndex) => {
+    var _item$data$, _item$value, _item$value2, _item$value3, _item$value3$map, _item$value4, _item$value5;
+    // If item has data array, render based on the type
+    if (item !== null && item !== void 0 && item.data && Array.isArray(item.data)) {
+      switch (item === null || item === void 0 ? void 0 : item.type) {
+        case "infoCard":
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.data.map((dataItem, i) => /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, {
+            key: "".concat(itemIndex, "-").concat(i),
+            title: dataItem.title,
+            subTitle: dataItem.subTitle,
+            description: dataItem.description,
+            value: dataItem.value,
+            image: dataItem.image,
+            subDescription: dataItem.subDescription
+          })), item.infoCardFooter && /*#__PURE__*/_react.default.createElement(_styles.OrderTotalSec, null, /*#__PURE__*/_react.default.createElement("div", {
+            className: "totalOrderSecBox"
+          }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+            typography: "type-t1-500",
+            color: "positive"
+          }, item.infoCardFooter.text), /*#__PURE__*/_react.default.createElement("div", {
+            className: "gstAndCost"
+          }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+            typography: "type-t1-500",
+            color: "positive"
+          }, "\u20B9", item.infoCardFooter.value), item.infoCardFooter.subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+            typography: "type-button-500",
+            color: "secondary-content"
+          }, item.infoCardFooter.subText)))));
+        case "infoCardWithInput":
+          return item.data.map((dataItem, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+            key: "".concat(itemIndex, "-").concat(i)
+          }, /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, {
+            title: dataItem.title,
+            subtitle: dataItem.subTitle,
+            description: dataItem.description,
+            price: dataItem.value,
+            image: dataItem.image,
+            status: dataItem.subDescription || "In Stock"
+          }), (dataItem === null || dataItem === void 0 ? void 0 : dataItem.field) && renderFieldWidget(dataItem.field, i, item)));
+        case "simpleList":
+          if (item.data.length === 0) return null;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: "simple-list margin-bottom-16"
+          }, /*#__PURE__*/_react.default.createElement("ul", null, item.data.map((dataItem, i) => /*#__PURE__*/_react.default.createElement("li", {
+            key: "".concat(itemIndex, "-").concat(i)
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: "type-b2-400",
+            style: {
+              color: "var(--color-secondary-content)"
+            }
+          }, dataItem.title || dataItem)))));
+        case "questionAnsList":
+          if (item.data.length === 0) return null;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: "qa-list margin-bottom-16"
+          }, /*#__PURE__*/_react.default.createElement("dl", null, item.data.map((dataItem, i) => /*#__PURE__*/_react.default.createElement("div", {
+            key: "".concat(itemIndex, "-").concat(i),
+            className: "qa-item margin-bottom-12"
+          }, /*#__PURE__*/_react.default.createElement("dt", {
+            className: "type-t2-700",
+            style: {
+              color: "var(--color-primary-content)",
+              marginBottom: "4px"
+            }
+          }, dataItem.question), /*#__PURE__*/_react.default.createElement("dd", {
+            className: "type-b2-400",
+            style: {
+              color: "var(--color-secondary-content)"
+            }
+          }, dataItem.answer)))));
+        case "customInfo":
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: "margin-bottom-16"
+          }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({
+            description: ((_item$data$ = item.data[0]) === null || _item$data$ === void 0 ? void 0 : _item$data$.description) || item.data[0]
+          }, (item === null || item === void 0 ? void 0 : item.iconConfig) && {
+            iconConfig: {
+              icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+                icon: item.iconConfig.icon
+              }),
+              position: item.iconConfig.position
+            }
+          })));
+        default:
+          return null;
+      }
+    }
+
+    // Fallback for old structure (if data is not in the new format)
+    switch (item === null || item === void 0 ? void 0 : item.type) {
+      case "infoCard":
+        return /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, _extends({
+          key: itemIndex
+        }, item));
+      case "infoCardWithInput":
+        return item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.map((value, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: i
+        }, /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, value), (value === null || value === void 0 ? void 0 : value.field) && renderFieldWidget(value === null || value === void 0 ? void 0 : value.field, i, item)));
+      case "simpleList":
+        if ((item === null || item === void 0 || (_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.length) === 0) return null;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "simple-list margin-bottom-16"
+        }, /*#__PURE__*/_react.default.createElement("ul", null, item === null || item === void 0 || (_item$value3 = item.value) === null || _item$value3 === void 0 || (_item$value3$map = _item$value3.map) === null || _item$value3$map === void 0 ? void 0 : _item$value3$map.call(_item$value3, (v, i) => /*#__PURE__*/_react.default.createElement("li", {
+          key: i
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "type-b2-400",
+          style: {
+            color: "var(--color-secondary-content)"
+          }
+        }, v)))));
+      case "questionAnsList":
+        if ((item === null || item === void 0 || (_item$value4 = item.value) === null || _item$value4 === void 0 ? void 0 : _item$value4.length) === 0) return null;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "qa-list margin-bottom-16"
+        }, /*#__PURE__*/_react.default.createElement("dl", null, item === null || item === void 0 || (_item$value5 = item.value) === null || _item$value5 === void 0 ? void 0 : _item$value5.map((v, i) => /*#__PURE__*/_react.default.createElement("div", {
+          key: i,
+          className: "qa-item margin-bottom-12"
+        }, /*#__PURE__*/_react.default.createElement("dt", {
+          className: "type-t2-700",
+          style: {
+            color: "var(--color-primary-content)",
+            marginBottom: "4px"
+          }
+        }, v === null || v === void 0 ? void 0 : v.question), /*#__PURE__*/_react.default.createElement("dd", {
+          className: "type-b2-400",
+          style: {
+            color: "var(--color-secondary-content)"
+          }
+        }, v === null || v === void 0 ? void 0 : v.answer)))));
+      case "customInfo":
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "margin-bottom-16"
+        }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({
+          description: item === null || item === void 0 ? void 0 : item.value
+        }, (item === null || item === void 0 ? void 0 : item.iconConfig) && {
+          iconConfig: {
+            icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+              icon: item.iconConfig.icon
+            }),
+            position: item.iconConfig.position
+          }
+        })));
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.CollapsibleKeyValueContainer, null, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-16"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, " ", title)), itemsState.map((item, index) => {
+    var _item$info, _item$info2, _item$tagStatus, _item$tagStatus2;
+    const itemId = item.orderId || "item-".concat(index);
+    const isOpen = isItemOpen(itemId);
+    const itemData = item;
+    return /*#__PURE__*/_react.default.createElement(_styles.CollapsibleItem, {
+      key: itemId
+    }, /*#__PURE__*/_react.default.createElement(_styles.CollapsibleHeader, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "keyValueSecWithBtn"
+    }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
+      data: item.infoData,
+      info: {
+        infoKey: item === null || item === void 0 || (_item$info = item.info) === null || _item$info === void 0 ? void 0 : _item$info.infoKey,
+        infoData: /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+          title: item === null || item === void 0 || (_item$info2 = item.info) === null || _item$info2 === void 0 ? void 0 : _item$info2.tooltipTitle
+        }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          color: "secondary",
+          icon: _InfoOutlined.default
+        }))
+      },
+      tagStatus: {
+        tagKey: item === null || item === void 0 || (_item$tagStatus = item.tagStatus) === null || _item$tagStatus === void 0 ? void 0 : _item$tagStatus.tagKey,
+        tagData: item === null || item === void 0 || (_item$tagStatus2 = item.tagStatus) === null || _item$tagStatus2 === void 0 ? void 0 : _item$tagStatus2.tagData
+      },
+      columnLayout: item.columnLayout
+    }), (item.moreInfoData || handleCollapsibleKeyData) && !isOpen ? /*#__PURE__*/_react.default.createElement(_styles.ExpandButton, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      type: expandButtonType,
+      size: expandButtonSize,
+      label: expandButtonText,
+      onClick: () => handleItemToggle(itemId, itemData),
+      disabled: loadingItems.has(itemId),
+      prefix: loadingItems.has(itemId) ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "loading-spinner",
+        style: {
+          width: 16,
+          height: 16
+        }
+      }) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _KeyboardArrowDownRounded.default,
+        size: 16,
+        color: "secondary"
+      })
+    })) : null, isOpen && /*#__PURE__*/_react.default.createElement(_styles.CollapsibleContent, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "more-info-section"
+    }, loadingItems.has(itemId) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "loading-container",
+      style: {
+        padding: "20px",
+        textAlign: "center"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "loading-spinner",
+      style: {
+        width: 24,
+        height: 24
+      }
+    }), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        marginTop: "8px",
+        color: "var(--color-secondary-content)"
+      }
+    }, "Loading...")) : item.moreInfoData ? renderMoreInfoItem(item.moreInfoData, 0) : null)))));
+  }));
+}
+CollapsibleKeyValueWidget.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    infoData: _propTypes.default.object.isRequired,
+    moreInfoData: _propTypes.default.shape({
+      type: _propTypes.default.string.isRequired,
+      data: _propTypes.default.array,
+      infoCardFooter: _propTypes.default.shape({
+        text: _propTypes.default.string,
+        value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+        subText: _propTypes.default.string
+      }),
+      iconConfig: _propTypes.default.shape({
+        icon: _propTypes.default.any,
+        position: _propTypes.default.string
+      })
+    }),
+    info: _propTypes.default.shape({
+      infoData: _propTypes.default.node,
+      infoKey: _propTypes.default.string
+    }),
+    tagStatus: _propTypes.default.shape({
+      tagKey: _propTypes.default.string,
+      tagData: _propTypes.default.shape({
+        type: _propTypes.default.string,
+        label: _propTypes.default.string,
+        size: _propTypes.default.string
+      })
+    }),
+    columnLayout: _propTypes.default.arrayOf(_propTypes.default.number)
+  })).isRequired,
+  title: _propTypes.default.string,
+  expandButtonText: _propTypes.default.string,
+  collapseButtonText: _propTypes.default.string,
+  expandButtonType: _propTypes.default.string,
+  collapseButtonType: _propTypes.default.string,
+  expandButtonSize: _propTypes.default.string,
+  collapseButtonSize: _propTypes.default.string,
+  onItemToggle: _propTypes.default.func,
+  onFetchMoreInfo: _propTypes.default.func,
+  handleCollapsibleKeyData: _propTypes.default.func
+};
+CollapsibleKeyValueWidget.defaultProps = {
+  title: "",
+  expandButtonText: "View Details",
+  expandButtonType: "text-only",
+  collapseButtonType: "text-only",
+  expandButtonSize: "small",
+  collapseButtonSize: "small",
+  onItemToggle: null,
+  onFetchMoreInfo: null,
+  handleCollapsibleKeyData: null
+};
+var _default = exports.default = CollapsibleKeyValueWidget;

package/build/widgets/oa-widget-collapsible-key-value/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrderTotalSec = exports.ExpandButton = exports.CollapsibleKeyValueContainer = exports.CollapsibleItem = exports.CollapsibleHeader = exports.CollapsibleContent = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 CollapsibleKeyValueContainer = exports.CollapsibleKeyValueContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  .type-t2-700 {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n  \n  .type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  \n  .margin-bottom-16 {\n    margin-bottom: 16px;\n  }\n"])));
+const CollapsibleItem = exports.CollapsibleItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n.totalOrderSecBox {    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 0 0 0;\n    border-top: 1px solid #E0E0E0;\n  \n}\n.gstAndCost {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\n"])));
+const CollapsibleHeader = exports.CollapsibleHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  \n.keyValueSecWithBtn {\n  display: flex; flex-direction: column; padding: 16px; border-radius: 4px;\n  border: 1px solid  #E0E0E0; gap:16px; margin-bottom: 16px;\n  }\n\n\n.keyValueSecWithBtn .valuestyle span  { width:auto;}\n\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: stretch;\n    \n    .key-value-section {\n      margin-right: 0;\n      margin-bottom: 12px;\n    }\n  }\n"])));
+const OrderTotalSec = exports.OrderTotalSec = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  \n\n\n\n"])));
+const CollapsibleContent = exports.CollapsibleContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  animation: slideDown 0.3s ease-out;\n  \n  .details-section {\n    color: var(--color-secondary-content);\n  }\n  \n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      max-height: 0;\n    }\n    to {\n      opacity: 1;\n      max-height: 500px;\n    }\n  }\n"])));
+const ExpandButton = exports.ExpandButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n"])));

package/build/widgets/oa-widget-content-panel/ContentPanel.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _KeyValueWidget = _interopRequireDefault(require("../oa-widget-key-value/KeyValueWidget"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+function ContentPanel(_ref) {
+  let {
+    title,
+    tooltip,
+    design,
+    data
+  } = _ref;
+  const renderHeader = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "info-block-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "info-block-title-group"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-sl1-700"
+  }, title), tooltip && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    title: tooltip
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _icons.InfoCircleOutlined,
+    size: 16,
+    color: "primary"
+  }))));
+  const renderContent = () => {
+    if (design === "keyvalue") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "keyvalueContent"
+      }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
+        data: data,
+        columnLayout: [Object.keys(data).length]
+      }));
+    }
+    if (design === "titlevalue") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "titlevalueQuestionContainer "
+      }, Object.entries(data).map(_ref2 => {
+        let [question, answer] = _ref2;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: question,
+          className: "faqBoxSection"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "faqBoxQuestion"
+        }, question), /*#__PURE__*/_react.default.createElement("div", {
+          className: "faqBoxAnswer"
+        }, " ", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: "secondary-content",
+          typography: "type-b1-400"
+        }, answer)));
+      }));
+    }
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledPanelWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "info-block-container"
+  }, renderHeader(), renderContent()));
+}
+ContentPanel.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  tooltip: _propTypes.default.string,
+  design: _propTypes.default.oneOf(["keyvalue", "titlevalue"]).isRequired,
+  data: _propTypes.default.object.isRequired
+};
+ContentPanel.defaultProps = {
+  tooltip: ""
+};
+var _default = exports.default = ContentPanel;

package/build/widgets/oa-widget-content-panel/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledPanelWrapper = 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 StyledPanelWrapper = exports.StyledPanelWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.info-block-container, .faqBoxSection {border: 1px solid #E0E0E0;border-radius: 4px;margin-bottom: 24px;background-color: #ffffff; overflow: hidden;}.info-block-header, .faqBoxQuestion {display: flex; background: #F6F6F6;  border-bottom: 1px solid #E0E0E0; padding: 16px 24px; justify-content: flex-start; align-items: center;}\n.info-block-title-group { display: flex; align-items: center; gap: 4px;}\n.keyvalueContent, .faqBoxAnswer{ padding:24px;}\n.titlevalueQuestionContainer{ padding:24px;}\n"])));

package/build/widgets/oa-widget-custom-details/CustomDetails.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+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) } })); }
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  border: 1px solid var(--color-divider);\n  background: var(--color-secondary-background);\n  border-bottom: ", ";\n"])), props => props.showBorder ? '1px solid var(--color-divider)' : 'none');
+
+/**
+ * A simple widget that displays a text within a bordered box.
+ *
+ * @param {string} text - The text to be displayed.
+ * @param {boolean} showBorder - Whether to display the border at the bottom of the widget.
+ */
+function CustomDetails(_ref) {
+  let {
+    text,
+    showBorder
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    showBorder: showBorder
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, text));
+}
+CustomDetails.propTypes = {
+  text: _propTypes.default.string.isRequired,
+  showBorder: _propTypes.default.bool
+};
+CustomDetails.defaultProps = {
+  showBorder: true
+};
+var _default = exports.default = CustomDetails;