oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-reupload-drawer/ReUploadDrawer.js

@@ -0,0 +1,164 @@
+"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.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireDefault(require("react"));
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomUpload = _interopRequireDefault(require("../../dev/oa-component-upload/CustomUpload"));
+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); }
+function GenericUpload(_ref) {
+  var _config$documents;
+  let {
+    config,
+    uploadHandler,
+    deleteHandler: _deleteHandler,
+    downloadHandler,
+    previewHandler,
+    visible,
+    onClose,
+    validationConfig = {
+      maxSize: 5,
+      allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+      customValidation: null
+    },
+    uploadedDocuments,
+    showDelete = true,
+    showPreview = false,
+    form
+  } = _ref;
+  const validateFile = (file, docTypeId) => {
+    const isValidType = validationConfig.allowedTypes.includes(file.type);
+    if (!isValidType) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["Only ".concat(validationConfig.allowedTypes.map(type => type.split('/')[1].toUpperCase()).join('/'), " files are allowed!")]
+      }]);
+      return false;
+    }
+    const isValidSize = file.size / 1024 / 1024 < validationConfig.maxSize;
+    if (!isValidSize) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["File must be smaller than ".concat(validationConfig.maxSize, "MB!")]
+      }]);
+      return false;
+    }
+    if (validationConfig.customValidation) {
+      return validationConfig.customValidation(file, docTypeId);
+    }
+    return true;
+  };
+  const handleUpload = async (file, docTypeId, documentId) => {
+    if (!validateFile(file, docTypeId)) {
+      return null;
+    }
+    return uploadHandler(file, docTypeId, documentId);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: config.title,
+    width: config.width,
+    open: visible,
+    onClose: onClose,
+    buttonConfig: config.buttonConfig
+  }, config.systemInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({}, config.systemInfo, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoOutlined.default,
+        size: 24,
+        color: "negative"
+      }),
+      position: 'left'
+    }
+  }))), (config === null || config === void 0 ? void 0 : config.heading) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, config.heading, ' ')), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form
+  }, (_config$documents = config.documents) === null || _config$documents === void 0 ? void 0 : _config$documents.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.docTypeId
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-500",
+    color: "primary-content"
+  }, item === null || item === void 0 ? void 0 : item.docName)), /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
+    isMandatory: true,
+    handleCustomOnChange: (file, status) => handleUpload(file, item.docTypeId, item.documentId),
+    formName: item.docTypeId,
+    uploadedDocuments: uploadedDocuments && uploadedDocuments[item.docTypeId] ? [uploadedDocuments[item.docTypeId]] : [],
+    deleteHandler: selectedFile => _deleteHandler(item.docTypeId),
+    downloadCallback: file => downloadHandler(item.docTypeId),
+    getPreview: previewHandler || (() => {}),
+    showDelete: showDelete,
+    showPreview: showPreview,
+    accept: validationConfig.allowedTypes.join(', '),
+    docName: item.docName
+  })))));
+}
+GenericUpload.propTypes = {
+  config: _propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    width: _propTypes.default.number,
+    buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+      callback: _propTypes.default.func,
+      label: _propTypes.default.string,
+      type: _propTypes.default.string
+    })),
+    systemInfo: _propTypes.default.shape({
+      title: _propTypes.default.string,
+      color: _propTypes.default.string,
+      description: _propTypes.default.node
+    }),
+    heading: _propTypes.default.string,
+    documents: _propTypes.default.arrayOf(_propTypes.default.shape({
+      title: _propTypes.default.string,
+      docTypeId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      docName: _propTypes.default.string
+    }))
+  }).isRequired,
+  uploadHandler: _propTypes.default.func.isRequired,
+  deleteHandler: _propTypes.default.func.isRequired,
+  downloadHandler: _propTypes.default.func.isRequired,
+  previewHandler: _propTypes.default.func,
+  validationConfig: _propTypes.default.shape({
+    maxSize: _propTypes.default.number,
+    allowedTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+    customValidation: _propTypes.default.func
+  }),
+  uploadedDocuments: _propTypes.default.object,
+  showDelete: _propTypes.default.bool,
+  showPreview: _propTypes.default.bool,
+  form: _propTypes.default.object.isRequired,
+  visible: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired
+};
+GenericUpload.defaultProps = {
+  previewHandler: () => {},
+  validationConfig: {
+    maxSize: 5,
+    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+    customValidation: null
+  },
+  uploadedDocuments: {},
+  showDelete: true,
+  showPreview: false
+};
+var _default = exports.default = GenericUpload;

