oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-multiple-collapse-with-slots/MultipleCollapseWithSlots.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const {
+  Panel
+} = _antd.Collapse;
+
+/**
+ * @function MultipleCollapseWithSlots
+ * @description A component to display multiple collapsible items
+ * each with a header that contains a primary and secondary heading
+ * and a collapsible content area which contains a form with a radio group
+ * @prop {array} collapseData - An array of objects containing the data
+ * for each collapsible item
+ * @prop {string} collapseData.primaryHeading.text - The text for the primary heading
+ * @prop {string} collapseData.primaryHeading.subText - The subText for the primary heading
+ * @prop {string} collapseData.secondaryHeading - The text for the secondary heading
+ * @prop {array} collapseData.slots - An array of objects containing the data
+ * for the radio group
+ * @prop {string} collapseData.slots.slotTime - The value for the radio button
+ * @returns {ReactElement} A react element of a multiple collapsible items
+ */
+function MultipleCollapseWithSlots(_ref) {
+  let {
+    collapseData
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    accordion: true
+  }, collapseData === null || collapseData === void 0 ? void 0 : collapseData.map(data => {
+    var _data$slots, _data$slots2, _data$primaryHeading, _data$primaryHeading2, _data$slots3;
+    return /*#__PURE__*/_react.default.createElement(Panel, {
+      collapsible: (data === null || data === void 0 || (_data$slots = data.slots) === null || _data$slots === void 0 ? void 0 : _data$slots.length) === 0 ? 'disabled' : 'header',
+      header: /*#__PURE__*/_react.default.createElement("div", {
+        className: (data === null || data === void 0 || (_data$slots2 = data.slots) === null || _data$slots2 === void 0 ? void 0 : _data$slots2.length) === 0 ? 'noSlot colHeading' : 'colHeading'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "leftSec"
+      }, /*#__PURE__*/_react.default.createElement("h3", null, data === null || data === void 0 || (_data$primaryHeading = data.primaryHeading) === null || _data$primaryHeading === void 0 ? void 0 : _data$primaryHeading.text), /*#__PURE__*/_react.default.createElement("span", null, data === null || data === void 0 || (_data$primaryHeading2 = data.primaryHeading) === null || _data$primaryHeading2 === void 0 ? void 0 : _data$primaryHeading2.subText)), /*#__PURE__*/_react.default.createElement("em", null, data === null || data === void 0 ? void 0 : data.secondaryHeading)),
+      key: data === null || data === void 0 ? void 0 : data.key
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row technicianVisitSlot"
+    }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+      theme: {
+        components: {
+          Radio: {
+            colorPrimaryBorder: 'var(--color-primary)',
+            buttonSolidCheckedActiveBg: 'var(--color-primary)',
+            borderRadius: 4,
+            buttonCheckedBg: 'var(--color-primary)',
+            colorText: 'var(--color-primary-content)',
+            controlHeight: 36,
+            colorPrimaryHover: '#fff'
+          }
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row"
+    }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      name: "slotselected",
+      label: "",
+      rules: [{
+        required: true,
+        message: 'Please select a preferred slot'
+      }],
+      validateStatus: null
+    }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, null, data === null || data === void 0 || (_data$slots3 = data.slots) === null || _data$slots3 === void 0 ? void 0 : _data$slots3.map((slot, index) => /*#__PURE__*/_react.default.createElement(_antd.Radio.Button, {
+      key: slot.slotTime,
+      value: slot.slotTime
+    }, (0, _dayjs.default)(slot.slotTime, 'HH:mm').format('hh:mm A')))))))));
+  })));
+}
+var _default = exports.default = MultipleCollapseWithSlots;
+MultipleCollapseWithSlots.propTypes = {
+  collapseData: {}
+};
+MultipleCollapseWithSlots.defaultProps = {
+  collapseData: {}
+};

package/build/widgets/oa-widget-multiple-collapse-with-slots/checkactive.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4639_3784" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4639_3784)">
+<path d="M7.95802 12.4554L14.9309 5.48263C15.1208 5.29271 15.3461 5.19775 15.6068 5.19775C15.8675 5.19775 16.0928 5.29271 16.2828 5.48263C16.4727 5.67255 16.5676 5.89786 16.5676 6.15859C16.5676 6.4193 16.4727 6.64461 16.2828 6.83452L8.62604 14.4912C8.43613 14.6811 8.21345 14.7761 7.95802 14.7761C7.70259 14.7761 7.47992 14.6811 7.29 14.4912L3.71663 10.9179C3.52671 10.7279 3.43439 10.5026 3.43967 10.2419C3.44496 9.9812 3.54256 9.75588 3.73248 9.56596C3.9224 9.37605 4.14772 9.28109 4.40844 9.28109C4.66915 9.28109 4.89446 9.37605 5.08438 9.56596L7.95802 12.4554Z" fill="white"/>
+</g>
+</svg>

