From c4089f2226023d2dd6ba6af3bdbf37ef530a2d69 Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Mon, 18 May 2026 20:16:30 +0400 Subject: [PATCH] fix(csat): Require confirmation before submitting rating (#14450) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Customers reported that the CSAT survey was recording their rating the instant they tapped a star — leaving no chance to correct an accidental pick. This change lets the customer freely change their selection until they actually submit the comment/feedback. The rating still saves on click (so we don't lose ratings when a customer never types a comment), but it stays editable until the comment form is submitted. Once that happens, the rating locks. The flow on both surfaces: - Customer taps a star/emoji → rating is saved. - Customer taps a different star/emoji → previous save is overwritten with the new value. - Customer types a comment and submits → latest rating + comment are saved together. - After that submit, the rating is locked and can't be changed. Two surfaces are updated: - **Standalone survey page** (`/survey/responses/:uuid`) — the rating buttons remain re-tappable until the Feedback form is submitted; once submitted, both rating and feedback lock. - **In-conversation widget CSAT** — same behavior, the inline arrow-submit button on the feedback form is the locking action. In-flight guards prevent a race where the customer changes their pick mid-network-call (raised by the codex review on the earlier revision): while a save is in flight, the rating controls are temporarily disabled so the request and the displayed selection can't diverge. ## Closes - https://linear.app/chatwoot/issue/CW-7061/csat-star-rating-submits-on-first-click-needs-confirmation-step ## How to test **Standalone survey page** 1. Enable CSAT on any inbox (Settings → Inboxes → Configuration → CSAT survey). 2. Resolve a conversation in that inbox so a CSAT message is generated. 3. Open the survey URL: `{FRONTEND_URL}/survey/responses/{conversation.uuid}` (easiest: `bundle exec rails runner 'puts Conversation.joins(:messages).where(messages: { content_type: "input_csat" }).last.csat_survey_link'`). 4. Tap a star/emoji — confirm the rating saves (Network panel shows a PUT to `/public/api/v1/csat_survey/{uuid}`). 5. Tap a different star/emoji — confirm a second PUT goes out with the new value; the latest selection is reflected. 6. Type a comment and hit Submit feedback — confirm rating + feedback persist; both controls now lock. 7. Reload the page — the locked state is rehydrated correctly. **Widget CSAT** 1. From an inbox with CSAT enabled, resolve a conversation that has an active widget session. 2. In the widget, the CSAT card appears with stars/emojis + the inline comment box. 3. Tap a star/emoji — confirm a PATCH goes out and the selection visibly updates. 4. Tap different stars/emojis — confirm each overrides the previous save. 5. Type a comment and click the arrow — rating + comment submit together; stars lock. Both display types (emoji and 5-star) should behave consistently. ## What changed - `app/javascript/survey/views/Response.vue` — `selectRating()` saves on every tap and short-circuits while a save is in flight (or after feedback was submitted). Rating components are disabled by `isFeedbackSubmitted || isUpdating` so the lock follows the feedback submission, not the first rating tap. - `app/javascript/survey/components/Rating.vue` — new `isDisabled` prop. The disabled / hover styling and click guard key off it instead of the presence of `selectedRating`, so emojis stay re-clickable until the feedback step locks them. - `app/javascript/shared/components/CustomerSatisfaction.vue` — same shape for the widget: rating click auto-submits and re-clicks override the previous save; controls disabled while a submit is in flight; emoji-button styling and the inline `StarRating` lock on `isFeedbackSubmitted || isUpdating`. --------- Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com> Co-authored-by: Sony Mathew <2040199+sony-mathew@users.noreply.github.com> --- .../components/CustomerSatisfaction.vue | 14 +++++++++---- app/javascript/survey/components/Feedback.vue | 18 ++++++++++++++++- app/javascript/survey/components/Rating.vue | 9 +++++++-- app/javascript/survey/views/Response.vue | 20 ++++++++++++++----- 4 files changed, 49 insertions(+), 12 deletions(-) diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue index 10792aca2..799ec772c 100644 --- a/app/javascript/shared/components/CustomerSatisfaction.vue +++ b/app/javascript/shared/components/CustomerSatisfaction.vue @@ -49,7 +49,9 @@ export default { ?.feedback_message; }, isButtonDisabled() { - return !(this.selectedRating && this.feedback); + if (!(this.selectedRating && this.feedback)) return true; + if (this.isUpdating) return true; + return false; }, textColor() { return getContrastingTextColor(this.widgetColor); @@ -79,14 +81,16 @@ export default { methods: { buttonClass(rating) { + const isLocked = this.isFeedbackSubmitted || this.isUpdating; return [ { selected: rating.value === this.selectedRating }, - { disabled: this.isRatingSubmitted }, - { hover: this.isRatingSubmitted }, + { disabled: isLocked }, + { hover: isLocked }, 'emoji-button', ]; }, async onSubmit() { + if (this.isUpdating) return; this.isUpdating = true; try { await this.$store.dispatch('message/update', { @@ -106,10 +110,12 @@ export default { }, selectRating(rating) { + if (this.isFeedbackSubmitted || this.isUpdating) return; this.selectedRating = rating.value; this.onSubmit(); }, selectStarRating(value) { + if (this.isFeedbackSubmitted || this.isUpdating) return; this.selectedRating = value; this.onSubmit(); }, @@ -138,7 +144,7 @@ export default {
- + {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }} diff --git a/app/javascript/survey/components/Rating.vue b/app/javascript/survey/components/Rating.vue index 25467706d..db2fd8b75 100644 --- a/app/javascript/survey/components/Rating.vue +++ b/app/javascript/survey/components/Rating.vue @@ -7,6 +7,10 @@ export default { type: Number, default: null, }, + isDisabled: { + type: Boolean, + default: false, + }, }, emits: ['selectRating'], data() { @@ -19,12 +23,13 @@ export default { buttonClass(rating) { return [ { selected: rating.value === this.selectedRating }, - { disabled: !!this.selectedRating }, - { hover: !!this.selectedRating }, + { disabled: this.isDisabled }, + { hover: this.isDisabled }, 'emoji-button shadow-none text-3xl lg:text-4xl outline-none mr-8', ]; }, onClick(rating) { + if (this.isDisabled) return; this.$emit('selectRating', rating.value); }, }, diff --git a/app/javascript/survey/views/Response.vue b/app/javascript/survey/views/Response.vue index 878dd7c9d..38fc4c66e 100644 --- a/app/javascript/survey/views/Response.vue +++ b/app/javascript/survey/views/Response.vue @@ -27,6 +27,7 @@ export default { errorMessage: null, selectedRating: null, feedbackMessage: '', + hasSubmittedFeedback: false, isUpdating: false, logo: '', inboxName: '', @@ -43,10 +44,14 @@ export default { return this.surveyDetails && this.surveyDetails.rating; }, isFeedbackSubmitted() { - return this.surveyDetails && this.surveyDetails.feedback_message; + return ( + this.hasSubmittedFeedback || !!this.surveyDetails?.feedback_message + ); }, isButtonDisabled() { - return !(this.selectedRating && this.feedback); + if (!this.selectedRating) return true; + if (this.isUpdating) return true; + return false; }, isEmojiType() { return this.displayType === CSAT_DISPLAY_TYPES.EMOJI; @@ -78,12 +83,13 @@ export default { }, methods: { selectRating(rating) { + if (this.isFeedbackSubmitted || this.isUpdating) return; this.selectedRating = rating; this.updateSurveyDetails(); }, sendFeedback(message) { this.feedbackMessage = message; - this.updateSurveyDetails(); + this.updateSurveyDetails({ markFeedbackSubmitted: true }); }, async getSurveyDetails() { this.isLoading = true; @@ -106,7 +112,7 @@ export default { this.isLoading = false; } }, - async updateSurveyDetails() { + async updateSurveyDetails({ markFeedbackSubmitted = false } = {}) { this.isUpdating = true; try { const data = { @@ -127,6 +133,9 @@ export default { rating: this.selectedRating, feedback_message: this.feedbackMessage, }; + if (markFeedbackSubmitted) { + this.hasSubmittedFeedback = true; + } } catch (error) { const errorMessage = error?.response?.data?.error; this.errorMessage = errorMessage || this.$t('SURVEY.API.ERROR_MESSAGE'); @@ -179,12 +188,13 @@ export default {