package/build/widgets/oa-widget-send-payment-link/SendPaymentLinkWidget.js

@@ -0,0 +1,224 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SendPaymentLinkWidget;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styles = require("./styles");
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+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; }
+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); } // TODO: Select the appropriate typographies for each text below.
+/**
+ * @description A widget to send a payment link to customers.
+ * @param {Object} props The component props.
+ * @param {string} [props.data-test] The data-test attribute for the component.
+ * @param {string} [props.heading] The heading for the payment link drawer.
+ * @param {function} [props.onClose] A callback function to be called when the drawer is closed.
+ * @param {function} [props.onSubmit] A callback function to be called when the "Send" button is clicked.
+ * @param {boolean} [props.open] The open state of the drawer.
+ * @param {string} [props.placement] The placement of the drawer.
+ * @param {array} [props.options] An array of options to be shown as radio buttons.
+ * @param {string} [props.height] The height of the drawer.
+ * @param {string} [props.width] The width of the drawer.
+ * @returns {React.ReactElement} The React component.
+ */
+function SendPaymentLinkWidget(_ref) {
+  var _options$selectedRadi, _options$selectedRadi2, _options$selectedRadi3;
+  let {
+    'data-test': dataTest,
+    heading,
+    onClose,
+    onSubmit,
+    open,
+    options,
+    height,
+    width,
+    placement
+  } = _ref;
+  const [form] = _antd.Form.useForm();
+  const [selectedRadio, setSelectedRadio] = (0, _react.useState)(0);
+
+  /**
+   * @description Handles the radio button change event.
+   * @param {Object} event - The event object.
+   * @fires setSelectedRadio - Updates the selected radio button state.
+   * @fires form.setFieldsValue - Updates the form fields with the new values.
+   */
+  const onRadioChange = event => {
+    var _options$event$target;
+    setSelectedRadio(event.target.value);
+
+    // Setting mobileNum and email to falsy values just in case the data is empty.
+    const newValues = _objectSpread({
+      mobileNum: null,
+      email: ''
+    }, (_options$event$target = options[event.target.value]) === null || _options$event$target === void 0 ? void 0 : _options$event$target.data);
+    form.setFieldsValue(newValues);
+  };
+
+  /**
+  * @description Handles the form submission process.
+  * Validates form fields and formats the form data with additional
+  * label and value information before invoking the `onSubmit` callback.
+  * Resets the form fields upon successful submission.
+  * @fires onSubmit - Passes the modified form data to the parent component.
+  */
+  const handleSubmit = () => {
+    // Customize submit behavior over here.
+
+    form.validateFields().then(formData => {
+      const modifiedFormData = _objectSpread(_objectSpread({}, formData), {}, {
+        label: options[selectedRadio].label,
+        value: options[selectedRadio].value
+      });
+
+      /*
+      Call to `onSubmit` callback received from props.
+      Passing the form data up to the parent by putting it as an argument.
+      */
+      onSubmit(modifiedFormData);
+
+      // This resets the form upon submit.
+      form.resetFields();
+    });
+  };
+  const handleClose = () => {
+    // Customize close behavior over here.
+
+    // Call to `onClose` callback received from props.
+    onClose();
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    buttonConfig: [{
+      callback: handleClose,
+      'data-test': dataTest ? "".concat(dataTest, "--cancel-button") : undefined,
+      label: 'Cancel',
+      type: 'secondary'
+    }, {
+      // Calling submit on the form, if the Send button is clicked
+      callback: handleSubmit,
+      'data-test': dataTest ? "".concat(dataTest, "--send-button") : undefined,
+      label: 'Send',
+      type: 'primary'
+    }],
+    "data-test": dataTest ? "".concat(dataTest, "--drawer") : undefined,
+    onClose: handleClose,
+    open: open,
+    title: heading,
+    placement: placement,
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "type-t2-700"
+  }, "Send to"), /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+    "data-test": dataTest ? "".concat(dataTest, "--contact-radio-group") : undefined,
+    onChange: onRadioChange,
+    value: selectedRadio
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioGrid, null, options.map((option, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: option.value
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--contact-radio-(").concat(option.label, ")") : undefined,
+    onChange: onRadioChange,
+    label: option.label,
+    value: idx
+  })))))), /*#__PURE__*/_react.default.createElement(_styles.FormContainer, null, /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    initialValues: (_options$selectedRadi = options[selectedRadio]) === null || _options$selectedRadi === void 0 ? void 0 : _options$selectedRadi.data,
+    layout: "vertical"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content"
+  }, "Mobile Number", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*"))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "mobileNum",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--mobile-number-validation-message")
+      }, "A mobile number is required.") : 'A mobile number is required.'
+    }, {
+      pattern: /^[+]?\d{1}[\d- ]*$/,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--mobile-number-validation-message")
+      }, "Please enter a valid mobile number.") : 'Please enter a valid mobile number.'
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    style: {
+      height: '48px',
+      borderRadius: '4px'
+    },
+    "data-test": dataTest ? "".concat(dataTest, "--mobile-number") : undefined,
+    disabled: (_options$selectedRadi2 = options[selectedRadio]) === null || _options$selectedRadi2 === void 0 || (_options$selectedRadi2 = _options$selectedRadi2.data) === null || _options$selectedRadi2 === void 0 ? void 0 : _options$selectedRadi2.mobileNum
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content"
+  }, "Email ID", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*"))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "email",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--email-validation-message")
+      }, "An e-mail ID is required.") : 'An e-mail ID is required.'
+    }, {
+      type: 'email',
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--email-validation-message")
+      }, "Please enter a valid e-mail.") : 'Please enter a valid e-mail.'
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    style: {
+      height: '48px',
+      borderRadius: '4px'
+    },
+    "data-test": dataTest ? "".concat(dataTest, "--email") : undefined,
+    disabled: (_options$selectedRadi3 = options[selectedRadio]) === null || _options$selectedRadi3 === void 0 || (_options$selectedRadi3 = _options$selectedRadi3.data) === null || _options$selectedRadi3 === void 0 ? void 0 : _options$selectedRadi3.email
+  })))));
+}
+SendPaymentLinkWidget.propTypes = {
+  'data-test': _propTypes.default.string,
+  heading: _propTypes.default.string,
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onClose: _propTypes.default.func,
+  onSubmit: _propTypes.default.func,
+  open: _propTypes.default.bool,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired,
+    data: _propTypes.default.shape({
+      mobileNum: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+      email: _propTypes.default.string
+    })
+  })).isRequired,
+  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+SendPaymentLinkWidget.defaultProps = {
+  'data-test': null,
+  heading: '',
+  height: 'auto',
+  onClose: () => {},
+  onSubmit: () => {},
+  open: true,
+  placement: 'right',
+  width: '480'
+};

