oa-componentbook 0.18.349 → 0.18.351

package/build/widgets/oa-widget-image-gallery/ThumbnailGrid.js

@@ -32,7 +32,8 @@ function ThumbnailGrid(_ref) {
     fetchImage: fetchImage,
     key: img.id || index,
     img: img,
-    onClick: () => onImageClick(index)
+    onClick: () => onImageClick(index),
+    displayDocName: img.displayDocName
   }))));
 }
 ThumbnailGrid.propTypes = {
@@ -51,7 +52,8 @@ function ThumbnailImage(_ref2) {
   let {
     img,
     onClick,
-    fetchImage
+    fetchImage,
+    displayDocName
   } = _ref2;
   const {
     ref,
@@ -95,17 +97,38 @@ function ThumbnailImage(_ref2) {
     onClick: onClick,
     onKeyDown: e => e.key === "Enter" && onClick(),
     role: "button",
-    tabIndex: 0
+    tabIndex: 0,
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
   }, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
     spinning: !loaded && inView
   }, inView && resolvedSrc && /*#__PURE__*/_react.default.createElement("img", {
     src: resolvedSrc,
     alt: "thumbnail",
     style: {
-      display: loaded ? "block" : "none"
+      display: loaded ? 'block' : 'none',
+      width: '100%',
+      borderRadius: 8,
+      background: '#e0e0e0',
+      minHeight: 120,
+      objectFit: 'cover'
     },
     onLoad: () => setLoaded(true)
-  }))));
+  })), loaded && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 8,
+      marginLeft: 8,
+      marginBottom: 4,
+      color: '#222',
+      fontSize: 15,
+      fontWeight: 400,
+      letterSpacing: 0.2
+    }
+  }, displayDocName || 'Image')));
 }
 ThumbnailImage.propTypes = {
   img: _propTypes.default.shape({
@@ -113,9 +136,11 @@ ThumbnailImage.propTypes = {
     originalImageUrl: _propTypes.default.string
   }).isRequired,
   onClick: _propTypes.default.func.isRequired,
-  fetchImage: _propTypes.default.func
+  fetchImage: _propTypes.default.func,
+  displayDocName: _propTypes.default.string
 };
 ThumbnailImage.defaultProps = {
-  fetchImage: () => {}
+  fetchImage: () => {},
+  displayDocName: ''
 };
 var _default = exports.default = ThumbnailGrid;

package/build/widgets/oa-widget-image-gallery/imageGalleryStyle.js

@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const StylesContainer = exports.StylesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n.topBottomGallarySec{ display:flex; flex-direction:row; margin-bottom:16px; justify-content:flex-end;}\n\n.thumbnailGridStyle{display: grid\n;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;}\n\n\n"])));
 const ThumbnailGridStyle = exports.ThumbnailGridStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.thumbnailGridStyleBox{display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;}\n"])));
-const ThumbnailGridBoxStyle = exports.ThumbnailGridBoxStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.thumbnailGridBox{ position: relative;\n    aspect-ratio: 1 / 1; padding: 8px; border-radius: 4px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgb(240, 240, 240);}\n\n    .thumbnailGridBox img{ border-radius:4px;    width: 100%;\n    height: 100%;  transition: transform .2s;\n    object-fit: cover;} \n\n    .thumbnailGridBox img:hover{ transform: scale(1.02);} \n\n"])));
+const ThumbnailGridBoxStyle = exports.ThumbnailGridBoxStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.thumbnailGridBox{ position: relative;\n    aspect-ratio: 1 / 1; padding: 8px; border-radius: 4px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgb(240, 240, 240);\n    gap:6px;\n    }\n\n    .thumbnailGridBox img{ border-radius:4px;    width: 100%;\n    height: 100%;  transition: transform .2s;\n    object-fit: cover;} \n\n    .thumbnailGridBox img:hover{ transform: scale(1.02);} \n\n"])));
 const FullScreenStyle = exports.FullScreenStyle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n.overlay{\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(31, 31, 31, 0.82);\n    z-index: 99999;\n  }\n\n\n\n  .navButtonLeft, .navButtonRight{\n    position: absolute;\n    top: 50%;\n    font-size: 16px;\n    cursor: pointer;\n    user-select: none;\n    background: rgba(0, 0, 0, 0.7);\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .navButtonLeft:hover, .navButtonRight:hover{ background: rgba(0, 0, 0, 0.9);}\n\n.navButtonLeft{left: 10px;}\n.navButtonRight {right: 10px;}\n.downloadAll{color: #FFF;\n    padding: 10px 24px;\n    border-radius: 4px;\n    border: 1px solid #FFF;\n    text-align: center;\n    font-size: 14px;\n    line-height: 20px;\n    position: absolute; cursor: pointer;\n    bottom: 60px;\n    left: 50%;\n    transform: translate(-50%, -50%);}\n\n.header{padding:24px; display:flex; flex-direction:row;  justify-content:space-between; align-items:center;}\n\n"])));
 
 // export default StylesContainer;

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

@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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{width: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"])));
+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 = {};

package/build/widgets/oa-widget-membershipcard/MembershipCard.js

@@ -39,6 +39,8 @@ var _Laptop = _interopRequireDefault(require("../../images/Laptop.png"));
 var _Luggage = _interopRequireDefault(require("../../images/Luggage.png"));
 var _Microwave = _interopRequireDefault(require("../../images/Microwave.png"));
 var _HA = _interopRequireDefault(require("../../images/HA.png"));
+var _Car = _interopRequireDefault(require("../../images/Car.png"));
+var _TwoWheeler = _interopRequireDefault(require("../../images/TwoWheeler.png"));
 var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -98,6 +100,8 @@ function MembershipCard(_ref) {
     Footwear: _Footwear.default,
     Furniture: _Furniture.default,
     HA: _HA.default,
+    Car: _Car.default,
+    Two_Wheeler: _TwoWheeler.default,
     Default: _Default.default
   };
   const iconSrc = icons[icon] || _Default.default;

package/build/widgets/oa-widget-spare-part/SparePartsWidget.js

@@ -25,7 +25,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  .text-only-size{\n    justify-content: left;\n  }\n  small{\n    color: var(--color-secondary-content);\n    display: block;\n  }\n"])));
+const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  .text-only-size{\n    justify-content: left;\n  }\n  small{\n    color: var(--color-secondary-content);\n    display: block;\n  }\n  .costClass span {\n    display: block;\n    text-align: end;  \n  }\n"])));
 const CostBreakdown = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: var(--color-secondary-background);\n  padding: 0 12px;\n  border-radius: 4px;\n  ul{\n    display: flex;\n    margin: 0;\n    border-bottom: 1px solid var(--color-divider);\n    padding: 12px 0;\n  }\n  ul:last-child{\n    border-bottom: none;\n  }\n  ul li{\n    width: 100%;\n    list-style: none;\n  }\n  ul li:first-child{\n    color: var(--color-primary-content);\n    font-style: normal;\n  }\n  ul li:last-child{\n    font-style: normal;\n    color: var(--color-secondary-content);\n  }\n  .font-bold{\n    font-weight: 700;\n  }\n  .subHeadingclass{\n    color:rgba(113, 113, 113, 1);\n    font-weight: 400;\n  }\n\n  .alignItemsClass{\n    display: flex;\n    flex-direction: column;\n    justify-content: start;\n    gap: 4px;\n  }\n    .breakDownLastChild{\n      text-align: right;\n      margin-right: 8px;\n    }\n   \n"])));
 // Mapping of how costs are covered
 const costCoveredBy = {
@@ -115,7 +115,8 @@ function SparePartsWidget(_ref) {
     showDiscount,
     showSparePartsInfo = true,
     keySettings = {},
-    showNonCoverageMessage
+    showNonCoverageMessage,
+    unCoveredScopeDescription
   } = _ref;
   const sparePartList = [...scopeDetails.unCoveredScope, ...scopeDetails.coveredScope];
   const showActionList = sparePartList.some(sparePart => {
@@ -156,6 +157,7 @@ function SparePartsWidget(_ref) {
     title: 'Cost',
     width: '20%',
     dataIndex: 'cost',
+    className: 'costClass',
     key: 'cost',
     render: (cost, record) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
       className: "row",
@@ -211,7 +213,7 @@ function SparePartsWidget(_ref) {
     const coveredScope = (scopeDetails === null || scopeDetails === void 0 ? void 0 : scopeDetails.coveredScope) || [];
     return /*#__PURE__*/_react.default.createElement(FlexContainer, null, showNonCoverageMessage && (scopeDetails === null || scopeDetails === void 0 || (_scopeDetails$unCover = scopeDetails.unCoveredScope) === null || _scopeDetails$unCover === void 0 ? void 0 : _scopeDetails$unCover.length) > 0 && coverageShow && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
       color: "background-warning",
-      description: "Multiple components need to be repaired which are not covered in this plan",
+      description: unCoveredScopeDescription,
       iconConfig: {
         icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
           color: "warning",
@@ -267,7 +269,8 @@ SparePartsWidget.propTypes = {
   showGST: _propTypes.default.bool,
   showDiscount: _propTypes.default.bool,
   keySettings: _propTypes.default.shape({}),
-  showNonCoverageMessage: _propTypes.default.bool
+  showNonCoverageMessage: _propTypes.default.bool,
+  unCoveredScopeDescription: _propTypes.default.string
 };
 
 // Define default props for SpareParts component
@@ -285,6 +288,7 @@ SparePartsWidget.defaultProps = {
   showGST: false,
   showDiscount: false,
   keySettings: {},
-  showNonCoverageMessage: true
+  showNonCoverageMessage: true,
+  unCoveredScopeDescription: 'Multiple components need to be repaired which are not covered in this plan'
 };
 var _default = exports.default = SparePartsWidget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.349",
+  "version": "0.18.351",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",