Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import ContactEmptyState from './ContactEmptyState.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Components/Contacts/EmptyState"
|
||||
:layout="{ type: 'grid', width: '900px' }"
|
||||
>
|
||||
<!-- Default Story -->
|
||||
<Variant title="Default">
|
||||
<ContactEmptyState
|
||||
title="No contacts found"
|
||||
subtitle="Create your first contact to get started"
|
||||
button-label="Add Contact"
|
||||
/>
|
||||
</Variant>
|
||||
|
||||
<!-- Without Button -->
|
||||
<Variant title="Without Button">
|
||||
<ContactEmptyState
|
||||
title="No contacts"
|
||||
subtitle="These are your current contacts"
|
||||
:show-button="false"
|
||||
/>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
|
||||
import contactContent from 'dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent';
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['create']);
|
||||
|
||||
const createNewContactDialogRef = ref(null);
|
||||
|
||||
const onClick = () => {
|
||||
createNewContactDialogRef.value?.dialogRef.open();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout :title="title" :subtitle="subtitle">
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<ContactsCard
|
||||
v-for="contact in contactContent.slice(0, 5)"
|
||||
:id="contact.id"
|
||||
:key="contact.id"
|
||||
:name="contact.name"
|
||||
:email="contact.email"
|
||||
:thumbnail="contact.thumbnail"
|
||||
:phone-number="contact.phoneNumber"
|
||||
:additional-attributes="contact.additionalAttributes"
|
||||
:is-expanded="0 === contact.id"
|
||||
@toggle="toggleExpanded(contact.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div v-if="showButton">
|
||||
<Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
|
||||
<CreateNewContactDialog
|
||||
ref="createNewContactDialogRef"
|
||||
@create="emit('create', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,228 @@
|
||||
export default [
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Los Angeles',
|
||||
country: 'United States',
|
||||
description:
|
||||
"I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Lumora.",
|
||||
companyName: 'Lumora',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'candice-dev',
|
||||
twitter: 'candice_w_dev',
|
||||
facebook: 'candice.dev',
|
||||
linkedin: 'candice-matherson',
|
||||
instagram: 'candice.codes',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'candice.matherson@lumora.com',
|
||||
id: 22,
|
||||
name: 'Candice Matherson',
|
||||
phoneNumber: '+14155552671',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {
|
||||
dateContact: '2024-11-11T11:53:09.299Z',
|
||||
linkContact: 'https://example.com',
|
||||
listContact: 'Follow-Up',
|
||||
textContact: 'Hi there!',
|
||||
numberContact: '42',
|
||||
checkboxContact: false,
|
||||
},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'San Francisco',
|
||||
country: 'United States',
|
||||
description: 'Passionate about design and user experience.',
|
||||
companyName: 'Designify',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'ophelia-folkard',
|
||||
twitter: 'oph_designs',
|
||||
facebook: 'ophelia.folkard',
|
||||
linkedin: 'ophelia-folkard',
|
||||
instagram: 'ophelia.design',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'ophelia.folkard@designify.com',
|
||||
id: 21,
|
||||
name: 'Ophelia Folkard',
|
||||
phoneNumber: '+14155552672',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {
|
||||
dateContact: '2024-10-05T10:12:34.567Z',
|
||||
linkContact: 'https://designify.com',
|
||||
listContact: 'Prospects',
|
||||
textContact: 'Looking forward to connecting!',
|
||||
},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Austin',
|
||||
country: 'United States',
|
||||
description: 'Avid coder and tech enthusiast.',
|
||||
companyName: 'CodeHub',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'willy_castelot',
|
||||
twitter: 'willy_code',
|
||||
facebook: 'willy.castelot',
|
||||
linkedin: 'willy-castelot',
|
||||
instagram: 'willy.coder',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'willy.castelot@codehub.io',
|
||||
id: 20,
|
||||
name: 'Willy Castelot',
|
||||
phoneNumber: '+14155552673',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {
|
||||
textContact: 'Let’s collaborate!',
|
||||
checkboxContact: true,
|
||||
},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Seattle',
|
||||
country: 'United States',
|
||||
description: 'Product manager with a love for innovation.',
|
||||
companyName: 'InnovaTech',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'elisabeth-d',
|
||||
twitter: 'elisabeth_innova',
|
||||
facebook: 'elisabeth.derington',
|
||||
linkedin: 'elisabeth-derington',
|
||||
instagram: 'elisabeth.innovates',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'elisabeth.derington@innova.com',
|
||||
id: 19,
|
||||
name: 'Elisabeth Derington',
|
||||
phoneNumber: '+14155552674',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {
|
||||
textContact: 'Let’s schedule a call.',
|
||||
},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Chicago',
|
||||
country: 'United States',
|
||||
description: 'Marketing specialist and content creator.',
|
||||
companyName: 'Contently',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'olia-olenchenko',
|
||||
twitter: 'olia_content',
|
||||
facebook: 'olia.olenchenko',
|
||||
linkedin: 'olia-olenchenko',
|
||||
instagram: 'olia.creates',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'olia.olenchenko@contently.com',
|
||||
id: 18,
|
||||
name: 'Olia Olenchenko',
|
||||
phoneNumber: '+14155552675',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Boston',
|
||||
country: 'United States',
|
||||
description: 'SEO expert and analytics enthusiast.',
|
||||
companyName: 'OptiSearch',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'nate-vannuchi',
|
||||
twitter: 'nate_seo',
|
||||
facebook: 'nathaniel.vannuchi',
|
||||
linkedin: 'nathaniel-vannuchi',
|
||||
instagram: 'nate.optimizes',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'nathaniel.vannuchi@optisearch.com',
|
||||
id: 17,
|
||||
name: 'Nathaniel Vannuchi',
|
||||
phoneNumber: '+14155552676',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Denver',
|
||||
country: 'United States',
|
||||
description: 'UI/UX designer with a flair for minimalist designs.',
|
||||
companyName: 'Minimal Designs',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'merrile-petruk',
|
||||
twitter: 'merrile_ux',
|
||||
facebook: 'merrile.petruk',
|
||||
linkedin: 'merrile-petruk',
|
||||
instagram: 'merrile.designs',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'merrile.petruk@minimal.com',
|
||||
id: 16,
|
||||
name: 'Merrile Petruk',
|
||||
phoneNumber: '+14155552677',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Miami',
|
||||
country: 'United States',
|
||||
description: 'Entrepreneur with a background in e-commerce.',
|
||||
companyName: 'Ecom Solutions',
|
||||
countryCode: 'US',
|
||||
socialProfiles: {
|
||||
github: 'cordell-d',
|
||||
twitter: 'cordell_entrepreneur',
|
||||
facebook: 'cordell.dalinder',
|
||||
linkedin: 'cordell-dalinder',
|
||||
instagram: 'cordell.ecom',
|
||||
},
|
||||
},
|
||||
availabilityStatus: 'offline',
|
||||
email: 'cordell.dalinder@ecomsolutions.com',
|
||||
id: 15,
|
||||
name: 'Cordell Dalinder',
|
||||
phoneNumber: '+14155552678',
|
||||
identifier: null,
|
||||
thumbnail: '',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user