diff --git a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue index f63ed99dc..fa29e1673 100644 --- a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue +++ b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue @@ -34,7 +34,7 @@ :label="$t(item.label)" :link="localeRoute(item.link)" class="sf-content-pages__menu" - v-on="item.listeners" + v-on="{ click: getHandler(item.id) }" /> @@ -83,17 +83,28 @@ export default defineComponent({ } }); - const { sidebarLinkGroups } = useSidebarLinkGroups(); + const { sidebarLinkGroups, logoutUser } = useSidebarLinkGroups(); const isOnSubpage = computed(() => route.value.matched.length > 1); const goToTopLevelRoute = () => router.push(localeRoute({ name: 'customer' })); const title = computed(() => i18n.t(route.value.matched.at(-1)?.meta.titleLabel as string)); + /** + * #tab-id: handler-name + */ + const handlers = { + 'log-out': logoutUser, + }; + + const getHandler = (id: string) => handlers[id] ?? {}; + return { sidebarLinkGroups, title, isOnSubpage, goToTopLevelRoute, + logoutUser, + getHandler, }; }, }); diff --git a/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts b/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts index d87113099..04b71eb88 100644 --- a/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts +++ b/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts @@ -1,34 +1,39 @@ import type { RawLocation } from 'vue-router'; + import { useRouter, useContext } from '@nuxtjs/composition-api'; import { useUser } from '~/modules/customer/composables/useUser'; import { useCart } from '~/modules/checkout/composables/useCart'; type LinkGroup = { title: string, items: LinkGroupItem[] }; -type LinkGroupItem = { label: string, link?: RawLocation, listeners?: Record (Promise | void)> }; +type LinkGroupItem = { id: string, label: string, link?: RawLocation }; export const useSidebarLinkGroups = () => { const { localeRoute } = useContext(); const { logout } = useUser(); const { clear } = useCart(); - const router = useRouter(); + const sidebarLinkGroups : LinkGroup[] = [ { title: 'Personal details', items: [ { + id: 'my-profile', label: 'My profile', link: { name: 'customer-my-profile' }, }, { + id: 'address-details', label: 'Addresses details', link: { name: 'customer-addresses-details' }, }, { + id: 'my-newsletter', label: 'My newsletter', link: { name: 'customer-my-newsletter' }, }, { + id: 'my-wishlist', label: 'My wishlist', link: { name: 'customer-my-wishlist' }, }, @@ -38,26 +43,28 @@ export const useSidebarLinkGroups = () => { title: 'Order details', items: [ { + id: 'order-history', label: 'Order history', link: { name: 'customer-order-history' }, }, { + id: 'my-reviews', label: 'My reviews', link: { name: 'customer-my-reviews' }, }, { + id: 'log-out', label: 'Log out', - listeners: { - click: async () => { - await logout({}); - await clear({}); - await router.push(localeRoute({ name: 'home' })); - }, - }, }, ], }, ]; - return { sidebarLinkGroups }; + const logoutUser = async () => { + await logout({}); + await clear({}); + await router.push(localeRoute({ name: 'home' })); + }; + + return { sidebarLinkGroups, logoutUser }; };