Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ResponseForm from './ResponseForm.vue';
+
+const props = defineProps({
+  selectedResponse: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+});
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const dialogRef = ref(null);
+const responseForm = ref(null);
+
+const updateResponse = responseDetails =>
+  store.dispatch('captainResponses/update', {
+    id: props.selectedResponse.id,
+    ...responseDetails,
+  });
+
+const i18nKey = computed(() => `CAPTAIN.RESPONSES.${props.type.toUpperCase()}`);
+
+const createResponse = responseDetails =>
+  store.dispatch('captainResponses/create', responseDetails);
+
+const handleSubmit = async updatedResponse => {
+  try {
+    if (props.type === 'edit') {
+      await updateResponse({
+        ...updatedResponse,
+        assistant_id: route.params.assistantId,
+      });
+    } else {
+      await createResponse({
+        ...updatedResponse,
+        assistant_id: route.params.assistantId,
+      });
+    }
+    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleCancel = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="$t(`${i18nKey}.TITLE`)"
+    :description="$t('CAPTAIN.RESPONSES.FORM_DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="handleClose"
+  >
+    <ResponseForm
+      ref="responseForm"
+      :mode="type"
+      :response="selectedResponse"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+    <template #footer />
+  </Dialog>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/LimitBanner.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useCaptain } from 'dashboard/composables/useCaptain';
+import { useRouter } from 'vue-router';
+
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const router = useRouter();
+const { accountId } = useAccount();
+
+const { responseLimits, fetchLimits } = useCaptain();
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+
+const showBanner = computed(() => {
+  if (!responseLimits.value) return false;
+
+  const { consumed, totalCount } = responseLimits.value;
+  if (!consumed || !totalCount) return false;
+
+  return consumed / totalCount > 0.8;
+});
+
+onMounted(fetchLimits);
+</script>
+
+<template>
+  <Banner
+    v-show="showBanner"
+    color="amber"
+    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
+    @action="openBilling"
+  >
+    {{ $t('CAPTAIN.BANNER.RESPONSES') }}
+  </Banner>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  response: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainResponses/getUIFlags'),
+};
+
+const initialState = {
+  question: '',
+  answer: '',
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  question: { required, minLength: minLength(1) },
+  answer: { required, minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = (field, errorKey) => {
+  return v$.value[field].$error
+    ? t(`CAPTAIN.RESPONSES.FORM.${errorKey}.ERROR`)
+    : '';
+};
+
+const formErrors = computed(() => ({
+  question: getErrorMessage('question', 'QUESTION'),
+  answer: getErrorMessage('answer', 'ANSWER'),
+}));
+
+const handleCancel = () => emit('cancel');
+
+const prepareDocumentDetails = () => ({
+  question: state.question,
+  answer: state.answer,
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) {
+    return;
+  }
+
+  emit('submit', prepareDocumentDetails());
+};
+
+const updateStateFromResponse = response => {
+  if (!response) return;
+
+  const { question, answer } = response;
+
+  Object.assign(state, {
+    question,
+    answer,
+  });
+};
+
+watch(
+  () => props.response,
+  newResponse => {
+    if (props.mode === 'edit' && newResponse) {
+      updateStateFromResponse(newResponse);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.question"
+      :label="t('CAPTAIN.RESPONSES.FORM.QUESTION.LABEL')"
+      :placeholder="t('CAPTAIN.RESPONSES.FORM.QUESTION.PLACEHOLDER')"
+      :message="formErrors.question"
+      :message-type="formErrors.question ? 'error' : 'info'"
+    />
+    <Editor
+      v-model="state.answer"
+      :label="t('CAPTAIN.RESPONSES.FORM.ANSWER.LABEL')"
+      :placeholder="t('CAPTAIN.RESPONSES.FORM.ANSWER.PLACEHOLDER')"
+      :message="formErrors.answer"
+      :max-length="10000"
+      :message-type="formErrors.answer ? 'error' : 'info'"
+    />
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAPTAIN.FORM.CANCEL')"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="t(`CAPTAIN.FORM.${mode.toUpperCase()}`)"
+        class="w-full"
+        :is-loading="isLoading"
+        :disabled="isLoading"
+      />
+    </div>
+  </form>
+</template>