oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-customer-rating-card/CustomerRatingCard.js

@@ -0,0 +1,147 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ratingConstants = require("../../constants/ratingConstants");
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomTextArea = _interopRequireDefault(require("../../components/oa-component-textarea/CustomTextArea"));
+var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+const _excluded = ["submitBtnLabel", "activity", "submitRating", "open", "closeRatingModal", "data-test"];
+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 _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; }
+/**
+ * CustomerRatingCard component allows users to rate an activity and provide feedback.
+ *
+ * @param {Object} props
+ * @param {string} props.submitBtnLabel - Label for the submit button.
+ * @param {string} props.activity - The activity for which the rating is provided.
+ * @param {Function} props.submitRating - Callback function to handle the rating submission.
+ * @param {boolean} props.open - Determines if the rating modal is visible.
+ * @param {Function} props.closeRatingModal - Callback function to close the rating modal.
+ * @param {string} [props.data-test] - Optional attribute for testing purposes.
+ * @returns {ReactElement} CustomerRatingCard component.
+ */
+function CustomerRatingCard(_ref) {
+  var _rateTextAndDescripti;
+  let {
+      submitBtnLabel,
+      activity,
+      submitRating,
+      open,
+      closeRatingModal,
+      'data-test': dataTest
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [rating, setRating] = (0, _react.useState)(0);
+  const [absRating, setAbsRating] = (0, _react.useState)(0);
+  const [feedbackOptions, setFeedbackOptions] = (0, _react.useState)([]);
+  const [tags, setTags] = (0, _react.useState)([]);
+  const [remarks, setRemarks] = (0, _react.useState)('');
+  const [isButtonEnabled, setIsButtonEnabled] = (0, _react.useState)(false);
+
+  /**
+   * Handles the change in rating value.
+   * @param {number} value - The new rating value.
+   */
+  const handleRatingChange = value => {
+    setRating(value);
+    setTags([]);
+    setAbsRating(Math.ceil(value));
+    setIsButtonEnabled(value > 0);
+    const options = _ratingConstants.RatingConstants[activity][Math.ceil(value)];
+    setFeedbackOptions(options);
+  };
+  const handleFeedbackChange = value => {
+    setTags(value);
+  };
+  const handleRemarksChange = event => {
+    setRemarks(event.target.value);
+  };
+
+  /**
+   * Submits the rating feedback.
+   * @function
+   * @returns {void}
+   */
+  const handleSubmit = () => {
+    const data = {
+      tags,
+      rating,
+      comments: remarks,
+      activity
+    };
+    submitRating(data);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    open: open,
+    onCancel: closeRatingModal,
+    maskClosable: false
+  }, /*#__PURE__*/_react.default.createElement(_styles.RatingModalStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ratingSection"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, "Rate Us"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ratingDiv"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Rate, {
+    value: rating,
+    onChange: handleRatingChange
+  }), rating > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "rateTextAntbelowStar"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b3-400",
+    color: "primary-content"
+  }, _ratingConstants.rateTextAndDescriptionMap[absRating].rateText))), rating > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "rating"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, (_ratingConstants.rateTextAndDescriptionMap === null || _ratingConstants.rateTextAndDescriptionMap === void 0 || (_rateTextAndDescripti = _ratingConstants.rateTextAndDescriptionMap[absRating]) === null || _rateTextAndDescripti === void 0 ? void 0 : _rateTextAndDescripti.heading) || 'What could be improved?'), /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default.Group, {
+    value: tags,
+    options: feedbackOptions,
+    onChange: handleFeedbackChange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "leaveComment"
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "remarks"
+  }, "Leave a comment (optional)"), /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
+    id: "remarks",
+    rows: 4,
+    placeholder: "Enter any additional comments",
+    value: remarks,
+    onChange: handleRemarksChange
+  }))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "primary",
+    label: submitBtnLabel,
+    className: "rateUs",
+    disabled: !isButtonEnabled,
+    onClick: handleSubmit
+  }))));
+}
+CustomerRatingCard.propTypes = {
+  activity: _propTypes.default.string,
+  submitRating: _propTypes.default.func.isRequired,
+  open: _propTypes.default.bool.isRequired,
+  closeRatingModal: _propTypes.default.func.isRequired,
+  submitBtnLabel: _propTypes.default.string,
+  'data-test': _propTypes.default.string
+};
+CustomerRatingCard.defaultProps = {
+  submitBtnLabel: 'Submit',
+  activity: 'DEFAULT',
+  'data-test': null
+};
+var _default = exports.default = CustomerRatingCard;

