oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AddressDetails = _interopRequireDefault(require("./AddressDetails"));
+var _MapComponent = _interopRequireDefault(require("./MapComponent"));
+var _CustomModalComponent = _interopRequireDefault(require("./CustomModalComponent"));
+var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+/**
+ * @description
+ * MapBaseLocation component which renders map and address details.
+ * Component props:
+ *  - `googleMapURL`: URL of the Google Map.
+ *  - `googleMapRef`: Reference to the Google Map component.
+ *  - `geolocationData`: Geolocation data.
+ *  - `fetchAddressFromGoogleApi`: Function to fetch address from Google API.
+ *  - `setOpenLocationNotDetectedModal`: Function to set open state of location not detected modal.
+ *  - `pinCodeServisible`: Boolean to indicate if pin code is serviceable.
+ *  - `editLocationHandler`: Function to edit location.
+ *  - `form`: Form instance.
+ *  - `onFinish`: Function to call on address form submission.
+ *  - `openLocationNotDetectedModal`: Boolean to indicate if location not detected modal is open.
+ *  - `setOpenLocationNotDetectedModalState`: Function to set open state of location not detected modal.
+ *
+ * @param {Object} props Component props.
+ * @returns {React.ReactNode} MapBaseLocation component.
+ */
+function MapBaseLocation(_ref) {
+  let {
+    googleMapURL,
+    googleMapRef,
+    geolocationData,
+    fetchAddressFromGoogleApi,
+    setOpenLocationNotDetectedModal,
+    pinCodeServisible,
+    editLocationHandler,
+    form,
+    onFinish,
+    openLocationNotDetectedModal,
+    setOpenLocationNotDetectedModalState,
+    showAddressType,
+    isSaveButtonDisabled,
+    showCurrentLocation = true
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.MapStyles, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "containerMap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "locationSecBox"
+  }, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
+    spinning: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "addressDetaisBox"
+  }, /*#__PURE__*/_react.default.createElement(_MapComponent.default, {
+    showCurrentLocation: showCurrentLocation,
+    googleMapURL: googleMapURL,
+    loadingElement: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: "100%"
+      }
+    }),
+    containerElement: /*#__PURE__*/_react.default.createElement("div", {
+      className: "mapHeight"
+    }),
+    mapElement: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: "100%"
+      }
+    }),
+    googleMapRef: googleMapRef,
+    geolocationData: geolocationData,
+    fetchAddressFromGoogleApi: fetchAddressFromGoogleApi,
+    setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModal
+  }), /*#__PURE__*/_react.default.createElement(_AddressDetails.default, {
+    isSaveButtonDisabled: isSaveButtonDisabled,
+    showAddressType: showAddressType,
+    geolocationData: geolocationData,
+    pinCodeServisible: pinCodeServisible,
+    editLocationHandler: editLocationHandler,
+    form: form,
+    onFinish: onFinish
+  }), /*#__PURE__*/_react.default.createElement(_CustomModalComponent.default, {
+    open: openLocationNotDetectedModal,
+    setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModalState
+  }))))));
+}
+var _default = exports.default = MapBaseLocation;

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

