oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-key-value/KeyValueWidget.js

@@ -0,0 +1,121 @@
+"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 _utils = require("../../utils");
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+/**
+ * Renders a view displaying key-value pairs in a structured format.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {Object} props.data - An object containing key-value pairs to be displayed.
+ * @param {Array<number>} [props.columnLayout] - An array defining the number of items per column.
+ * @param {Object} [props.info] - An object containing information about a key-value pair.
+ * @param {boolean} [props.fullWidth] - If true, uses 30%/70% width distribution, otherwise uses previous layout.
+ *
+ * @returns {JSX.Element} A component that renders key-value pairs in a grid layout.
+ */
+function KeyValueDataView(_ref) {
+  let {
+    data,
+    columnLayout,
+    info,
+    tagStatus,
+    customClassName,
+    fullWidth = false
+  } = _ref;
+  let actualColumnLayout = [];
+  if (columnLayout.length === 0) {
+    actualColumnLayout[0] = Object.keys(data).length;
+  } else {
+    actualColumnLayout = columnLayout;
+  }
+  let entryIdx = 0;
+  const colWidth = actualColumnLayout.length > 0 ? Math.floor(12 / actualColumnLayout.length) : 4;
+  const className = "col-sm-12 col-md-".concat(colWidth, " col-lg-").concat(colWidth, " gutter");
+  return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroups, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroup, {
+    className: "row"
+  }, actualColumnLayout.map((element, layoutIdx) => {
+    entryIdx += layoutIdx - 1 >= 0 ? actualColumnLayout[layoutIdx - 1] : 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: customClassName !== null && customClassName !== void 0 ? customClassName : className,
+      key: (0, _utils.getUUID)()
+    }, Object.entries(data).splice(entryIdx, element).map(_ref2 => {
+      let [key, value] = _ref2;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "valuestyle ".concat(fullWidth ? "full-width" : null),
+        key: (0, _utils.getUUID)()
+      }, (info === null || info === void 0 ? void 0 : info.infoKey) === key ? /*#__PURE__*/_react.default.createElement("b", {
+        className: "type-b2-400"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          color: "var(--color-primary-content)"
+        }
+      }, key, /*#__PURE__*/_react.default.createElement("em", {
+        style: {
+          marginLeft: "4px",
+          position: "relative",
+          top: "3px",
+          color: "var(--color-secondary-content)"
+        }
+      }, info === null || info === void 0 ? void 0 : info.infoData))) : /*#__PURE__*/_react.default.createElement("b", {
+        className: "type-b2-400"
+      }, key, ":"), /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        }
+      }, ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) && /*#__PURE__*/_react.default.createElement("span", {
+        className: "type-b2-400",
+        title: value
+      }, value) || _react.default.isValidElement && /*#__PURE__*/_react.default.createElement("span", null, value), (tagStatus === null || tagStatus === void 0 ? void 0 : tagStatus.tagKey) === key && (tagStatus === null || tagStatus === void 0 ? void 0 : tagStatus.tagData) && /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+        style: {
+          width: "100px"
+        },
+        type: tagStatus.tagData.type || "success",
+        label: tagStatus.tagData.label,
+        size: tagStatus.tagData.size || "small"
+      })));
+    }));
+  }))));
+}
+KeyValueDataView.propTypes = {
+  columnLayout: _propTypes.default.arrayOf(_propTypes.default.number),
+  data: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node])).isRequired,
+  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
+    })
+  }),
+  customClassName: _propTypes.default.string,
+  fullWidth: _propTypes.default.bool
+};
+KeyValueDataView.defaultProps = {
+  columnLayout: [],
+  info: {
+    infoData: null,
+    infoKey: ""
+  },
+  tagStatus: {
+    tagKey: "",
+    tagData: null
+  }
+};
+var _default = exports.default = KeyValueDataView;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSpan = exports.StyledBold = exports.KeyValueGroups = exports.KeyValueGroup = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
+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 KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    width: 180px;\n    word-wrap: break-word;\n    font-style: normal;\n    color: var(--color-secondary-content);  }\n\n  .valuestyle span + span{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    padding: 0 4px 0 0;\n  }\n\n  /* Add these CSS rules for full-width */\n    .valuestyle.full-width {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle.full-width b {\n    width: 30%;\n  }\n\n  .valuestyle.full-width span {\n    width: 100%;\n  }\n\n"])));
+const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n.container-fluid{\n    width: 100%;\n    padding: 0 16px;\n}\n.row {\n    display: flex;\n    flex-direction: column;\n}\n.row::after {\n    content: \"\";\n    clear: both;\n    display: table;\n}\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n@media (min-width: 768px) {\n    .row {\n    flex-direction: row;\n}\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n  .col-sm-9 {\n    width: 75%;\n  }\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n  .col-md-2 {\n    width: 16.66667%;\n  }\n  .col-md-3 {\n    width: 25%;\n  }\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n    .gutter{\n        padding: 0 24px 0 0;\n    }\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n  .col-lg-3 {\n    width: 25%;\n    float: left;\n  }\n  .col-lg-4 {\n    width: 33.33333%;\n    float: left;\n  }\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n  .col-lg-6 {\n    width: 50%;\n  }\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n  .col-lg-9 {\n    width: 75%;\n  }\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 1200px) {\n    .gutter{\n        padding: 0 32px 0 0;\n    }\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n\n \n}\n@media (max-width: 767px) {\n  .gutter{\n      padding: 0;\n  }\n}\n"])));
+const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content);\n  font-weight: 400;\n"])));
+const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  /* vertical-align: bottom; */\n  color: var(--color-secondary-content);\n  font-weight: 400;\n  word-break: break-word;\n"])));