package/build/widgets/oa-widget-multiple-collapse-with-slots/checkhover.svg

@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4715_11496" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="20">
+<rect x="0.5" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4715_11496)">
+<path d="M8.45827 12.4559L15.4311 5.48312C15.621 5.2932 15.8463 5.19824 16.107 5.19824C16.3678 5.19824 16.5931 5.2932 16.783 5.48312C16.9729 5.67303 17.0679 5.89835 17.0679 6.15908C17.0679 6.41978 16.9729 6.6451 16.783 6.83501L9.12629 14.4917C8.93637 14.6816 8.7137 14.7766 8.45827 14.7766C8.20284 14.7766 7.98016 14.6816 7.79024 14.4917L4.21687 10.9183C4.02695 10.7284 3.93463 10.5031 3.93991 10.2424C3.9452 9.98169 4.04281 9.75637 4.23272 9.56645C4.42264 9.37653 4.64796 9.28158 4.90868 9.28158C5.16939 9.28158 5.3947 9.37653 5.58462 9.56645L8.45827 12.4559Z" fill="#014FC5"/>
+</g>
+</svg>

package/build/widgets/oa-widget-multiple-collapse-with-slots/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmallText = exports.DropdownStyle = exports.CollapseStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _checkactive = _interopRequireDefault(require("./checkactive.svg"));
+var _checkhover = _interopRequireDefault(require("./checkhover.svg"));
+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 SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #E21616;\n  margin: 0 0 0 4px;\n"])));
+const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse {\n  border-radius: 12px;\n  margin: 20px;\n  background:", ";\n  border:solid 1px ", "; border-bottom: none;\n}\n.ant-collapse-header{padding: 16px 16px 16px 22px;}\n\n.colHeading{\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.colHeading .leftSec{ display: flex;\n  flex-direction: row;\n  align-items: center;}\n\n.colHeading .leftSec h3{\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; margin:0; color:", ";\n}\n.colHeading .leftSec span, .colHeading em{\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 22px; margin:0 0 0 4px; color:", ";\n}\n.ant-collapse-expand-icon{order:2;height: 24px !important;\n  padding-inline-end: 0 !important;\n  margin: 0 0 0 12px;\n  width: 24px;\n  justify-content: center;\n  color: ", "\n}\n\n.ant-collapse-header-text{order:1;}\n.ant-collapse-expand-icon svg {transform: rotate(90deg);}\n.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow {font-size: 14px;}\n.ant-collapse-item-active .ant-collapse-header .ant-collapse-arrow svg{transform: rotate(-90deg) !important;}\n.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {border-radius: 0 0 12px 12px;}\n\n\n\n.noSlot .leftSec h3, .noSlot .leftSec span {color: rgba(33, 33, 33, 0.4)}\n.noSlot em {color: ", "}\n\n.ant-radio-group{\n  display: flex; flex-flow: wrap;\n  gap: 16px;\n}\n\n.ant-radio-button-wrapper:not(:first-child)::before, .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {background-color: transparent;}\n\n\n .ant-radio-group-outline label:hover {\n  background:", ";\n  border: 1px solid ", ";\n  color: ", ";\n}\n\n.ant-radio-group-outline label:hover span+span::before{ background-image: url(", ");}\n\n\n.ant-radio-button-wrapper-checked span + span::before {\n  content: '';\n  display: inline-block;\n  width: 20px; \n  height: 20px; \n  background-image: url(", "); \n  background-size: contain;\n  margin-right: 4px; \n  vertical-align: middle;\n}\n\n.ant-form-item {margin-bottom:0;}\n\n.ant-radio-button-wrapper {\n  position: relative;\n  display: inline-block;\n  height: 36px;\n  margin: 0;\n  padding-inline: 15px;\n  padding-block: 0;\n  color: var(--color-primary-content);\n  font-size: 14px;\n  line-height: 34px;\n  background: #ffffff;\n  border: 1px solid #d9d9d9;\n  cursor: pointer;\n  transition: color 0.2s,background 0.2s,box-shadow 0.2s;\n}\n\n\n\n.ant-form label {\n  font-weight: 500;\n  line-height: 20px;\n}\n.ant-radio-group-outline label {\n  width: 156px;\n  border-radius: 4px;\n  text-align: center;\n}\n\n\n.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {\n  color: #fff;\n}\n\n.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {\n  z-index: 1;\n  color: ", ";\n  background:", ";\n  border-color: ", ";\n\n.ant-radio-button-wrapper:not(:first-child)::before {\n  width: 0;\n}\n\n\n.ant-radio-group-outline label {\n  font-weight: 500;\n  line-height: 20px;\n}\n\n\n\n\n\n"])), _ColorVariablesMap.default['--color-primary-background'], _ColorVariablesMap.default['--color-divider'], _ColorVariablesMap.default['--color-primary-content'], _ColorVariablesMap.default['--color-secondary-content'], _ColorVariablesMap.default['--color-primary'], _ColorVariablesMap.default['--color-negative'], _ColorVariablesMap.default['--color-background-info'], _ColorVariablesMap.default['--color-primary'], _ColorVariablesMap.default['--color-primary'], _checkhover.default, _checkactive.default, _ColorVariablesMap.default['--color-primary-background'], _ColorVariablesMap.default['--color-primary'], _ColorVariablesMap.default['--color-primary']);
+const DropdownStyle = exports.DropdownStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\n.ant-dropdown-trigger{ width:24px; height:24px; display:flex;     justify-content: center;\n  align-items: center; font-size: 22px;\n  cursor: pointer; color:#717171;}\n\n.ant-dropdown .ant-dropdown-menu{\n  padding:50px;\n  }\n"])));

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -0,0 +1,135 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+var _styles = require("./styles");
+const _excluded = ["data-test", "disabled", "records", "tableBorder", "onBlur", "extraColumnData"];
+/* eslint-disable */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _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 NotesWidget(_ref) {
+  let {
+      "data-test": dataTest,
+      disabled,
+      records,
+      tableBorder,
+      onBlur,
+      extraColumnData
+    } = _ref,
+    antDesignTableProps = _objectWithoutProperties(_ref, _excluded);
+  const [noteInputValue, setNoteInputValue] = (0, _react.useState)("");
+
+  /**
+   * Call to callback from props.
+   * Clearing the notes input, on blur.
+   */
+  const handleBlur = event => {
+    // Call to callback from props.
+    onBlur(event);
+
+    // Clearing the notes input, on blur.
+    setNoteInputValue("");
+  };
+
+  // Used a local variable to avoid mutating the passed prop.
+  const mutatedRecords = [...records];
+  if (!disabled) {
+    mutatedRecords === null || mutatedRecords === void 0 || mutatedRecords.unshift({
+      key: "0"
+    });
+  }
+  const extraColumns = Array.isArray(extraColumnData) && extraColumnData.map(column => ({
+    title: column.title,
+    dataIndex: column.dataIndex,
+    key: column.key,
+    width: "20%"
+  }));
+  const columns = [
+  // {
+  //   title: 'SERIAL NO.',
+  //   dataIndex: 'sr',
+  //   key: 'sr',
+  //   width: '20%',
+  // },
+  {
+    title: "NOTES",
+    width: "40%",
+    dataIndex: "notes",
+    render: (text, obj, index) => {
+      if (!disabled && index === 0) {
+        return /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+          "data-test": dataTest,
+          size: "small",
+          value: noteInputValue,
+          onChange: event => setNoteInputValue(event.target.value),
+          onBlur: handleBlur,
+          placeholder: "Type here ..",
+          maxLength: 500
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          overflow: "auto"
+        }
+      }, text);
+    },
+    key: "notes"
+  }, {
+    title: "DATE AND TIME",
+    dataIndex: "dateTime",
+    key: "dateTime"
+  }, {
+    title: "USER",
+    dataIndex: "user",
+    key: "user",
+    width: "20%"
+  }, ...(extraColumns || [])];
+  const tableStyle = {
+    borderTop: "1px solid var(--color-divider)",
+    borderRight: tableBorder ? "1px solid var(--color-divider)" : "0",
+    borderBottom: tableBorder ? "1px solid var(--color-divider)" : "0",
+    borderLeft: tableBorder ? "1px solid var(--color-divider)" : "0",
+    borderRadius: tableBorder ? "4px" : "0"
+    // visibility: (!(records.length > 0) && disabled) ? 'hidden' : undefined,
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.NotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+    style: tableStyle,
+    columns: columns,
+    dataSource: mutatedRecords,
+    pagination: false,
+    size: "small",
+    emptyText: "No Notes Available",
+    tableBorder: tableBorder
+  }, antDesignTableProps)));
+}
+NotesWidget.propTypes = {
+  "data-test": _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  records: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))),
+  onBlur: _propTypes.default.func,
+  tableBorder: _propTypes.default.bool,
+  extraColumnData: _propTypes.default.array
+};
+NotesWidget.defaultProps = {
+  "data-test": null,
+  disabled: false,
+  onBlur: () => {},
+  records: [],
+  tableBorder: false,
+  extraColumnData: []
+};
+var _default = exports.default = NotesWidget;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NotesTable = exports.NoNotesMessage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+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 NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  input {\n    height: 30px;\n  }\n"])));
+const NotesTable = exports.NotesTable = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  table {\n    width: auto !important;\n  }\n"])));

