fix: m2-1017 logout doesn't work after reload of the MyAccount page

Author: bartoszherba

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) }"
                 />
               </li>
             </SfList>
@@ -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,
     };
   },
 });

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<string, () => (Promise<void> | 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 };
 };