Vendor Chatwoot Vue 3 frontend into frontend/
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for customization: - app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin) - app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution) - app/helpers/, app/assets/ (Rails view helpers, static assets) - enterprise/ (Enterprise edition frontend overlay) - config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain) - package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs - Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub) Excluded Rails backend: controllers, models, services, jobs, mailers, policies, db, lib, spec, public, node_modules. Update references to the new frontend location: - .gitignore: exclude frontend build artifacts (node_modules, tmp, packs), keep frontend/bin/ and frontend/vendor/ via negation - backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default reference/chatwoot -> ../frontend - backend/scripts/parity_frontend_browser_smoke.mjs: same default update - AGENTS.md: add frontend section with Rails/Vite coupling notes - README: architecture tree includes frontend/
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import Popover from 'dashboard/components-next/popover/Popover.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
import {
|
||||
isAConversationRoute,
|
||||
isAInboxViewRoute,
|
||||
getConversationDashboardRoute,
|
||||
} from 'dashboard/helper/routeHelpers';
|
||||
|
||||
const props = defineProps({
|
||||
contact: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'deleted']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const uiFlags = useMapGetter('contacts/getUIFlags');
|
||||
|
||||
const confirmMessage = computed(
|
||||
() => `${t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${props.contact.name}?`
|
||||
);
|
||||
|
||||
const onDelete = async hide => {
|
||||
try {
|
||||
await store.dispatch('contacts/delete', props.contact.id);
|
||||
useAlert(t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
|
||||
hide();
|
||||
emit('deleted');
|
||||
emit('close');
|
||||
|
||||
if (isAConversationRoute(route.name)) {
|
||||
router.push({ name: getConversationDashboardRoute(route.name) });
|
||||
} else if (isAInboxViewRoute(route.name)) {
|
||||
router.push({ name: 'inbox_view' });
|
||||
} else if (route.name !== 'contacts_dashboard') {
|
||||
router.push({ name: 'contacts_dashboard' });
|
||||
}
|
||||
} catch (error) {
|
||||
useAlert(error.message || t('DELETE_CONTACT.API.ERROR_MESSAGE'));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover @hide="$emit('close')">
|
||||
<slot name="trigger" />
|
||||
<template #content="{ hide }">
|
||||
<div class="w-full md:w-80 p-6 flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3 class="text-base font-medium leading-6 text-n-slate-12">
|
||||
{{ $t('DELETE_CONTACT.CONFIRM.TITLE') }}
|
||||
</h3>
|
||||
<p class="mb-0 text-sm text-n-slate-11">
|
||||
{{ confirmMessage }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
faded
|
||||
slate
|
||||
sm
|
||||
:label="$t('DELETE_CONTACT.CONFIRM.NO')"
|
||||
@click="hide"
|
||||
/>
|
||||
<Button
|
||||
ruby
|
||||
sm
|
||||
:label="$t('DELETE_CONTACT.CONFIRM.YES')"
|
||||
:is-loading="uiFlags.isDeleting"
|
||||
:disabled="uiFlags.isDeleting"
|
||||
@click="onDelete(hide)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStore } from 'vuex';
|
||||
import { useAlert, useTrack } from 'dashboard/composables';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import Popover from 'dashboard/components-next/popover/Popover.vue';
|
||||
import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
|
||||
|
||||
const props = defineProps({
|
||||
primaryContact: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const uiFlags = useMapGetter('contacts/getUIFlags');
|
||||
|
||||
const isSearching = ref(false);
|
||||
const searchResults = ref([]);
|
||||
|
||||
watch(
|
||||
() => props.primaryContact.id,
|
||||
() => {
|
||||
isSearching.value = false;
|
||||
searchResults.value = [];
|
||||
}
|
||||
);
|
||||
|
||||
const onContactSearch = async query => {
|
||||
isSearching.value = true;
|
||||
searchResults.value = [];
|
||||
|
||||
try {
|
||||
const {
|
||||
data: { payload },
|
||||
} = await ContactAPI.search(query);
|
||||
searchResults.value = payload.filter(
|
||||
contact => contact.id !== props.primaryContact.id
|
||||
);
|
||||
} catch (error) {
|
||||
useAlert(t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
|
||||
} finally {
|
||||
isSearching.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onMergeContacts = async (parentContactId, hide) => {
|
||||
useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
|
||||
try {
|
||||
await store.dispatch('contacts/merge', {
|
||||
childId: props.primaryContact.id,
|
||||
parentId: parentContactId,
|
||||
});
|
||||
useAlert(t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
|
||||
hide();
|
||||
emit('close');
|
||||
} catch (error) {
|
||||
useAlert(t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover @hide="$emit('close')">
|
||||
<slot name="trigger" />
|
||||
<template #content="{ hide }">
|
||||
<div class="w-full md:w-96 p-6 flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3 class="text-base font-medium leading-6 text-n-slate-12">
|
||||
{{ $t('MERGE_CONTACTS.TITLE') }}
|
||||
</h3>
|
||||
<p class="mb-0 text-sm text-n-slate-11">
|
||||
{{ $t('MERGE_CONTACTS.DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
<MergeContact
|
||||
:key="primaryContact.id"
|
||||
:primary-contact="primaryContact"
|
||||
:is-searching="isSearching"
|
||||
:is-merging="uiFlags.isMerging"
|
||||
:search-results="searchResults"
|
||||
@search="onContactSearch"
|
||||
@cancel="hide"
|
||||
@submit="id => onMergeContacts(id, hide)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
|
||||
import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
primaryContact: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
isSearching: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isMerging: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
searchResults: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['search', 'submit', 'cancel']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const parentContactId = ref(null);
|
||||
|
||||
const validationRules = {
|
||||
parentContactId: { required },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, { parentContactId });
|
||||
|
||||
const parentContact = computed(() => {
|
||||
if (!parentContactId.value) return null;
|
||||
return props.searchResults.find(
|
||||
contact => contact.id === parentContactId.value
|
||||
);
|
||||
});
|
||||
|
||||
const parentContactName = computed(() => {
|
||||
return parentContact.value ? parentContact.value.name : '';
|
||||
});
|
||||
|
||||
const primaryContactList = computed(() => {
|
||||
return props.searchResults.map(contact => ({
|
||||
id: contact.id,
|
||||
label: contact.name,
|
||||
value: contact.id,
|
||||
meta: {
|
||||
thumbnail: contact.thumbnail,
|
||||
email: contact.email,
|
||||
phoneNumber: contact.phone_number,
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
const hasValidationError = computed(() => v$.value.parentContactId.$error);
|
||||
const validationErrorMessage = computed(() => {
|
||||
if (v$.value.parentContactId.$error) {
|
||||
return t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR');
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const onSearch = query => {
|
||||
emit('search', query);
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
v$.value.$touch();
|
||||
if (v$.value.$invalid) {
|
||||
return;
|
||||
}
|
||||
emit('submit', parentContactId.value);
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
emit('cancel');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="onSubmit">
|
||||
<ContactMergeForm
|
||||
:selected-contact="primaryContact"
|
||||
:primary-contact-id="parentContactId"
|
||||
:primary-contact-list="primaryContactList"
|
||||
:is-searching="isSearching"
|
||||
:has-error="hasValidationError"
|
||||
:error-message="validationErrorMessage"
|
||||
@update:primary-contact-id="parentContactId = $event"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<MergeContactSummary
|
||||
:primary-contact-name="primaryContact.name"
|
||||
:parent-contact-name="parentContactName"
|
||||
/>
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<NextButton
|
||||
faded
|
||||
slate
|
||||
type="reset"
|
||||
:label="$t('MERGE_CONTACTS.FORM.CANCEL')"
|
||||
@click.prevent="onCancel"
|
||||
/>
|
||||
<NextButton
|
||||
type="submit"
|
||||
:is-loading="isMerging"
|
||||
:label="$t('MERGE_CONTACTS.FORM.SUBMIT')"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
primaryContactName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
parentContactName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
||||
<template>
|
||||
<div
|
||||
v-if="parentContactName"
|
||||
class="my-4 relative p-2.5 border rounded-[4px] text-n-slate-12 border-n-weak bg-n-background"
|
||||
>
|
||||
<h5 class="text-base font-medium text-n-slate-12">
|
||||
{{ $t('MERGE_CONTACTS.SUMMARY.TITLE') }}
|
||||
</h5>
|
||||
<ul class="ml-0 list-none">
|
||||
<li>
|
||||
<span class="inline-block mr-1">❌</span>
|
||||
<span
|
||||
v-dompurify-html="
|
||||
$t('MERGE_CONTACTS.SUMMARY.DELETE_WARNING', {
|
||||
primaryContactName,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="inline-block mr-1">✅</span>
|
||||
<span
|
||||
v-dompurify-html="
|
||||
$t('MERGE_CONTACTS.SUMMARY.ATTRIBUTE_WARNING', {
|
||||
primaryContactName,
|
||||
parentContactName,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user