oa-componentbook 0.18.384 → 0.18.386

package/build/index.js

@@ -401,6 +401,12 @@ Object.defineProperty(exports, "FeedbackWidget", {
     return _FeedbackWidget.default;
   }
 });
+Object.defineProperty(exports, "FeedbackWidget1", {
+  enumerable: true,
+  get: function get() {
+    return _FeedbackWidget2.default;
+  }
+});
 Object.defineProperty(exports, "GenericUpload", {
   enumerable: true,
   get: function get() {
@@ -754,6 +760,7 @@ var _NotesWidget = _interopRequireDefault(require("./widgets/oa-widget-notes/Not
 var _PlanCard = _interopRequireDefault(require("./widgets/oa-widget-plan-card/PlanCard"));
 var _CustomerRatingCard = _interopRequireDefault(require("./widgets/oa-widget-customer-rating-card/CustomerRatingCard"));
 var _FeedbackWidget = _interopRequireDefault(require("./widgets/oa-widget-feedback/FeedbackWidget"));
+var _FeedbackWidget2 = _interopRequireDefault(require("./widgets/oa-widget-feedback/FeedbackWidget1"));
 var _ReimbursementBreakupWidget = _interopRequireDefault(require("./widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget"));
 var _SendPaymentLinkWidget = _interopRequireDefault(require("./widgets/oa-widget-send-payment-link/SendPaymentLinkWidget"));
 var _SparePartsWidget = _interopRequireDefault(require("./widgets/oa-widget-spare-part/SparePartsWidget"));

package/build/layout/GenricLayOut/GenricLayOut.js

@@ -41,6 +41,7 @@ var _FilterListRounded = _interopRequireDefault(require("@material-ui/icons/Filt
 var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
 var _CustomDropdown = _interopRequireDefault(require("../../components/oa-component-dropdown/CustomDropdown"));
 var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _FeedbackWidget = _interopRequireDefault(require("../../widgets/oa-widget-feedback/FeedbackWidget1"));
 const _excluded = ["filteredValue"],
   _excluded2 = ["sortOrder"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -90,11 +91,14 @@ function GenricLayOut(_ref) {
       handleRightHeaderButtonClick,
       handleDownloadTemplate,
       handleCtaDownload,
-      handleTabExtraActionChange
+      handleTabExtraActionChange,
+      handleFeedbackWidgetSubmit,
+      handleFeedbackQuestionsList
     } = {}
   } = _ref;
   const [state, dispatch] = (0, _react.useReducer)(_layoutReducer.genericLayoutReducer, config !== null && config !== void 0 ? config : _layoutReducer.initialState);
   const [headerButtons, setHeaderButtons] = (0, _react.useState)(null);
+  const [feedbackWidgetVisible, setFeedbackWidgetVisible] = (0, _react.useState)(false);
   const stateRef = (0, _react.useRef)(state);
   const notificationRef = (0, _react.useRef)(null);
   const openNotification = (0, _react.useCallback)(params => notificationRef.current.openNotification(params), []);
@@ -119,7 +123,8 @@ function GenricLayOut(_ref) {
     staticFilter,
     profileData,
     infoPanel,
-    infoData
+    infoData,
+    feedbackWidget
   } = state !== null && state !== void 0 ? state : {};
   (0, _react.useEffect)(() => {
     init();
@@ -127,6 +132,36 @@ function GenricLayOut(_ref) {
   (0, _react.useEffect)(() => {
     stateRef.current = state;
   }, [state]);
+  (0, _react.useEffect)(() => {
+    if (typeof (feedbackWidget === null || feedbackWidget === void 0 ? void 0 : feedbackWidget.visible) === "boolean") {
+      setFeedbackWidgetVisible(feedbackWidget.visible);
+    }
+  }, [feedbackWidget === null || feedbackWidget === void 0 ? void 0 : feedbackWidget.visible]);
+  (0, _react.useEffect)(() => {
+    if (!feedbackWidgetVisible || !handleFeedbackQuestionsList) return;
+    const fetchFeedbackQuestions = async () => {
+      try {
+        var _response$data;
+        const response = await handleFeedbackQuestionsList(config === null || config === void 0 ? void 0 : config.misc);
+        const error = response === null || response === void 0 ? void 0 : response.error;
+        const data = (_response$data = response === null || response === void 0 ? void 0 : response.data) !== null && _response$data !== void 0 ? _response$data : response;
+        if (!error && data && typeof data === "object") {
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_FEEDBACK_WIDGET_SURVEY_CONFIG,
+            payload: data
+          });
+        }
+      } catch (err) {
+        // silently handle error
+      }
+    };
+    fetchFeedbackQuestions();
+  }, [feedbackWidgetVisible]);
+  const handleFeedbackWidgetSubmitWithClose = (0, _react.useCallback)(async payload => {
+    if (handleFeedbackWidgetSubmit) {
+      await handleFeedbackWidgetSubmit(payload);
+    }
+  }, [handleFeedbackWidgetSubmit]);
   (0, _react.useEffect)(() => {
     const observer = new MutationObserver(e => {
       const parent = document.querySelector(".oaheaderButtons");
@@ -2737,7 +2772,12 @@ function GenricLayOut(_ref) {
     handleSwitchSelectItem: handleSwitchSelectItem
   }))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
     ref: notificationRef
-  }))));
+  }), (feedbackWidget === null || feedbackWidget === void 0 ? void 0 : feedbackWidget.enabled) !== false && /*#__PURE__*/_react.default.createElement(_FeedbackWidget.default, _extends({}, feedbackWidget, {
+    visible: feedbackWidgetVisible,
+    setVisible: setFeedbackWidgetVisible,
+    onSubmit: (feedbackWidget === null || feedbackWidget === void 0 ? void 0 : feedbackWidget.onSubmit) || handleFeedbackWidgetSubmitWithClose,
+    feedbackQuestionsList: handleFeedbackQuestionsList
+  })))));
 }
 GenricLayOut.propTypes = {};
 GenricLayOut.defaultProps = {};

