LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat(v4): Update the help center portal design (#10296)

Browse Source 
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
2024-10-24 10:39:36 +05:30
committed by GitHub
parent 6d3ecfe3c1
commit a3855a8d1d
144 changed files with 6376 additions and 6604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue Normal file
View File

@@ -0,0 +1,148 @@
<script setup>
import { ref, reactive, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore, useMapGetter } from 'dashboard/composables/store';
import { useAlert, useTrack } from 'dashboard/composables';
import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
import { convertToCategorySlug } from 'dashboard/helper/commons.js';
import { useVuelidate } from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators';
import { buildPortalURL } from 'dashboard/helper/portalHelper';
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
import Input from 'dashboard/components-next/input/Input.vue';
const emit = defineEmits(['create']);
const { t } = useI18n();
const store = useStore();
const dialogRef = ref(null);
const isCreatingPortal = useMapGetter('portals/isCreatingPortal');
const state = reactive({
name: '',
slug: '',
domain: '',
logoUrl: '',
avatarBlobId: '',
});
const rules = {
name: { required, minLength: minLength(2) },
slug: { required },
};
const v$ = useVuelidate(rules, state);
const nameError = computed(() =>
v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
);
const slugError = computed(() =>
v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
);
const isSubmitDisabled = computed(() => v$.value.$invalid);
watch(
() => state.name,
() => {
state.slug = convertToCategorySlug(state.name);
}
);
const redirectToPortal = portal => {
emit('create', { slug: portal.slug, locale: 'en' });
};
const resetForm = () => {
Object.keys(state).forEach(key => {
state[key] = '';
});
v$.value.$reset();
};
const createPortal = async portal => {
try {
await store.dispatch('portals/create', portal);
dialogRef.value.close();
const analyticsPayload = {
has_custom_domain: Boolean(portal.custom_domain),
};
useTrack(PORTALS_EVENTS.ONBOARD_BASIC_INFORMATION, analyticsPayload);
useTrack(PORTALS_EVENTS.CREATE_PORTAL, analyticsPayload);
useAlert(
t('HELP_CENTER.PORTAL_SETTINGS.API.CREATE_PORTAL.SUCCESS_MESSAGE')
);
resetForm();
redirectToPortal(portal);
} catch (error) {
dialogRef.value.close();
useAlert(
error?.message ||
t('HELP_CENTER.PORTAL_SETTINGS.API.CREATE_PORTAL.ERROR_MESSAGE')
);
}
};
const handleDialogConfirm = async () => {
const isFormCorrect = await v$.value.$validate();
if (!isFormCorrect) return;
const portal = {
name: state.name,
slug: state.slug,
custom_domain: state.domain,
blob_id: state.avatarBlobId || null,
color: '#2781F6', // The default color is set to Chatwoot brand color
};
await createPortal(portal);
};
defineExpose({ dialogRef });
</script>
<template>
<Dialog
ref="dialogRef"
type="edit"
:title="t('HELP_CENTER.CREATE_PORTAL_DIALOG.TITLE')"
:confirm-button-label="
t('HELP_CENTER.CREATE_PORTAL_DIALOG.CONFIRM_BUTTON_LABEL')
"
:description="t('HELP_CENTER.CREATE_PORTAL_DIALOG.DESCRIPTION')"
:disable-confirm-button="isSubmitDisabled || isCreatingPortal"
:is-loading="isCreatingPortal"
@confirm="handleDialogConfirm"
>
<template #form>
<div class="flex flex-col gap-6">
<Input
id="portal-name"
v-model="state.name"
type="text"
:placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.PLACEHOLDER')"
:label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.LABEL')"
:message-type="nameError ? 'error' : 'info'"
:message="
nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
"
/>
<Input
id="portal-slug"
v-model="state.slug"
type="text"
:placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.PLACEHOLDER')"
:label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
:message-type="slugError ? 'error' : 'info'"
:message="slugError || buildPortalURL(state.slug)"
/>
</div>
</template>
</Dialog>
</template>

214
app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
View File

@@ -1,111 +1,143 @@
<script setup>
import { ref } from 'vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useMapGetter, useStore } from 'dashboard/composables/store.js';
import Button from 'dashboard/components-next/button/Button.vue';
import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
defineProps({
portals: {
type: Array,
default: () => [
{
id: 1,
name: 'Chatwoot Help Center',
articles: 67,
domain: 'chatwoot.help',
slug: 'help-center',
},
{
id: 2,
name: 'Chatwoot Handbook',
articles: 42,
domain: 'chatwoot.help',
slug: 'handbook',
},
],
},
header: {
type: String,
default: 'Portals',
},
description: {
type: String,
default: 'Create and manage multiple portals',
},
});
const emit = defineEmits(['close', 'createPortal']);
const selectedPortal = ref(1);
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const store = useStore();
const handlePortalChange = id => {
selectedPortal.value = id;
const DEFAULT_ROUTE = 'portals_articles_index';
const CATEGORY_ROUTE = 'portals_categories_index';
const CATEGORY_SUB_ROUTES = [
'portals_categories_articles_index',
'portals_categories_articles_edit',
];
const portals = useMapGetter('portals/allPortals');
const currentPortalSlug = computed(() => route.params.portalSlug);
const isPortalActive = portal => {
return portal.slug === currentPortalSlug.value;
};
const getPortalThumbnailSrc = portal => {
return portal?.logo?.file_url || '';
};
const fetchPortalAndItsCategories = async (slug, locale) => {
await store.dispatch('portals/switchPortal', true);
await store.dispatch('portals/index');
const selectedPortalParam = {
portalSlug: slug,
locale,
};
await store.dispatch('portals/show', selectedPortalParam);
await store.dispatch('categories/index', selectedPortalParam);
await store.dispatch('agents/get');
await store.dispatch('portals/switchPortal', false);
};
const handlePortalChange = async portal => {
if (isPortalActive(portal)) return;
const {
slug,
meta: { default_locale: defaultLocale },
} = portal;
emit('close');
await fetchPortalAndItsCategories(slug, defaultLocale);
const targetRouteName = CATEGORY_SUB_ROUTES.includes(route.name)
? CATEGORY_ROUTE
: route.name || DEFAULT_ROUTE;
router.push({
name: targetRouteName,
params: {
portalSlug: slug,
locale: defaultLocale,
},
});
};
const openCreatePortalDialog = () => {
emit('createPortal');
emit('close');
};
const redirectToPortalHomePage = () => {
router.push({
name: 'portals_index',
params: {
navigationPath: DEFAULT_ROUTE,
},
});
};
</script>
<!-- TODO: Add i18n -->
<!-- eslint-disable vue/no-bare-strings-in-template -->
<template>
<div
class="pt-5 pb-3 bg-white z-50 dark:bg-slate-800 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
>
<div class="flex items-center justify-between gap-4 px-6 pb-2">
<div
class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
>
<div class="flex flex-col gap-1">
<h2 class="text-base font-medium text-slate-900 dark:text-slate-50">
{{ header }}
<h2
class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
@click="redirectToPortalHomePage"
>
{{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
</h2>
<p class="text-sm text-slate-600 dark:text-slate-300">
{{ description }}
{{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
</p>
</div>
<Button label="New portal" variant="secondary" icon="add" size="sm" />
<Button
:label="t('HELP_CENTER.PORTAL_SWITCHER.NEW_PORTAL')"
variant="secondary"
icon="add"
size="sm"
class="!bg-n-alpha-2 hover:!bg-n-alpha-3"
@click="openCreatePortalDialog"
/>
</div>
<div v-if="portals.length > 0" class="flex flex-col gap-3">
<template v-for="(portal, index) in portals" :key="portal.id">
<div class="flex flex-col gap-2 px-6 py-2">
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
:id="portal.id"
v-model="selectedPortal"
type="radio"
:value="portal.id"
class="mr-3"
@change="handlePortalChange(portal.id)"
/>
<label
:for="portal.id"
class="text-sm font-medium text-slate-900 dark:text-slate-100"
>
{{ portal.name }}
</label>
</div>
<div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
</div>
<div class="inline-flex items-center gap-2 py-1 text-sm">
<span class="text-slate-600 dark:text-slate-400">
articles:
<span class="text-slate-800 dark:text-slate-200">
{{ portal.articles }}
</span>
</span>
<div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
<span class="text-slate-600 dark:text-slate-400">
domain:
<span class="text-slate-800 dark:text-slate-200">
{{ portal.domain }}
</span>
</span>
<div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
<span class="text-slate-600 dark:text-slate-400">
slug:
<span class="text-slate-800 dark:text-slate-200">
{{ portal.slug }}
</span>
</span>
</div>
</div>
<div
v-if="index < portals.length - 1 && portals.length > 1"
class="w-full h-px bg-slate-50 dark:bg-slate-700/50"
/>
</template>
<div v-if="portals.length > 0" class="flex flex-col gap-2 px-4">
<Button
v-for="(portal, index) in portals"
:key="index"
:label="portal.name"
variant="ghost"
:icon="isPortalActive(portal) ? 'checkmark-lucide' : ''"
icon-lib="lucide"
icon-position="right"
class="!justify-start !px-2 !py-2 hover:!bg-n-alpha-2 [&>svg]:text-n-teal-10 [&>svg]:w-5 [&>svg]:h-5 h-9"
size="sm"
@click="handlePortalChange(portal)"
>
<template #leftPrefix>
<Thumbnail
v-if="portal"
:author="portal"
:name="portal.name"
:size="20"
:src="getPortalThumbnailSrc(portal)"
:show-author-name="false"
icon-name="building-lucide"
/>
</template>
<template #rightPrefix>
<span class="text-sm truncate text-n-slate-11">
{{ portal.custom_domain || '' }}
</span>
</template>
</Button>
</div>
</div>
</template>