fix: use onboarding/help components & composable from frappe ui
This commit is contained in:
Shariq Ansari
parent
6ebcd0e887
commit
4326582c5b
@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!isSidebarCollapsed"
|
||||
class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
|
||||
>
|
||||
<div v-if="stepsCompleted != totalSteps" class="inline-flex gap-2">
|
||||
<StepsIcon class="h-4 my-0.5 shrink-0" />
|
||||
<div class="flex flex-col text-p-sm gap-0.5">
|
||||
<div class="text-ink-gray-9 font-medium">
|
||||
{{ __('Gettings started') }}
|
||||
</div>
|
||||
<div class="text-ink-gray-7">
|
||||
{{ __('{0}/{1} steps', [stepsCompleted, totalSteps]) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between gap-1">
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<StepsIcon class="h-4 my-0.5" />
|
||||
<div class="text-ink-gray-9 font-medium">
|
||||
{{ __('You are all set!') }}
|
||||
</div>
|
||||
</div>
|
||||
<FeatherIcon
|
||||
name="x"
|
||||
class="h-4 cursor-pointer"
|
||||
@click="
|
||||
() => {
|
||||
emit('showHelpCenter')
|
||||
isOnboardingStepsCompleted = true
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-p-sm text-ink-gray-7">
|
||||
{{ __('All steps are completed successfully!') }}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
v-if="stepsCompleted != totalSteps"
|
||||
:label="__('Complete now')"
|
||||
theme="blue"
|
||||
@click="emit('completeNow')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import StepsIcon from '@/components/Icons/StepsIcon.vue'
|
||||
import {
|
||||
isOnboardingStepsCompleted,
|
||||
useOnboarding,
|
||||
} from '@/composables/onboarding'
|
||||
|
||||
const props = defineProps({
|
||||
isSidebarCollapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['completeNow', 'showHelpCenter'])
|
||||
|
||||
const { stepsCompleted, totalSteps } = useOnboarding()
|
||||
</script>
|
||||
@ -77,13 +77,6 @@
|
||||
<GettingStartedBanner
|
||||
v-if="!isOnboardingStepsCompleted"
|
||||
:isSidebarCollapsed="isSidebarCollapsed"
|
||||
@completeNow="
|
||||
() => {
|
||||
minimize = false
|
||||
showHelpModal = true
|
||||
}
|
||||
"
|
||||
@showHelpCenter="showHelpCenter = true"
|
||||
/>
|
||||
<SidebarLink
|
||||
v-else
|
||||
@ -113,15 +106,17 @@
|
||||
</div>
|
||||
<Notifications />
|
||||
<Settings />
|
||||
<HelpModal
|
||||
v-if="showHelpModal"
|
||||
v-model="showHelpModal"
|
||||
v-model:showHelpCenter="showHelpCenter"
|
||||
/>
|
||||
<HelpModal v-if="showHelpModal" v-model="showHelpModal" :logo="CRMLogo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CRMLogo from '@/components/Icons/CRMLogo.vue'
|
||||
import InviteIcon from '@/components/Icons/InviteIcon.vue'
|
||||
import ConvertIcon from '@/components/Icons/ConvertIcon.vue'
|
||||
import CommentIcon from '@/components/Icons/CommentIcon.vue'
|
||||
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||
import StepsIcon from '@/components/Icons/StepsIcon.vue'
|
||||
import Section from '@/components/Section.vue'
|
||||
import Email2Icon from '@/components/Icons/Email2Icon.vue'
|
||||
import PinIcon from '@/components/Icons/PinIcon.vue'
|
||||
@ -140,17 +135,24 @@ import SidebarLink from '@/components/SidebarLink.vue'
|
||||
import Notifications from '@/components/Notifications.vue'
|
||||
import Settings from '@/components/Settings/Settings.vue'
|
||||
import SignupBanner from '@/components/SignupBanner.vue'
|
||||
import GettingStartedBanner from '@/components/GettingStartedBanner.vue'
|
||||
import HelpModal from '@/components/Modals/HelpModal.vue'
|
||||
import { viewsStore } from '@/stores/views'
|
||||
import {
|
||||
unreadNotificationsCount,
|
||||
notificationsStore,
|
||||
} from '@/stores/notifications'
|
||||
import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
|
||||
import { FeatherIcon, TrialBanner } from 'frappe-ui'
|
||||
import { showSettings, activeSettingsPage } from '@/composables/settings'
|
||||
import {
|
||||
FeatherIcon,
|
||||
TrialBanner,
|
||||
HelpModal,
|
||||
GettingStartedBanner,
|
||||
useOnboarding,
|
||||
showHelpModal,
|
||||
minimize,
|
||||
} from 'frappe-ui'
|
||||
import router from '@/router'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { ref, computed, h } from 'vue'
|
||||
import { ref, reactive, computed, h, markRaw, onMounted } from 'vue'
|
||||
|
||||
const { getPinnedViews, getPublicViews } = viewsStore()
|
||||
const { toggle: toggleNotificationPanel } = notificationsStore()
|
||||
@ -264,6 +266,162 @@ function getIcon(routeName, icon) {
|
||||
}
|
||||
}
|
||||
|
||||
const showHelpModal = ref(false)
|
||||
const showHelpCenter = ref(false)
|
||||
// onboarding
|
||||
const { isOnboardingStepsCompleted, setUp } = useOnboarding('frappecrm')
|
||||
|
||||
const firstLead = ref('')
|
||||
const firstDeal = ref('')
|
||||
|
||||
async function getFirstLead() {
|
||||
if (firstLead.value) return firstLead.value
|
||||
return await call('crm.api.onboarding.get_first_lead')
|
||||
}
|
||||
|
||||
async function getFirstDeal() {
|
||||
if (firstDeal.value) return firstDeal.value
|
||||
return await call('crm.api.onboarding.get_first_deal')
|
||||
}
|
||||
|
||||
const steps = reactive([
|
||||
{
|
||||
name: 'create_first_lead',
|
||||
title: 'Create your first lead',
|
||||
icon: markRaw(LeadsIcon),
|
||||
completed: true,
|
||||
onClick: () => {
|
||||
minimize.value = true
|
||||
router.push({ name: 'Leads' })
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'invite_your_team',
|
||||
title: 'Invite your team',
|
||||
icon: markRaw(InviteIcon),
|
||||
completed: false,
|
||||
onClick: () => {
|
||||
minimize.value = true
|
||||
showSettings.value = true
|
||||
activeSettingsPage.value = 'Invite Members'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'convert_lead_to_deal',
|
||||
title: 'Convert lead to deal',
|
||||
icon: markRaw(ConvertIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
|
||||
let lead = await getFirstLead()
|
||||
|
||||
if (lead) {
|
||||
router.push({ name: 'Lead', params: { leadId: lead } })
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'create_first_task',
|
||||
title: 'Create your first task',
|
||||
icon: markRaw(TaskIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#tasks',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Tasks' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'create_first_note',
|
||||
title: 'Create your first note',
|
||||
icon: markRaw(NoteIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#notes',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Notes' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'add_first_comment',
|
||||
title: 'Add your first comment',
|
||||
icon: markRaw(CommentIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#comments',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'send_first_email',
|
||||
title: 'Send email',
|
||||
icon: markRaw(EmailIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#emails',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'change_deal_status',
|
||||
title: 'Change deal status',
|
||||
icon: markRaw(StepsIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#activity',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
onMounted(() => setUp(steps))
|
||||
</script>
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="show"
|
||||
class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
|
||||
:class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
|
||||
@click.stop
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-base font-medium ml-1">
|
||||
{{ __(title) }}
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="minimize = !minimize" variant="ghost">
|
||||
<component
|
||||
:is="minimize ? MaximizeIcon : MinimizeIcon"
|
||||
class="h-3.5"
|
||||
/>
|
||||
</Button>
|
||||
<Button variant="ghost" @click="show = false">
|
||||
<FeatherIcon name="x" class="h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full overflow-hidden flex flex-col">
|
||||
<OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
|
||||
</div>
|
||||
<div v-for="item in footerItems" class="flex flex-col gap-1.5">
|
||||
<div
|
||||
class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<component :is="item.icon" class="h-4" />
|
||||
<div class="text-base">{{ __(item.label) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import StepsIcon from '@/components/Icons/StepsIcon.vue'
|
||||
import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
|
||||
import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
|
||||
import HelpIcon from '@/components/Icons/HelpIcon.vue'
|
||||
import OnboardingSteps from '@/components/OnboardingSteps.vue'
|
||||
import {
|
||||
isOnboardingStepsCompleted,
|
||||
minimize,
|
||||
useOnboarding,
|
||||
} from '@/composables/onboarding'
|
||||
import { onMounted, computed } from 'vue'
|
||||
|
||||
const show = defineModel()
|
||||
const showHelpCenter = defineModel('showHelpCenter')
|
||||
|
||||
const title = computed(() => {
|
||||
if (!isOnboardingStepsCompleted.value && !showHelpCenter.value) {
|
||||
return __('Getting started')
|
||||
} else if (showHelpCenter.value) {
|
||||
return __('Help center')
|
||||
}
|
||||
})
|
||||
|
||||
const footerItems = computed(() => {
|
||||
let items = [
|
||||
{
|
||||
icon: HelpIcon,
|
||||
label: __('Help centre'),
|
||||
onClick: () => {
|
||||
useOnboarding().syncStatus()
|
||||
showHelpCenter.value = true
|
||||
},
|
||||
condition: !isOnboardingStepsCompleted.value && !showHelpCenter.value,
|
||||
},
|
||||
{
|
||||
icon: StepsIcon,
|
||||
label: __('Getting started'),
|
||||
onClick: () => (showHelpCenter.value = false),
|
||||
condition: showHelpCenter.value && !isOnboardingStepsCompleted.value,
|
||||
},
|
||||
{
|
||||
icon: StepsIcon,
|
||||
label: __('Reset onboarding steps'),
|
||||
onClick: resetOnboardingSteps,
|
||||
condition: showHelpCenter.value && isOnboardingStepsCompleted.value,
|
||||
},
|
||||
]
|
||||
|
||||
return items.filter((item) => item.condition)
|
||||
})
|
||||
|
||||
function resetOnboardingSteps() {
|
||||
useOnboarding().reset()
|
||||
isOnboardingStepsCompleted.value = false
|
||||
showHelpCenter.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (isOnboardingStepsCompleted.value) {
|
||||
showHelpCenter.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-center gap-1 mt-4 mb-7">
|
||||
<CRMLogo class="size-10 shrink-0 rounded mb-4" />
|
||||
<div class="text-base font-medium">
|
||||
{{ __('Welcome to Frappe CRM') }}
|
||||
</div>
|
||||
<div class="text-p-base font-normal">
|
||||
{{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2.5 overflow-hidden">
|
||||
<div class="flex justify-between items-center py-0.5">
|
||||
<Badge
|
||||
:label="__('{0}% completed', [completedPercentage])"
|
||||
theme="orange"
|
||||
size="lg"
|
||||
/>
|
||||
<div class="flex">
|
||||
<Button
|
||||
v-if="completedPercentage != 0"
|
||||
variant="ghost"
|
||||
:label="__('Reset')"
|
||||
@click="reset"
|
||||
/>
|
||||
<Button
|
||||
v-if="completedPercentage != 100"
|
||||
variant="ghost"
|
||||
:label="__('Skip all')"
|
||||
@click="skipAll"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5 overflow-y-auto">
|
||||
<div
|
||||
v-for="step in steps"
|
||||
:key="step.title"
|
||||
class="group w-full flex gap-2 justify-between items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
|
||||
@click.stop="() => !step.completed && step.onClick()"
|
||||
>
|
||||
<div
|
||||
class="flex gap-2 items-center"
|
||||
:class="[step.completed ? 'text-ink-gray-5' : 'text-ink-gray-8']"
|
||||
>
|
||||
<component :is="step.icon" class="h-4" />
|
||||
<div class="text-base" :class="{ 'line-through': step.completed }">
|
||||
{{ step.title }}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
v-if="!step.completed"
|
||||
:label="__('Skip')"
|
||||
class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
|
||||
@click="() => skip(step.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import CRMLogo from '@/components/Icons/CRMLogo.vue'
|
||||
import { useOnboarding } from '@/composables/onboarding'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const {
|
||||
steps,
|
||||
stepsCompleted,
|
||||
totalSteps,
|
||||
completedPercentage,
|
||||
skip,
|
||||
skipAll,
|
||||
reset,
|
||||
} = useOnboarding()
|
||||
</script>
|
||||
@ -1,294 +0,0 @@
|
||||
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
||||
import InviteIcon from '@/components/Icons/InviteIcon.vue'
|
||||
import ConvertIcon from '@/components/Icons/ConvertIcon.vue'
|
||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||
import CommentIcon from '@/components/Icons/CommentIcon.vue'
|
||||
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||
import StepsIcon from '@/components/Icons/StepsIcon.vue'
|
||||
import { capture } from '@/telemetry'
|
||||
import { showSettings, activeSettingsPage } from '@/composables/settings'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import router from '@/router'
|
||||
import { call } from 'frappe-ui'
|
||||
import { ref, reactive, computed, markRaw } from 'vue'
|
||||
|
||||
export const minimize = ref(false)
|
||||
|
||||
export const isOnboardingStepsCompleted = useStorage(
|
||||
'isOnboardingStepsCompleted',
|
||||
false,
|
||||
)
|
||||
|
||||
const firstLead = ref('')
|
||||
const firstDeal = ref('')
|
||||
|
||||
const steps = reactive([
|
||||
{
|
||||
name: 'create_first_lead',
|
||||
title: 'Create your first lead',
|
||||
icon: markRaw(LeadsIcon),
|
||||
completed: false,
|
||||
onClick: () => {
|
||||
minimize.value = true
|
||||
router.push({ name: 'Leads' })
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'invite_your_team',
|
||||
title: 'Invite your team',
|
||||
icon: markRaw(InviteIcon),
|
||||
completed: false,
|
||||
onClick: () => {
|
||||
minimize.value = true
|
||||
showSettings.value = true
|
||||
activeSettingsPage.value = 'Invite Members'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'convert_lead_to_deal',
|
||||
title: 'Convert lead to deal',
|
||||
icon: markRaw(ConvertIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
|
||||
let lead = await getFirstLead()
|
||||
|
||||
if (lead) {
|
||||
router.push({ name: 'Lead', params: { leadId: lead } })
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'create_first_task',
|
||||
title: 'Create your first task',
|
||||
icon: markRaw(TaskIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#tasks',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Tasks' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'create_first_note',
|
||||
title: 'Create your first note',
|
||||
icon: markRaw(NoteIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#notes',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Notes' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'add_first_comment',
|
||||
title: 'Add your first comment',
|
||||
icon: markRaw(CommentIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#comments',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'send_first_email',
|
||||
title: 'Send email',
|
||||
icon: markRaw(EmailIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#emails',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'change_deal_status',
|
||||
title: 'Change deal status',
|
||||
icon: markRaw(StepsIcon),
|
||||
completed: false,
|
||||
onClick: async () => {
|
||||
minimize.value = true
|
||||
let deal = await getFirstDeal()
|
||||
|
||||
if (deal) {
|
||||
router.push({
|
||||
name: 'Deal',
|
||||
params: { dealId: deal },
|
||||
hash: '#activity',
|
||||
})
|
||||
} else {
|
||||
router.push({ name: 'Leads' })
|
||||
}
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
async function getFirstLead() {
|
||||
if (firstLead.value) return firstLead.value
|
||||
return await call('crm.api.onboarding.get_first_lead')
|
||||
}
|
||||
|
||||
async function getFirstDeal() {
|
||||
if (firstDeal.value) return firstDeal.value
|
||||
return await call('crm.api.onboarding.get_first_deal')
|
||||
}
|
||||
|
||||
const stepsCompleted = computed(
|
||||
() => steps.filter((step) => step.completed).length,
|
||||
)
|
||||
const totalSteps = ref(steps.length)
|
||||
|
||||
const completedPercentage = computed(() =>
|
||||
Math.floor((stepsCompleted.value / totalSteps.value) * 100),
|
||||
)
|
||||
|
||||
export function useOnboarding() {
|
||||
syncStatus()
|
||||
|
||||
function skip(step) {
|
||||
updateOnboardingStep(step, true)
|
||||
}
|
||||
|
||||
function skipAll() {
|
||||
updateAll(true)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
updateAll(false, true)
|
||||
}
|
||||
|
||||
function updateOnboardingStep(step, skipped = false) {
|
||||
if (isOnboardingStepsCompleted.value) return
|
||||
let user = window.user
|
||||
if (!user) return false
|
||||
|
||||
if (!user.onboarding_status['frappe_crm_onboarding_status']) {
|
||||
user.onboarding_status['frappe_crm_onboarding_status'] = steps.map(
|
||||
(s) => {
|
||||
return { name: s.name, completed: false }
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
let _steps = user.onboarding_status['frappe_crm_onboarding_status']
|
||||
let index = _steps.findIndex((s) => s.name === step)
|
||||
if (index !== -1) {
|
||||
_steps[index].completed = true
|
||||
steps[index].completed = true
|
||||
}
|
||||
|
||||
window.user = user
|
||||
|
||||
if (skipped) {
|
||||
capture('onboarding_skipped_' + step)
|
||||
} else {
|
||||
capture('onboarding_' + step)
|
||||
}
|
||||
|
||||
call('crm.api.onboarding.update_user_onboarding_status', {
|
||||
steps: JSON.stringify(_steps),
|
||||
})
|
||||
}
|
||||
|
||||
function updateAll(value, reset = false) {
|
||||
if (isOnboardingStepsCompleted.value && !reset) return
|
||||
let user = window.user
|
||||
if (!user) return false
|
||||
|
||||
let _steps
|
||||
|
||||
if (!user.onboarding_status['frappe_crm_onboarding_status']) {
|
||||
user.onboarding_status['frappe_crm_onboarding_status'] = steps.map(
|
||||
(s) => {
|
||||
return { name: s.name, completed: value }
|
||||
},
|
||||
)
|
||||
} else {
|
||||
_steps = user.onboarding_status['frappe_crm_onboarding_status']
|
||||
_steps.forEach((step) => {
|
||||
step.completed = value
|
||||
})
|
||||
}
|
||||
|
||||
steps.forEach((step) => {
|
||||
step.completed = value
|
||||
})
|
||||
|
||||
window.user = user
|
||||
|
||||
capture(value ? 'onboarding_skipped_all' : 'onboarding_reset_steps')
|
||||
|
||||
call('crm.api.onboarding.update_user_onboarding_status', {
|
||||
steps: JSON.stringify(_steps),
|
||||
})
|
||||
}
|
||||
|
||||
function syncStatus() {
|
||||
if (isOnboardingStepsCompleted.value) return
|
||||
let user = window.user
|
||||
if (!user) return false
|
||||
|
||||
if (user.onboarding_status['frappe_crm_onboarding_status']) {
|
||||
let _steps = user.onboarding_status['frappe_crm_onboarding_status']
|
||||
_steps.forEach((step, index) => {
|
||||
steps[index].completed = step.completed
|
||||
})
|
||||
isOnboardingStepsCompleted.value = _steps.every((step) => step.completed)
|
||||
} else {
|
||||
isOnboardingStepsCompleted.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
steps,
|
||||
stepsCompleted,
|
||||
totalSteps,
|
||||
completedPercentage,
|
||||
updateOnboardingStep,
|
||||
skip,
|
||||
skipAll,
|
||||
reset,
|
||||
syncStatus,
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user