package/build/widgets/oa-widget-send-payment-link/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGrid = exports.RadioContainer = exports.FormContainer = 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 RadioContainer = exports.RadioContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    h2{\n        color: var(--color-primary-content);\n    }\n    \n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 44px;\n    .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{\n        position: absolute;\n        right: 0;\n    }\n"])));
+
+// This helps make the radio buttons aligned in uniform columns
+const RadioGrid = exports.RadioGrid = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n"])));
+const FormContainer = exports.FormContainer = _styledComponents.default.aside(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n        position: absolute;\n        right: 0;\n        color: var(--color-negative);\n    }\n    .ant-form-item {\n        margin-bottom: 36px;\n    }\n    label{\n        display: block;\n    }\n    .ant-form-item .ant-form-item-label{\n        text-align: start;\n    }\n    .ant-row{\n        flex-direction: column;\n    }\n    .padding-bottom-4{\n        padding: 0 0 4px;\n    }\n"])));

package/build/widgets/oa-widget-servicecard/ServiceCard.js

@@ -0,0 +1,185 @@
+"use strict";
+
+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 _ArrowForwardIosSharp = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosSharp"));
+var _Call = _interopRequireDefault(require("@material-ui/icons/Call"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+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; }
+/**
+ * ServiceCard component
+ *
+ * @param {Object} card - The card object which contains all the necessary data to render the component
+ * @param {Object} card.body - The body object which contains the properties for the card
+ * @param {string} card.body.heading - The heading of the card
+ * @param {string} card.body.subHeading - The subheading of the card
+ * @param {Object} card.body.alert - The alert object which contains the description and actions
+ * @param {string} card.body.alert.description.text - The description text of the alert
+ * @param {string} card.body.alert.description.type - The type of the alert
+ * @param {Array} card.body.alert.actions - The actions array of the alert
+ * @param {Object} card.body.alert.actions[i] - The action object
+ * @param {string} card.body.alert.actions[i].label - The label of the action
+ * @param {string} card.body.alert.actions[i].type - The type of the action
+ * @param {function} card.body.alert.actions[i].name - The function to be called on click
+ * @param {Object} card.footer - The footer object which contains the properties for the footer
+ * @param {string} card.footer.type - The type of the footer
+ * @param {Array} card.footer.actions - The actions array of the footer
+ * @param {Object} card.footer.actions[i] - The action object
+ * @param {string} card.footer.actions[i].label - The label of the action
+ * @param {string} card.footer.actions[i].type - The type of the action
+ * @param {function} card.footer.actions[i].name - The function to be called on click
+ * @returns {React.ReactElement} The rendered component
+ */
+function ServiceCard(_ref) {
+  var _body$heading, _body$heading2, _alert$description, _alert$description2, _alert$description3, _alert$description4, _footer$actions;
+  let {
+    card
+  } = _ref;
+  const {
+    body,
+    footer
+  } = card;
+  const [showModal, setShowModal] = (0, _react.useState)(false);
+  const toggleModal = () => {
+    setShowModal(!showModal);
+  };
+  const itemsToShow = (body === null || body === void 0 || (_body$heading = body.heading) === null || _body$heading === void 0 ? void 0 : _body$heading.slice(0, 1)) || [];
+  const remainingItems = (body === null || body === void 0 || (_body$heading2 = body.heading) === null || _body$heading2 === void 0 ? void 0 : _body$heading2.slice(1)) || [];
+  const {
+    heading,
+    subHeading,
+    alert
+  } = body || {};
+  const {
+    actions
+  } = footer || {};
+  return /*#__PURE__*/_react.default.createElement(_styles.MembershipCardStyle, null, body && /*#__PURE__*/_react.default.createElement(_styles.CardBody, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cardHead"
+  }, /*#__PURE__*/_react.default.createElement("div", null, heading && heading.length > 0 && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, itemsToShow.length && itemsToShow.join(', '), remainingItems.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: 'var(--color-primary)',
+      cursor: 'pointer'
+    },
+    role: "button",
+    tabIndex: 0,
+    onClick: () => setShowModal(true),
+    onKeyPress: event => {
+      if (event.key === 'Enter') {
+        setShowModal(true);
+      }
+    }
+  }, "...+".concat(remainingItems.length, " more")))), subHeading && /*#__PURE__*/_react.default.createElement("p", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "secondary-content"
+  }, subHeading)))), (alert === null || alert === void 0 || (_alert$description = alert.description) === null || _alert$description === void 0 ? void 0 : _alert$description.text) !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: alert !== null && alert !== void 0 && (_alert$description2 = alert.description) !== null && _alert$description2 !== void 0 && _alert$description2.text && (alert === null || alert === void 0 || (_alert$description3 = alert.description) === null || _alert$description3 === void 0 ? void 0 : _alert$description3.text) !== '' ? "toolTipInfo ".concat(alert.description.type) : 'toolTipInfo flexChangeBody'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "toolTip"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexGap"
+  }, (alert === null || alert === void 0 ? void 0 : alert.description) && (alert === null || alert === void 0 || (_alert$description4 = alert.description) === null || _alert$description4 === void 0 ? void 0 : _alert$description4.text) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, alert.description.text))))), alert.actions && /*#__PURE__*/_react.default.createElement("div", {
+    className: "viewStatus"
+  }, alert.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action.label,
+    label: action.label,
+    type: action.type,
+    onClick: action.name,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _ArrowForwardIosSharp.default,
+        size: 16
+      }),
+      position: 'right'
+    }
+  }))))), footer && footer.type === 'button' && (footer === null || footer === void 0 || (_footer$actions = footer.actions) === null || _footer$actions === void 0 ? void 0 : _footer$actions.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, actions && actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action === null || action === void 0 ? void 0 : action.label,
+    label: action === null || action === void 0 ? void 0 : action.label,
+    type: action === null || action === void 0 ? void 0 : action.type,
+    size: "large",
+    onClick: action === null || action === void 0 ? void 0 : action.name,
+    disabled: action === null || action === void 0 ? void 0 : action.disabled
+  }))), footer && footer.type === 'text' && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fullWidth"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b1-400"
+  }, "For further help, call us at", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, " 1800 123 3300"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobileIcon"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "tel:1800 123 3300",
+    style: {
+      textDecoration: 'none',
+      color: 'inherit'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _Call.default,
+    size: 24,
+    style: {
+      color: 'inherit'
+    }
+  })))), showModal && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    open: showModal,
+    imgSrc: null,
+    onCancel: toggleModal,
+    title: "Your Appliances"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "noOfAppliances"
+  }, body === null || body === void 0 ? void 0 : body.heading.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: item
+  }, item)))));
+}
+ServiceCard.propTypes = {
+  card: _propTypes.default.shape({
+    body: _propTypes.default.shape({
+      heading: _propTypes.default.arrayOf(_propTypes.default.string),
+      subHeading: _propTypes.default.string,
+      alert: _propTypes.default.shape({
+        description: _propTypes.default.shape({
+          text: _propTypes.default.string,
+          type: _propTypes.default.string
+        }),
+        actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+          label: _propTypes.default.string,
+          type: _propTypes.default.string,
+          name: _propTypes.default.func
+        }))
+      })
+    }),
+    footer: _propTypes.default.shape({
+      type: _propTypes.default.string,
+      actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string,
+        name: _propTypes.default.func
+      }))
+    })
+  })
+};
+ServiceCard.defaultProps = {
+  card: null
+};
+var _default = exports.default = ServiceCard;