package/build/widgets/oa-widget-kpi/KPICardWidget.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _AccessAlarmOutlined = _interopRequireDefault(require("@material-ui/icons/AccessAlarmOutlined"));
+const _excluded = ["type", "iconConfig", "tooltip"];
+/* eslint-disable */
+// ✅ no curly braces
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function KPICardWidget(_ref) {
+  let {
+    title,
+    subTitle,
+    subText,
+    titleSubConfig
+  } = _ref;
+  const renderTitleSubConfig = () => {
+    if (!titleSubConfig) return null;
+    const {
+        type,
+        iconConfig,
+        tooltip
+      } = titleSubConfig,
+      config = _objectWithoutProperties(titleSubConfig, _excluded);
+    if (type === "tooltip" && iconConfig && tooltip) {
+      return /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+        title: tooltip,
+        placement: config.placement || "top"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, iconConfig));
+    }
+
+    // Add more types here as needed
+    // if (type === "button" && iconConfig) {
+    //   return <CustomButton {...config} iconConfig={iconConfig} />;
+    // }
+
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement(_antd.Card, null, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "title-container"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "parimary-content"
+  }, title, " ", renderTitleSubConfig())), subTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-8 inclGst"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-h1-500",
+    color: "parimary-content"
+  }, subTitle), subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "secondary-content"
+  }, subText))));
+}
+KPICardWidget.propTypes = {
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  subText: _propTypes.default.string,
+  titleSubConfig: _propTypes.default.shape({
+    type: _propTypes.default.oneOf(["tooltip", "button"]),
+    // Add more types as needed
+    iconConfig: _propTypes.default.object,
+    // MaterialIcon props (same as SidebarWidget)
+    tooltip: _propTypes.default.string,
+    // For tooltip type
+    placement: _propTypes.default.string // Tooltip placement
+    // Add more config options as needed
+  })
+};
+KPICardWidget.defaultProps = {
+  title: "Total Active Orders",
+  subTitle: "",
+  subText: "",
+  titleSubConfig: null
+};
+var _default = exports.default = KPICardWidget;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // styles.js
+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 OaCardStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .ant-card-bordered {\n    border: none;\n  }\n  .padding-top-8 {\n    padding: 8px 0 0;\n  }\n\n  .inclGst {\n    display: flex;\n    flex-direction: row;\n    gap: 6px;\n    align-items: anchor-center;\n  }\n\n  .title-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  .title-container span{\n    display: flex; align-items: center;\n    gap: 4px;\n  }\n\n  .title-container .ant-typography {\n    flex: 1;\n  }\n"])));
+var _default = exports.default = OaCardStyle;