package/build/layout/GenricLayOut/reducer/layoutReducer.js

@@ -60,7 +60,8 @@ const actionTypes = exports.actionTypes = {
   CHANGE_ROW: "CHANGE_ROW",
   SET_TABS_EXTRA_ACTION_CHECKED: "SET_TABS_EXTRA_ACTION_CHECKED",
   SET_TABS_EXTRA_ACTION: "SET_TABS_EXTRA_ACTION",
-  SET_INFO_DATA: "SET_INFO_DATA"
+  SET_INFO_DATA: "SET_INFO_DATA",
+  SET_FEEDBACK_WIDGET_SURVEY_CONFIG: "SET_FEEDBACK_WIDGET_SURVEY_CONFIG"
 };
 function getFieldDefaultValue(widget) {
   switch (widget) {
@@ -322,6 +323,11 @@ const genericLayoutReducer = exports.genericLayoutReducer = (0, _immer.produce)(
         draft.infoData = _objectSpread(_objectSpread({}, draft.infoData), action.payload);
       }
       break;
+    case actionTypes.SET_FEEDBACK_WIDGET_SURVEY_CONFIG:
+      if (draft.feedbackWidget && action.payload) {
+        draft.feedbackWidget.surveyConfig = action.payload;
+      }
+      break;
     default:
       break;
   }

package/build/widgets/oa-widget-feedback/FeedbackWidget1.js

@@ -0,0 +1,655 @@
+"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/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.url-search-params.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _ThumbUpOutlined = _interopRequireDefault(require("@material-ui/icons/ThumbUpOutlined"));
+var _ThumbDownOutlined = _interopRequireDefault(require("@material-ui/icons/ThumbDownOutlined"));
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+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 _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _FeedbackWidget1Style = require("./FeedbackWidget1Style");
+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); } /* eslint-disable */
+const toArray = value => Array.isArray(value) ? value : value == null ? [] : [value];
+function FeedbackWidget1(props) {
+  var _surveyConfig$questio, _surveyConfig$questio2, _surveyConfig$questio3, _surveyConfig$questio4, _singleChoiceQuestion, _multiChoiceQuestions, _singleChoiceQ$option, _singleChoiceQ$option2, _singleChoiceQ$questi, _positiveOption$optio, _negativeOption$optio, _positiveOption$id, _negativeOption$id, _multiChoiceQ$questio, _multiChoiceQ$options, _multiChoiceQ$options2, _surveyConfig$categor, _choicesState$singleC;
+  const {
+    surveyConfig = null,
+    visible = false,
+    setVisible = () => {},
+    hideButton = false,
+    title = 'Help us make your experience better',
+    subTitle = '',
+    question = 'How was your experience completing the task?',
+    checkboxOptions = [],
+    formConfig = {},
+    positiveButtonLabel = 'Easy',
+    negativeButtonLabel = 'Difficult',
+    improvementsQuestion = 'Which part did you face issues with?',
+    othersSpecifyLabel = 'Others (Please specify)',
+    othersSpecifyPlaceholder = 'Please provide details of what went wrong.',
+    commentLabel = 'Leave a comment (Optional)',
+    commentPlaceholder = 'Tell us your feedback',
+    positiveCommentLabel = 'Leave a comment (Optional)',
+    negativeCommentLabel = 'Tell us more (if anything was confusing):',
+    positiveCommentPlaceholder = 'Tell us your feedback',
+    negativeCommentPlaceholder = "What didn't make sense or took longer than expected?",
+    consentLabel = 'I understand that my feedback may be used by OneAssist to improve the overall experience.',
+    thankYouTitle = 'Thank you for your time!',
+    thankYouMessage = 'We will get back to you if needed.',
+    mandatoryQuestionError = 'This is a mandatory question.',
+    consentError = 'Please provide your consent to continue.',
+    feedbackButtonLabel = 'Feedback',
+    submitButtonLabel = 'Submit',
+    othersOptionValue = 'Others',
+    positiveChoiceValue = 'Yes',
+    negativeChoiceValue = 'No',
+    userDataStorageKey = 'userData',
+    modalWidth = 427,
+    onSubmit,
+    onSuccess,
+    onError,
+    showThankYouState = true
+  } = props !== null && props !== void 0 ? props : {};
+
+  // ── Derive question arrays from surveyConfig ──
+  const singleChoiceQuestions = (_surveyConfig$questio = surveyConfig === null || surveyConfig === void 0 || (_surveyConfig$questio2 = surveyConfig.questions) === null || _surveyConfig$questio2 === void 0 ? void 0 : _surveyConfig$questio2.filter(q => q.questionType === 'SINGLE_CHOICE')) !== null && _surveyConfig$questio !== void 0 ? _surveyConfig$questio : [];
+  const multiChoiceQuestions = (_surveyConfig$questio3 = surveyConfig === null || surveyConfig === void 0 || (_surveyConfig$questio4 = surveyConfig.questions) === null || _surveyConfig$questio4 === void 0 ? void 0 : _surveyConfig$questio4.filter(q => q.questionType === 'MULTI_CHOICE')) !== null && _surveyConfig$questio3 !== void 0 ? _surveyConfig$questio3 : [];
+
+  // ── Legacy single-question refs (first of each type, for backward compat) ──
+  const singleChoiceQ = (_singleChoiceQuestion = singleChoiceQuestions[0]) !== null && _singleChoiceQuestion !== void 0 ? _singleChoiceQuestion : null;
+  const multiChoiceQ = (_multiChoiceQuestions = multiChoiceQuestions[0]) !== null && _multiChoiceQuestions !== void 0 ? _multiChoiceQuestions : null;
+  const positiveOption = singleChoiceQ === null || singleChoiceQ === void 0 || (_singleChoiceQ$option = singleChoiceQ.options) === null || _singleChoiceQ$option === void 0 ? void 0 : _singleChoiceQ$option[0];
+  const negativeOption = singleChoiceQ === null || singleChoiceQ === void 0 || (_singleChoiceQ$option2 = singleChoiceQ.options) === null || _singleChoiceQ$option2 === void 0 ? void 0 : _singleChoiceQ$option2[1];
+
+  // ── Resolved values for legacy/single-question mode ──
+  const resolvedQuestion = (_singleChoiceQ$questi = singleChoiceQ === null || singleChoiceQ === void 0 ? void 0 : singleChoiceQ.question) !== null && _singleChoiceQ$questi !== void 0 ? _singleChoiceQ$questi : question;
+  const resolvedPositiveButtonLabel = (_positiveOption$optio = positiveOption === null || positiveOption === void 0 ? void 0 : positiveOption.optionText) !== null && _positiveOption$optio !== void 0 ? _positiveOption$optio : positiveButtonLabel;
+  const resolvedNegativeButtonLabel = (_negativeOption$optio = negativeOption === null || negativeOption === void 0 ? void 0 : negativeOption.optionText) !== null && _negativeOption$optio !== void 0 ? _negativeOption$optio : negativeButtonLabel;
+  const resolvedPositiveChoiceValue = surveyConfig ? String((_positiveOption$id = positiveOption === null || positiveOption === void 0 ? void 0 : positiveOption.id) !== null && _positiveOption$id !== void 0 ? _positiveOption$id : '') : positiveChoiceValue;
+  const resolvedNegativeChoiceValue = surveyConfig ? String((_negativeOption$id = negativeOption === null || negativeOption === void 0 ? void 0 : negativeOption.id) !== null && _negativeOption$id !== void 0 ? _negativeOption$id : '') : negativeChoiceValue;
+  const resolvedImprovementsQuestion = (_multiChoiceQ$questio = multiChoiceQ === null || multiChoiceQ === void 0 ? void 0 : multiChoiceQ.question) !== null && _multiChoiceQ$questio !== void 0 ? _multiChoiceQ$questio : improvementsQuestion;
+  const resolvedCheckboxOptions = (_multiChoiceQ$options = multiChoiceQ === null || multiChoiceQ === void 0 || (_multiChoiceQ$options2 = multiChoiceQ.options) === null || _multiChoiceQ$options2 === void 0 ? void 0 : _multiChoiceQ$options2.map(o => o.optionText)) !== null && _multiChoiceQ$options !== void 0 ? _multiChoiceQ$options : checkboxOptions;
+
+  // Show comment textarea only when category.getRemarks is true (or absent), or always for legacy
+  const showCommentSection = surveyConfig ? ((_surveyConfig$categor = surveyConfig.category) === null || _surveyConfig$categor === void 0 ? void 0 : _surveyConfig$categor.getRemarks) === true : true;
+  const [form] = _antd.Form.useForm();
+  const [showThankYou, setShowThankYou] = (0, _react.useState)(false);
+
+  // ── Legacy state (used when surveyConfig is absent) ──
+  const [choice, setChoice] = (0, _react.useState)('');
+  const [improvements, setImprovements] = (0, _react.useState)([]);
+  const [othersSpecify, setOthersSpecify] = (0, _react.useState)('');
+
+  // ── Multi-question state (used when surveyConfig is present) ──
+  // choicesState:       { [questionId]: selectedOptionId (string) }
+  // improvementsState:  { [questionId]: string[] }
+  // othersSpecifyState: { [questionId]: string }
+  const [choicesState, setChoicesState] = (0, _react.useState)({});
+  const [improvementsState, setImprovementsState] = (0, _react.useState)({});
+  const [othersSpecifyState, setOthersSpecifyState] = (0, _react.useState)({});
+  const userData = (0, _react.useMemo)(() => {
+    try {
+      return JSON.parse(localStorage.getItem(userDataStorageKey) || '{}');
+    } catch (_unused) {
+      return {};
+    }
+  }, [userDataStorageKey]);
+
+  // Helpers to get option IDs per question
+  const getPositiveOptionId = q => {
+    var _q$options$0$id, _q$options;
+    return String((_q$options$0$id = q === null || q === void 0 || (_q$options = q.options) === null || _q$options === void 0 || (_q$options = _q$options[0]) === null || _q$options === void 0 ? void 0 : _q$options.id) !== null && _q$options$0$id !== void 0 ? _q$options$0$id : '');
+  };
+  const getNegativeOptionId = q => {
+    var _q$options$1$id, _q$options2;
+    return String((_q$options$1$id = q === null || q === void 0 || (_q$options2 = q.options) === null || _q$options2 === void 0 || (_q$options2 = _q$options2[1]) === null || _q$options2 === void 0 ? void 0 : _q$options2.id) !== null && _q$options$1$id !== void 0 ? _q$options$1$id : '');
+  };
+
+  // True when ANY SINGLE_CHOICE question has its negative option selected
+  const anyNegativeSelected = singleChoiceQuestions.some(q => choicesState[q.id] === getNegativeOptionId(q));
+  const hasOthersSelected = improvements.includes(othersOptionValue);
+  const resetFormState = () => {
+    form.resetFields();
+    setChoice('');
+    setImprovements([]);
+    setOthersSpecify('');
+    setChoicesState({});
+    setImprovementsState({});
+    setOthersSpecifyState({});
+  };
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      resetFormState();
+      setShowThankYou(false);
+    }
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    if (!showThankYou) return;
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setShowThankYou(false);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [showThankYou]);
+
+  // ── Build payload for surveyConfig (multi-question) mode ──────────────────
+  const buildSurveyPayload = _ref => {
+    let {
+      comment,
+      consent
+    } = _ref;
+    const responses = [];
+    for (const q of (_surveyConfig$questio5 = surveyConfig === null || surveyConfig === void 0 ? void 0 : surveyConfig.questions) !== null && _surveyConfig$questio5 !== void 0 ? _surveyConfig$questio5 : []) {
+      var _surveyConfig$questio5;
+      if (q.questionType === 'SINGLE_CHOICE') {
+        const selectedOption = q.options.find(o => String(o.id) === choicesState[q.id]);
+        responses.push({
+          questionId: q.id,
+          questionType: q.questionType,
+          selectedOptions: selectedOption ? [selectedOption] : []
+        });
+      } else if (q.questionType === 'MULTI_CHOICE') {
+        const qImprovements = improvementsState[q.id] || [];
+        const selectedOptions = q.options.filter(o => qImprovements.includes(o.optionText));
+        const qOthersSpecify = othersSpecifyState[q.id] || '';
+        const hasOthers = qImprovements.includes(othersOptionValue);
+        responses.push(_objectSpread({
+          questionId: q.id,
+          questionType: q.questionType,
+          selectedOptions
+        }, hasOthers && qOthersSpecify ? {
+          othersSpecify: qOthersSpecify
+        } : {}));
+      }
+    }
+    return _objectSpread(_objectSpread({
+      category: surveyConfig.category,
+      responses
+    }, showCommentSection ? {
+      remarks: comment || ''
+    } : {}), {}, {
+      consent,
+      userData
+    });
+  };
+
+  // ── Legacy form-POST submission ───────────────────────────────────────────
+  const defaultSubmit = async _ref2 => {
+    let {
+      choiceValue,
+      comment
+    } = _ref2;
+    const endpoint = formConfig === null || formConfig === void 0 ? void 0 : formConfig.endpoint;
+    if (!endpoint) return;
+    const formBody = new URLSearchParams();
+    const improvementsArray = toArray(improvements);
+    const isNegativeChoice = choice === resolvedNegativeChoiceValue;
+    const hasOthers = improvementsArray.includes(othersOptionValue);
+    if (formConfig.choiceField) {
+      formBody.append(formConfig.choiceField, choiceValue);
+    }
+    if (isNegativeChoice && improvementsArray.length > 0 && formConfig.improvementsField) {
+      improvementsArray.forEach(improvement => {
+        if (improvement !== othersOptionValue) {
+          formBody.append(formConfig.improvementsField, improvement);
+        }
+      });
+      if (hasOthers && othersSpecify) {
+        if (formConfig.othersSpecifyField) {
+          formBody.append(formConfig.othersSpecifyField, othersSpecify);
+        }
+        formBody.append(formConfig.improvementsField, '__other_option__');
+      }
+    }
+    if (formConfig.commentField) {
+      formBody.append(formConfig.commentField, comment || '');
+    }
+    if (formConfig.emailidField) {
+      formBody.append(formConfig.emailidField, (userData === null || userData === void 0 ? void 0 : userData.emailId) || '');
+    }
+    if (formConfig.mobileNumField) {
+      formBody.append(formConfig.mobileNumField, (userData === null || userData === void 0 ? void 0 : userData.mobileNum) || '');
+    }
+    await fetch(endpoint, {
+      method: 'POST',
+      mode: 'no-cors',
+      body: formBody
+    });
+  };
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const {
+        comment
+      } = values;
+
+      // Human-readable label for the selected choice (legacy path only)
+      const choiceValue = choice === resolvedPositiveChoiceValue ? resolvedPositiveButtonLabel : choice === resolvedNegativeChoiceValue ? resolvedNegativeButtonLabel : choice || '';
+      const payload = surveyConfig ? buildSurveyPayload({
+        comment,
+        consent: !!(values !== null && values !== void 0 && values.consent)
+      }) : {
+        choice,
+        choiceValue,
+        improvements: toArray(improvements),
+        othersSpecify,
+        comment: comment || '',
+        consent: !!(values !== null && values !== void 0 && values.consent),
+        userData
+      };
+      if (onSubmit) {
+        await onSubmit(payload);
+      } else {
+        await defaultSubmit({
+          choiceValue,
+          comment
+        });
+      }
+      resetFormState();
+      if (showThankYouState) {
+        setShowThankYou(true);
+      } else {
+        setVisible(false);
+      }
+      if (onSuccess) {
+        onSuccess(payload);
+      }
+    } catch (error) {
+      if (error !== null && error !== void 0 && error.errorFields) {
+        var _error$errorFields$;
+        const firstErrorName = (_error$errorFields$ = error.errorFields[0]) === null || _error$errorFields$ === void 0 ? void 0 : _error$errorFields$.name;
+        if (firstErrorName) {
+          form.scrollToField(firstErrorName, {
+            behavior: 'smooth',
+            block: 'center'
+          });
+        }
+        return;
+      }
+      if (onError) onError(error);
+    }
+  };
+
+  // ── Legacy handlers ───────────────────────────────────────────────────────
+  const handleChoiceChange = newChoice => {
+    setChoice(newChoice);
+    if (newChoice === resolvedPositiveChoiceValue) {
+      setImprovements([]);
+      setOthersSpecify('');
+      form.setFieldsValue({
+        choice: newChoice,
+        improvements: [],
+        othersSpecify: ''
+      });
+      return;
+    }
+    form.setFieldsValue({
+      choice: newChoice
+    });
+  };
+  const handleImprovementChange = (option, checked) => {
+    const next = checked ? Array.from(new Set([...improvements, option])) : improvements.filter(item => item !== option);
+    setImprovements(next);
+    form.setFieldsValue({
+      improvements: next
+    });
+    if (option === othersOptionValue && !checked) {
+      setOthersSpecify('');
+      form.setFieldsValue({
+        othersSpecify: ''
+      });
+    }
+  };
+  const handleOthersSpecifyChange = event => {
+    var _event$target;
+    const nextValue = (event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '';
+    setOthersSpecify(nextValue);
+    form.setFieldsValue({
+      othersSpecify: nextValue
+    });
+  };
+
+  // ── Multi-question handlers ───────────────────────────────────────────────
+  const handleMultiChoiceChange = (questionId, positiveOptionId, newChoice) => {
+    setChoicesState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      [questionId]: newChoice
+    }));
+    form.setFieldsValue({
+      ["choice_".concat(questionId)]: newChoice
+    });
+
+    // When switching to positive, clear improvements/othersSpecify for all MULTI_CHOICE questions
+    if (newChoice === positiveOptionId) {
+      const formUpdate = {};
+      setImprovementsState(prev => {
+        const updated = _objectSpread({}, prev);
+        multiChoiceQuestions.forEach(q => {
+          updated[q.id] = [];
+          formUpdate["improvements_".concat(q.id)] = [];
+          formUpdate["othersSpecify_".concat(q.id)] = '';
+        });
+        return updated;
+      });
+      setOthersSpecifyState(prev => {
+        const updated = _objectSpread({}, prev);
+        multiChoiceQuestions.forEach(q => {
+          updated[q.id] = '';
+        });
+        return updated;
+      });
+      form.setFieldsValue(formUpdate);
+    }
+  };
+  const handleMultiImprovementChange = (questionId, option, checked) => {
+    const current = improvementsState[questionId] || [];
+    const next = checked ? Array.from(new Set([...current, option])) : current.filter(item => item !== option);
+    setImprovementsState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      [questionId]: next
+    }));
+    form.setFieldsValue({
+      ["improvements_".concat(questionId)]: next
+    });
+    if (option === othersOptionValue && !checked) {
+      setOthersSpecifyState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        [questionId]: ''
+      }));
+      form.setFieldsValue({
+        ["othersSpecify_".concat(questionId)]: ''
+      });
+    }
+  };
+  const handleMultiOthersSpecifyChange = (questionId, event) => {
+    var _event$target2;
+    const nextValue = (event === null || event === void 0 || (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value) || '';
+    setOthersSpecifyState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      [questionId]: nextValue
+    }));
+    form.setFieldsValue({
+      ["othersSpecify_".concat(questionId)]: nextValue
+    });
+  };
+  const handleClose = () => {
+    setVisible(false);
+    resetFormState();
+  };
+
+  // Comment label/placeholder: driven by first SINGLE_CHOICE question in both modes
+  const firstChoice = surveyConfig ? (_choicesState$singleC = choicesState[singleChoiceQ === null || singleChoiceQ === void 0 ? void 0 : singleChoiceQ.id]) !== null && _choicesState$singleC !== void 0 ? _choicesState$singleC : '' : choice;
+  const firstNegativeId = surveyConfig ? getNegativeOptionId(singleChoiceQ) : resolvedNegativeChoiceValue;
+  const firstPositiveId = surveyConfig ? getPositiveOptionId(singleChoiceQ) : resolvedPositiveChoiceValue;
+  const resolvedCommentLabel = firstChoice === firstNegativeId ? negativeCommentLabel || commentLabel : firstChoice === firstPositiveId ? positiveCommentLabel || commentLabel : commentLabel;
+  const resolvedCommentPlaceholder = firstChoice === firstNegativeId ? negativeCommentPlaceholder || commentPlaceholder : firstChoice === firstPositiveId ? positiveCommentPlaceholder || commentPlaceholder : commentPlaceholder;
+
+  // ── Render a single SINGLE_CHOICE question ────────────────────────────────
+  const renderSingleChoiceQuestion = q => {
+    var _q$options3, _q$options4, _positiveOpt$id, _negativeOpt$id, _q$question, _positiveOpt$optionTe, _negativeOpt$optionTe;
+    const positiveOpt = (_q$options3 = q.options) === null || _q$options3 === void 0 ? void 0 : _q$options3[0];
+    const negativeOpt = (_q$options4 = q.options) === null || _q$options4 === void 0 ? void 0 : _q$options4[1];
+    const positiveId = String((_positiveOpt$id = positiveOpt === null || positiveOpt === void 0 ? void 0 : positiveOpt.id) !== null && _positiveOpt$id !== void 0 ? _positiveOpt$id : '');
+    const negativeId = String((_negativeOpt$id = negativeOpt === null || negativeOpt === void 0 ? void 0 : negativeOpt.id) !== null && _negativeOpt$id !== void 0 ? _negativeOpt$id : '');
+    const currentChoice = choicesState[q.id] || '';
+    const isRequired = q.optional !== true;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: q.id,
+      className: "margin-bottom-32"
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-t2-700"
+    }, (_q$question = q.question) !== null && _q$question !== void 0 ? _q$question : question)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "surveyButtonSection"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => handleMultiChoiceChange(q.id, positiveId, positiveId),
+      className: "surveyBtn ".concat(currentChoice === positiveId ? 'selected' : '')
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _ThumbUpOutlined.default,
+      size: 24
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b1-400"
+    }, (_positiveOpt$optionTe = positiveOpt === null || positiveOpt === void 0 ? void 0 : positiveOpt.optionText) !== null && _positiveOpt$optionTe !== void 0 ? _positiveOpt$optionTe : positiveButtonLabel)), /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => handleMultiChoiceChange(q.id, positiveId, negativeId),
+      className: "surveyBtn ".concat(currentChoice === negativeId ? 'selected' : '')
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _ThumbDownOutlined.default,
+      size: 24
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b1-400"
+    }, (_negativeOpt$optionTe = negativeOpt === null || negativeOpt === void 0 ? void 0 : negativeOpt.optionText) !== null && _negativeOpt$optionTe !== void 0 ? _negativeOpt$optionTe : negativeButtonLabel))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      name: "choice_".concat(q.id),
+      initialValue: "",
+      rules: [{
+        required: isRequired,
+        message: mandatoryQuestionError
+      }],
+      style: {
+        marginBottom: 0
+      }
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "hidden"
+    })));
+  };
+
+  // ── Render a single MULTI_CHOICE question ─────────────────────────────────
+  const renderMultiChoiceQuestion = q => {
+    var _q$options$map, _q$options5, _q$question2;
+    const qImprovements = improvementsState[q.id] || [];
+    const qOthersSpecify = othersSpecifyState[q.id] || '';
+    const hasQOthers = qImprovements.includes(othersOptionValue);
+    const checkboxOpts = (_q$options$map = (_q$options5 = q.options) === null || _q$options5 === void 0 ? void 0 : _q$options5.map(o => o.optionText)) !== null && _q$options$map !== void 0 ? _q$options$map : [];
+    const isRequired = q.optional !== true;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: q.id
+    }, checkboxOpts.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-32"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-8"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      typography: "type-t2-700"
+    }, (_q$question2 = q.question) !== null && _q$question2 !== void 0 ? _q$question2 : improvementsQuestion)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      name: "improvements_".concat(q.id),
+      initialValue: [],
+      rules: [{
+        required: isRequired,
+        message: mandatoryQuestionError
+      }]
+    }, /*#__PURE__*/_react.default.createElement("div", null, checkboxOpts.map(option => /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-16",
+      key: option
+    }, /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+      label: option,
+      size: "large",
+      value: option,
+      checked: qImprovements.includes(option),
+      onChange: event => handleMultiImprovementChange(q.id, option, event.target.checked)
+    })))))), hasQOthers && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-32"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-8"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      typography: "type-t2-700"
+    }, othersSpecifyLabel)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      name: "othersSpecify_".concat(q.id),
+      initialValue: "",
+      rules: [{
+        required: true,
+        message: mandatoryQuestionError
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
+      placeholder: othersSpecifyPlaceholder,
+      value: qOthersSpecify,
+      onChange: e => handleMultiOthersSpecifyChange(q.id, e)
+    }))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_FeedbackWidget1Style.FeedbackSection, null, /*#__PURE__*/_react.default.createElement(_FeedbackWidget1Style.GlobalStyle, null), !visible && !hideButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: "feedback-button"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "feedback-btn",
+    onClick: () => setVisible(true)
+  }, feedbackButtonLabel)), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    className: "surveyPopupUniqueModal",
+    open: visible,
+    onCancel: handleClose,
+    centered: false,
+    footer: null,
+    width: modalWidth,
+    destroyOnClose: true
+  }, showThankYou ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "thankYouContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "thankYouContent"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "thankYouIcon"
+  }, /*#__PURE__*/_react.default.createElement(_CheckCircle.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-16"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500"
+  }, thankYouTitle)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400"
+  }, thankYouMessage))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "formScrollSec"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500"
+  }, title), subTitle ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400",
+    color: "secondary-content"
+  }, subTitle) : null), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form
+  }, surveyConfig ?
+  /*#__PURE__*/
+  // ── Multi-question mode (1 or more questions of each type) ──
+  _react.default.createElement(_react.default.Fragment, null, singleChoiceQuestions.map(q => renderSingleChoiceQuestion(q)), anyNegativeSelected && multiChoiceQuestions.map(q => renderMultiChoiceQuestion(q))) :
+  /*#__PURE__*/
+  // ── Legacy / no-surveyConfig mode ──
+  _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700"
+  }, resolvedQuestion)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "surveyButtonSection"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => handleChoiceChange(resolvedPositiveChoiceValue),
+    className: "surveyBtn ".concat(choice === resolvedPositiveChoiceValue ? 'selected' : '')
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ThumbUpOutlined.default,
+    size: 24
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400"
+  }, resolvedPositiveButtonLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => handleChoiceChange(resolvedNegativeChoiceValue),
+    className: "surveyBtn ".concat(choice === resolvedNegativeChoiceValue ? 'selected' : '')
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ThumbDownOutlined.default,
+    size: 24
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400"
+  }, resolvedNegativeButtonLabel))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "choice",
+    initialValue: "",
+    rules: [{
+      required: true,
+      message: mandatoryQuestionError
+    }],
+    style: {
+      marginBottom: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "hidden"
+  }))), choice === resolvedNegativeChoiceValue && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, resolvedCheckboxOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, resolvedImprovementsQuestion)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "improvements",
+    initialValue: [],
+    rules: [{
+      required: true,
+      message: mandatoryQuestionError
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", null, resolvedCheckboxOptions.map(option => /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-16",
+    key: option
+  }, /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+    label: option,
+    size: "large",
+    value: option,
+    checked: improvements.includes(option),
+    onChange: event => handleImprovementChange(option, event.target.checked)
+  })))))), hasOthersSelected && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, othersSpecifyLabel)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "othersSpecify",
+    initialValue: "",
+    rules: [{
+      required: true,
+      message: mandatoryQuestionError
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
+    placeholder: othersSpecifyPlaceholder,
+    value: othersSpecify,
+    onChange: handleOthersSpecifyChange
+  }))))), showCommentSection && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, resolvedCommentLabel)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "comment",
+    noStyle: true
+  }, /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
+    placeholder: resolvedCommentPlaceholder,
+    maxLength: 199
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "consent",
+    valuePropName: "checked",
+    rules: [{
+      validator: (_, value) => value ? Promise.resolve() : Promise.reject(new Error(consentError))
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-8"
+  }, /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+    label: consentLabel,
+    name: "consent",
+    size: "large"
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerFeedback"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: submitButtonLabel,
+    size: "large",
+    onClick: handleSubmit
+  })))));
+}
+var _default = exports.default = FeedbackWidget1;