@@ -0,0 +1,167 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _reactGoogleMaps = require("react-google-maps");
+var _map_pointer = _interopRequireDefault(require("../../images/map_pointer.svg"));
+var _currentLocation = _interopRequireDefault(require("../../images/current-location.svg"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _InfoBox = _interopRequireDefault(require("react-google-maps/lib/components/addons/InfoBox"));
+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; }
+/* eslint-disable */
+
+const MapComponent = (0, _reactGoogleMaps.withScriptjs)((0, _reactGoogleMaps.withGoogleMap)(props => {
+  const [center, setCenter] = (0, _react.useState)({
+    lat: props.geolocationData.latitude,
+    lng: props.geolocationData.longitude
+  });
+  const [markerPosition, setMarkerPosition] = (0, _react.useState)({
+    lat: props.geolocationData.latitude,
+    lng: props.geolocationData.longitude
+  });
+  const [mapref, setMapRef] = _react.default.useState(null);
+
+  /**
+   * This function is called when the Google Map is loaded.
+   * It sets the map reference to the provided map instance.
+   * @param {object} map - The map instance provided by Google Maps API.
+   */
+  const handleOnLoad = map => {
+    setMapRef(map);
+  };
+  /**
+   * Function to get the center of the map when the center of the map is changed by user.
+   * This function is called when the map is dragged and the center of the map is changed.
+   * @function
+   */
+  const handleCenterChanged = () => {
+    if (mapref) {
+      const newCenter = mapref.getCenter();
+    }
+  };
+
+  /**
+   * This function is called when the map is dragged. It updates the marker position
+   * to the new map center.
+   */
+  const handleMapDrag = () => {
+    if (props.googleMapRef && props.googleMapRef.current) {
+      const mapCenter = props.googleMapRef.current.getCenter();
+      const lat = mapCenter.lat();
+      const lng = mapCenter.lng();
+      setMarkerPosition({
+        lat,
+        lng
+      });
+    }
+  };
+
+  /**
+   * This function is called when the map drag ends. It updates the map center to the current marker position
+   * and fetches the address from the Google API using the marker's latitude and longitude.
+   */
+  const handleMapDragEnd = () => {
+    setCenter(markerPosition);
+    props.fetchAddressFromGoogleApi(markerPosition.lat, markerPosition.lng);
+  };
+
+  /**
+   * Function to handle the click event on the current location icon in the map.
+   * When the icon is clicked, it asks the user for the current location and if the
+   * location is allowed, it fetches the address from the Google API and sets the
+   * map center and marker position to the current location. If the location is
+   * not allowed, it sets the openLocationNotDetectedModal state to true.
+   */
+  const handleCurrentLocationIconClick = async () => {
+    var _navigator;
+    props.setOpenLocationNotDetectedModal(false);
+    if ((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.geolocation) {
+      var _navigator2;
+      (_navigator2 = navigator) === null || _navigator2 === void 0 || (_navigator2 = _navigator2.geolocation) === null || _navigator2 === void 0 || _navigator2.getCurrentPosition(position => {
+        var _position$coords, _position$coords2;
+        if (position !== null && position !== void 0 && (_position$coords = position.coords) !== null && _position$coords !== void 0 && _position$coords.latitude && position !== null && position !== void 0 && (_position$coords2 = position.coords) !== null && _position$coords2 !== void 0 && _position$coords2.longitude) {
+          const {
+            latitude
+          } = position.coords;
+          const {
+            longitude
+          } = position.coords;
+          setCenter({
+            lat: latitude,
+            lng: longitude
+          });
+          setMarkerPosition({
+            lat: latitude,
+            lng: longitude
+          });
+          props.fetchAddressFromGoogleApi(latitude, longitude);
+        } else {
+          props.setOpenLocationNotDetectedModal(true);
+        }
+      }, error => {
+        props.setOpenLocationNotDetectedModal(true);
+      });
+    } else {
+      props.setOpenLocationNotDetectedModal(true);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.GoogleMap, {
+    ref: props.googleMapRef,
+    defaultZoom: 16,
+    defaultCenter: {
+      lat: props.geolocationData.latitude,
+      lng: props.geolocationData.longitude
+    },
+    center: center,
+    onDrag: handleMapDrag,
+    onLoad: handleOnLoad,
+    onCenterChanged: handleCenterChanged,
+    onDragEnd: handleMapDragEnd,
+    defaultOptions: {
+      disableDefaultUI: true,
+      mapTypeControl: false,
+      scaleControl: true,
+      zoomControl: true,
+      zoomControlOptions: {
+        style: google.maps.ZoomControlStyle.LARGE
+      },
+      mapTypeId: google.maps.MapTypeId.ROADMAP,
+      draggable: window.location.origin.includes("oneassist") // Disable dragging in non-prod environment
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, {
+    position: markerPosition,
+    draggable: false,
+    icon: _map_pointer.default,
+    title: "You are here"
+  }, /*#__PURE__*/_react.default.createElement(_InfoBox.default, {
+    defaultPosition: markerPosition,
+    options: {
+      pixelOffset: new window.google.maps.Size(0, -40),
+      // Adjust -40 to move higher
+      closeBoxURL: "",
+      enableEventPropagation: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    placement: "top",
+    title: "Place the pin accurately on map",
+    defaultOpen: true,
+    open: true
+  }))), props.showCurrentLocation && /*#__PURE__*/_react.default.createElement("div", {
+    className: "map-current-location"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _currentLocation.default,
+    alt: "current location",
+    onClick: handleCurrentLocationIconClick
+  })));
+}));
+var _default = exports.default = MapComponent;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MapStyles = 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 MapStyles = exports.MapStyles = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\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: 33px 16px;\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"])));

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

@@ -0,0 +1,266 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
+var _CloseOutlined = _interopRequireDefault(require("@material-ui/icons/CloseOutlined"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _ArrowForwardIosSharp = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosSharp"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _offer = _interopRequireDefault(require("../../images/offer.svg"));
+var _Mobile = _interopRequireDefault(require("../../images/Mobile.png"));
+var _Refrigerator = _interopRequireDefault(require("../../images/Refrigerator.png"));
+var _Shirts = _interopRequireDefault(require("../../images/Shirts.png"));
+var _Tablets = _interopRequireDefault(require("../../images/Tablets.png"));
+var _Television = _interopRequireDefault(require("../../images/Television.png"));
+var _WashingMachine = _interopRequireDefault(require("../../images/WashingMachine.png"));
+var _WaterPurifier = _interopRequireDefault(require("../../images/WaterPurifier.png"));
+var _Wearable = _interopRequireDefault(require("../../images/Wearable.png"));
+var _Wallet = _interopRequireDefault(require("../../images/Wallet.png"));
+var _AC = _interopRequireDefault(require("../../images/AC.png"));
+var _Cooler = _interopRequireDefault(require("../../images/Cooler.png"));
+var _Default = _interopRequireDefault(require("../../images/Default.png"));
+var _Footwear = _interopRequireDefault(require("../../images/Footwear.png"));
+var _Furniture = _interopRequireDefault(require("../../images/Furniture.png"));
+var _Glasses = _interopRequireDefault(require("../../images/Glasses.png"));
+var _Laptop = _interopRequireDefault(require("../../images/Laptop.png"));
+var _Luggage = _interopRequireDefault(require("../../images/Luggage.png"));
+var _Microwave = _interopRequireDefault(require("../../images/Microwave.png"));
+var _HA = _interopRequireDefault(require("../../images/HA.png"));
+var _Car = _interopRequireDefault(require("../../images/Car.png"));
+var _TwoWheeler = _interopRequireDefault(require("../../images/TwoWheeler.png"));
+var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+/**
+ * Renders a Membership Card component based on the provided card data.
+ *
+ * @param {Object} card - The card object containing body and footer information.
+ * @returns {ReactElement} The rendered Membership Card component.
+ */
+function MembershipCard(_ref) {
+  var _body$itemsList, _body$itemsList2, _footer$actions;
+  let {
+    card
+  } = _ref;
+  const {
+    body,
+    footer
+  } = card;
+  const [showModal, setShowModal] = (0, _react.useState)(false);
+
+  // const toggleModal = () => {
+  //   setShowModal(!showModal);
+  // };
+
+  const itemsToShow = (body === null || body === void 0 || (_body$itemsList = body.itemsList) === null || _body$itemsList === void 0 ? void 0 : _body$itemsList.slice(0, 2)) || [];
+  const remainingItems = (body === null || body === void 0 || (_body$itemsList2 = body.itemsList) === null || _body$itemsList2 === void 0 ? void 0 : _body$itemsList2.slice(2)) || [];
+  const {
+    title,
+    titleInfo,
+    primaryInfo,
+    tag,
+    primaryPanel,
+    alert,
+    icon
+  } = body || {};
+  const {
+    actions
+  } = footer || {};
+  const icons = {
+    Mobile: _Mobile.default,
+    Laptop: _Laptop.default,
+    Television: _Television.default,
+    AC: _AC.default,
+    Refrigerator: _Refrigerator.default,
+    Wearable: _Wearable.default,
+    Water_Purifier: _WaterPurifier.default,
+    Microwave: _Microwave.default,
+    Cooler: _Cooler.default,
+    Wallet: _Wallet.default,
+    Shirts: _Shirts.default,
+    Washing_Machine: _WashingMachine.default,
+    Tablets: _Tablets.default,
+    Glasses: _Glasses.default,
+    Luggage: _Luggage.default,
+    Footwear: _Footwear.default,
+    Furniture: _Furniture.default,
+    HA: _HA.default,
+    Car: _Car.default,
+    Two_Wheeler: _TwoWheeler.default,
+    Default: _Default.default
+  };
+  const iconSrc = icons[icon] || _Default.default;
+  return /*#__PURE__*/_react.default.createElement(_styles.MembershipCardStyle, null, body && /*#__PURE__*/_react.default.createElement(_styles.CardBody, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cardHead"
+  }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "titleHead"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, title)), titleInfo && /*#__PURE__*/_react.default.createElement("p", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "secondary-content"
+  }, titleInfo)), primaryInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "primary-info padding-top-8"
+  }, /*#__PURE__*/_react.default.createElement("label", null, ' ', /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: primaryInfo.type === 'success' ? 'positive' : 'negative',
+    className: "type-t2-700"
+  }, primaryInfo.label))), tag && /*#__PURE__*/_react.default.createElement("div", {
+    className: "topPad24"
+  }, /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+    label: tag.text,
+    type: tag.type
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "imgBg"
+  }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    alt: "phone img",
+    src: iconSrc
+  }))), itemsToShow.length > 0 && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "primary-content"
+  }, itemsToShow.join(', '), remainingItems.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    tabIndex: 0
+  }, "...+".concat(remainingItems.length, " more")))), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: primaryPanel.name,
+    onKeyDown: e => {
+      if (e.key === 'Enter') primaryPanel.name();
+    },
+    tabIndex: 0,
+    role: "button",
+    className: "primaryInfo"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "paraWithIcon"
+  }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    style: {
+      width: '24px'
+    },
+    alt: "phone img",
+    src: _offer.default
+  }), /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-background",
+    className: "type-button-500"
+  }, primaryPanel.label))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "displayFlex"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    icon: _ArrowForwardIos.default
+  }))), alert.length > 0 && alert.map((item, i) => {
+    var _item$description, _item$description2, _item$description3, _item$description4, _item$description5, _item$description6, _item$description7;
+    return ((item === null || item === void 0 ? void 0 : item.subHeading) !== '' || (item === null || item === void 0 ? void 0 : item.heading) !== '' || (item === null || item === void 0 || (_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.text) !== undefined) && /*#__PURE__*/_react.default.createElement("div", {
+      className: item !== null && item !== void 0 && (_item$description2 = item.description) !== null && _item$description2 !== void 0 && _item$description2.text && (item === null || item === void 0 || (_item$description3 = item.description) === null || _item$description3 === void 0 ? void 0 : _item$description3.text) !== '' ? "toolTipInfo ".concat(item.type) : "toolTipInfo ".concat(item.type, " flexChangeBody")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolTip"
+    }, item.tooltip && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+      isDisplayed: true
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: item.type,
+      icon: _InfoOutlined.default,
+      size: 24
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flexGap"
+    }, (item === null || item === void 0 ? void 0 : item.subHeading) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "secondary-content",
+      className: "type-sl1-700"
+    }, item === null || item === void 0 ? void 0 : item.subHeading))), (item === null || item === void 0 ? void 0 : item.heading) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      className: "type-t2-700"
+    }, item === null || item === void 0 ? void 0 : item.heading))), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      className: "type-b2-400"
+    }, item.description.text))), (item === null || item === void 0 || (_item$description5 = item.description) === null || _item$description5 === void 0 ? void 0 : _item$description5.additionalText) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      dangerouslySetInnerHTML: {
+        __html: item.description.additionalText
+      },
+      color: "primary-content",
+      className: "type-b2-400"
+    }))), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description6 = item.description) === null || _item$description6 === void 0 ? void 0 : _item$description6.listData) && (item === null || item === void 0 || (_item$description7 = item.description) === null || _item$description7 === void 0 || (_item$description7 = _item$description7.listData) === null || _item$description7 === void 0 ? void 0 : _item$description7.length) > 0 && /*#__PURE__*/_react.default.createElement("ul", null, item.description.listData.map((temp, j) => /*#__PURE__*/_react.default.createElement("li", null, temp))))), item.actions && /*#__PURE__*/_react.default.createElement("div", {
+      className: "viewStatus"
+    }, item.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: action.label,
+      label: action.label,
+      type: action.type,
+      onClick: action.name,
+      disabled: action === null || action === void 0 ? void 0 : action.disabled,
+      iconConfig: {
+        icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _ArrowForwardIosSharp.default,
+          size: 16
+        }),
+        position: 'right'
+      }
+    }))));
+  })), footer && (footer === null || footer === void 0 || (_footer$actions = footer.actions) === null || _footer$actions === void 0 ? void 0 : _footer$actions.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.CardFooter, null, actions && actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    key: action === null || action === void 0 ? void 0 : action.label,
+    label: action === null || action === void 0 ? void 0 : action.label,
+    type: action === null || action === void 0 ? void 0 : action.type,
+    size: "large",
+    onClick: action === null || action === void 0 ? void 0 : action.name,
+    disabled: action === null || action === void 0 ? void 0 : action.disabled
+  }))));
+}
+MembershipCard.propTypes = {
+  card: _propTypes.default.shape({
+    body: _propTypes.default.shape({
+      title: _propTypes.default.string,
+      titleInfo: _propTypes.default.string,
+      primaryInfo: _propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string
+      }),
+      image: _propTypes.default.string,
+      itemsList: _propTypes.default.arrayOf(_propTypes.default.string),
+      tag: _propTypes.default.shape({
+        text: _propTypes.default.string
+      }),
+      primaryPanel: _propTypes.default.shape({
+        icon: _propTypes.default.node,
+        label: _propTypes.default.string,
+        name: _propTypes.default.func
+      }),
+      alert: _propTypes.default.shape({
+        tooltip: _propTypes.default.string,
+        subHeading: _propTypes.default.string,
+        heading: _propTypes.default.string,
+        description: _propTypes.default.shape({
+          text: _propTypes.default.string,
+          additionalText: _propTypes.default.string
+        }),
+        actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+          label: _propTypes.default.string,
+          type: _propTypes.default.string,
+          name: _propTypes.default.func,
+          disabled: _propTypes.default.bool
+        }))
+      })
+    }),
+    footer: _propTypes.default.shape({
+      actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string,
+        name: _propTypes.default.func
+      }))
+    })
+  })
+};
+MembershipCard.defaultProps = {
+  card: null
+};
+var _default = exports.default = MembershipCard;

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

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