package/build/widgets/oa-widget-location-access/LocationAccessWidget.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _LocationOff = _interopRequireDefault(require("@material-ui/icons/LocationOff"));
+var _LocationOnOutlined = _interopRequireDefault(require("@material-ui/icons/LocationOnOutlined"));
+var _ArrowForwardIosOutlined = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosOutlined"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const buttonConfig = {
+  label: 'Change',
+  type: 'text-only'
+};
+const iconConfigInfo = {
+  icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: _LocationOnOutlined.default
+  }),
+  position: 'left'
+};
+/**
+ * LocationAccessWidget renders a component that displays a material icon, a title, a description, and an optional button.
+ * It is used to display the location access status of a user.
+ *
+ * @param {React.ReactElement} materialIcon - The material icon to be displayed.
+ * @param {string} buttonLabel - The label of the button.
+ * @param {string} locationAccessTitle - The title of the location access component.
+ * @param {string} locationAccessDescription - The description of the location access component.
+ * @param {boolean} showOrHideTypography - A boolean that determines whether to show or hide the typography.
+ * @param {function} onClick - The callback function when the button is clicked.
+ *
+ * @returns {React.ReactElement} - A React element representing the LocationAccessWidget.
+ */
+function LocationAccessWidget(_ref) {
+  let {
+    materialIcon,
+    buttonLabel,
+    locationAccessTitle,
+    locationAccessDescription,
+    showOrHideTypography,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.LocationAccessStyle, null, materialIcon && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: materialIcon,
+    size: 72
+  }), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    color: "primary-content"
+  }, locationAccessTitle)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400",
+    color: "secondary-content"
+  }, locationAccessDescription)), showOrHideTypography && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("small", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400",
+    color: "primary-content"
+  }), ' ', "or")))), buttonLabel && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    size: "large",
+    label: buttonLabel,
+    onClick: onClick
+  }));
+}
+LocationAccessWidget.propTypes = {
+  materialIcon: _propTypes.default.object,
+  buttonLabel: _propTypes.default.string,
+  locationAccessTitle: _propTypes.default.string,
+  locationAccessDescription: _propTypes.default.string,
+  showOrHideTypography: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+};
+LocationAccessWidget.defaultProps = {
+  materialIcon: null,
+  // Provide a default value, e.g., null
+  buttonLabel: '',
+  // Provide a default value, e.g., an empty string
+  locationAccessTitle: '',
+  // Provide a default value, e.g., an empty string
+  locationAccessDescription: '',
+  // Provide a default value, e.g., an empty string
+  showOrHideTypography: false,
+  // Provide a default value, e.g., false
+  onClick: () => {}
+};
+var _default = exports.default = LocationAccessWidget;

package/build/widgets/oa-widget-location-access/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LocationAccessStyle = 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 LocationAccessStyle = exports.LocationAccessStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\npadding: 32px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    border: 1px solid var(--color-divider);\nul{\n    margin: 16px 0 32px;\n    list-style: none;\n    padding: 0;\n    width: 100%;\n    text-align: center;\n}\nli{\n    padding: 0 0 16px;\n}\nli:last-child{\n    padding: 0;\n}\n p{\n    display: block;\n    padding: 32px 0 0;\n    position: relative;\n }\n hr{\n    background: var(--color-divider);\n    height: 1px;\n    width: 100%;\n    border: none;\n    margin: 0;\n    position: absolute;\n    bottom: 9px;\n }\n button{\n    width: 100%;\n }\n p small{\n    background: #fff;\n    display: inline-block;\n    z-index: 1;\n    padding: 0 8px;\n    position: relative;\n }\n section{\n    width: 100%;\n }\n section h3{\n    text-align: center;\n    margin: 0;\n }\n section iframe{\n    width: 100%;\n    height: 240px;\n }\n section iframe + section{\n    justify-content: space-between;\n }\n section aside{\n    border: 1px solid var(--color-divider);\n    margin: 16px 0 32px;\n    border-radius: 4px;\n }\n section button{\n    width: auto;\n }\n"])));

package/build/widgets/oa-widget-map-base-location/AddressDetails.js

@@ -0,0 +1,84 @@
+"use strict";
+
+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");
+var _react = _interopRequireDefault(require("react"));
+var _EditOutlined = _interopRequireDefault(require("@material-ui/icons/EditOutlined"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _AddressForm = _interopRequireDefault(require("./AddressForm"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+/**
+ * Address Details component.
+ * This component renders the address details and edit button.
+ * @param {Object} props Component props.
+ * @param {Object} props.geolocationData Geolocation data.
+ * @param {boolean} props.pinCodeServisible Flag to indicate
+ * if the pin code is serviceable.
+ * @param {Function} props.editLocationHandler Function to handle edit location.
+ * @param {Function} props.onFinish Function to call on address form submission.
+ * @returns {React.ReactNode} Address Details component.
+ */
+function AddressDetails(_ref) {
+  var _geolocationData$addr, _geolocationData$addr2;
+  let {
+    geolocationData,
+    pinCodeServisible,
+    editLocationHandler,
+    onFinish,
+    showAddressType,
+    isSaveButtonDisabled
+  } = _ref;
+  const showPinCode = () => {
+    var _addressLine2$mainAdd, _addressLine2$seconda;
+    const {
+      addressLine2,
+      pincode
+    } = geolocationData;
+    const isPincodeIncluded = (addressLine2 === null || addressLine2 === void 0 || (_addressLine2$mainAdd = addressLine2.mainAddress) === null || _addressLine2$mainAdd === void 0 ? void 0 : _addressLine2$mainAdd.includes(pincode)) || (addressLine2 === null || addressLine2 === void 0 || (_addressLine2$seconda = addressLine2.secondaryAddress) === null || _addressLine2$seconda === void 0 ? void 0 : _addressLine2$seconda.includes(pincode));
+    if (isPincodeIncluded) return "";
+    if (pincode) return ", ".concat(pincode);
+    return "";
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "addresBoxDiv"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "addressEdit"
+  }, pinCodeServisible && /*#__PURE__*/_react.default.createElement("div", {
+    className: "addressDetails"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-400",
+    color: "primary-content"
+  }, (_geolocationData$addr = geolocationData.addressLine2) === null || _geolocationData$addr === void 0 ? void 0 : _geolocationData$addr.mainAddress), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b3-400",
+    color: "secondary-content"
+  }, (_geolocationData$addr2 = geolocationData.addressLine2) === null || _geolocationData$addr2 === void 0 ? void 0 : _geolocationData$addr2.secondaryAddress, showPinCode()))), pinCodeServisible && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _EditOutlined.default
+      }),
+      position: "left"
+    },
+    size: "small",
+    label: "Edit location",
+    type: "text-only",
+    onClick: editLocationHandler
+  })), pinCodeServisible ? /*#__PURE__*/_react.default.createElement(_AddressForm.default, {
+    geolocationData: geolocationData,
+    onFinish: onFinish,
+    showAddressType: showAddressType,
+    isSaveButtonDisabled: isSaveButtonDisabled
+  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "Pincode according to your pin on map is Non-serviceable, please move the pin to serviceable pincode."));
+}
+var _default = exports.default = AddressDetails;

