c4089f2226
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>
67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<script>
|
|
import CustomButton from 'shared/components/Button.vue';
|
|
import TextArea from 'shared/components/TextArea.vue';
|
|
import Spinner from 'shared/components/Spinner.vue';
|
|
|
|
export default {
|
|
name: 'Feedback',
|
|
components: {
|
|
CustomButton,
|
|
TextArea,
|
|
Spinner,
|
|
},
|
|
props: {
|
|
isUpdating: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isButtonDisabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
selectedRating: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
},
|
|
emits: ['sendFeedback'],
|
|
data() {
|
|
return {
|
|
feedback: '',
|
|
};
|
|
},
|
|
computed: {
|
|
isSubmitDisabled() {
|
|
return (
|
|
this.isButtonDisabled || !this.selectedRating || !this.feedback.trim()
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
if (this.isSubmitDisabled) return;
|
|
this.$emit('sendFeedback', this.feedback);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-6">
|
|
<label class="text-base font-medium text-n-slate-12">
|
|
{{ $t('SURVEY.FEEDBACK.LABEL') }}
|
|
</label>
|
|
<TextArea
|
|
v-model="feedback"
|
|
class="my-5"
|
|
:placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
|
|
/>
|
|
<div class="flex items-center float-right font-medium">
|
|
<CustomButton :disabled="isSubmitDisabled" @click="onClick">
|
|
<Spinner v-if="isUpdating" class="p-0" />
|
|
{{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
|
|
</CustomButton>
|
|
</div>
|
|
</div>
|
|
</template>
|