oa-componentbook 0.6.0 → 0.7.0

package/build/components/styles.js

@@ -3,153 +3,87 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableStyles = exports.keyValueDataViewStyles = exports.buttonStyles = void 0;
-const buttonStyles = {
-  button: {
-    color: 'white',
-    padding: '10px 20px',
-    border: 'none',
-    borderRadius: '5px',
-    cursor: 'pointer',
-    backgroundColor: '#a7a7a7',
-    width: '200px'
-  },
-  'button.primary': {
-    backgroundColor: '#007bff'
-  },
-  'button.secondary': {
-    backgroundColor: '#ff005d'
-  },
-  'button.small': {
-    width: '100px'
-  },
-  'button.medium': {
-    width: '200px'
-  },
-  'button.large': {
-    width: '300px'
-  },
-  'button:hover': {
-    backgroundColor: '#0056b3'
-  }
-};
-exports.buttonStyles = buttonStyles;
-const keyValueDataViewStyles = {
-  '.complaintDetails': {
-    display: 'flex'
-  },
-  '.complaintDetails span': {
-    width: '100%'
-  },
-  '.complaintDetails b': {
-    margin: '0 8px 4px 0',
-    minWidth: '140px'
-  },
-  '.mainDiv': {
-    padding: '48px 24px 0'
-  },
-  '.mainDiv h3': {
-    fontSize: '24px',
-    fontWeight: '500'
-  },
-  '.mainDiv h2': {
-    color: '#454545',
-    fontSize: '20px',
-    fontWeight: '500',
-    letterSpacing: '0',
-    lineHeight: '30px',
-    margin: '0 0 12px'
-  },
-  '.footerBtn': {
-    textAlign: 'right',
-    padding: '48px 0 0'
-  },
-  '.footerBtn button:last-child': {
-    margin: '0 0 0 12px'
-  },
-  '.complaintDetails button': {
-    width: '110px !important'
-  },
-  '.flexBody': {
-    display: 'flex'
-  },
-  '.detailCard': {
-    display: 'flex',
-    aligIitems: 'flex-start',
-    background: '#fff',
-    padding: '24px 16px',
-    border: '1px solid #DCDCDC',
-    borderRadius: '4px',
-    margin: '0 0 16px'
-  },
-  '.detailsSec': {
-    margin: '0 72px 0 0'
-  },
-  '.bgColor': {
+exports.spacingScalesStyle = exports.cornerRadiusStyle = void 0;
+const spacingScalesStyle = {
+  '.spacing-4': {
+    padding: '4px',
+    margin: '0'
+  },
+  '.spacing-8': {
     padding: '8px',
-    background: '#EBEEF0'
+    margin: '0'
+  },
+  '.spacing-12': {
+    padding: '12px',
+    margin: '0'
   },
-  '.headerSecStyles': {
-    display: 'flex',
-    alignItems: 'center',
+  '.spacing-16': {
+    padding: '16px',
+    margin: '0'
+  },
+  '.spacing-24': {
     padding: '24px',
-    background: '#fff',
-    margin: '0 0 8px'
-  },
-  '.h2Styles': {
-    fontSize: '18px',
-    margin: '0 16px 0 0'
-  },
-  '.secondaryBtnStyles': {
-    margin: '0 0 0 12px'
-  },
-  '.detailsSec': {
-    margin: '0 72px 0 0'
-  },
-  '.detailsSec h6': {
-    color: '#6F7C87',
-    textTransform: 'uppercase',
-    padding: '0 0 8px',
-    fontSize: '10px',
-    fontWeight: 'bold',
-    letterSpacing: '1px',
-    lineHeight: '10px',
     margin: '0'
   },
-  '.detailsSec h5': {
-    color: '#6F7C87',
-    padding: '0 0 8px',
-    fontSize: '12px',
-    fontWeight: 'bold',
-    letterSpacing: '1px',
-    lineHeight: '10px',
+  '.spacing-32': {
+    padding: '32px',
+    margin: '0'
+  },
+  '.spacing-40': {
+    padding: '40px',
+    margin: '0'
+  },
+  '.spacing-48': {
+    padding: '48px',
+    margin: '0'
+  },
+  '.spacing-56': {
+    padding: '56px',
     margin: '0'
   },
-  '.detailsDiv a': {
-    color: '#0282F0',
-    display: 'block',
-    padding: '2px 0 0',
-    fontSize: '12px',
-    letterSpacing: '0',
-    lineHeight: '20px'
-  },
-  '.walletTab': {
-    background: '#fff',
-    padding: '4px'
-  },
-  '.linkStyle': {
-    color: '#1890ff',
-    textDecoration: 'underline',
-    cursor: 'pointer'
+  '.spacing-64': {
+    padding: '64px',
+    margin: '0'
+  },
+  '.spacing-72': {
+    padding: '72px',
+    margin: '0'
+  },
+  '.spacing-80': {
+    padding: '80px',
+    margin: '0'
+  },
+  '.spacing-96': {
+    padding: '96px',
+    margin: '0'
+  },
+  '.spacing-108': {
+    padding: '108px',
+    margin: '0'
   }
 };
-exports.keyValueDataViewStyles = keyValueDataViewStyles;
-const tableStyles = {
-  '.tableBorder': {
-    border: '1px solid #e8e8e8'
+exports.spacingScalesStyle = spacingScalesStyle;
+const cornerRadiusStyle = {
+  '.border-radius-xlarge': {
+    borderRadius: '16px'
+  },
+  '.border-radius-large': {
+    borderRadius: '12px'
+  },
+  '.border-radius-medium': {
+    borderRadius: '8px'
+  },
+  '.border-radius-small': {
+    borderRadius: '4px'
+  },
+  '.border-radius-xsmall': {
+    borderRadius: '2px'
+  },
+  '.border-radius-none': {
+    borderRadius: '0px'
   },
-  '.imgWidth': {
-    width: '20px'
+  '.border-radius-full': {
+    borderRadius: '9999px'
   }
 };
-exports.tableStyles = tableStyles;
+exports.cornerRadiusStyle = cornerRadiusStyle;

package/build/components/wallet-service-details/ComplaintDetail.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComplaintDetails;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _OACustomButton = _interopRequireDefault(require("../oa-button/OACustomButton"));
+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) } })); }
+function ComplaintDetails() {
+  const ComplaintContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 48px 24px 0;\n\n    h3 {\n      font-size: 24px;\n      font-weight: 500;\n    }\n\n    h2 {\n      color: #454545;\n      font-size: 20px;\n      font-weight: 500;\n      letter-spacing: 0;\n      line-height: 30px;\n      margin: 0 0 12px;\n    }\n\n    .key-value-columns {\n      display: flex;\n    }\n\n    .footer-buttons {\n      text-align: right;\n      padding: 48px 0 0;\n\n      button:last-child {\n        margin: 0 0 0 24px;\n      }\n    }\n  "])));
+  return /*#__PURE__*/_react.default.createElement(ComplaintContainer, null, /*#__PURE__*/_react.default.createElement("h3", null, "SR#21463 - BER Payment - Beyond 5 days"), /*#__PURE__*/_react.default.createElement("h2", null, "Complaint Details"), /*#__PURE__*/_react.default.createElement("section", {
+    className: "key-value-columns"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer-buttons"
+  }, /*#__PURE__*/_react.default.createElement(_OACustomButton.default, {
+    text: "Resolve",
+    size: "small",
+    className: "ant-btn-primary"
+  }), /*#__PURE__*/_react.default.createElement(_OACustomButton.default, {
+    text: "Cancel",
+    size: "small",
+    className: "sml-secondary-btn"
+  })));
+}

package/build/components/{Wallet Service Details/serviceDetailsTabView.js → wallet-service-details/ServiceDetailsTabView.js}

@@ -4,18 +4,20 @@ require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = ServiceDetailsTabView;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
-var _Tabs = _interopRequireDefault(require("../Tabs"));
-var _Table = _interopRequireDefault(require("../Table"));
-var _basicQuestions = _interopRequireDefault(require("./basicQuestions"));
-var _styles = require("../styles");
 var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _TabsDesign = _interopRequireDefault(require("../TabsDesign"));
+var _TableDesign = _interopRequireDefault(require("../TableDesign"));
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const WorkflowColumns = [{
   title: 'Stages',
   dataIndex: 'stages',
@@ -81,26 +83,27 @@ const ComplaintsColumns = [{
   dataIndex: 'cms',
   key: 'cms'
 }];
-const ComplaintDetailLink = _ref => {
+function ComplaintDetailLink(_ref) {
   let {
     complaintNo
   } = _ref;
   const history = (0, _reactRouterDom.useHistory)();
   const handleDetailClick = () => {
-    history.push("/complaint-detail");
+    history.push('/complaint-detail');
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: _styles.keyValueDataViewStyles['.linkStyle'],
-    onClick: handleDetailClick
-  }, complaintNo);
+  const Component = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: #1890ff;\n    text-decoration: underline;\n    cursor: pointer;\n  "])));
+  return /*#__PURE__*/_react.default.createElement(Component, null, complaintNo);
+}
+ComplaintDetailLink.propTypes = {
+  complaintNo: (_propTypes.default.string || _propTypes.default.number).isRequired
 };
-const ServiceRequestTabs = () => {
+function ServiceRequestTabs() {
   const [ServiceTabdata] = (0, _react.useState)({
     tabs: [{
       label: 'Claim Verification',
       key: '4',
       disabled: false,
-      body: /*#__PURE__*/_react.default.createElement(_basicQuestions.default, null)
+      body: ''
     }, {
       label: 'IC Approval',
       key: '5',
@@ -113,21 +116,21 @@ const ServiceRequestTabs = () => {
       body: 'ClaimSettlement'
     }]
   });
-  return /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+  return /*#__PURE__*/_react.default.createElement(_TabsDesign.default, {
     tabPosition: "left",
     type: "card",
     defaultActiveKey: "4",
     data: ServiceTabdata
   });
-};
-const WorkflowSummary = () => {
-  return /*#__PURE__*/_react.default.createElement(_Table.default, {
+}
+function WorkflowSummary() {
+  return /*#__PURE__*/_react.default.createElement(_TableDesign.default, {
     columns: WorkflowColumns,
     dataSource: []
   });
-};
-const ComplaintsData = () => {
-  return /*#__PURE__*/_react.default.createElement(_Table.default, {
+}
+function ComplaintsData() {
+  return /*#__PURE__*/_react.default.createElement(_TableDesign.default, {
     columns: ComplaintsColumns,
     dataSource: [{
       complaintNo: '40336',
@@ -140,8 +143,8 @@ const ComplaintsData = () => {
       cms: ''
     }]
   });
-};
-const ServiceDetailsTabView = () => {
+}
+function ServiceDetailsTabView() {
   const [tabdata] = (0, _react.useState)({
     tabs: [{
       label: 'Service Request',
@@ -160,10 +163,8 @@ const ServiceDetailsTabView = () => {
       body: /*#__PURE__*/_react.default.createElement(ComplaintsData, null)
     }]
   });
-  return /*#__PURE__*/_react.default.createElement(_Tabs.default, {
-    style: _styles.keyValueDataViewStyles['.walletTab'],
+  const StyledTabs = (0, _styledComponents.default)(_TabsDesign.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   background: #fff;\n    padding: 4px; \n  "])));
+  return /*#__PURE__*/_react.default.createElement(StyledTabs, {
     data: tabdata
   });
-};
-var _default = ServiceDetailsTabView;
-exports.default = _default;
+}

package/build/components/{Wallet Service Details/viewMoreDetailsDrawer.js → wallet-service-details/ViewMoreDetailsDrawer.js}

@@ -7,49 +7,50 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
-var _Drawer = _interopRequireDefault(require("../Drawer"));
-var _Tabs = _interopRequireDefault(require("../Tabs"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _DrawerDesign = _interopRequireDefault(require("../DrawerDesign"));
+var _TabsDesign = _interopRequireDefault(require("../TabsDesign"));
 var _KeyValueDataView = _interopRequireDefault(require("../KeyValueDataView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const CustomerDetails = () => {
+function CustomerDetails() {
   return /*#__PURE__*/_react.default.createElement(_KeyValueDataView.default, {
     data: {
-      "Full Name": "Aditi",
-      "Email": "aditi.boobna@oneassist.in",
-      "Mobile": "9811297925",
-      "Alt Mobile": "NA",
-      "Customer ID": "User123",
-      "Date of Birth": "NA",
-      "Relation Since": "01-Jan-2010",
-      "Address": "NA",
-      "Landmark": "NA",
-      "City": "NA",
-      "Pincode": "NA",
-      "State": "NA"
+      'Full Name': 'Aditi',
+      Email: 'aditi.boobna@oneassist.in',
+      Mobile: '9811297925',
+      'Alt Mobile': 'NA',
+      'Customer ID': 'User123',
+      'Date of Birth': 'NA',
+      'Relation Since': '01-Jan-2010',
+      Address: 'NA',
+      Landmark: 'NA',
+      City: 'NA',
+      Pincode: 'NA',
+      State: 'NA'
     }
   });
-};
-const MembershipDetails = () => {
+}
+function MembershipDetails() {
   return /*#__PURE__*/_react.default.createElement(_KeyValueDataView.default, {
     data: {
-      "Membership Name": "Test Plan for ICICI and OA",
-      "Membership ID": "1043571310",
-      "Customer Name": "Aditi",
-      "Status": "Active",
-      "Start Date": "28-Aug-2023",
-      "End Date": "28-Aug-2024",
-      "BU Name": "PORTAL-ORGANIC",
-      "BP Name": "PORTAL",
-      "Plancode": "31798",
-      "Product Code": "UPI",
-      "Services Covered": "PAYMENT_FRAUD_TXN",
-      "Place T&C": "Download"
+      'Membership Name': 'Test Plan for ICICI and OA',
+      'Membership ID': '1043571310',
+      'Customer Name': 'Aditi',
+      Status: 'Active',
+      'Start Date': '28-Aug-2023',
+      'End Date': '28-Aug-2024',
+      'BU Name': 'PORTAL-ORGANIC',
+      'BP Name': 'PORTAL',
+      Plancode: '31798',
+      'Product Code': 'UPI',
+      'Services Covered': 'PAYMENT_FRAUD_TXN',
+      'Place T&C': 'Download'
     }
   });
-};
-const TabsView = () => {
+}
+function TabsView() {
   const [Tabdata] = (0, _react.useState)({
     tabs: [{
       label: 'Customer Details',
@@ -63,21 +64,32 @@ const TabsView = () => {
       body: /*#__PURE__*/_react.default.createElement(MembershipDetails, null)
     }]
   });
-  return /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+  return /*#__PURE__*/_react.default.createElement(_TabsDesign.default, {
     tabPosition: "top",
     type: "line",
     defaultActiveKey: "1",
     data: Tabdata
   });
-};
-const ViewDetailsDrawer = props => {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Drawer.default, {
-    visible: props.visible,
-    onClose: props.handleDrawerClose,
+}
+function ViewDetailsDrawer(_ref) {
+  let {
+    visible,
+    handleDrawerClose
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_DrawerDesign.default, {
+    visible: visible,
+    onClose: handleDrawerClose,
     title: "Customer & Membership Details",
     width: 400,
     data: /*#__PURE__*/_react.default.createElement(TabsView, null)
-  }));
+  });
+}
+ViewDetailsDrawer.propTypes = {
+  visible: _propTypes.default.bool,
+  handleDrawerClose: _propTypes.default.func.isRequired
+};
+ViewDetailsDrawer.defaultProps = {
+  visible: false
 };
 var _default = ViewDetailsDrawer;
 exports.default = _default;

package/build/components/{Wallet Service Details/walletServiceDetails.js → wallet-service-details/WalletServiceDetails.js}

@@ -7,53 +7,49 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
-var _serviceDetailsTabView = _interopRequireDefault(require("./serviceDetailsTabView"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _OACustomButton = _interopRequireDefault(require("../oa-button/OACustomButton"));
 var _KeyValueDataView = _interopRequireDefault(require("../KeyValueDataView"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _viewMoreDetailsDrawer = _interopRequireDefault(require("./viewMoreDetailsDrawer"));
-var _styles = require("../styles");
+var _ServiceDetailsTabView = _interopRequireDefault(require("./ServiceDetailsTabView"));
+var _ViewMoreDetailsDrawer = _interopRequireDefault(require("./ViewMoreDetailsDrawer"));
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const WalletServiceDetails = () => {
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function WalletServiceDetails() {
   const [visibleDrawer, setVisibleDrawer] = (0, _react.useState)(false);
   const showDrawer = () => {
     setVisibleDrawer(true);
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: _styles.keyValueDataViewStyles['.bgColor']
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: _styles.keyValueDataViewStyles['.headerSecStyles']
-  }, /*#__PURE__*/_react.default.createElement("h2", {
-    style: _styles.keyValueDataViewStyles['.h2Styles']
-  }, "SR#21446613-Pending"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  const WalletServiceContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 8px;\n    background: #EBEEF0;\n    \n    .header {\n        display: flex;\n        align-items: center;\n        padding: 24px;\n        background: #fff;\n        margin: 0 0 8px;\n\n        h2 {\n          font-size: 18px;\n          margin: 0 16px 0 0;          \n        }\n\n        button:last-child {\n          margin: 0 0 0 12px;\n        }\n    }\n\n    .detailsCard {\n      display: flex;\n      align-items: flex-start;\n      background: #fff;\n      padding: 24px 16px;\n      border: 1px solid #DCDCDC;\n      border-radius: 4px;\n      margin: 0 0 16px;\n    }\n  "])));
+  const ViewMoreHyperLink = _styledComponents.default.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: #0282F0;\n    display: block;\n    padding: 2px 0 0;\n    font-size: 12px;\n    letter-spacing: 0;\n    line-height: 20px;    \n  "])));
+  return /*#__PURE__*/_react.default.createElement(WalletServiceContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "SR#21446613-Pending"), /*#__PURE__*/_react.default.createElement(_OACustomButton.default, {
     className: "ant-btn-primary",
     type: "submit",
     text: "Close Claim"
-  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_OACustomButton.default, {
     text: "Check Next SR",
-    className: "secondary-btn",
-    style: {
-      marginLeft: '12px'
-    }
+    className: "secondary-btn"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    style: _styles.keyValueDataViewStyles['.detailCard']
+    className: "detailsCard"
   }, /*#__PURE__*/_react.default.createElement(_KeyValueDataView.default, {
     data: {
-      "Customer Name": "Lalit",
-      "Mobile": "9999999999",
-      "Email": "edfe@sdfd.com"
+      'Customer Name': 'Lalit',
+      Mobile: '9999999999',
+      Email: 'edfe@sdfd.com'
     },
     heading: "Customer Details",
-    viewMore: /*#__PURE__*/_react.default.createElement("a", {
-      onClick: () => showDrawer(),
-      style: _styles.keyValueDataViewStyles['.detailsDiv a']
+    viewMore: /*#__PURE__*/_react.default.createElement(ViewMoreHyperLink, {
+      onClick: () => showDrawer()
     }, "View More Details")
   }), /*#__PURE__*/_react.default.createElement(_KeyValueDataView.default, {
     data: {
-      "Customer Name": "Lalit",
-      "Mobile": "9999999999",
-      "Email": "edfe@sdfd.com"
+      'Customer Name': 'Lalit',
+      Mobile: '9999999999',
+      Email: 'edfe@sdfd.com'
     },
     heading: "Asset Loss Details"
   }), /*#__PURE__*/_react.default.createElement(_KeyValueDataView.default, {
@@ -62,10 +58,10 @@ const WalletServiceDetails = () => {
   }), /*#__PURE__*/_react.default.createElement(_KeyValueDataView.default, {
     heading: "Claim Stage",
     value: "Verification"
-  })), /*#__PURE__*/_react.default.createElement(_serviceDetailsTabView.default, null), /*#__PURE__*/_react.default.createElement(_viewMoreDetailsDrawer.default, {
+  })), /*#__PURE__*/_react.default.createElement(_ServiceDetailsTabView.default, null), /*#__PURE__*/_react.default.createElement(_ViewMoreDetailsDrawer.default, {
     handleDrawerClose: () => setVisibleDrawer(false),
     visible: visibleDrawer
   }));
-};
+}
 var _default = WalletServiceDetails;
 exports.default = _default;

package/build/components/wallet-service-details/styles/styles.css

@@ -0,0 +1,16 @@
+.walletContent .actionLInk {
+    margin: 8px 0 0;
+}
+
+/* .walletTab .walletContent li {
+    flex-direction: column;
+} */
+
+/* .walletContent li .rightAlign {
+    width: 100%;
+} */
+
+/* .walletTab .walletContent li,
+.radioAlign {
+    flex-direction: column;
+} */