package/build/widgets/oa-widget-customer-rating-card/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RatingModalStyle = 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 RatingModalStyle = exports.RatingModalStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ratingSection{\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        gap: 32px;\n}\n        .ratingSection .ant-rate{\n            color: #FF991F;\n            font-size: 40px;\n        }\n            .ratingDiv{\n                width: 235px;\n                margin: 0 auto;\n            }\n                .rateTextAntbelowStar{\n                    display: flex;\n    justify-content: center;\n    padding: 4px 0 0;\n                }\n    .ratingSection button{\n        width: 100%;\n    }\n    .leaveComment{\n        text-align: left;\n    }\n        .ant-checkbox-wrapper-checked{\n                border-radius: 4px;\nborder: 1px solid  #014FC5;\nbackground: #014FC5;\n                    \n        }\n.ant-checkbox-wrapper-checked .ant-checkbox+span{\n    color: #fff;\n}\n    .ant-checkbox-inner{\n    display: none;\n    }\n    .ant-checkbox+span{\n    color: #014FC5;\n    }\n                .ant-checkbox-group{\n                        gap: 16px;\n    justify-content: center;\n    padding: 16px 0 0;\n                }\n                .ant-checkbox-group-item{\n                 border: 1px solid  #014FC5;\n                 padding: 8px;\n                 border-radius: 4px;\n                }\n"])));

package/build/widgets/oa-widget-date-dropdown/DateDropDown.js

@@ -0,0 +1,385 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.split.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Done = _interopRequireDefault(require("@material-ui/icons/Done"));
+var _dayjs4 = _interopRequireDefault(require("dayjs"));
+var _styles = require("./styles");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const {
+  RangePicker
+} = _antd.DatePicker;
+
+/**
+ * Calculate the date offset based on the input day value.
+ * If the day is -1, returns null.
+ * @param {number} day - The number of days to offset the date by.
+ * @returns {Date|null} - The calculated date offset.
+ */
+function getDateOffset(day) {
+  if (day === -1) return null;
+  const days = parseInt(day, 10);
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date;
+}
+let rangePickerLabel;
+const labelWithDate = {};
+
+/**
+ * A widget to select dates from a predefined list of options.
+ *
+ * The widget shows a dropdown list of options. If the user selects an option
+ * that corresponds to a date range (e.g. "Last 30 days"), the widget will
+ * display a date range picker to allow the user to select a specific date
+ * range. The selected date range will be displayed in the dropdown list.
+ *
+ * The widget also allows the user to reset the selected date range to the
+ * default date range.
+ *
+ * The widget will pass the selected date range to the parent component as a
+ * prop.
+ *
+ * @param {object} options - An array of options to display in the dropdown
+ * list. Each option should have a "label" property and a "value" property.
+ * The "value" property should be a number representing the number of days to
+ * offset the date by. If the "value" property is -1, the widget will display
+ * a date range picker.
+ * @param {string} format - The format to display the dates in. Should be a
+ * string in the format "DD-MM-YYYY".
+ * @param {function} getValues - A function to call when the user selects a
+ * date range. The function will be passed an object with "startDate",
+ * "endDate", and "label" properties.
+ * @param {string} defaultLabel - The default label to display in the dropdown
+ * list.
+ * @param {string} defaultValue - The default value to select in the dropdown
+ * list.
+ * @param {string} subLine - The subline text to display below the dropdown
+ * list.
+ * @param {boolean} resetState - A boolean to reset the state of the widget.
+ * @param {Date} beforeDisabledDate - The date before which all dates are
+ * disabled.
+ * @param {Date} afterDisabledDate - The date after which all dates are
+ * disabled.
+ * @param {string} placeholder - The placeholder text to display in the
+ * dropdown list.
+ */
+function DateDropDown(_ref) {
+  let {
+    options,
+    format,
+    getValues,
+    defaultLabel,
+    defaultValue,
+    subLine,
+    resetState,
+    beforeDisabledDate,
+    afterDisabledDate,
+    placeholder
+  } = _ref;
+  const [showRangePicker, setshowRangePicker] = (0, _react.useState)(false);
+  const [selectValue, setSelectValue] = (0, _react.useState)({
+    label: defaultLabel,
+    dateSelected: false,
+    prevLabel: ''
+  });
+  (0, _react.useEffect)(() => {
+    options.forEach(option => {
+      if (option.value === -1) {
+        rangePickerLabel = option.label;
+      }
+      labelWithDate[option.label] = option.value;
+    });
+    if (selectValue !== null && selectValue !== void 0 && selectValue.label) {
+      getValues({
+        startDate: (0, _dayjs4.default)(getDateOffset(labelWithDate[selectValue.label])).format(format),
+        endDate: (0, _dayjs4.default)(getDateOffset(0)).format(format),
+        label: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label
+      });
+    }
+  }, []);
+
+  /**
+   * Resets the local state of the widget.
+   *
+   * This function is used to reset the local state of the widget. It sets the
+   * `selectValue` state to its default value, and resets the `showRangePicker`
+   * state to `false`. It also calls the `getValues` callback with the default
+   * values.
+   */
+  const resetLocalState = () => {
+    setSelectValue({
+      label: defaultLabel,
+      dateSelected: false,
+      prevLabel: ''
+    });
+    setshowRangePicker(false);
+    getValues({
+      startDate: (0, _dayjs4.default)(getDateOffset(labelWithDate[defaultLabel])).format(format),
+      endDate: (0, _dayjs4.default)(getDateOffset(0)).format(format),
+      label: defaultLabel
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (resetState) {
+      resetLocalState();
+    }
+  }, [resetState]);
+
+  /**
+   * Decides whether to show a tick icon on the custom select dropdown.
+   * @param {string} selectedLabel The currently selected label.
+   * @param {string} allLabel The label for the "All" option.
+   * @returns {boolean} True if the tick icon should be shown, false otherwise.
+   */
+  const showTickIcon = (selectedLabel, allLabel) => {
+    var _dayjs, _selectedLabel$split;
+    if (selectedLabel && selectedLabel === allLabel) {
+      return true;
+    }
+    if (selectedLabel && ((_dayjs = (0, _dayjs4.default)(selectedLabel === null || selectedLabel === void 0 || (_selectedLabel$split = selectedLabel.split) === null || _selectedLabel$split === void 0 || (_selectedLabel$split = _selectedLabel$split.call(selectedLabel, ' - ')) === null || _selectedLabel$split === void 0 ? void 0 : _selectedLabel$split[0])) === null || _dayjs === void 0 ? void 0 : _dayjs.format(format)) !== 'Invalid Date' && allLabel === rangePickerLabel) {
+      return true;
+    }
+    return false;
+  };
+
+  /**
+   * A function to render a custom option in the dropdown select.
+   * @param {object} option - The option to render.
+   * @returns {ReactElement} - A React element representing the rendered option.
+   *
+   * The function renders a styled container containing a span with the
+   * option's label. If the option is the "All" option, the function renders a
+   * MaterialIcon tick icon after the label. If the option is the "Custom
+   * range" option, the function renders a second span with the subline text
+   * below the label.
+   */
+  const optionRender = option => {
+    var _option$label;
+    const allLabel = option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.props) === null || _option$label === void 0 ? void 0 : _option$label.children;
+    const isCustomRange = allLabel === rangePickerLabel;
+    const {
+      label
+    } = selectValue !== null && selectValue !== void 0 ? selectValue : {};
+    return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, {
+      style: isCustomRange ? {
+        borderTop: ''
+      } : {}
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "label-date-dropdown"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: showTickIcon(label, allLabel) ? {
+        color: _ColorVariablesMap.default['--color-primary']
+      } : {}
+    }, allLabel), showTickIcon(label, allLabel) && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _Done.default,
+      size: 20,
+      color: "primary"
+    }))), isCustomRange && /*#__PURE__*/_react.default.createElement("span", {
+      style: showTickIcon(label, allLabel) ? {
+        color: _ColorVariablesMap.default['--color-primary']
+      } : {}
+    }, subLine));
+  };
+
+  /**
+  * Handles the selection of a date option from the dropdown.
+  *
+  * When a date option is selected, updates the `selectValue` state and
+  * determines whether to show the range picker based on the option selected.
+  * If the "Custom range" option is selected, opens the range picker and sets
+  * the label to "Start date - End date". Otherwise, updates the `selectValue`
+  * with the selected option's label and calls `getValues` with the appropriate
+  * start and end dates.
+  *
+  * @param {object} event - The event object containing the selected option's
+  * label and value.
+  */
+  const onSelect = event => {
+    if ((event === null || event === void 0 ? void 0 : event.label) === rangePickerLabel) {
+      setSelectValue(prev => {
+        setshowRangePicker(true);
+        return {
+          label: 'Start date -End date',
+          dateSelected: false,
+          prevLabel: prev.label
+        };
+      });
+    } else {
+      getValues({
+        startDate: (0, _dayjs4.default)(getDateOffset(event.value)).format(format),
+        endDate: (0, _dayjs4.default)(getDateOffset((event === null || event === void 0 ? void 0 : event.value) === 1 ? event.value : 0)).format(format),
+        label: event === null || event === void 0 ? void 0 : event.label
+      });
+      setSelectValue({
+        label: event === null || event === void 0 ? void 0 : event.label,
+        dateSelected: false
+      });
+      setshowRangePicker(false);
+    }
+  };
+
+  /**
+   * Handles the selection of a date range from the range picker.
+   *
+   * When a date range is selected, formats the dates from the API's date
+   * format to the user's preferred date format. Updates the `selectValue` state
+   * with the selected date range and calls `getValues` with the formatted
+   * start and end dates. Finally, resets the `showRangePicker` state to
+   * `false`.
+   *
+   * @param {object} e - The event object containing the selected date range.
+   */
+  const handleDateRangeValue = e => {
+    var _dayjs2, _dayjs2$format, _e$, _dayjs3, _dayjs3$format, _e$2;
+    const fromDateApi = _dayjs4.default === null || _dayjs4.default === void 0 || (_dayjs2 = (0, _dayjs4.default)(e === null || e === void 0 || (_e$ = e[0]) === null || _e$ === void 0 ? void 0 : _e$.$d)) === null || _dayjs2 === void 0 || (_dayjs2$format = _dayjs2.format) === null || _dayjs2$format === void 0 ? void 0 : _dayjs2$format.call(_dayjs2, format);
+    const toDateApi = _dayjs4.default === null || _dayjs4.default === void 0 || (_dayjs3 = (0, _dayjs4.default)(e === null || e === void 0 || (_e$2 = e[1]) === null || _e$2 === void 0 ? void 0 : _e$2.$d)) === null || _dayjs3 === void 0 || (_dayjs3$format = _dayjs3.format) === null || _dayjs3$format === void 0 ? void 0 : _dayjs3$format.call(_dayjs3, format);
+    const date = "".concat(fromDateApi, " - ").concat(toDateApi);
+    setSelectValue({
+      label: date,
+      dateSelected: true
+    });
+    getValues({
+      startDate: fromDateApi,
+      endDate: toDateApi,
+      label: date
+    });
+    setshowRangePicker(false);
+  };
+
+  /**
+   * Handles the click on the date dropdown's select option.
+   *
+   * If the user clicks on the select option after selecting a custom range,
+   * resets the date dropdown's value to the previously selected label and
+   * calls `getValues` with the start and end dates corresponding to the
+   * previously selected label.
+   */
+  const handleOnSelectClick = () => {
+    setshowRangePicker(false);
+    if (selectValue !== null && selectValue !== void 0 && selectValue.prevLabel) {
+      const getParsedValue = labelWithDate[selectValue === null || selectValue === void 0 ? void 0 : selectValue.prevLabel];
+      setSelectValue(prev => {
+        if (prev.prevLabel) {
+          getValues({
+            startDate: (0, _dayjs4.default)(getParsedValue).format(format),
+            endDate: (0, _dayjs4.default)(getDateOffset(0)).format(format),
+            label: selectValue === null || selectValue === void 0 ? void 0 : selectValue.prevLabel
+          });
+          return {
+            label: prev === null || prev === void 0 ? void 0 : prev.prevLabel,
+            dateSelected: false,
+            prevLabel: ''
+          };
+        }
+        return _objectSpread({}, prev);
+      });
+    }
+  };
+
+  /**
+   * Function to disable dates that are outside of the allowed range.
+   *
+   * @param {dayjs} e - The date to check.
+   * @returns {boolean} True if the date is outside of the allowed range, false otherwise.
+   */
+  const disabledDateHandler = e => {
+    if (beforeDisabledDate) {
+      if (e.isBefore(beforeDisabledDate, 'day')) {
+        return true;
+      }
+    }
+    if (afterDisabledDate) {
+      if (e.isAfter(afterDisabledDate, 'day')) {
+        return true;
+      }
+    }
+    return false;
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+    defaultLabel: setSelectValue === null || setSelectValue === void 0 ? void 0 : setSelectValue.label,
+    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined,
+    value: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label,
+    className: "selectWidth",
+    optionRender: optionRender,
+    options: options,
+    onSelectionChange: onSelect,
+    placeholder: placeholder
+  }), showRangePicker && /*#__PURE__*/_react.default.createElement("div", {
+    className: "datePicker"
+  }, /*#__PURE__*/_react.default.createElement(RangePicker, {
+    open: true,
+    onOpenChange: () => handleOnSelectClick(),
+    autoFocus: true,
+    allowClear: true,
+    format: format,
+    disabledDate: e => disabledDateHandler(e),
+    onChange: value => handleDateRangeValue(value)
+  })));
+}
+DateDropDown.propTypes = {
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })),
+  getValues: _propTypes.default.func,
+  format: _propTypes.default.string,
+  defaultLabel: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  resetState: _propTypes.default.bool,
+  defaultValue: _propTypes.default.any,
+  subLine: _propTypes.default.string,
+  beforeDisabledDate: _propTypes.default.instanceOf(Date),
+  afterDisabledDate: _propTypes.default.instanceOf(Date)
+};
+DateDropDown.defaultProps = {
+  options: [{
+    label: 'Today',
+    value: 0
+  }, {
+    label: 'Yesterday',
+    value: 1
+  }, {
+    label: 'Last 30 days',
+    value: 30
+  }, {
+    // label: (<div className="customDateRange">
+    //   <h6>Custome Range</h6>
+    //   <p>Data available from Jun, 2023</p>
+    // </div>),
+
+    label: 'Custom Range',
+    value: -1
+  }],
+  format: 'DD-MMM-YYYY',
+  subLine: '',
+  beforeDisabledDate: null,
+  afterDisabledDate: null,
+  defaultLabel: null,
+  getValues: () => {},
+  resetState: false,
+  defaultValue: '',
+  placeholder: 'Please select a date'
+};
+var _default = exports.default = DateDropDown;

package/build/widgets/oa-widget-date-dropdown/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledContainer = 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 StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-select .ant-select-arrow{\n    margin: -6px 0 0 16px;\n}\n.ant-select{\n    width: 100%;\n}\n.ant-picker-range{\n    height: 0px;\n}\n.customDateRange{display:flex; flex-direction:column;}\n.customDateRange h6{color: var(--color-primary-content);\n    font-size: 14px; margin:0;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;}\n\n    .customDateRange span{\n        color: var(--color-secondary-content);\nmargin:4px 0 0 0;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 16px; }\n.ant-select-dropdown {width:auto !important;}\n\n\n"])));