package/build/widgets/oa-widget-feedback/FeedbackWidget1Style.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStyle = exports.FeedbackSection = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const FeedbackSection = exports.FeedbackSection = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .feedback-button {\n    position: fixed;\n    top: 50%;\n    right: -44px;\n    transform: translateY(-50%);\n    transition: transform 0.3s ease;\n    z-index: 9999;\n  }\n\n  .feedback-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 130px;\n    height: 50px;\n    background-color: #212121;\n    color: #fff;\n    border: none;\n    cursor: pointer;\n    padding: 12px 16px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n    rotate: -90deg;\n    font-size: 18px;\n    font-family: Roboto, sans-serif;\n    font-weight: 500;\n    transition: background-color 0.3s ease;\n  }\n"])));
+const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.surveyPopupUniqueModal {\n  position: absolute;\n  top: auto;\n  right: 20px;\n  bottom: 24px;\n  left: auto;\n  max-height: calc(100vh - 48px);\n}\n\n.surveyPopupUniqueModal .ant-modal-close-x {width: auto; height: auto;}\n\n.formScrollSec .ant-checkbox-wrapper{display: flex; align-items: center;}\n.formScrollSec .ant-form-item-children{display: flex; flex-direction: column;}\n\n.formScrollSec {\n  height: auto;\n  max-height: 500px;\n  padding-right: 24px;\n  padding-bottom: 80px;\n  margin-right: 12px;\n  overflow-y: auto;\n}\n\n@media screen and (max-height: 680px) {\n  .formScrollSec {\n    height: calc(100vh - 150px);\n    max-height: 480px;\n    margin-right: 8px;\n  }\n\n  .surveyPopupUniqueModal .thankYouContainer {\n    height: calc(100vh - 150px);\n    max-height: 480px;\n  }\n\n  .surveyPopupUniqueModal {\n    bottom: 5px;\n    top: 5px;\n    max-height: calc(100vh - 10px);\n  }\n\n.surveyPopupUniqueModal .ant-modal-content {\n    padding: 32px 16px 0 16px;\n  }\n}\n\n.formScrollSec .ant-form-item-control{line-height: normal;}\n.surveyPopupUniqueModal .ant-form-item-control-input{min-height: 0;}\n.formScrollSec::-webkit-scrollbar {width: 5px;}\n.formScrollSec::-webkit-scrollbar-track {background: #fff;}\n.formScrollSec::-webkit-scrollbar-thumb {background: #888; border-radius: 2px;}\n.formScrollSec::-webkit-scrollbar-thumb:hover {background: #555;}\n\n.surveyButtonSection .surveyBtn {\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  flex: 1 1 0;\n  border: 1px solid #e0e0e0;\n  background: #fff;\n  height: 48px;\n  cursor: pointer;\n  padding: 0 16px;\n  min-width: 0;\n}\n\n.surveyButtonSection .surveyBtn .MuiSvgIcon-root {\n  flex-shrink: 0;\n}\n\n.feedback-button.hidden {\n  display: none;\n}\n\n.surveyButtonSection .selected {\n  border: 1px solid #014fc5 !important;\n  background: #014fc5 !important;\n  color: #fff !important;\n}\n\n.surveyPopupUniqueModal .thankYouContainer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 540px;\n  padding: 20px;\n  text-align: center;\n  font-family: Roboto, sans-serif;\n}\n\n.thankYouContent {\n  display: inline-grid;\n}\n\n.thankYouIcon svg.MuiSvgIcon-root {\n  font-size: 64px;\n  color: green;\n}\n\n.surveyPopupUniqueModal.ant-modal {\n  padding-bottom: 0;\n}\n\n.surveyPopupUniqueModal .ant-modal-content {\n  padding: 56px 0 0 40px;\n}\n\n.surveyPopupUniqueModal .ant-modal-body {\n  overflow: hidden;\n}\n\n.surveyPopupUniqueModal .ant-modal-body > div {\n  padding: 0;\n}\n\n.surveyPopupUniqueModal .ant-modal-content {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.footerFeedback {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-radius: 0 0 12px 12px;\n  padding: 16px 24px 16px 0;\n  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.14);\n  display: flex;\n  justify-content: flex-end;\n  background: #fff;\n  z-index: 1;\n  box-sizing: border-box;\n}\n\n.footerFeedback button{width: auto;}\n\n.surveyButtonSection {\n  margin-top: 8px;\n  display: flex;\n  gap: 16px;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n@media screen and (max-width: 600px) {\n  .surveyPopupUniqueModal .ant-modal-body {\n    max-height: 90vh;\n    overflow: auto;\n    padding-right: 0;\n    padding-bottom: 80px;\n  }\n\n  .formScrollSec {\n    margin-right: 0;\n    padding-right: 12px;\n    padding-bottom: 0;\n  }\n\n  .surveyPopupUniqueModal.ant-modal {\n    width: 100% !important;\n    margin: 0 auto !important;\n    max-width: none !important;\n    position: absolute;\n    top: auto;\n    bottom: 40px;\n    padding-bottom: 0;\n    right: 0;\n  }\n\n  .surveyPopupUniqueModal .ant-modal-content {\n    padding: 56px 16px 0 16px;\n  }\n\n  .footerFeedback {\n    border-radius: 0;\n    padding: 16px;\n    margin: 0;\n    width: 100%;\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 1;\n    background: #fff;\n  }\n\n  .footerFeedback button {\n    width: 100%;\n  }\n\n  .surveyButtonSection {\n    gap: 12px;\n  }\n\n  .surveyButtonSection .surveyBtn {\n    padding: 0 12px;\n  }\n}\n"])));

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

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2; // styles.js
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n    height: auto;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .logoContainer {\n    padding: 12px;\n    display: flex;\n    justify-content: space-between;\n    height: 110px;\n    width: 220px;\n    align-items: center;\n    margin: 0 0 16px 0;\n  }\n\n  .logoutDiv {\n    display: flex;\n    flex-direction: row;\n    margin: 48px 0 0 16px;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .logo-mobile-height {\n    height: auto;\n  }\n\n  // .logoContainer em {\n  //   width: 1px;\n  //   background: #e0e0e0;\n  // }\n  // .logoContainer img {\n  //   height: 32px;\n  // }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n\n  /* Regular menu items */\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  /* SubMenu title styling - this is the parent item - same size as regular items */\n  .ant-menu-submenu-title {\n    padding: 24px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n    display: flex;\n    align-items: center;\n  }\n\n  /* SubMenu items - these are the children - should be plain text */\n  .ant-menu-submenu .ant-menu-item {\n    margin: 8px 0;\n    padding: 8px 24px;\n    border-radius: 0;\n    background: transparent;\n    border: none;\n    margin-left: 16px;\n    color: #666;\n    font-size: 14px;\n    height: auto;\n    line-height: 1.4;\n  }\n\n  /* Add extra spacing for last nested item */\n  .ant-menu-submenu .ant-menu-item:last-child {\n    margin-bottom: 12px;\n  }\n\n  /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n  /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;      \n  } */\n\n  /* NEW: Only make parent blue when it contains a selected child */\n  .ant-menu-submenu-open:has(.ant-menu-item-selected)\n    > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;\n  }\n\n  /* Fallback for browsers that don't support :has() */\n  .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #fff;\n    color: #000;\n    padding: 24px;\n  }\n\n  /* SubMenu title content */\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ant-menu-submenu-title .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Add styling to span elements inside SubMenu title content */\n  .ant-menu-submenu-title .ant-menu-title-content span {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* Selected states */\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu selected item - should be bold black when selected */\n  .ant-menu-submenu .ant-menu-item-selected {\n    background: transparent;\n    color: #000;\n    font-weight: bold;\n    border-radius: 0;\n  }\n\n  /* Hover effects */\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu title hover - should be blue on hover */\n  .ant-menu-submenu-title:hover {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  /* Nested items hover - should be bold black when hovered */\n  .ant-menu-submenu .ant-menu-item:hover {\n    background: transparent !important;\n    color: #000 !important;\n    font-weight: bold !important;\n    border-radius: 0;\n  }\n\n  /* Make Orders parent blue when hovering over submenu items */\n  .ant-menu-submenu:hover .ant-menu-submenu-title {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n\n  /* SubMenu arrow styling */\n  .ant-menu-submenu-arrow {\n    color: inherit;\n  }\n\n  /* SubMenu content area */\n  .ant-menu-sub {\n    background: transparent !important;\n    padding: 8px 0;\n  }\n\n  /* Remove default SubMenu styling */\n  .ant-menu-submenu .ant-menu-sub {\n    background: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  .footerLogoSection {\n    margin-top: auto;\n    margin-bottom: 40px;\n    padding: 0 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 172px;\n    height: 75px;\n  }\n\n  .footerLogoContainer {\n    display: flex;\n    align-items: center;\n  }\n\n  .footerLogo {\n    width: 172px;\n    height: 43px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 0 16px;\n      height: auto;\n      display: block;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n      width: 100%;\n      height: 80px;\n    }\n\n    .logo-mobile-height {\n      height: 56px;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n    .layoutHeadingPage * {\n      max-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n"])));
+const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n    height: auto;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .logoContainer {\n    padding: 12px;\n    display: flex;\n    justify-content: space-between;\n    height: 110px;\n    width: 220px;\n    align-items: center;\n    margin: 0 0 16px 0;\n  }\n\n  .logoutDiv {\n    display: flex;\n    flex-direction: row;\n    margin: 48px 0 0 16px;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .logo-mobile-height {\n    height: auto;\n    max-height: 130px;\n  }\n\n  // .logoContainer em {\n  //   width: 1px;\n  //   background: #e0e0e0;\n  // }\n  // .logoContainer img {\n  //   height: 32px;\n  // }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n\n  /* Regular menu items */\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  /* SubMenu title styling - this is the parent item - same size as regular items */\n  .ant-menu-submenu-title {\n    padding: 24px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n    display: flex;\n    align-items: center;\n  }\n\n  /* SubMenu items - these are the children - should be plain text */\n  .ant-menu-submenu .ant-menu-item {\n    margin: 8px 0;\n    padding: 8px 24px;\n    border-radius: 0;\n    background: transparent;\n    border: none;\n    margin-left: 16px;\n    color: #666;\n    font-size: 14px;\n    height: auto;\n    line-height: 1.4;\n  }\n\n  /* Add extra spacing for last nested item */\n  .ant-menu-submenu .ant-menu-item:last-child {\n    margin-bottom: 12px;\n  }\n\n  /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n  /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;      \n  } */\n\n  /* NEW: Only make parent blue when it contains a selected child */\n  .ant-menu-submenu-open:has(.ant-menu-item-selected)\n    > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;\n  }\n\n  /* Fallback for browsers that don't support :has() */\n  .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #fff;\n    color: #000;\n    padding: 24px;\n  }\n\n  /* SubMenu title content */\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ant-menu-submenu-title .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Add styling to span elements inside SubMenu title content */\n  .ant-menu-submenu-title .ant-menu-title-content span {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* Selected states */\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu selected item - should be bold black when selected */\n  .ant-menu-submenu .ant-menu-item-selected {\n    background: transparent;\n    color: #000;\n    font-weight: bold;\n    border-radius: 0;\n  }\n\n  /* Hover effects */\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu title hover - should be blue on hover */\n  .ant-menu-submenu-title:hover {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  /* Nested items hover - should be bold black when hovered */\n  .ant-menu-submenu .ant-menu-item:hover {\n    background: transparent !important;\n    color: #000 !important;\n    font-weight: bold !important;\n    border-radius: 0;\n  }\n\n  /* Make Orders parent blue when hovering over submenu items */\n  .ant-menu-submenu:hover .ant-menu-submenu-title {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n\n  /* SubMenu arrow styling */\n  .ant-menu-submenu-arrow {\n    color: inherit;\n  }\n\n  /* SubMenu content area */\n  .ant-menu-sub {\n    background: transparent !important;\n    padding: 8px 0;\n  }\n\n  /* Remove default SubMenu styling */\n  .ant-menu-submenu .ant-menu-sub {\n    background: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  .footerLogoSection {\n    margin-top: auto;\n    margin-bottom: 40px;\n    padding: 0 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 172px;\n    height: 75px;\n  }\n\n  .footerLogoContainer {\n    display: flex;\n    align-items: center;\n  }\n\n  .footerLogo {\n    width: 172px;\n    height: 43px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 0 16px;\n      height: auto;\n      display: block;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n      width: 100%;\n      height: 80px;\n    }\n\n    .logo-mobile-height {\n      height: 56px;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n    .layoutHeadingPage * {\n      max-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n"])));
 const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var _default = exports.default = OalayoutStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.384",
+  "version": "0.18.386",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",