package/build/widgets/oa-widget-pincode-base-location/PincodeBaseLocation.js

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _GpsFixedRounded = _interopRequireDefault(require("@material-ui/icons/GpsFixedRounded"));
+var _LocationOff = _interopRequireDefault(require("@material-ui/icons/LocationOff"));
+var _PlaceOutlined = _interopRequireDefault(require("@material-ui/icons/PlaceOutlined"));
+var _icons = require("@ant-design/icons");
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+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"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _oneassistLogo = _interopRequireDefault(require("../../images/oneassist-logo.png"));
+var _ajaxLoader = _interopRequireDefault(require("../../images/ajax-loader.gif"));
+var _search_ic = _interopRequireDefault(require("../../images/search_ic.svg"));
+var _search_not_found = _interopRequireDefault(require("../../images/search_not_found.svg"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+/**
+ * Renders a component for handling pincode-based location selection.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.title - The title displayed at the top of the component.
+ * @param {string} props.locationLabel - The label for the location input field.
+ * @param {string} props.location - The current location displayed.
+ * @param {string} props.pincode - The pincode entered by the user.
+ * @param {string} props.error - Error message to display when there's an error.
+ * @param {boolean} props.loader - Flag to indicate whether to show a loading indicator.
+ * @param {Object} props.placeSearchInput - The input field object for place search.
+ * @param {boolean} props.miniLoader - Flag to indicate whether to show a mini loading indicator.
+ * @param {Array} props.suggestedLocations - Array of suggested locations based on the search.
+ * @param {string} props.suggestedLocationsType - Type of the suggested locations.
+ * @param {boolean} props.noResultFlag - Flag indicating if no results were found.
+ * @param {boolean} props.openLocationNotDetectedModal - Flag to open/close the location not detected modal.
+ * @param {Function} props.handlePincodeChange - Function to handle changes to the pincode input field.
+ * @param {Function} props.handleSearchLocation - Function to handle search input changes.
+ * @param {Function} props.handleClickSuggestedLocation - Function to handle clicking on a suggested location.
+ * @param {Function} props.emptySearchInput - Function to clear the search input field.
+ * @param {Function} props.getCurrentLocation - Function to retrieve the user's current location.
+ * @param {Function} props.setOpenLocationNotDetectedModal - Function to control the 'location not detected' modal visibility.
+ * @param {boolean} props.showHeader - Flag to determine whether to show the header section.
+ */
+function PincodeBaseLocation(_ref) {
+  var _pincode$toString;
+  let {
+    title,
+    locationLabel,
+    location,
+    pincode,
+    error,
+    loader,
+    placeSearchInput,
+    miniLoader,
+    suggestedLocations,
+    suggestedLocationsType,
+    noResultFlag,
+    openLocationNotDetectedModal,
+    handlePincodeChange,
+    handleSearchLocation,
+    handleClickSuggestedLocation,
+    emptySearchInput,
+    getCurrentLocation,
+    setOpenLocationNotDetectedModal,
+    showHeader
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.PincodeStyles, null, showHeader && /*#__PURE__*/_react.default.createElement("div", {
+    className: "oa-pincodeLocation"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "topHeader"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _oneassistLogo.default,
+    alt: "Logo"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "mapComponent"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "locationSecBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "locationInner"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "locFormContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-24 margin-bottom-4 locationlabel"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, locationLabel), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "placeholder-text",
+    className: "type-b2-400"
+  }, location)), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    value: pincode,
+    placeholder: "Enter Pincode",
+    "data-test": "inputBeginPincode",
+    autoComplete: "off",
+    type: "text",
+    maxLength: "6",
+    autoFocus: true,
+    onChange: e => handlePincodeChange(e.target.value)
+  }), error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "errorMsg jsError jsServerError"
+  }, error), loader && /*#__PURE__*/_react.default.createElement("div", {
+    className: "loadingGif"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pincodeChecker"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _ajaxLoader.default,
+    alt: "wait"
+  })), /*#__PURE__*/_react.default.createElement("p", {
+    className: "load-check type-b2-400"
+  }, "Checking service availability")), (pincode === null || pincode === void 0 || (_pincode$toString = pincode.toString()) === null || _pincode$toString === void 0 ? void 0 : _pincode$toString.length) === 6 && location !== 'Location' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "searchLocationForm minHeightAuto"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-24 margin-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, "Search Locality/Society/Area")), /*#__PURE__*/_react.default.createElement("section", null, !miniLoader && (placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field) && /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
+    onClick: emptySearchInput,
+    style: {
+      fontSize: '24px'
+    },
+    className: "crossIcon"
+  }), miniLoader && (placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field) && /*#__PURE__*/_react.default.createElement("img", {
+    src: _ajaxLoader.default,
+    className: "searchLoader",
+    alt: "Loader"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: _search_ic.default,
+    className: "searchIcon",
+    alt: "Search Icon"
+  }), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    id: "searchLocationBar",
+    type: "text",
+    value: placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field,
+    autoComplete: "off",
+    placeholder: "Type here...",
+    autoFocus: true,
+    onChange: handleSearchLocation
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _GpsFixedRounded.default
+      }),
+      position: 'left'
+    },
+    size: "medium",
+    label: "Use Your Current Location",
+    type: "text-only",
+    onClick: getCurrentLocation
+  }))), (suggestedLocations === null || suggestedLocations === void 0 ? void 0 : suggestedLocations.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "listoflocation"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "primary-content"
+  }, suggestedLocationsType)), /*#__PURE__*/_react.default.createElement("ul", null, suggestedLocations === null || suggestedLocations === void 0 ? void 0 : suggestedLocations.map((item, index) => {
+    var _item$addressLine, _item$addressLine2;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: index,
+      onClick: () => handleClickSuggestedLocation(item)
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: "primary",
+      size: 24,
+      icon: _PlaceOutlined.default
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "addressDetails"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-t2-700",
+      color: "primary-content"
+    }, (_item$addressLine = item.addressLine2) === null || _item$addressLine === void 0 ? void 0 : _item$addressLine.mainAddress), /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-8"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b3-400",
+      color: "secondary-content"
+    }, (_item$addressLine2 = item.addressLine2) === null || _item$addressLine2 === void 0 ? void 0 : _item$addressLine2.secondaryAddress))));
+  }))), noResultFlag && !(suggestedLocations !== null && suggestedLocations !== void 0 && suggestedLocations.length) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "noResultFound",
+    style: {
+      minHeight: '0px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _search_not_found.default,
+    alt: "Search Not Found Icon"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "padding-bottom-16 padding-top-16"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, "No results found for \u201C", placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field, "\u201D")), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b2-400"
+  }, "Check for spelling errors or search for a different keyword"))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    className: "noLoacationMadalCustom",
+    open: openLocationNotDetectedModal,
+    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."))))))));
+}
+
+// Default props
+PincodeBaseLocation.defaultProps = {
+  title: 'Where do you want to get service',
+  locationLabel: 'Pincode',
+  location: 'Location',
+  pincode: '',
+  error: '',
+  loader: false,
+  showHeader: true,
+  placeSearchInput: {
+    field: ''
+  },
+  miniLoader: false,
+  suggestedLocations: [],
+  suggestedLocationsType: '',
+  noResultFlag: false,
+  openLocationNotDetectedModal: false,
+  handlePincodeChange: () => console.log('Pincode changed'),
+  handleSearchLocation: () => console.log('Search location'),
+  handleClickSuggestedLocation: () => console.log('Location clicked'),
+  emptySearchInput: () => console.log('Search input cleared'),
+  getCurrentLocation: () => console.log('Getting current location'),
+  setOpenLocationNotDetectedModal: () => console.log('Modal state changed')
+};
+
+// Prop types
+PincodeBaseLocation.propTypes = {
+  title: _propTypes.default.string,
+  showHeader: _propTypes.default.bool,
+  locationLabel: _propTypes.default.string,
+  location: _propTypes.default.string,
+  pincode: _propTypes.default.string.isRequired,
+  error: _propTypes.default.string,
+  loader: _propTypes.default.bool,
+  placeSearchInput: _propTypes.default.object,
+  miniLoader: _propTypes.default.bool,
+  suggestedLocations: _propTypes.default.array,
+  suggestedLocationsType: _propTypes.default.string,
+  noResultFlag: _propTypes.default.bool,
+  openLocationNotDetectedModal: _propTypes.default.bool,
+  handlePincodeChange: _propTypes.default.func.isRequired,
+  handleSearchLocation: _propTypes.default.func.isRequired,
+  handleClickSuggestedLocation: _propTypes.default.func.isRequired,
+  emptySearchInput: _propTypes.default.func.isRequired,
+  getCurrentLocation: _propTypes.default.func.isRequired,
+  setOpenLocationNotDetectedModal: _propTypes.default.func.isRequired
+};
+var _default = exports.default = PincodeBaseLocation;