package/build/widgets/oa-widget-map-base-location/AddressForm.js

@@ -0,0 +1,106 @@
+"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 _antd = require("antd");
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+// Address Form Component
+/**
+ * @description
+ * Address Form component.
+ * Component props:
+ *  - `geolocationData`: Geolocation data.
+ *  - `onFinish`: Function to call on address form submission.
+ *
+ * @param {Object} props Component props.
+ * @returns {React.ReactNode} Address Form component.
+ */
+function AddressForm(props) {
+  const [form] = _antd.Form.useForm();
+  const {
+    geolocationData,
+    onFinish,
+    showAddressType,
+    isSaveButtonDisabled = false
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    initialValues: {
+      houseNo: (geolocationData === null || geolocationData === void 0 ? void 0 : geolocationData.addressLine1) || undefined,
+      landmark: (geolocationData === null || geolocationData === void 0 ? void 0 : geolocationData.landmark) || undefined
+    },
+    name: "getCompleteAddress",
+    onFinish: onFinish
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, "House no./Flat/Floor", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "houseNo",
+    rules: [{
+      required: true,
+      message: "Please input your House no. / Flat / Floor!"
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    placeholder: "Type here",
+    autoFocus: true,
+    maxLength: 250
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, "Nearby Landmark"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "landmark"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    placeholder: "Type here",
+    maxLength: 100
+  })))), showAddressType && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, "Address Type", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "addressType",
+    rules: [{
+      required: true,
+      message: "Please select Address Type"
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, null, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    value: "RESIDENTIAL",
+    label: "Residential"
+  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    value: "COMMERCIAL",
+    label: "Commercial"
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttonBottom margin-top-24"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    disabled: isSaveButtonDisabled || false,
+    type: "primary",
+    size: "large",
+    label: "Save and Proceed",
+    htmlType: "submit"
+  }))));
+}
+var _default = exports.default = AddressForm;

package/build/widgets/oa-widget-map-base-location/CustomModalComponent.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LocationOff = _interopRequireDefault(require("@material-ui/icons/LocationOff"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+// Custom Modal Component
+/**
+ * CustomModalComponent is a modal that informs the user when their location cannot be detected.
+ * 
+ * @param {Object} props - The component props.
+ * @param {boolean} props.open - Determines if the modal is open.
+ * @param {Function} props.setOpenLocationNotDetectedModal - Function to toggle the modal's open state.
+ * 
+ * @returns {JSX.Element} A modal component displaying a message about location detection issues.
+ */
+function CustomModalComponent(_ref) {
+  let {
+    open,
+    setOpenLocationNotDetectedModal
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    className: "noLoacationMadalCustom",
+    open: open,
+    buttonConfig: [{
+      callback: () => setOpenLocationNotDetectedModal(false),
+      label: 'Okay, Got it',
+      width: '100%'
+    }],
+    onCancel: () => setOpenLocationNotDetectedModal(false),
+    width: "388px"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "noLocationSection"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 72,
+    icon: _LocationOff.default
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, "Location not detected")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b1-400"
+  }, "We are having trouble finding your location. Please allow location access from your browser settings."))));
+}
+var _default = exports.default = CustomModalComponent;