package/build/widgets/oa-widget-servicecard/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MembershipCardStyle = exports.CardFooter = exports.CardBody = 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 MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n  padding: 0 0 8px;\n}\n.viewStatus button{\n  padding: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  margin: 0 0 24px;\n  border: 1px solid var(--color-divider);\n  @media only screen and (max-width: 600px) {\n    .type-t1-500 {\n      font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n    gap: 16px;\n    padding: 24px 16px 16px;\n    .cardHead p .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .primary-info label .type-t2-700{\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 20px;\n    }\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 24px;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    min-width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 0px 0 0;\n  }\n  .flexChangeBody{\n    align-items: center !important;\n    flex-direction: row !important;\n    gap: 8px !important;\n  }\n  .flexChangeBody .text-container{\n    white-space: nowrap;\n  }\n  .flexChangeBody .viewStatus button {\n    margin: 0 !important;\n}\n.displayFlex{\n  display: flex;\n}\n  @media only screen and (max-width: 600px) {\n    .type-b1-400{\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n    }\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    \n    .cardHead .titleHead > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
+const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n@media only screen and (max-width: 600px) {\n  gap: 16px;\n}\n"])));
+const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.mobileIcon{\n  display: none;\n}\ndisplay: flex;\npadding: 16px 24px;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\njustify-content: end;\n@media only screen and (max-width: 600px) {\n  .fullWidth{\n    width: 100%;\n  }\n  .mobileIcon{\n    min-width: 48px;\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--color-primary);\n      border-radius: 50%;\n      color: var(--color-primary-background);\n  }\n  .mobileIcon a{\n    display: flex;\n  }\n  padding: 16px 16px;\n  width: calc(100% + 32px);\n  margin: 0 0 0 -16px;\n  top: 16px;\n  align-items:center;\ndiv span {\n  display: block;\n}\ndiv span > .type-t2-700{\n  padding: 4px 0 0;\n}\n  .text-container .type-t2-700 {\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n}\n.large {\n  height: 36px;\n  min-width: 100px;\n  padding: 10px 16px;\n}\n}\n"])));