package/build/widgets/oa-widget-pincode-base-location/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PincodeStyles = 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 PincodeStyles = exports.PincodeStyles = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.loadingGif p{\npadding: 8px 0 0;\n}\n\n.errorMsg{\npadding: 4px 0 0;}\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\");\n\n.ant-input-outlined {\n  background: #ffffff;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #959595;\n  padding: 13px 16px;\n  border-radius: 4px;\n}\n.ant-input-outlined:focus,\n:where(.css-dev-only-do-not-override-vqv1ns).ant-input-outlined:focus-within {\n  border-color: #014fc5;\n  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  outline: 0;\n  background-color: #ffffff;\n}\n\n.map-current-location {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  width: 40px;\n  height: 40px;\n  top: 85px !important;\n  right: 10px !important;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n  border-radius: 2px;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.map-current-location:hover {\n  color: black;\n}\n.mapHeight {\n  height: 570px;\n  min-width: 360px;\n  border-radius: 12px;\n  position: relative;\n  overflow: hidden;\n}\n\n.addresBoxDiv {\n  display: flex;\n  flex-direction: column;\n  padding: 46px 24px 34px;\n  width: calc(100% - 360px);\n  position: relative;\n}\n\n.addressEdit {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: row;\n}\n.addressDetails {\n  max-width: 216px;\n  display: flex;\n  flex-direction: column;\n}\n\n.buttonBottom {\n  width: 100%;\n  position: absolute;\n  bottom: 24px;\n  right: 0;\n  left: 0;\n  padding: 0 24px;\n}\n.buttonBottom .ant-form-item{\nmargin: 0;\n}\n.buttonBottom button {\n  width: 100%;\n}\n\n.spacing-32 h3 {\n  text-align: center;\n}\n.padding-top-32 button {\n  width: 100%;\n}\n.borderArea {\n  border: 1px solid var(--color-divider);\n}\n.locWithForm button {\n  width: 100%;\n}\n.locWithForm section {\n  padding: 0 0 32px;\n}\n.locWithForm section > div .MuiSvgIcon-root {\n  font-size: 24px !important;\n}\n.ant-form-item .ant-form-item-explain-error,\n.errorMsg {\n  color: var(--color-negative);\n  font-size: 12px;\n}\n.marZero .ant-form-item {\n  margin-bottom: 0;\n}\n.datepicker-modal button {\n  width: 100%;\n}\n.mapHeight + section {\n  justify-content: space-between;\n  overflow: hidden;\n}\n.loadingGif {\n  text-align: center;\n  padding: 12px 0 0;\n}\n.borderArea {\n  border: 1px solid var(--color-divider);\n}\n.mobileHeader {\n  display: none;\n}\n.addLocation li > p {\n  padding: 16px 0 0px;\n  margin: 0 0 32px !important;\n}\n.addLocation {\n  position: relative;\n}\n.flexDisplay {\n  display: flex;\n  gap: 8px;\n}\n.rowGap {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: baseline;\n  cursor: pointer;\n}\n.rowGap + button {\n  cursor: pointer;\n}\n.selectLocation button {\n  margin: 24px 0 0;\n}\n.parentDisplay {\n  padding: 16px;\n  border-bottom: 1px solid var(--color-divider);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchLocationForm section {\n  position: relative;\n}\n.searchLocationForm .ant-input-affix-wrapper {\n  height: 48px;\n}\n.searchLocationForm .anticon-close-circle svg {\n  font-size: 20px;\n}\n.searchLocationForm section img {\n  position: absolute;\n  right: 6px;\n  top: 14px;\n  z-index: 9;\n  cursor: pointer;\n  width: 22px;\n}\n.serviceLocationContainer ul li {\n  display: flex;\n  gap: 8px;\n  align-items: start;\n}\n.serviceLocationContainer ul li img {\n  position: relative;\n  top: 2px;\n}\n.searchLocationForm section input {\n  padding: 13px 16px 13px 38px;\n}\n.searchLocationForm section img.crossIcon,\n.searchLocationForm section img.searchLoader {\n  right: 16px;\n}\n.searchLocationForm {\n  min-height: 260px;\n}\n\n.searchLocationForm img.searchIcon {\n  left: 14px;\n  top: 14px;\n}\n.serviceLocationContainer {\n  margin: 32px 0 0;\n  /* border: 1px solid var(--color-divider); */\n  border-radius: 12px;\n  max-height: 300px;\n  overflow: auto;\n}\n.serviceLocationContainer ul {\n  padding: 16px;\n  border-bottom: 1px solid var(--color-divider);\n}\n.serviceLocationContainer ul:last-child {\n  border: none;\n}\n.currentLocationLink {\n  display: flex;\n  gap: 4px;\n}\n.noResultFound {\n  padding: 58px 32px;\n  border: 1px solid var(--color-divider);\n  border-radius: 12px;\n  text-align: center;\n  margin: 32px 0 0;\n}\n.noResultFound img {\n  width: 48px;\n}\n.serviceLocationContainer ul li {\n  padding: 0;\n}\n\n.addLocation aside {\n  border-radius: 12px;\n}\n.addLocation aside svg {\n  padding: 0 0 16px;\n}\n.crossIcon {\n  font-size: 24px;\n  position: absolute;\n  z-index: 1;\n  top: 13px;\n  right: 16px;\n  color: var(--color-secondary-content);\n}\n.crossIcon:hover {\n  color: var(--color-primary-content);\n}\n\n.mapComponent .locationSecBox {\n  display: flex;\n  max-width: 748px;\n  margin: 24px auto;\n\n  flex-direction: column;\n  border-radius: 12px;\n  border: none;\n}\n.mapComponent .listoflocation ul{\n  width: calc(100% + 48px);\n    margin: 16px 0 0 -24px !important;\n}\n.mapComponent .listoflocation{\n  margin: 24px 0 0 0;\n}\n.smallModalWidth{\n  width: 480px !important;\n}\n.fullModalWidth{\n  width: 800px !important;\n}\n.fullModalWidth .ant-modal-content{\n  padding: 0;\n}\n.fullModalWidth .mapHeight{\n  width: 440px;\n}\n.fullModalWidth .addresBoxDiv{\n  width: calc(100% - 440px);\n  padding: 64px 24px 32px;\n}\n.fullModalWidth .buttonBottom{\n  bottom: 32px;\n}\n.fullModalWidth .ant-modal-body > div{\n  padding: 0;\n}\n.mapComponent .locationInner {\n  padding: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.addressDetaisBox {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.locationlabel {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n.listoflocation {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin: 48px 0 0 0;\n}\n.listoflocation ul {\n  display: flex;\n  padding: 0;\n  flex-direction: column;\n  width: 100%;\n  border-top: solid 4px var(--color-divider);\n  margin: 16px 0 0 0 !important;\n}\n.listoflocation ul li {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  padding: 16px;\n  border-bottom: solid 1px var(--color-divider);\n  align-items: flex-start;\n  cursor: pointer;\n}\n.listoflocation ul li:last-child {\n  border-bottom: none;\n  padding-bottom: 0;\n}\n.listoflocation ul li .addressDetails {\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  margin: 0 0 0 12px;\n  max-width: none;\n}\n\n.minHeightAuto {\n  min-height: auto !important;\n}\n\n.oa-pincodeLocation .topHeader {\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  left: 0;\n  height: 56px;\n  width: 100%;\n  z-index: 9;\n  background: var(--color-primary-background);\n}\n.oa-pincodeLocation .topHeader .container {\n  width: 100%;\n}\n\n.oa-pincodeLocation .topHeader img {\n  width: 122px;\n}\n\n@media screen and (max-width: 600px) {\n  .slotContainer {\n    padding: 48px 16px 24px 16px !important;\n  }\n\n  .listoflocation ul li:last-child {\n    padding-bottom: 12px;\n  }\n\n  .oa-pincodeLocation .topHeader {\n    position: fixed;\n    top: 0;\n  }\n  .mobileMarginTop {\n    margin: 80px 0 0 !important;\n  }\n\n  .containerMap {\n    margin: 0 auto;\n    height: 100vh;\n    padding: 56px 16px 0 16px;\n  }\n  .locationSecBox {\n    margin: 0 auto;\n    border: none;\n    overflow: inherit;\n  }\n  .locationInner {\n    padding: 80px 16px 0 16px;\n  }\n  .addressDetaisBox {\n    flex-direction: column;\n  }\n  .mapHeight {\n    height: calc(100vh - 436px);\n    width: calc(100% + 32px);\n    border-radius: 0;\n    position: relative;\n    overflow: hidden;\n    margin: -24px 0 0 -16px;\n  }\n  .fullModalWidth .addresBoxDiv{\n    width: 100%;\n    padding: 0px 16px 32px;\n    margin: 0;\n  }\n  .fullModalWidth .buttonBottom{\n    position: static;\n  }\n  .fullModalWidth .addressDetaisBox{\n    gap: 32px;\n  }\n  .fullModalWidth .mapHeight {\n    width: 100%;\n    margin: 0 !important;\n    height: calc(100vh - 392px) !important;\n}\n.fullModalWidth .ant-modal-content{\n  padding: 0;\n  bottom: 0;\n  top: 0;\n}\n.fullModalWidth .ant-modal-body{\n  max-height: fit-content;\n  padding-right: 0;\n}\n.fullModalWidth .containerMap{\n  padding: 0;\n}\n.fullModalWidth{\n  margin: 0 !important;\n}\n  .addresBoxDiv {\n    flex-direction: column;\n    padding: 46px 24px 34px\n    width: calc(100% + 32px);\n    background: #fff;\n    margin: 0 0 0 -16px;\n    border-radius: 12px 12px 0 0;\n  }\n\n  .buttonBottom {\n    position: relative;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    padding: 0;\n  }\n\n  .searchLocationForm {\n    min-height: 200px;\n  }\n  .searchLocationContainer .padding-bottom-24 {\n    padding-top: 12px;\n  }\n  .spacing-32 h3,\n  .locationHead,\n  .mobileViewNone {\n    display: none;\n  }\n  .paddingZero {\n    padding: 0;\n    border: none;\n  }\n  /* .mapMobileRadious{\n        width: calc(100% + 32px);\n        position: relative;\n        margin: 0 -16px 0 0;\n        border-radius: 0;\n        border: none;\n    } */\n  .mapHeightMobile .mapHeight {\n    height: calc(96vh - 56px - 80px - 36px - 80px - 24px);\n    padding: 0;\n  }\n  .mapHeightMobile {\n    height: 88vh;\n    overflow: hidden;\n  }\n\n  .mobileHeader {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .noResultFound {\n    padding: 16px;\n    margin: 24px 0 0;\n  }\n  .mobileHeader svg {\n    cursor: pointer;\n  }\n  .serviceLocationContainer {\n    max-height: fit-content;\n    overflow-x: inherit;\n  }\n}\n@media screen and (max-width: 1024px) {\n  .addLocation aside {\n    border: none;\n    padding: 0;\n  }\n  .locFormContainer {\n    padding: 0;\n    border: none;\n  }\n  /* .mapMobileRadious{\n        border-radius: 0;\n    } */\n}\n\n.locFormContainer input[type=\"text\"]:not(.browser-default),\ninput[type=\"date\"]:not(.browser-default) {\n  float: none;\n  width: 100% !important;\n  /* padding: 14px; */\n}\n\n.getCompleteAddress input[type=\"text\"]:not(.browser-default),\ninput[type=\"date\"]:not(.browser-default) {\n  float: none;\n  width: 100% !important;\n  /* padding: 14px; */\n}\n\n"])));