From 2655eee2d9d6cb3a16a469ce87e421fd3f15eae3 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Thu, 5 May 2022 12:05:16 +0200
Subject: [PATCH 01/19] refactor: add new myaccount layout with routes

M2-544
---
 packages/theme/components/AppHeader.vue       |   2 +-
 .../theme/components/BottomNavigation.vue     |   2 +-
 packages/theme/modules/catalog/index.ts       |   5 +-
 .../customer/components/RoutePlaceholder.vue  |   3 +
 packages/theme/modules/customer/index.ts      |  83 +++++++-
 .../customer/pages/AddressesDetails.vue       |   4 +-
 .../modules/customer/pages/MyAccount.vue      | 195 ------------------
 .../customer/pages/MyAccount/MyAccount.vue    | 118 +++++++++++
 .../pages/MyAccount/useSidebarLinkGroups.ts   |  62 ++++++
 9 files changed, 262 insertions(+), 212 deletions(-)
 create mode 100644 packages/theme/modules/customer/components/RoutePlaceholder.vue
 delete mode 100644 packages/theme/modules/customer/pages/MyAccount.vue
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 1b9d85599..28ce31e78 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -168,7 +168,7 @@ export default defineComponent({
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push(`${app.localePath('/my-account/my-profile')}`);
+        await router.push(app.localeRoute({ name: 'customer-my-profile' }));
       } else {
         toggleLoginModal();
       }
diff --git a/packages/theme/components/BottomNavigation.vue b/packages/theme/components/BottomNavigation.vue
index 41bad4bb1..8ea5eaf48 100644
--- a/packages/theme/components/BottomNavigation.vue
+++ b/packages/theme/components/BottomNavigation.vue
@@ -106,7 +106,7 @@ export default defineComponent({
     const { app } = useContext();
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push(`${app.localePath('/my-account')}`);
+        await router.push(app.localeRoute({ name: 'customer' }));
       } else {
         toggleLoginModal();
       }
diff --git a/packages/theme/modules/catalog/index.ts b/packages/theme/modules/catalog/index.ts
index 2b6e7d439..1edc01a0f 100644
--- a/packages/theme/modules/catalog/index.ts
+++ b/packages/theme/modules/catalog/index.ts
@@ -1,11 +1,12 @@
 import path from 'node:path';
 import url from 'node:url';
-import { Module } from '@nuxt/types';
+import type { Module } from '@nuxt/types';
+import type { NuxtRouteConfig } from '@nuxt/types/config/router';
 
 const nuxtModule : Module = function categoryModule() {
   const themeDir = path.dirname(url.fileURLToPath(import.meta.url));
 
-  this.extendRoutes((routes) => {
+  this.extendRoutes((routes: NuxtRouteConfig[]) => {
     routes.unshift({
       name: 'category',
       path: '/c/:slug_1/:slug_2?/:slug_3?/:slug_4?/:slug_5?',
diff --git a/packages/theme/modules/customer/components/RoutePlaceholder.vue b/packages/theme/modules/customer/components/RoutePlaceholder.vue
new file mode 100644
index 000000000..0354ff78d
--- /dev/null
+++ b/packages/theme/modules/customer/components/RoutePlaceholder.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Work in progress</div>
+</template>
diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index b25145512..5923f3f38 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -1,19 +1,80 @@
 import path from 'node:path';
 import url from 'node:url';
 import { Module } from '@nuxt/types';
+import { NuxtRouteConfig } from '@nuxt/types/config/router';
 
-const nuxtModule : Module = function customerModule() {
-  this.extendRoutes((routes) => {
-    const component = path.resolve(
-      path.dirname(url.fileURLToPath(import.meta.url)),
-      'pages/MyAccount.vue',
-    );
+const moduleDir = path.dirname(url.fileURLToPath(import.meta.url));
+
+const stub = path.resolve(moduleDir, 'components/RoutePlaceholder.vue');
 
-    routes.unshift({
-      name: 'my-account',
-      path: '/my-account/:pageName?',
-      component,
-    });
+const moduleRoutes : NuxtRouteConfig = {
+  name: 'customer',
+  path: '/customer',
+  component: path.resolve(moduleDir, 'pages/MyAccount/MyAccount.vue'),
+  meta: {
+    titleLabel: 'My Account',
+  },
+  children: [
+    {
+      name: 'customer-my-profile',
+      path: 'my-profile',
+      // component: path.resolve(moduleDir, 'pages/MyProfile.vue'),
+      component: stub,
+      meta: {
+        titleLabel: 'My profile',
+      },
+    },
+    {
+      name: 'customer-addresses-details',
+      path: 'addresses-details',
+      // component: path.resolve(moduleDir, 'pages/AddressesDetails.vue'),
+      component: stub,
+      meta: {
+        titleLabel: 'Addresses details',
+      },
+    },
+    {
+      name: 'customer-my-newsletter',
+      path: 'my-newsletter',
+      // component: path.resolve(moduleDir, 'pages/MyNewsletter.vue'),
+      component: stub,
+      meta: {
+        titleLabel: 'My newsletter',
+      },
+    },
+    {
+      name: 'customer-my-wishlist',
+      path: 'my-wishlist',
+      // component: path.resolve(moduleDir, 'pages/MyWishlist.vue'),
+      component: stub,
+      meta: {
+        titleLabel: 'My wishlist',
+      },
+    },
+    {
+      name: 'customer-order-history',
+      path: 'order-history',
+      // component: path.resolve(moduleDir, 'pages/OrderHistory.vue'),
+      component: stub,
+      meta: {
+        titleLabel: 'Order history',
+      },
+    },
+    {
+      name: 'customer-my-reviews',
+      path: 'my-reviews',
+      // component: path.resolve(moduleDir, 'pages/MyReviews.vue'),
+      component: stub,
+      meta: {
+        titleLabel: 'My reviews',
+      },
+    },
+  ],
+};
+
+const nuxtModule : Module = function customerModule() {
+  this.extendRoutes((routes: NuxtRouteConfig[]) => {
+    routes.unshift(moduleRoutes);
   });
 };
 
diff --git a/packages/theme/modules/customer/pages/AddressesDetails.vue b/packages/theme/modules/customer/pages/AddressesDetails.vue
index fc7ed3503..b4d445591 100644
--- a/packages/theme/modules/customer/pages/AddressesDetails.vue
+++ b/packages/theme/modules/customer/pages/AddressesDetails.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 
       await router.push(
         `${app.localePath({
-          path: `/my-account/${getTranslatedUrlAddress('Addresses details')}`,
+          path: `/customer/${getTranslatedUrlAddress('Addresses details')}`,
           query: { id: addressId },
         })}`,
       );
@@ -154,7 +154,7 @@ export default defineComponent({
         const data = await actionMethod({ address: form });
         await router.push(
           app.localePath(
-            `/my-account/${getTranslatedUrlAddress('Addresses details')}`,
+            `/customer/${getTranslatedUrlAddress('Addresses details')}`,
           ),
         );
         userAddresses.value = userAddressesGetters.getAddresses(data);
diff --git a/packages/theme/modules/customer/pages/MyAccount.vue b/packages/theme/modules/customer/pages/MyAccount.vue
deleted file mode 100644
index 3e2af4a2f..000000000
--- a/packages/theme/modules/customer/pages/MyAccount.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div id="my-account">
-    <SfBreadcrumbs
-      class="breadcrumbs desktop-only"
-      :breadcrumbs="breadcrumbs"
-    />
-    <SfContentPages
-      v-e2e="'my-account-content-pages'"
-      :title="$t('My Account')"
-      :active="activePage"
-      class="my-account"
-      @click:change="changeActivePage"
-    >
-      <SfContentCategory :title="$t('Personal Details')">
-        <SfContentPage :title="$t('My profile')">
-          <SkeletonLoader
-            v-if="$fetchState.pending"
-            :height="skeletonHeight"
-          />
-          <MyProfile v-else />
-        </SfContentPage>
-
-        <SfContentPage :title="$t('Addresses details')">
-          <SkeletonLoader
-            v-if="$fetchState.pending"
-            :height="skeletonHeight"
-          />
-          <AddressesDetails v-else />
-        </SfContentPage>
-
-        <SfContentPage :title="$t('My newsletter')">
-          <SkeletonLoader
-            v-if="$fetchState.pending"
-            :height="skeletonHeight"
-          />
-          <MyNewsletter v-else />
-        </SfContentPage>
-        <SfContentPage :title="$t('My wishlist')">
-          <SkeletonLoader
-            v-if="$fetchState.pending"
-            :height="skeletonHeight"
-          />
-          <MyWishlist v-else />
-        </SfContentPage>
-      </SfContentCategory>
-
-      <SfContentCategory :title="$t('Order details')">
-        <SfContentPage :title="$t('Order history')">
-          <SkeletonLoader
-            v-if="$fetchState.pending"
-            :height="skeletonHeight"
-          />
-          <OrderHistory v-else />
-        </SfContentPage>
-
-        <SfContentPage :title="$t('My reviews')">
-          <SkeletonLoader
-            v-if="$fetchState.pending"
-            height="100vh"
-          />
-          <MyReviews v-else />
-        </SfContentPage>
-      </SfContentCategory>
-
-      <SfContentPage :title="$t('Log out')" />
-    </SfContentPages>
-  </div>
-</template>
-<script>
-import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
-import {
-  computed,
-  defineComponent,
-  ref,
-  useContext,
-  useFetch,
-  useRoute,
-  useRouter,
-} from '@nuxtjs/composition-api';
-import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
-import MyProfile from '~/modules/customer/pages/MyProfile.vue';
-import AddressesDetails from '~/modules/customer/pages/AddressesDetails.vue';
-import MyNewsletter from '~/modules/customer/pages//MyNewsletter.vue';
-import MyWishlist from '~/modules/customer/pages/MyWishlist.vue';
-import OrderHistory from '~/modules/customer/pages/OrderHistory.vue';
-import MyReviews from '~/modules/customer/pages/MyReviews.vue';
-import { useUser } from '~/modules/customer/composables/useUser';
-import useCart from '~/modules/checkout/composables/useCart';
-
-export default defineComponent({
-  name: 'MyAccount',
-  components: {
-    AddressesDetails,
-    MyNewsletter,
-    MyProfile,
-    MyReviews,
-    MyWishlist,
-    OrderHistory,
-    SfBreadcrumbs,
-    SfContentPages,
-    SkeletonLoader,
-  },
-  middleware: [
-    'is-authenticated',
-  ],
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const { logout, load: loadUser, user } = useUser();
-    const { clear } = useCart();
-    const { localePath, app } = useContext();
-
-    useFetch(async () => {
-      if (user.value === null) {
-        await loadUser();
-      }
-    });
-
-    const breadcrumbs = ref([
-      {
-        text: app.i18n.t('Home'),
-        link: '#',
-      },
-      {
-        text: app.i18n.t('My Account'),
-        link: '#',
-      },
-    ]);
-
-    const activePage = computed(() => {
-      const { pageName } = route.value.params;
-
-      return pageName
-        ? (pageName.charAt(0).toUpperCase() + pageName.slice(1).replace('-', ' '))
-        : app.i18n.t('My profile');
-    });
-
-    const changeActivePage = async (title) => {
-      if (title === app.i18n.t('Log out')) {
-        localStorage.removeItem('vsf-checkout');
-        await Promise.all([logout(), clear()]);
-        await router.push(`${localePath({ name: 'home' })}`);
-
-        return;
-      }
-
-      const slugifiedTitle = (title || '').toLowerCase().replace(' ', '-');
-      const transformedPath = `/my-account/${slugifiedTitle}`;
-      await router.push(`${localePath(transformedPath)}`);
-    };
-
-    return {
-      user,
-      activePage,
-      breadcrumbs,
-      changeActivePage,
-      skeletonHeight: '100vh',
-    };
-  },
-});
-</script>
-
-<style lang='scss' scoped>
-#my-account {
-  box-sizing: border-box;
-  @include for-desktop {
-    max-width: 1240px;
-    margin: 0 auto;
-  }
-}
-.my-account {
-  @include for-mobile {
-    --content-pages-sidebar-category-title-font-weight: var(
-      --font-weight--normal
-    );
-    --content-pages-sidebar-category-title-margin: var(--spacer-sm)
-      var(--spacer-sm) var(--spacer-sm) var(--spacer-sm);
-  }
-  @include for-desktop {
-    --content-pages-sidebar-category-title-margin: var(--spacer-xl) 0 0 0;
-  }
-}
-.breadcrumbs {
-  margin: var(--spacer-base) 0 var(--spacer-lg);
-}
-.sf-content-pages {
-  height: auto;
-}
-::v-deep .sf-content-pages__content {
-  height: auto;
-}
-.sf-content-pages__content {
-  height: auto;
-}
-</style>
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
new file mode 100644
index 000000000..0dd281acd
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
@@ -0,0 +1,118 @@
+<template>
+  <div id="my-account">
+    <div class="sf-content-pages my-account">
+      <SfBar
+        class="smartphone-only"
+        :title="title"
+        :back="isOnSubpage"
+        @click:back="goToTopLevelRoute"
+      />
+      <section
+        :class="{ 'is-active': isOnSubpage}"
+        class="sf-content-pages__section"
+      >
+        <div class="sf-content-pages__sidebar">
+          <h1
+            v-t="'My Account'"
+            class="sf-content-pages__title desktop-only"
+          />
+          <div
+            v-for="linkGroup in sidebarLinkGroups"
+            :key="linkGroup.title"
+          >
+            <h2
+              v-t="linkGroup.title"
+              class="sf-content-pages__category-title"
+            />
+            <SfList class="sf-content-pages__list">
+              <li
+                v-for="item in linkGroup.items"
+                :key="item.label"
+                class="sf-content-pages__list-item sf-list__item"
+              >
+                <SfMenuItem
+                  :label="$t(item.label)"
+                  :link="localeRoute(item.link)"
+                  class="sf-content-pages__menu"
+                  v-on="item.listeners"
+                />
+              </li>
+            </SfList>
+          </div>
+        </div>
+        <div class="sf-content-pages__content">
+          <router-view />
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  SfMenuItem, SfList, SfBar,
+} from '@storefront-ui/vue';
+import {
+  defineComponent,
+  useContext,
+  useRouter,
+  useRoute,
+  computed,
+} from '@nuxtjs/composition-api';
+import { useSidebarLinkGroups } from './useSidebarLinkGroups';
+
+export default defineComponent({
+  components: {
+    SfBar,
+    SfList,
+    SfMenuItem,
+  },
+  middleware: 'is-authenticated',
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const { i18n, localeRoute } = useContext();
+
+    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));
+
+    const { sidebarLinkGroups } = useSidebarLinkGroups();
+
+    return {
+      sidebarLinkGroups,
+      title,
+      isOnSubpage,
+      goToTopLevelRoute,
+    };
+  },
+});
+</script>
+
+<style lang='scss' scoped>
+::v-deep {
+  .nuxt-link-exact-active > .sf-menu-item__label {
+    color: var(--c-primary);
+  }
+}
+
+.my-account {
+  @include for-mobile {
+    --content-pages-sidebar-category-title-font-weight: var(
+      --font-weight--normal
+    );
+    --content-pages-sidebar-category-title-margin: var(--spacer-sm)
+      var(--spacer-sm) var(--spacer-sm) var(--spacer-sm);
+  }
+  @include for-desktop {
+    --content-pages-sidebar-category-title-margin: var(--spacer-xl) 0 0 0;
+  }
+}
+
+.sf-content-pages {
+  &__content {
+    padding-top: 0;
+    height: auto;
+  }
+}
+</style>
diff --git a/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts b/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts
new file mode 100644
index 000000000..7f3032b2e
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts
@@ -0,0 +1,62 @@
+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)> };
+
+export const useSidebarLinkGroups = () => {
+  const { localeRoute } = useContext();
+  const { logout } = useUser();
+  const { clear } = useCart();
+
+  const router = useRouter();
+  const sidebarLinkGroups : LinkGroup[] = [
+    {
+      title: 'Personal details',
+      items: [
+        {
+          label: 'My profile',
+          link: { name: 'customer-my-profile' },
+        },
+        {
+          label: 'Addresses details',
+          link: { name: 'customer-addresses-details' },
+        },
+        {
+          label: 'My newsletter',
+          link: { name: 'customer-my-newsletter' },
+        },
+        {
+          label: 'My wishlist',
+          link: { name: 'customer-my-wishlist' },
+        },
+      ],
+    },
+    {
+      title: 'Order details',
+      items: [
+        {
+          label: 'Order history',
+          link: { name: 'customer-order-history' },
+        },
+        {
+          label: 'My reviews',
+          link: { name: 'customer-my-reviews' },
+        },
+        {
+          label: 'Log out',
+          listeners: {
+            click: async () => {
+              await Promise.all([logout({}), clear({})]);
+              await router.push(localeRoute({ name: 'home' }));
+            },
+          },
+        },
+      ],
+    },
+  ];
+
+  return { sidebarLinkGroups };
+};

From 251979407449b5b22a33f891bdd7f62a57cce098 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 6 May 2022 11:46:50 +0200
Subject: [PATCH 02/19] refactor: move forms and add typings

M2-546

refactor: re-add component names

refactor: remove unnecessary whitespace

refactor: remove unnecessary whitespace

chore: remove now empty profile update form file
---
 packages/theme/modules/customer/index.ts      |  3 +--
 .../customer/pages/MyAccount/MyAccount.vue    |  1 +
 .../pages/{ => MyProfile}/MyProfile.vue       | 20 ++++++++--------
 .../MyProfile}/PasswordResetForm.vue          | 13 ++++++-----
 .../MyProfile}/ProfileUpdateForm.vue          | 23 +++++++++----------
 .../modules/customer/pages/MyProfile/types.ts | 11 +++++++++
 6 files changed, 41 insertions(+), 30 deletions(-)
 rename packages/theme/modules/customer/pages/{ => MyProfile}/MyProfile.vue (84%)
 rename packages/theme/modules/customer/{components => pages/MyProfile}/PasswordResetForm.vue (92%)
 rename packages/theme/modules/customer/{components => pages/MyProfile}/ProfileUpdateForm.vue (91%)
 create mode 100644 packages/theme/modules/customer/pages/MyProfile/types.ts

diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index 5923f3f38..12da9d219 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -18,8 +18,7 @@ const moduleRoutes : NuxtRouteConfig = {
     {
       name: 'customer-my-profile',
       path: 'my-profile',
-      // component: path.resolve(moduleDir, 'pages/MyProfile.vue'),
-      component: stub,
+      component: path.resolve(moduleDir, 'pages/MyProfile/MyProfile.vue'),
       meta: {
         titleLabel: 'My profile',
       },
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
index 0dd281acd..e8b186420 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
@@ -62,6 +62,7 @@ import {
 import { useSidebarLinkGroups } from './useSidebarLinkGroups';
 
 export default defineComponent({
+  name: 'MyAccount',
   components: {
     SfBar,
     SfList,
diff --git a/packages/theme/modules/customer/pages/MyProfile.vue b/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
similarity index 84%
rename from packages/theme/modules/customer/pages/MyProfile.vue
rename to packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
index c742c503b..464923be5 100644
--- a/packages/theme/modules/customer/pages/MyProfile.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
@@ -28,7 +28,7 @@
   </SfTabs>
 </template>
 
-<script>
+<script lang="ts">
 import { extend } from 'vee-validate';
 import {
   required,
@@ -38,9 +38,10 @@ import {
 import { SfTabs } from '@storefront-ui/vue';
 import { defineComponent } from '@nuxtjs/composition-api';
 import { useUser } from '~/modules/customer/composables/useUser';
-import ProfileUpdateForm from '~/modules/customer/components/ProfileUpdateForm.vue';
-import PasswordResetForm from '~/modules/customer/components/PasswordResetForm.vue';
+import ProfileUpdateForm from '~/modules/customer/pages/MyProfile/ProfileUpdateForm.vue';
+import PasswordResetForm from '~/modules/customer/pages/MyProfile/PasswordResetForm.vue';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/modules/customer/helpers/passwordValidation';
+import type { FormFn, OnFormComplete, OnFormError } from '~/modules/customer/helpers/passwordValidation';
 
 extend('required', {
   ...required,
@@ -54,8 +55,7 @@ extend('min', {
 
 extend('password', {
   message: invalidPasswordMsg,
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  validate: (value) => customerPasswordRegExp.test(value),
+  validate: (value: string) => customerPasswordRegExp.test(value),
 });
 
 extend('confirmed', {
@@ -64,8 +64,6 @@ extend('confirmed', {
 });
 
 export default defineComponent({
-  name: 'PersonalDetails',
-
   components: {
     SfTabs,
     ProfileUpdateForm,
@@ -75,13 +73,16 @@ export default defineComponent({
   setup() {
     const {
       changePassword,
-      errors,
       loading,
       updateUser,
       error,
     } = useUser();
 
-    const formHandler = async (fn, onComplete, onError) => {
+    const formHandler = async (
+      fn: FormFn,
+      onComplete: OnFormComplete,
+      onError: OnFormError,
+    ) => {
       await fn();
       const actionErr = error.value.changePassword || error.value.updateUser;
       if (actionErr) {
@@ -112,7 +113,6 @@ export default defineComponent({
 
     return {
       loading,
-      errors,
       updatePersonalData,
       updatePassword,
     };
diff --git a/packages/theme/modules/customer/components/PasswordResetForm.vue b/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
similarity index 92%
rename from packages/theme/modules/customer/components/PasswordResetForm.vue
rename to packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
index 6a567f4f7..30122bcee 100644
--- a/packages/theme/modules/customer/components/PasswordResetForm.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
@@ -67,10 +67,9 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { SfInput, SfButton } from '@storefront-ui/vue';
 import { useUiNotification } from '~/composables';
+import { SubmitEventPayload } from './types';
 
 export default defineComponent({
-  name: 'PasswordResetForm',
-
   components: {
     SfInput,
     SfButton,
@@ -90,7 +89,7 @@ export default defineComponent({
 
     const form = ref(resetForm());
 
-    const submitForm = (resetValidationFn) => () => {
+    const submitForm = (resetValidationFn: () => void) => () => {
       const onComplete = () => {
         form.value = resetForm();
         sendNotification({
@@ -104,10 +103,10 @@ export default defineComponent({
         resetValidationFn();
       };
 
-      const onError = (msg) => {
+      const onError = (message: string) => {
         sendNotification({
           id: Symbol('password_not_updated'),
-          message: msg,
+          message,
           type: 'danger',
           icon: 'cross',
           persist: false,
@@ -115,7 +114,9 @@ export default defineComponent({
         });
       };
 
-      emit('submit', { form, onComplete, onError });
+      const eventPayload : SubmitEventPayload = { form, onComplete, onError };
+
+      emit('submit', eventPayload);
     };
 
     return {
diff --git a/packages/theme/modules/customer/components/ProfileUpdateForm.vue b/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
similarity index 91%
rename from packages/theme/modules/customer/components/ProfileUpdateForm.vue
rename to packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
index 4068b8606..a389f8c4c 100644
--- a/packages/theme/modules/customer/components/ProfileUpdateForm.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
@@ -56,9 +56,7 @@
         persistent
         @close="requirePassword = false"
       >
-        {{
-          $t('Please type your current password to change your email address.')
-        }}
+        {{ $t('Please type your current password to change your email address.') }}
         <SfInput
           v-model="currentPassword"
           type="password"
@@ -79,9 +77,7 @@
         v-if="requirePassword"
         class="smartphone-only"
       >
-        {{
-          $t('Please type your current password to change your email address.')
-        }}
+        {{ $t('Please type your current password to change your email address.') }}
         <SfInput
           v-model="currentPassword"
           type="password"
@@ -109,7 +105,7 @@
   </ValidationObserver>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { email } from 'vee-validate/dist/rules';
@@ -117,6 +113,7 @@ import { SfInput, SfButton, SfModal } from '@storefront-ui/vue';
 import userGetters from '~/modules/customer/getters/userGetters';
 import { useUiNotification } from '~/composables';
 import { useUser } from '~/modules/customer/composables/useUser';
+import type { SubmitFormFn, SubmitEventPayload } from './types';
 
 extend('email', {
   ...email,
@@ -140,7 +137,7 @@ export default defineComponent({
     },
   },
   emits: ['submit'],
-  setup(props, { emit }) {
+  setup(_props, { emit }) {
     const { user } = useUser();
     const currentPassword = ref('');
     const requirePassword = ref(false);
@@ -153,7 +150,7 @@ export default defineComponent({
 
     const form = ref(resetForm());
 
-    const submitForm = (resetValidationFn) => () => {
+    const submitForm = (resetValidationFn: () => void) => () => {
       const onComplete = () => {
         form.value = resetForm();
         requirePassword.value = false;
@@ -169,10 +166,10 @@ export default defineComponent({
         resetValidationFn();
       };
 
-      const onError = (msg) => {
+      const onError = (message: string) => {
         sendNotification({
           id: Symbol('user_updated'),
-          message: msg,
+          message,
           type: 'danger',
           icon: 'cross',
           persist: false,
@@ -190,7 +187,9 @@ export default defineComponent({
           form.value.password = currentPassword.value;
         }
 
-        emit('submit', { form, onComplete, onError });
+        const eventPayload : SubmitEventPayload = { form, onComplete, onError };
+
+        emit('submit', eventPayload);
       }
     };
 
diff --git a/packages/theme/modules/customer/pages/MyProfile/types.ts b/packages/theme/modules/customer/pages/MyProfile/types.ts
new file mode 100644
index 000000000..02d421fcf
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyProfile/types.ts
@@ -0,0 +1,11 @@
+import type { Ref } from '@nuxtjs/composition-api';
+
+export type Form = Ref<Record<string, unknown>>;
+export type OnFormComplete = () => void;
+export type OnFormError = (message: string) => void;
+
+export type SubmitEventPayload = {
+  form: Form,
+  onComplete: OnFormComplete,
+  onError: OnFormError,
+};

From 8ccfa44178adde1c22bc07f352d9a15fa28fb986 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 6 May 2022 12:11:25 +0200
Subject: [PATCH 03/19] refactor: remove User interface in favor of Customer

M2-546
---
 .../customer/composables/useUser/index.ts     |  6 +++---
 .../customer/composables/useUser/useUser.ts   | 21 +++++--------------
 .../useUserAddress/useUserAddress.ts          |  4 ++--
 .../pages/MyProfile/ProfileUpdateForm.vue     |  6 +++---
 packages/theme/stores/customer.ts             |  5 ++---
 5 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/theme/modules/customer/composables/useUser/index.ts b/packages/theme/modules/customer/composables/useUser/index.ts
index 8b95ac9a7..1b7996662 100644
--- a/packages/theme/modules/customer/composables/useUser/index.ts
+++ b/packages/theme/modules/customer/composables/useUser/index.ts
@@ -8,10 +8,10 @@ import type { Ref } from '@nuxtjs/composition-api';
 import mask from '~/composables/utils/mask';
 import { Logger } from '~/helpers/logger';
 import { useCustomerStore } from '~/stores/customer';
-import useCart from '~/modules/checkout/composables/useCart';
+import { useCart } from '~/modules/checkout/composables/useCart';
 import { generateUserData } from '~/modules/customer/helpers/generateUserData';
+import { Customer } from '~/modules/GraphQL/types';
 import type {
-  User,
   UseUserInterface,
   UseUserLoadParams,
   UseUserLoginParams,
@@ -41,7 +41,7 @@ export function useUser(): UseUserInterface {
   });
   const error: Ref = ref(errorsFactory());
 
-  const setUser = (newUser: User) => {
+  const setUser = (newUser: Customer) => {
     customerStore.user = newUser;
     Logger.debug('useUserFactory.setUser', newUser);
   };
diff --git a/packages/theme/modules/customer/composables/useUser/useUser.ts b/packages/theme/modules/customer/composables/useUser/useUser.ts
index f47f5d581..83346115b 100644
--- a/packages/theme/modules/customer/composables/useUser/useUser.ts
+++ b/packages/theme/modules/customer/composables/useUser/useUser.ts
@@ -1,5 +1,6 @@
 import type { Ref, ComputedRef } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
+import type { Customer } from '~/modules/GraphQL/types';
 
 /**
  * Errors that occured in the `useUser` composable
@@ -13,23 +14,11 @@ export interface UseUserErrors {
   load: Error | null;
 }
 
-export interface User {
-  id: string
-  email: string
-  firstname: string
-  password: string
-  is_subscribed: boolean
-  middlename? : string
-  prefix?: string
-  suffix?: string
-  taxvat?: string
-}
-
 /**
  * Parameters accepted by the `updateUser` method in the `useUser` composable
  */
 export type UseUserUpdateUserParams = ComposableFunctionArgs<{
-  user: User;
+  user: Customer & { password: string } & NonNullable<Pick<Customer, 'email'>>;
 }>;
 
 /**
@@ -71,7 +60,7 @@ export interface UseUserInterface {
   /**
    * Overrides the `user` property with the data passed as a parameter
    */
-  setUser(newUser: User): void;
+  setUser(newUser: Customer): void;
 
   /**
    * Updates the current customer and saves the details returned from the API in the `user` property
@@ -101,7 +90,7 @@ export interface UseUserInterface {
   /**
    * Fetches the information about the current customer and saves results from the API in the `user` property
    */
-  load(params?: UseUserLoadParams): Promise<User>;
+  load(params?: UseUserLoadParams): Promise<Customer>;
 
   /**
    * Indicates whether any of the methods is in progress
@@ -116,7 +105,7 @@ export interface UseUserInterface {
   /**
    * Main data object populated by the `load()` method and updated by other methods in this composable
    */
-  user: ComputedRef<User | null>;
+  user: ComputedRef<Customer | null>;
 
   /**
    * Indicates whether the customer is authenticated or not
diff --git a/packages/theme/modules/customer/composables/useUserAddress/useUserAddress.ts b/packages/theme/modules/customer/composables/useUserAddress/useUserAddress.ts
index e7b14ef94..489e3d817 100644
--- a/packages/theme/modules/customer/composables/useUserAddress/useUserAddress.ts
+++ b/packages/theme/modules/customer/composables/useUserAddress/useUserAddress.ts
@@ -1,7 +1,7 @@
 import type { Ref, DeepReadonly } from '@nuxtjs/composition-api';
-import type { User } from '~/modules/customer/composables/useUser/useUser';
 import type { CustomerAddress } from '~/modules/GraphQL/types';
 import type { ComposableFunctionArgs } from '~/composables/types';
+import { Customer } from '~/modules/GraphQL/types';
 
 /**
  * Errors that occured in the `useUserAddress` composable
@@ -57,7 +57,7 @@ export interface UseUserAddressInterface {
   /**
    * Loads addresses from the profile of the current user
    */
-  load(force?: boolean): Promise<User>; // TODO: Should accept custom queries
+  load(force?: boolean): Promise<Customer>; // TODO: Should accept custom queries
 
   /**
    * Sets an existing address as the default for the current user
diff --git a/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue b/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
index a389f8c4c..f500bce9f 100644
--- a/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
@@ -106,14 +106,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { email } from 'vee-validate/dist/rules';
 import { SfInput, SfButton, SfModal } from '@storefront-ui/vue';
+import { defineComponent, ref } from '@nuxtjs/composition-api';
 import userGetters from '~/modules/customer/getters/userGetters';
-import { useUiNotification } from '~/composables';
 import { useUser } from '~/modules/customer/composables/useUser';
-import type { SubmitFormFn, SubmitEventPayload } from './types';
+import { useUiNotification } from '~/composables';
+import type { SubmitEventPayload } from '~/modules/customer/pages/MyProfile/types';
 
 extend('email', {
   ...email,
diff --git a/packages/theme/stores/customer.ts b/packages/theme/stores/customer.ts
index d7331b958..8686f3403 100644
--- a/packages/theme/stores/customer.ts
+++ b/packages/theme/stores/customer.ts
@@ -1,10 +1,9 @@
 import { defineStore } from 'pinia';
-import type { Cart } from '~/modules/GraphQL/types';
-import type { User } from '~/modules/customer/composables/useUser/useUser';
+import type { Cart, Customer } from '~/modules/GraphQL/types';
 
 interface CustomerState {
   cart: Cart,
-  user: User | null,
+  user: Customer | null,
   isLoggedIn: boolean,
 }
 

From 99af7b1bedf7a036cb69babfe8a62a86f4d1e00f Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 6 May 2022 12:31:59 +0200
Subject: [PATCH 04/19] refactor: better MyProfile typing

M2-546

refactor: add real myprofile form types

refactor: improve typing
---
 .../customer/composables/useUser/useUser.ts   |  4 +--
 .../customer/pages/MyProfile/MyProfile.vue    | 25 +++++++++++--------
 .../pages/MyProfile/PasswordResetForm.vue     | 10 ++++----
 .../pages/MyProfile/ProfileUpdateForm.vue     | 18 ++++++-------
 .../modules/customer/pages/MyProfile/types.ts | 20 +++++++++++----
 5 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/packages/theme/modules/customer/composables/useUser/useUser.ts b/packages/theme/modules/customer/composables/useUser/useUser.ts
index 83346115b..b2cdc36ca 100644
--- a/packages/theme/modules/customer/composables/useUser/useUser.ts
+++ b/packages/theme/modules/customer/composables/useUser/useUser.ts
@@ -1,6 +1,6 @@
 import type { Ref, ComputedRef } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
-import type { Customer } from '~/modules/GraphQL/types';
+import type { Customer, ChangeCustomerPasswordMutation } from '~/modules/GraphQL/types';
 
 /**
  * Errors that occured in the `useUser` composable
@@ -18,7 +18,7 @@ export interface UseUserErrors {
  * Parameters accepted by the `updateUser` method in the `useUser` composable
  */
 export type UseUserUpdateUserParams = ComposableFunctionArgs<{
-  user: Customer & { password: string } & NonNullable<Pick<Customer, 'email'>>;
+  user: ChangeCustomerPasswordMutation['changeCustomerPassword'] & { email?: string, password?: string }
 }>;
 
 /**
diff --git a/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue b/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
index 464923be5..8662840cd 100644
--- a/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
@@ -41,7 +41,9 @@ import { useUser } from '~/modules/customer/composables/useUser';
 import ProfileUpdateForm from '~/modules/customer/pages/MyProfile/ProfileUpdateForm.vue';
 import PasswordResetForm from '~/modules/customer/pages/MyProfile/PasswordResetForm.vue';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/modules/customer/helpers/passwordValidation';
-import type { FormFn, OnFormComplete, OnFormError } from '~/modules/customer/helpers/passwordValidation';
+import type {
+  OnFormComplete, OnFormError, ProfileUpdateFormFields, PasswordResetFormFields, SubmitEventPayload,
+} from '~/modules/customer/pages/MyProfile/types';
 
 extend('required', {
   ...required,
@@ -78,15 +80,15 @@ export default defineComponent({
       error,
     } = useUser();
 
-    const formHandler = async (
-      fn: FormFn,
+    const formHandler = async <T extends () => Promise<unknown>>(
+      onSubmit: T,
       onComplete: OnFormComplete,
       onError: OnFormError,
     ) => {
-      await fn();
+      await onSubmit();
       const actionErr = error.value.changePassword || error.value.updateUser;
       if (actionErr) {
-        onError(actionErr);
+        onError(actionErr.toString());
       } else {
         onComplete();
       }
@@ -96,8 +98,8 @@ export default defineComponent({
       form,
       onComplete,
       onError,
-    }) => formHandler(
-      async () => updateUser({ user: form.value }),
+    } : SubmitEventPayload<ProfileUpdateFormFields>) => formHandler(
+      async () => updateUser({ user: form }),
       onComplete,
       onError,
     );
@@ -106,10 +108,11 @@ export default defineComponent({
       form,
       onComplete,
       onError,
-    }) => formHandler(async () => changePassword({
-      current: form.value.currentPassword,
-      new: form.value.newPassword,
-    }), onComplete, onError);
+    } : SubmitEventPayload<PasswordResetFormFields>) => formHandler(
+      async () => changePassword({ current: form.currentPassword, new: form.newPassword }),
+      onComplete,
+      onError,
+    );
 
     return {
       loading,
diff --git a/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue b/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
index 30122bcee..16a98cc78 100644
--- a/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
@@ -67,7 +67,7 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { SfInput, SfButton } from '@storefront-ui/vue';
 import { useUiNotification } from '~/composables';
-import { SubmitEventPayload } from './types';
+import type { SubmitEventPayload, PasswordResetFormFields } from '~/modules/customer/pages/MyProfile/types';
 
 export default defineComponent({
   components: {
@@ -78,7 +78,7 @@ export default defineComponent({
   },
 
   setup(_, { emit }) {
-    const resetForm = () => ({
+    const getInitialForm = () : PasswordResetFormFields => ({
       currentPassword: '',
       newPassword: '',
       repeatPassword: '',
@@ -87,11 +87,11 @@ export default defineComponent({
       send: sendNotification,
     } = useUiNotification();
 
-    const form = ref(resetForm());
+    const form = ref(getInitialForm());
 
     const submitForm = (resetValidationFn: () => void) => () => {
       const onComplete = () => {
-        form.value = resetForm();
+        form.value = getInitialForm();
         sendNotification({
           id: Symbol('password_updated'),
           message: 'The user password was changed successfully updated!',
@@ -114,7 +114,7 @@ export default defineComponent({
         });
       };
 
-      const eventPayload : SubmitEventPayload = { form, onComplete, onError };
+      const eventPayload : SubmitEventPayload<PasswordResetFormFields> = { form: form.value, onComplete, onError };
 
       emit('submit', eventPayload);
     };
diff --git a/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue b/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
index f500bce9f..ac156a680 100644
--- a/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
+++ b/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
@@ -113,7 +113,7 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import userGetters from '~/modules/customer/getters/userGetters';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useUiNotification } from '~/composables';
-import type { SubmitEventPayload } from '~/modules/customer/pages/MyProfile/types';
+import type { SubmitEventPayload, ProfileUpdateFormFields } from '~/modules/customer/pages/MyProfile/types';
 
 extend('email', {
   ...email,
@@ -121,7 +121,6 @@ extend('email', {
 });
 
 export default defineComponent({
-  name: 'ProfileUpdateForm',
   components: {
     SfInput,
     SfButton,
@@ -141,18 +140,18 @@ export default defineComponent({
     const { user } = useUser();
     const currentPassword = ref('');
     const requirePassword = ref(false);
-    const resetForm = () => ({
+    const getInitialForm = () : ProfileUpdateFormFields => ({
       firstname: userGetters.getFirstName(user.value),
       lastname: userGetters.getLastName(user.value),
       email: userGetters.getEmailAddress(user.value),
     });
     const { send: sendNotification } = useUiNotification();
 
-    const form = ref(resetForm());
+    const form = ref(getInitialForm());
 
     const submitForm = (resetValidationFn: () => void) => () => {
       const onComplete = () => {
-        form.value = resetForm();
+        form.value = getInitialForm();
         requirePassword.value = false;
         currentPassword.value = '';
         sendNotification({
@@ -177,17 +176,16 @@ export default defineComponent({
         });
       };
 
-      if (
-        userGetters.getEmailAddress(user.value) !== form.value.email
-        && !requirePassword.value
-      ) {
+      const isEmailChanged = userGetters.getEmailAddress(user.value) !== form.value.email;
+
+      if (isEmailChanged && !requirePassword.value) {
         requirePassword.value = true;
       } else {
         if (currentPassword.value) {
           form.value.password = currentPassword.value;
         }
 
-        const eventPayload : SubmitEventPayload = { form, onComplete, onError };
+        const eventPayload : SubmitEventPayload<ProfileUpdateFormFields> = { form: form.value, onComplete, onError };
 
         emit('submit', eventPayload);
       }
diff --git a/packages/theme/modules/customer/pages/MyProfile/types.ts b/packages/theme/modules/customer/pages/MyProfile/types.ts
index 02d421fcf..b11c2d37c 100644
--- a/packages/theme/modules/customer/pages/MyProfile/types.ts
+++ b/packages/theme/modules/customer/pages/MyProfile/types.ts
@@ -1,11 +1,21 @@
-import type { Ref } from '@nuxtjs/composition-api';
-
-export type Form = Ref<Record<string, unknown>>;
 export type OnFormComplete = () => void;
 export type OnFormError = (message: string) => void;
 
-export type SubmitEventPayload = {
-  form: Form,
+export type SubmitEventPayload<TForm extends Record<string, unknown>> = {
+  form: TForm,
   onComplete: OnFormComplete,
   onError: OnFormError,
 };
+
+export type PasswordResetFormFields = {
+  currentPassword: string,
+  newPassword: string,
+  repeatPassword: string,
+};
+
+export type ProfileUpdateFormFields = {
+  firstname: string,
+  lastname: string,
+  email: string,
+  password?: string;
+};

From d8fca7ecdda35fa7d76ba4005b91248780185679 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 6 May 2022 13:37:11 +0200
Subject: [PATCH 05/19] refactor: remove duplication

---
 .../theme/modules/customer/composables/useUser/index.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/theme/modules/customer/composables/useUser/index.ts b/packages/theme/modules/customer/composables/useUser/index.ts
index 1b7996662..ad518f8ea 100644
--- a/packages/theme/modules/customer/composables/useUser/index.ts
+++ b/packages/theme/modules/customer/composables/useUser/index.ts
@@ -81,9 +81,9 @@ export function useUser(): UseUserInterface {
       Logger.debug('[Result]:', { data });
 
       if (errors) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        Logger.error(errors.map((e) => e.message).join(','));
-        error.value.updateUser = errors.map((e) => e.message).join(',');
+        const allErrorMessages = errors.map((e) => e.message).join(',');
+        Logger.error(allErrorMessages);
+        error.value.updateUser = allErrorMessages;
       }
 
       customerStore.user = data?.updateCustomerV2?.customer || {};

From 8125220e26ed2b8917e7a8f074ac4924ab597c8e Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 6 May 2022 14:50:37 +0200
Subject: [PATCH 06/19] fix: don't show MyProfile until userData is loaded

M2-546
---
 .../customer/pages/MyAccount/MyAccount.vue      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
index e8b186420..33cc9ef43 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
@@ -41,25 +41,27 @@
           </div>
         </div>
         <div class="sf-content-pages__content">
-          <router-view />
+          <router-view v-if="!$fetchState.pending" />
         </div>
       </section>
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import {
   SfMenuItem, SfList, SfBar,
 } from '@storefront-ui/vue';
+
 import {
   defineComponent,
   useContext,
   useRouter,
   useRoute,
   computed,
+  useFetch,
 } from '@nuxtjs/composition-api';
 import { useSidebarLinkGroups } from './useSidebarLinkGroups';
+import { useUser } from '../../composables/useUser';
 
 export default defineComponent({
   name: 'MyAccount',
@@ -73,13 +75,20 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const { i18n, localeRoute } = useContext();
+    const { user, load: loadUser } = useUser();
+
+    useFetch(async () => {
+      if (user.value === null) {
+        await loadUser();
+      }
+    });
+
+    const { sidebarLinkGroups } = 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));
 
-    const { sidebarLinkGroups } = useSidebarLinkGroups();
-
     return {
       sidebarLinkGroups,
       title,

From c8ec7fec0c32550050fbada59fd93833e8e571d4 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Mon, 9 May 2022 07:27:19 +0200
Subject: [PATCH 07/19] chore: move myprofile page files to myaccount dir

M2-546
---
 packages/theme/modules/customer/index.ts                    | 2 +-
 .../customer/pages/{ => MyAccount}/MyProfile/MyProfile.vue  | 6 +++---
 .../pages/{ => MyAccount}/MyProfile/PasswordResetForm.vue   | 2 +-
 .../pages/{ => MyAccount}/MyProfile/ProfileUpdateForm.vue   | 2 +-
 .../customer/pages/{ => MyAccount}/MyProfile/types.ts       | 0
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyProfile/MyProfile.vue (92%)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyProfile/PasswordResetForm.vue (98%)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyProfile/ProfileUpdateForm.vue (99%)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyProfile/types.ts (100%)

diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index 12da9d219..f7db155a0 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -18,7 +18,7 @@ const moduleRoutes : NuxtRouteConfig = {
     {
       name: 'customer-my-profile',
       path: 'my-profile',
-      component: path.resolve(moduleDir, 'pages/MyProfile/MyProfile.vue'),
+      component: path.resolve(moduleDir, 'pages/MyAccount/MyProfile/MyProfile.vue'),
       meta: {
         titleLabel: 'My profile',
       },
diff --git a/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue b/packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue
similarity index 92%
rename from packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
rename to packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue
index 8662840cd..530a2dc15 100644
--- a/packages/theme/modules/customer/pages/MyProfile/MyProfile.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue
@@ -38,12 +38,12 @@ import {
 import { SfTabs } from '@storefront-ui/vue';
 import { defineComponent } from '@nuxtjs/composition-api';
 import { useUser } from '~/modules/customer/composables/useUser';
-import ProfileUpdateForm from '~/modules/customer/pages/MyProfile/ProfileUpdateForm.vue';
-import PasswordResetForm from '~/modules/customer/pages/MyProfile/PasswordResetForm.vue';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/modules/customer/helpers/passwordValidation';
+import ProfileUpdateForm from '~/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue';
+import PasswordResetForm from '~/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue';
 import type {
   OnFormComplete, OnFormError, ProfileUpdateFormFields, PasswordResetFormFields, SubmitEventPayload,
-} from '~/modules/customer/pages/MyProfile/types';
+} from '~/modules/customer/pages/MyAccount/MyProfile/types';
 
 extend('required', {
   ...required,
diff --git a/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue b/packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue
similarity index 98%
rename from packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
rename to packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue
index 16a98cc78..3338fc005 100644
--- a/packages/theme/modules/customer/pages/MyProfile/PasswordResetForm.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue
@@ -67,7 +67,7 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { SfInput, SfButton } from '@storefront-ui/vue';
 import { useUiNotification } from '~/composables';
-import type { SubmitEventPayload, PasswordResetFormFields } from '~/modules/customer/pages/MyProfile/types';
+import type { SubmitEventPayload, PasswordResetFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
 
 export default defineComponent({
   components: {
diff --git a/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue b/packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
similarity index 99%
rename from packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
rename to packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
index ac156a680..cc61760e6 100644
--- a/packages/theme/modules/customer/pages/MyProfile/ProfileUpdateForm.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
@@ -113,7 +113,7 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import userGetters from '~/modules/customer/getters/userGetters';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useUiNotification } from '~/composables';
-import type { SubmitEventPayload, ProfileUpdateFormFields } from '~/modules/customer/pages/MyProfile/types';
+import type { SubmitEventPayload, ProfileUpdateFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
 
 extend('email', {
   ...email,
diff --git a/packages/theme/modules/customer/pages/MyProfile/types.ts b/packages/theme/modules/customer/pages/MyAccount/MyProfile/types.ts
similarity index 100%
rename from packages/theme/modules/customer/pages/MyProfile/types.ts
rename to packages/theme/modules/customer/pages/MyAccount/MyProfile/types.ts

From 5fbf1892417df4d29c099e96cd679221f2e8fbfb Mon Sep 17 00:00:00 2001
From: Artur Tagisow <5359825+sethidden@users.noreply.github.com>
Date: Wed, 11 May 2022 10:55:24 +0200
Subject: [PATCH 08/19] refactor: migrate myacccount addresses details (#969)

---
 .../customer/getters/userAddressesGetters.ts  |  43 +++---
 packages/theme/modules/customer/index.ts      |  49 ++++---
 .../AddressesDetails/AddressEdit.vue          |  78 +++++++++++
 .../AddressesDetails}/AddressForm.vue         |  49 +++----
 .../MyAccount/AddressesDetails/AddressNew.vue |  52 +++++++
 .../AddressesDetails}/AddressesDetails.vue    | 129 +++++-------------
 .../customer/pages/MyAccount/MyAccount.vue    |   1 +
 .../pages/MyAccount/MyProfile/MyProfile.vue   |   6 +-
 .../MyAccount/MyProfile/PasswordResetForm.vue |   4 +-
 .../MyAccount/MyProfile/ProfileUpdateForm.vue |   4 +-
 .../pages/MyAccount/MyProfile/types.ts        |   9 --
 packages/theme/modules/customer/types/form.ts |   8 ++
 12 files changed, 244 insertions(+), 188 deletions(-)
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressEdit.vue
 rename packages/theme/modules/customer/{components => pages/MyAccount/AddressesDetails}/AddressForm.vue (92%)
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressNew.vue
 rename packages/theme/modules/customer/pages/{ => MyAccount/AddressesDetails}/AddressesDetails.vue (55%)
 create mode 100644 packages/theme/modules/customer/types/form.ts

diff --git a/packages/theme/modules/customer/getters/userAddressesGetters.ts b/packages/theme/modules/customer/getters/userAddressesGetters.ts
index ffbc8b900..c67f1577c 100644
--- a/packages/theme/modules/customer/getters/userAddressesGetters.ts
+++ b/packages/theme/modules/customer/getters/userAddressesGetters.ts
@@ -1,30 +1,31 @@
+import { CustomerAddress } from '~/composables';
 import { TransformedCustomerAddress } from '~/modules/customer/composables/types';
 import { transformUserGetter } from '~/modules/customer/helpers/userAddressManipulator';
 
-export interface UserAddressesGetters<USER_ADDRESS, USER_ADDRESS_ITEM> {
-  getAddresses: (shipping: USER_ADDRESS, criteria?: Record<string, any>) => USER_ADDRESS_ITEM[];
-  getTotal: (shipping: USER_ADDRESS) => number;
-  getPostCode: (address: USER_ADDRESS_ITEM) => string;
-  getStreetName: (address: USER_ADDRESS_ITEM) => string;
-  getCity: (address: USER_ADDRESS_ITEM) => string;
-  getFirstName: (address: USER_ADDRESS_ITEM) => string;
-  getLastName: (address: USER_ADDRESS_ITEM) => string;
-  getCountry: (address: USER_ADDRESS_ITEM) => string;
-  getPhone: (address: USER_ADDRESS_ITEM) => string;
-  getEmail: (address: USER_ADDRESS_ITEM) => string;
-  getProvince: (address: USER_ADDRESS_ITEM) => string;
-  getCompanyName: (address: USER_ADDRESS_ITEM) => string;
-  getTaxNumber: (address: USER_ADDRESS_ITEM) => string;
-  getId: (address: USER_ADDRESS_ITEM) => string | number;
-  getApartmentNumber: (address: USER_ADDRESS_ITEM) => string | number;
-  isDefault: (address: USER_ADDRESS_ITEM) => boolean;
-  isDefaultShipping: (address: USER_ADDRESS_ITEM) => boolean;
-  isDefaultBilling: (address: USER_ADDRESS_ITEM) => boolean;
+export interface UserAddressesGetters<GENERIC_USER_ADDRESS_ITEM, SPECIFIC_USER_ADDRESS_ITEM> {
+  getAddresses: (shipping: GENERIC_USER_ADDRESS_ITEM[], criteria?: Record<string, any>) => GENERIC_USER_ADDRESS_ITEM[];
+  getTotal: (shipping: GENERIC_USER_ADDRESS_ITEM[]) => number;
+  getPostCode: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getStreetName: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getCity: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getFirstName: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getLastName: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getCountry: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getPhone: (address: SPECIFIC_USER_ADDRESS_ITEM) => string;
+  getEmail: (address: SPECIFIC_USER_ADDRESS_ITEM) => string;
+  getApartmentNumber: (address: SPECIFIC_USER_ADDRESS_ITEM) => string | number;
+  getProvince: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getCompanyName: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getTaxNumber: (address: GENERIC_USER_ADDRESS_ITEM) => string;
+  getId: (address: GENERIC_USER_ADDRESS_ITEM) => string | number;
+  isDefault: (address: GENERIC_USER_ADDRESS_ITEM) => boolean;
+  isDefaultShipping: (address: GENERIC_USER_ADDRESS_ITEM) => boolean;
+  isDefaultBilling: (address: GENERIC_USER_ADDRESS_ITEM) => boolean;
   getNeighborhood: (address: any) => string
   getAddressExtra: (address: any) => string
 }
 
-const userAddressesGetters: UserAddressesGetters<Array<TransformedCustomerAddress>, TransformedCustomerAddress> = {
+const userAddressesGetters: UserAddressesGetters<CustomerAddress, TransformedCustomerAddress> = {
   getAddresses: (addresses, criteria?: Record<string, any>) => {
     if (!addresses || addresses.length === 0 || !Array.isArray(addresses)) return [];
 
@@ -49,12 +50,12 @@ const userAddressesGetters: UserAddressesGetters<Array<TransformedCustomerAddres
   getCountry: (address) => address?.country_code || '',
   getPhone: (address) => address?.phone || '',
   getEmail: (address) => address?.email || '',
+  getApartmentNumber: (address) => (Array.isArray(address?.street) ? address?.street[1] : address?.apartment),
   getProvince: (address) => (address?.region?.region_code || address?.region?.region) || '',
   getCompanyName: (address) => address?.company || '',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getTaxNumber: (address) => address?.vat_id || '',
   getId: (address) => address?.id || '',
-  getApartmentNumber: (address) => (Array.isArray(address?.street) ? address?.street[1] : address?.apartment),
   getNeighborhood: (address) => (Array.isArray(address?.street) ? address?.street[2] : address?.neighborhood),
   getAddressExtra: (address) => (Array.isArray(address?.street) ? address?.street[3] : address?.extra),
   isDefault: (address) => (address?.default_shipping || address?.default_billing) || false,
diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index f7db155a0..7660e8724 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -1,7 +1,7 @@
 import path from 'node:path';
 import url from 'node:url';
-import { Module } from '@nuxt/types';
-import { NuxtRouteConfig } from '@nuxt/types/config/router';
+import type { Module } from '@nuxt/types';
+import type { NuxtRouteConfig } from '@nuxt/types/config/router';
 
 const moduleDir = path.dirname(url.fileURLToPath(import.meta.url));
 
@@ -11,62 +11,61 @@ const moduleRoutes : NuxtRouteConfig = {
   name: 'customer',
   path: '/customer',
   component: path.resolve(moduleDir, 'pages/MyAccount/MyAccount.vue'),
-  meta: {
-    titleLabel: 'My Account',
-  },
+  meta: { titleLabel: 'My Account' },
   children: [
     {
       name: 'customer-my-profile',
       path: 'my-profile',
       component: path.resolve(moduleDir, 'pages/MyAccount/MyProfile/MyProfile.vue'),
-      meta: {
-        titleLabel: 'My profile',
-      },
+      meta: { titleLabel: 'My profile' },
     },
     {
       name: 'customer-addresses-details',
       path: 'addresses-details',
-      // component: path.resolve(moduleDir, 'pages/AddressesDetails.vue'),
-      component: stub,
-      meta: {
-        titleLabel: 'Addresses details',
-      },
+      component: path.resolve(moduleDir, 'pages/MyAccount/AddressesDetails/AddressesDetails.vue'),
+      meta: { titleLabel: 'Addresses details' },
+    },
+    {
+      name: 'customer-addresses-details-new',
+      path: 'addresses-details/create',
+      component: path.resolve(moduleDir, 'pages/MyAccount/AddressesDetails/AddressNew.vue'),
+      meta: { titleLabel: 'Addresses details' },
+    },
+    {
+      name: 'customer-addresses-details-edit',
+      path: 'addresses-details/edit/:addressId',
+      component: path.resolve(moduleDir, 'pages/MyAccount/AddressesDetails/AddressEdit.vue'),
+      // @ts-expect-error NuxtRouteConfig and RouteConfig conflict
+      props: true,
+      meta: { titleLabel: 'Addresses details' },
     },
     {
       name: 'customer-my-newsletter',
       path: 'my-newsletter',
       // component: path.resolve(moduleDir, 'pages/MyNewsletter.vue'),
       component: stub,
-      meta: {
-        titleLabel: 'My newsletter',
-      },
+      meta: { titleLabel: 'My newsletter' },
     },
     {
       name: 'customer-my-wishlist',
       path: 'my-wishlist',
       // component: path.resolve(moduleDir, 'pages/MyWishlist.vue'),
       component: stub,
-      meta: {
-        titleLabel: 'My wishlist',
-      },
+      meta: { titleLabel: 'My wishlist' },
     },
     {
       name: 'customer-order-history',
       path: 'order-history',
       // component: path.resolve(moduleDir, 'pages/OrderHistory.vue'),
       component: stub,
-      meta: {
-        titleLabel: 'Order history',
-      },
+      meta: { titleLabel: 'Order history' },
     },
     {
       name: 'customer-my-reviews',
       path: 'my-reviews',
       // component: path.resolve(moduleDir, 'pages/MyReviews.vue'),
       component: stub,
-      meta: {
-        titleLabel: 'My reviews',
-      },
+      meta: { titleLabel: 'My reviews' },
     },
   ],
 };
diff --git a/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressEdit.vue b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressEdit.vue
new file mode 100644
index 000000000..79374e677
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressEdit.vue
@@ -0,0 +1,78 @@
+<template>
+  <transition name="fade">
+    <SfTabs class="tab-orphan">
+      <SfTab :title="$t('Update the address')">
+        <p
+          v-t="'Contact details updated'"
+          class="message"
+        />
+        <AddressForm
+          v-if="!$fetchState.pending"
+          :address="address"
+          @submit="update"
+        >
+          <template #submit-button-content>
+            {{ $t('Update the address') }}
+          </template>
+        </AddressForm>
+      </SfTab>
+    </SfTabs>
+  </transition>
+</template>
+
+<script lang="ts">
+import {
+  ref, defineComponent, useFetch, useRouter, useContext,
+} from '@nuxtjs/composition-api';
+import { SfTabs } from '@storefront-ui/vue';
+import AddressForm from '~/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue';
+
+import { useAddresses } from '~/modules/customer/composables/useAddresses';
+import userAddressesGetters from '~/modules/customer/getters/userAddressesGetters';
+
+import type { CustomerAddress } from '~/modules/GraphQL/types';
+import type { SubmitEventPayload } from '~/modules/customer/types/form';
+
+export default defineComponent({
+  name: 'AddressEdit',
+  components: { SfTabs, AddressForm },
+  props: {
+    addressId: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const router = useRouter();
+    const context = useContext();
+
+    const addressesComposable = useAddresses();
+    const address = ref(null);
+    const numericAddressId = Number.parseInt(props.addressId, 10); // because in below find(), CustomerAddress['id'] is numeric
+
+    useFetch(async () => {
+      const addressesData = await addressesComposable.load(); // TODO don't fetch all addresses just to pluck one address
+      address.value = userAddressesGetters
+        .getAddresses(addressesData)
+        .find(({ id }) => id === numericAddressId);
+    });
+
+    const update = async ({ form } : SubmitEventPayload<CustomerAddress>) => {
+      await addressesComposable.update({ address: { ...form, id: numericAddressId } });
+      await router.push(context.localeRoute({ name: 'customer-addresses-details' }));
+    };
+
+    return { address, update };
+  },
+});
+
+</script>
+
+<style lang="scss" scoped>
+.message {
+  font-family: var(--font-family--primary);
+  line-height: 1.6;
+  font-size: var(--font-size--base);
+  margin: 0 0 var(--spacer-base);
+}
+</style>
diff --git a/packages/theme/modules/customer/components/AddressForm.vue b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue
similarity index 92%
rename from packages/theme/modules/customer/components/AddressForm.vue
rename to packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue
index 774a7ace4..80dd4524f 100644
--- a/packages/theme/modules/customer/components/AddressForm.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue
@@ -140,7 +140,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="reloadCountry({ id: $event })"
+            @input="updateCountry({ id: $event })"
           >
             <SfSelectOption
               v-for="countryOption in countriesList"
@@ -183,13 +183,13 @@
         class="form__button"
         type="submit"
       >
-        {{ isNew ? $t('Add the address') : $t('Update the address') }}
+        <slot name="submit-button-content" />
       </SfButton>
     </form>
   </ValidationObserver>
 </template>
 
-<script type="module">
+<script lang="ts">
 import {
   SfInput,
   SfButton,
@@ -197,20 +197,19 @@ import {
   SfCheckbox,
 } from '@storefront-ui/vue';
 import { required, min, oneOf } from 'vee-validate/dist/rules';
+import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import {
-  ValidationProvider,
-  ValidationObserver,
-  extend,
-} from 'vee-validate';
-import {
+  ref,
   reactive,
   computed,
-  onBeforeMount,
   defineComponent,
-  ref,
+  onBeforeMount,
 } from '@nuxtjs/composition-api';
 import omitDeep from 'omit-deep';
+import { PropType } from 'vue';
+import { CustomerAddress } from '~/modules/GraphQL/types';
 import { useCountrySearch } from '~/composables';
+import type { Countries, Country, UseCountrySearchParams } from '~/composables';
 import addressGetter from '~/modules/customer/getters/addressGetter';
 
 extend('required', {
@@ -242,9 +241,8 @@ export default defineComponent({
 
   props: {
     address: {
-      type: Object,
+      type: Object as PropType<CustomerAddress>,
       default: () => ({
-        id: undefined,
         apartment: '',
         city: '',
         country_code: '',
@@ -261,25 +259,21 @@ export default defineComponent({
         default_billing: false,
       }),
     },
-    isNew: {
-      type: Boolean,
-      required: true,
-    },
   },
 
   setup(props, { emit }) {
-    const {
-      load: loadCountries,
-      search: searchCountry,
-    } = useCountrySearch();
+    const { load: loadCountries, search: searchCountry } = useCountrySearch();
 
-    const countries = ref([]);
-    const country = ref(null);
+    const countries = ref<Countries[]>([]);
+    const countriesList = computed(() => addressGetter.countriesList(countries.value));
 
-    const reloadCountry = async (params) => {
+    const country = ref<Country | null>(null);
+    const updateCountry = async (params: UseCountrySearchParams) => {
       country.value = await searchCountry(params);
     };
 
+    const regionInformation = computed(() => addressGetter.regionList(country.value));
+
     const form = reactive({
       apartment: props.address.apartment,
       city: props.address.city,
@@ -296,11 +290,7 @@ export default defineComponent({
       telephone: props.address.telephone,
       default_shipping: props.address.default_shipping || false,
       default_billing: props.address.default_billing || false,
-      ...(props.isNew ? {} : { id: props.address.id }),
     });
-    // @ts-ignore
-    const countriesList = computed(() => addressGetter.countriesList(countries.value));
-    const regionInformation = computed(() => addressGetter.regionList(country.value));
 
     const submitForm = () => {
       const regionId = regionInformation.value.find((r) => r.abbreviation === form.region.region_code)?.id;
@@ -318,7 +308,7 @@ export default defineComponent({
     onBeforeMount(async () => {
       countries.value = await loadCountries();
       if (props.address.country_code) {
-        country.value = await searchCountry({ id: props.address.country_code });
+        await updateCountry({ id: props.address.country_code });
       }
     });
 
@@ -327,7 +317,7 @@ export default defineComponent({
       submitForm,
       countriesList,
       regionInformation,
-      reloadCountry,
+      updateCountry,
     };
   },
 });
@@ -348,7 +338,6 @@ export default defineComponent({
 
     ::v-deep .sf-select__dropdown {
       font-size: var(--font-size--lg);
-      // margin: 0;
       font-family: var(--font-family--secondary);
       font-weight: var(--font-weight--normal);
     }
diff --git a/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressNew.vue b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressNew.vue
new file mode 100644
index 000000000..44fc40e46
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressNew.vue
@@ -0,0 +1,52 @@
+<template>
+  <transition name="fade">
+    <SfTabs class="tab-orphan">
+      <SfTab :title="$t('Add the address')">
+        <p
+          v-t="'Contact details updated'"
+          class="message"
+        />
+        <AddressForm @submit="createAddress">
+          <template #submit-button-content>
+            {{ $t('Add the address') }}
+          </template>
+        </AddressForm>
+      </SfTab>
+    </SfTabs>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext, useRouter } from '@nuxtjs/composition-api';
+import { SfTabs } from '@storefront-ui/vue';
+import { useAddresses } from '~/modules/customer/composables/useAddresses';
+import { CustomerAddress } from '~/modules/GraphQL/types';
+import { SubmitEventPayload } from '~/modules/customer/types/form';
+import AddressForm from '~/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue';
+
+export default defineComponent({
+  name: 'AddressNew',
+  components: { SfTabs, AddressForm },
+  setup() {
+    const context = useContext();
+    const router = useRouter();
+    const useAddressesComposable = useAddresses();
+
+    const createAddress = async ({ form } : SubmitEventPayload<CustomerAddress>) => {
+      await useAddressesComposable.save({ address: form });
+      await router.push(context.localeRoute({ name: 'customer-addresses-details' }));
+    };
+
+    return { createAddress };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.message {
+  font-family: var(--font-family--primary);
+  line-height: 1.6;
+  font-size: var(--font-size--base);
+  margin: 0 0 var(--spacer-base);
+}
+</style>
diff --git a/packages/theme/modules/customer/pages/AddressesDetails.vue b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
similarity index 55%
rename from packages/theme/modules/customer/pages/AddressesDetails.vue
rename to packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
index b4d445591..113addad3 100644
--- a/packages/theme/modules/customer/pages/AddressesDetails.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
@@ -1,37 +1,11 @@
 <template>
   <transition name="fade">
-    <SfTabs
-      v-if="editingAddress"
-      key="edit-address"
-      :open-tab="1"
-      class="tab-orphan"
-    >
-      <SfTab
-        :title="isNewAddress ? $t('Add the address') : $t('Update the address')"
-      >
-        <p class="message">
-          {{ $t('Contact details updated') }}
-        </p>
-
-        <AddressForm
-          :address="activeAddress"
-          :is-new="isNewAddress"
-          v-if="activeAddress && activeAddress.id || isNewAddress"
-          @submit="saveAddress"
-        />
-      </SfTab>
-    </SfTabs>
-
-    <SfTabs
-      v-else
-      key="address-list"
-      :open-tab="1"
-      class="tab-orphan"
-    >
+    <SfTabs class="tab-orphan">
       <SfTab :title="$t('Addresses details')">
-        <p class="message">
-          {{ $t('Manage addresses') }}
-        </p>
+        <p
+          v-t="'Manage addresses'"
+          class="message"
+        />
         <transition-group
           tag="div"
           name="fade"
@@ -48,13 +22,13 @@
               </div>
             </div>
             <div class="addresses__actions">
-              <SfButton @click="changeAddress(address)">
+              <SfButton @click="goToEditAddressPage(address.id)">
                 {{ $t('Change') }}
               </SfButton>
 
               <SfButton
                 v-if="!isDefault(address)"
-                class="color-light addresses__button-delete desktop-only"
+                class="desktop-only color-light addresses__button-delete"
                 @click="removeAddress(address)"
               >
                 {{ $t('Delete') }}
@@ -66,14 +40,14 @@
               role="button"
               width="14"
               height="14"
-              class="addresses__remove smartphone-only"
+              class="smartphone-only addresses__remove"
               @click.native="removeAddress(address)"
             />
           </div>
         </transition-group>
         <SfButton
           class="action-button"
-          @click="changeAddress()"
+          @click="goToCreateAddressPage()"
         >
           {{ $t('Add new address') }}
         </SfButton>
@@ -81,98 +55,57 @@
     </SfTabs>
   </transition>
 </template>
-<script>
+<script lang="ts">
 import { SfTabs, SfButton } from '@storefront-ui/vue';
 import {
-  computed,
   defineComponent,
   useRouter,
-  useRoute,
   useContext,
   ref,
   useFetch,
 } from '@nuxtjs/composition-api';
-import { useAddresses } from '~/composables';
+import { useAddresses } from '~/modules/customer/composables/useAddresses';
 import userAddressesGetters from '~/modules/customer/getters/userAddressesGetters';
-import AddressForm from '~/modules/customer/components/AddressForm.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
+import { CustomerAddress } from '~/modules/GraphQL/types';
 
 export default defineComponent({
-  name: 'ShippingDetails',
+  name: 'AddressesDetails',
   components: {
-    SfTabs,
-    SfButton,
-    AddressForm,
-    SvgImage,
-    UserAddressDetails,
+    SfTabs, SfButton, SvgImage, UserAddressDetails,
   },
   setup() {
-    const {
-      load, remove, update, save,
-    } = useAddresses();
+    const context = useContext();
     const router = useRouter();
-    const route = useRoute();
-    const { app } = useContext();
+
     const userAddresses = ref([]);
-    const activeAddress = ref({});
-    const getTranslatedUrlAddress = (title) => app.i18n.t(`${title}`).toLowerCase().replace(' ', '-');
-    const isNewAddress = computed(() => route.value.query.id === 'new');
-    const editingAddress = computed(() => !!route.value.query.id);
+    const { load, remove } = useAddresses();
     const { fetch } = useFetch(async () => {
       const addressesData = await load();
       userAddresses.value = userAddressesGetters.getAddresses(addressesData);
-
-      const activeAddressData = userAddresses.value
-        .filter((address) => String(address?.id) === route.value.query.id)
-        .pop();
-
-      activeAddress.value = activeAddressData;
     });
-    const changeAddress = async (address) => {
-      const addressId = address?.id || 'new';
 
-      await router.push(
-        `${app.localePath({
-          path: `/customer/${getTranslatedUrlAddress('Addresses details')}`,
-          query: { id: addressId },
-        })}`,
-      );
-    };
+    const goToCreateAddressPage = () => router.push(
+      context.localeRoute({ name: 'customer-addresses-details-new' }),
+    );
 
-    const removeAddress = async (address) => {
-      const isDefault = userAddressesGetters.isDefault(address);
-      if (!isDefault) {
-        await remove({ address });
-        fetch();
-      }
-    };
+    const goToEditAddressPage = (addressId: number) => router.push(
+      context.localeRoute({ name: 'customer-addresses-details-edit', params: { addressId: String(addressId) } }),
+    );
 
-    const saveAddress = async ({ form, onError }) => {
-      try {
-        const actionMethod = isNewAddress.value ? save : update;
-        const data = await actionMethod({ address: form });
-        await router.push(
-          app.localePath(
-            `/customer/${getTranslatedUrlAddress('Addresses details')}`,
-          ),
-        );
-        userAddresses.value = userAddressesGetters.getAddresses(data);
-      } catch (error) {
-        onError(error);
-      }
+    const removeAddress = async (address: CustomerAddress) => {
+      await remove({ address });
+      fetch();
     };
 
     return {
-      changeAddress,
-      update,
-      removeAddress,
-      saveAddress,
-      ...userAddressesGetters,
       userAddresses,
-      editingAddress,
-      activeAddress,
-      isNewAddress,
+      goToCreateAddressPage,
+      goToEditAddressPage,
+      removeAddress,
+      getId: userAddressesGetters.getId,
+      isDefault: userAddressesGetters.isDefault,
     };
   },
 });
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
index 33cc9ef43..a8d0d854a 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyAccount.vue
@@ -107,6 +107,7 @@ export default defineComponent({
 }
 
 .my-account {
+  height: 100%;
   @include for-mobile {
     --content-pages-sidebar-category-title-font-weight: var(
       --font-weight--normal
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue b/packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue
index 530a2dc15..7156269fc 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/MyProfile.vue
@@ -41,9 +41,8 @@ import { useUser } from '~/modules/customer/composables/useUser';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/modules/customer/helpers/passwordValidation';
 import ProfileUpdateForm from '~/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue';
 import PasswordResetForm from '~/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue';
-import type {
-  OnFormComplete, OnFormError, ProfileUpdateFormFields, PasswordResetFormFields, SubmitEventPayload,
-} from '~/modules/customer/pages/MyAccount/MyProfile/types';
+import type { OnFormComplete, OnFormError, SubmitEventPayload } from '~/modules/customer/types/form';
+import type { ProfileUpdateFormFields, PasswordResetFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
 
 extend('required', {
   ...required,
@@ -66,6 +65,7 @@ extend('confirmed', {
 });
 
 export default defineComponent({
+  name: 'MyProfile',
   components: {
     SfTabs,
     ProfileUpdateForm,
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue b/packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue
index 3338fc005..c68ed1cac 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/PasswordResetForm.vue
@@ -67,7 +67,9 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { SfInput, SfButton } from '@storefront-ui/vue';
 import { useUiNotification } from '~/composables';
-import type { SubmitEventPayload, PasswordResetFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
+
+import type { SubmitEventPayload } from '~/modules/customer/types/form';
+import type { PasswordResetFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
 
 export default defineComponent({
   components: {
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue b/packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
index cc61760e6..dcf70e4a3 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
@@ -113,7 +113,9 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 import userGetters from '~/modules/customer/getters/userGetters';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useUiNotification } from '~/composables';
-import type { SubmitEventPayload, ProfileUpdateFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
+
+import type { SubmitEventPayload } from '~/modules/customer/types/form';
+import type { ProfileUpdateFormFields } from '~/modules/customer/pages/MyAccount/MyProfile/types';
 
 extend('email', {
   ...email,
diff --git a/packages/theme/modules/customer/pages/MyAccount/MyProfile/types.ts b/packages/theme/modules/customer/pages/MyAccount/MyProfile/types.ts
index b11c2d37c..bdc3e23a2 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyProfile/types.ts
+++ b/packages/theme/modules/customer/pages/MyAccount/MyProfile/types.ts
@@ -1,12 +1,3 @@
-export type OnFormComplete = () => void;
-export type OnFormError = (message: string) => void;
-
-export type SubmitEventPayload<TForm extends Record<string, unknown>> = {
-  form: TForm,
-  onComplete: OnFormComplete,
-  onError: OnFormError,
-};
-
 export type PasswordResetFormFields = {
   currentPassword: string,
   newPassword: string,
diff --git a/packages/theme/modules/customer/types/form.ts b/packages/theme/modules/customer/types/form.ts
new file mode 100644
index 000000000..5dd8422e3
--- /dev/null
+++ b/packages/theme/modules/customer/types/form.ts
@@ -0,0 +1,8 @@
+export type OnFormComplete = () => void;
+export type OnFormError = (message: string) => void;
+
+export type SubmitEventPayload<TForm> = {
+  form: TForm,
+  onComplete: OnFormComplete,
+  onError: OnFormError,
+};

From aa5f4f5a9055fa5ab486863c68f2865d975765a8 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Wed, 11 May 2022 11:37:53 +0200
Subject: [PATCH 09/19] refactor: move order history for my account

refactor: split order history into list and single file page

refactor: fix stale async fetch key

before this commit visiting any singleorder for any order number would
always show the first fetched order, despite the orderId changing

refactor: remove unused

refactor: remove getters

also misc changes: move properties to top since they appear first in
the template aswell
---
 .../composables/useUserOrder/useUserOrder.ts  |   4 +-
 packages/theme/modules/customer/index.ts      |  11 +-
 .../OrderHistory}/OrderHistory.vue            | 120 +----------
 .../MyAccount/OrderHistory/SingleOrder.vue    | 197 ++++++++++++++++++
 packages/theme/plugins/fcPlugin.ts            |  16 +-
 5 files changed, 227 insertions(+), 121 deletions(-)
 rename packages/theme/modules/customer/pages/{ => MyAccount/OrderHistory}/OrderHistory.vue (66%)
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue

diff --git a/packages/theme/modules/customer/composables/useUserOrder/useUserOrder.ts b/packages/theme/modules/customer/composables/useUserOrder/useUserOrder.ts
index 59feb769d..6fd7d3fd9 100644
--- a/packages/theme/modules/customer/composables/useUserOrder/useUserOrder.ts
+++ b/packages/theme/modules/customer/composables/useUserOrder/useUserOrder.ts
@@ -2,7 +2,7 @@ import type { Ref } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
 import type {
   Maybe,
-  CustomerOrdersQuery,
+  CustomerOrders,
   CustomerOrdersQueryVariables,
 } from '~/modules/GraphQL/types';
 
@@ -25,7 +25,7 @@ export interface UseUserOrderInterface {
   /**
    * Fetches orders of the current customer
    */
-  search(params: UseUserOrderSearchParams) : Promise<Maybe<Array<CustomerOrdersQuery['customer']['orders']['items']>>>;
+  search(params: UseUserOrderSearchParams) : Promise<Maybe<CustomerOrders>>;
 
   /**
    * Indicates whether any of the methods is in progress
diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index 7660e8724..f5dd5d088 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -56,8 +56,15 @@ const moduleRoutes : NuxtRouteConfig = {
     {
       name: 'customer-order-history',
       path: 'order-history',
-      // component: path.resolve(moduleDir, 'pages/OrderHistory.vue'),
-      component: stub,
+      component: path.resolve(moduleDir, 'pages/MyAccount/OrderHistory/OrderHistory.vue'),
+      meta: { titleLabel: 'Order history' },
+    },
+    {
+      name: 'customer-single-order',
+      path: 'order-history/:orderId',
+      component: path.resolve(moduleDir, 'pages/MyAccount/OrderHistory/SingleOrder.vue'),
+      // @ts-expect-error NuxtRouteConfig and RouteConfig conflict
+      props: true,
       meta: { titleLabel: 'Order history' },
     },
     {
diff --git a/packages/theme/modules/customer/pages/OrderHistory.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
similarity index 66%
rename from packages/theme/modules/customer/pages/OrderHistory.vue
rename to packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
index 17ffd04f4..c1630f564 100644
--- a/packages/theme/modules/customer/pages/OrderHistory.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
@@ -1,5 +1,5 @@
 <template>
-  <SfTabs :open-tab="1">
+  <SfTabs>
     <SfTab
       data-cy="order-history-tab_my-orders"
       :title="$t('My orders')"
@@ -7,56 +7,6 @@
       <div v-if="loading">
         <SfLoader />
       </div>
-      <div v-else-if="currentOrder">
-        <SfButton
-          data-cy="order-history-btn_orders"
-          class="sf-button--text all-orders"
-          @click="currentOrder = null"
-        >
-          All Orders
-        </SfButton>
-        <div class="highlighted highlighted--total">
-          <SfProperty
-            :name="$t('Order ID')"
-            :value="orderGetters.getId(currentOrder)"
-            class="sf-property--full-width property"
-          />
-          <SfProperty
-            :name="$t('Date')"
-            :value="orderGetters.getDate(currentOrder)"
-            class="sf-property--full-width property"
-          />
-          <SfProperty
-            :name="$t('Status')"
-            :value="orderGetters.getStatus(currentOrder)"
-            class="sf-property--full-width property"
-          />
-          <SfProperty
-            :name="$t('Total')"
-            :value="$fc(orderGetters.getPrice(currentOrder))"
-            class="sf-property--full-width property"
-          />
-        </div>
-        <SfTable class="products">
-          <SfTableHeading>
-            <SfTableHeader class="products__name">
-              {{ $t('Product') }}
-            </SfTableHeader>
-            <SfTableHeader>{{ $t('Quantity') }}</SfTableHeader>
-            <SfTableHeader>{{ $t('Price') }}</SfTableHeader>
-          </SfTableHeading>
-          <SfTableRow
-            v-for="(item, i) in orderGetters.getItems(currentOrder)"
-            :key="i"
-          >
-            <SfTableData class="products__name">
-              {{ orderGetters.getItemName(item) }}
-            </SfTableData>
-            <SfTableData>{{ orderGetters.getItemQty(item) }}</SfTableData>
-            <SfTableData>{{ $fc(orderGetters.getItemPrice(item)) }}</SfTableData>
-          </SfTableRow>
-        </SfTable>
-      </div>
       <div v-else>
         <p class="message">
           {{ $t('Details and status orders') }}
@@ -100,13 +50,12 @@
               <span :class="getStatusTextClass(order)">{{ orderGetters.getStatus(order) }}</span>
             </SfTableData>
             <SfTableData class="orders__view orders__element--right">
-              <SfButton
+              <SfLink
                 data-cy="order-history-btn_view"
-                class="sf-button--text"
-                @click="currentOrder = order"
+                :link="localeRoute({ name: 'customer-single-order', params: { orderId: order.order_number } })"
               >
                 {{ $t('View details') }}
-              </SfButton>
+              </SfLink>
             </SfTableData>
           </SfTableRow>
         </SfTable>
@@ -169,14 +118,13 @@ import {
   SfTabs,
   SfTable,
   SfButton,
-  SfProperty,
   SfLink,
   SfPagination,
   SfSelect,
   SfLoader,
 } from '@storefront-ui/vue';
 import {
-  computed, defineComponent, ref, useRoute, useAsync,
+  computed, defineComponent, useRoute, useAsync,
 } from '@nuxtjs/composition-api';
 import LazyHydrate from 'vue-lazy-hydration';
 import { AgnosticOrderStatus } from '~/composables/types';
@@ -186,13 +134,12 @@ import { useUserOrder } from '~/modules/customer/composables/useUserOrder';
 import { CustomerOrder } from '~/modules/GraphQL/types';
 
 export default defineComponent({
-  name: 'PersonalDetails',
+  name: 'OrderHistory',
   components: {
     LazyHydrate,
     SfButton,
     SfLink,
     SfPagination,
-    SfProperty,
     SfSelect,
     SfTable,
     SfTabs,
@@ -200,9 +147,8 @@ export default defineComponent({
   },
   setup() {
     const { search, loading } = useUserOrder();
-    const currentOrder = ref(null);
-    const th = useUiHelpers();
     const route = useRoute();
+    const th = useUiHelpers();
     const {
       query: {
         page,
@@ -241,11 +187,9 @@ export default defineComponent({
     const pagination = computed(() => orderGetters.getPagination(orders.value));
 
     return {
-      currentOrder,
       getStatusTextClass,
       loading,
       orderGetters,
-      // @ts-ignore
       orders: computed(() => orderGetters.getItems(orders.value)),
       pagination,
       tableHeaders,
@@ -277,9 +221,6 @@ export default defineComponent({
     }
   }
 }
-.all-orders {
-  --button-padding: var(--spacer-base) 0;
-}
 .message {
   margin: 0 0 var(--spacer-xl) 0;
   font: var(--font-weight--light) var(--font-size--base) / 1.6 var(--font-family--primary);
@@ -294,26 +235,6 @@ export default defineComponent({
     }
   }
 }
-.product {
-  &__properties {
-    margin: var(--spacer-xl) 0 0 0;
-  }
-  &__property,
-  &__action {
-    font-size: var(--font-size--sm);
-  }
-  &__action {
-    color: var(--c-gray-variant);
-    font-size: var(--font-size--sm);
-    margin: 0 0 var(--spacer-sm) 0;
-    &:last-child {
-      margin: 0;
-    }
-  }
-  &__qty {
-    color: var(--c-text);
-  }
-}
 .products {
   --table-column-flex: 1;
   &__name {
@@ -323,33 +244,6 @@ export default defineComponent({
     }
   }
 }
-.highlighted {
-  box-sizing: border-box;
-  width: 100%;
-  background-color: var(--c-light);
-  padding: var(--spacer-sm);
-  --property-value-font-size: var(--font-size--base);
-  --property-name-font-size: var(--font-size--base);
-  &:last-child {
-    margin-bottom: 0;
-  }
-  ::v-deep .sf-property__name {
-    white-space: nowrap;
-  }
-  ::v-deep .sf-property__value {
-    text-align: right;
-  }
-  &--total {
-    margin-bottom: var(--spacer-sm);
-  }
-  @include for-desktop {
-    padding: var(--spacer-xl);
-    --property-name-font-size: var(--font-size--lg);
-    --property-name-font-weight: var(--font-weight--medium);
-    --property-value-font-size: var(--font-size--lg);
-    --property-value-font-weight: var(--font-weight--semibold);
-  }
-}
 
 .products {
   box-sizing: border-box;
diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
new file mode 100644
index 000000000..c100dd58e
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
@@ -0,0 +1,197 @@
+<template>
+  <SfTabs>
+    <SfTab
+      data-cy="order-history-tab_my-orders"
+      :title="$t('My orders')"
+    >
+      <div v-if="loading || currentOrder === null">
+        <SfLoader />
+      </div>
+      <div v-else>
+        <SfButton
+          data-cy="order-history-btn_orders"
+          class="sf-button--text all-orders"
+          @click="$router.push(ordersRoute)"
+        >
+          All Orders
+        </SfButton>
+        <div class="highlighted highlighted--total">
+          <SfProperty
+            v-for="property in currentOrder.properties"
+            :key="property.name"
+            :name="$t(property.name)"
+            :value="property.value"
+            class="sf-property--full-width property"
+          />
+        </div>
+        <SfTable class="products">
+          <SfTableHeading>
+            <SfTableHeader class="products__name">
+              {{ $t('Product') }}
+            </SfTableHeader>
+            <SfTableHeader>{{ $t('Quantity') }}</SfTableHeader>
+            <SfTableHeader>{{ $t('Price') }}</SfTableHeader>
+          </SfTableHeading>
+          <SfTableRow
+            v-for="item in currentOrder.items"
+            :key="item.key"
+          >
+            <SfTableData class="products__name">
+              {{ item.name }}
+            </SfTableData>
+            <SfTableData>{{ item.quantity }}</SfTableData>
+            <SfTableData>{{ $fc(item.price) }}</SfTableData>
+          </SfTableRow>
+        </SfTable>
+      </div>
+    </SfTab>
+  </SfTabs>
+</template>
+
+<script lang="ts">
+import {
+  SfTabs,
+  SfTable,
+  SfButton,
+  SfProperty,
+  SfLoader,
+} from '@storefront-ui/vue';
+import {
+  computed, defineComponent, useAsync, useContext,
+} from '@nuxtjs/composition-api';
+import { useUserOrder } from '~/modules/customer/composables/useUserOrder';
+
+export default defineComponent({
+  name: 'SingleOrder',
+  components: {
+    SfButton,
+    SfProperty,
+    SfTable,
+    SfTabs,
+    SfLoader,
+  },
+  props: { orderId: { type: String, required: true } },
+  setup(props) {
+    const context = useContext();
+    const { search, loading } = useUserOrder();
+    const currentOrderRawData = useAsync(() => search({ filter: { number: { eq: props.orderId } } }), props.orderId);
+
+    const currentOrder = computed(() => {
+      const order = currentOrderRawData.value?.items[0] ?? null;
+
+      if (order === null) {
+        return null;
+      }
+
+      return {
+        properties: [
+          { name: 'Order ID', value: props.orderId },
+          { name: 'Date', value: new Date(order?.order_date).toLocaleDateString() ?? '' },
+          { name: 'Status', value: order?.status },
+          { name: 'Price', value: context.$fc(order?.total?.grand_total?.value ?? 0) },
+        ],
+        items: order.items?.map(({
+          product_sku, product_name, quantity_ordered = 0, product_sale_price = { value: 0 },
+        }) => ({
+          key: product_sku,
+          name: product_name,
+          quantity: quantity_ordered,
+          price: product_sale_price.value ?? 0,
+        })) ?? [],
+      };
+    });
+
+    const ordersRoute = context.localeRoute({ name: 'customer-order-history' });
+
+    return {
+      currentOrder,
+      loading,
+      ordersRoute,
+      currentOrderRawData,
+    };
+  },
+});
+</script>
+
+<style lang='scss' scoped>
+.all-orders {
+  --button-padding: var(--spacer-base) 0;
+}
+.message {
+  margin: 0 0 var(--spacer-xl) 0;
+  font: var(--font-weight--light) var(--font-size--base) / 1.6 var(--font-family--primary);
+  &__link {
+    color: var(--c-primary);
+    font-weight: var(--font-weight--medium);
+    font-family: var(--font-family--primary);
+    font-size: var(--font-size--base);
+    text-decoration: none;
+    &:hover {
+      color: var(--c-text);
+    }
+  }
+}
+.products {
+  --table-column-flex: 1;
+  &__name {
+    margin-right: var(--spacer-sm);
+    @include for-desktop {
+      --table-column-flex: 2;
+    }
+  }
+}
+
+.highlighted {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--c-light);
+  padding: var(--spacer-sm);
+  --property-value-font-size: var(--font-size--base);
+  --property-name-font-size: var(--font-size--base);
+  &:last-child {
+    margin-bottom: 0;
+  }
+  ::v-deep .sf-property__name {
+    white-space: nowrap;
+  }
+  ::v-deep .sf-property__value {
+    text-align: right;
+  }
+  &--total {
+    margin-bottom: var(--spacer-sm);
+  }
+  @include for-desktop {
+    padding: var(--spacer-xl);
+    --property-name-font-size: var(--font-size--lg);
+    --property-name-font-weight: var(--font-weight--medium);
+    --property-value-font-size: var(--font-size--lg);
+    --property-value-font-weight: var(--font-weight--semibold);
+  }
+}
+
+.products {
+  box-sizing: border-box;
+  flex: 1;
+  margin: 0;
+
+  @include for-desktop {
+
+    &__pagination {
+      display: flex;
+      justify-content: flex-start;
+      margin: var(--spacer-xl) 0 0 0;
+    }
+  }
+
+  &__show-on-page {
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+
+    &__label {
+      font-family: var(--font-family--secondary);
+      font-size: var(--font-size--sm);
+    }
+  }
+}
+</style>
diff --git a/packages/theme/plugins/fcPlugin.ts b/packages/theme/plugins/fcPlugin.ts
index 759eb20db..97813cbb1 100644
--- a/packages/theme/plugins/fcPlugin.ts
+++ b/packages/theme/plugins/fcPlugin.ts
@@ -1,11 +1,19 @@
 import { Plugin } from '@nuxt/types';
 import formatCurrency from '~/helpers/formatCurrency';
 
+interface FormatCurrency {
+  $fc(value: number | string): string;
+  $fc(value: number | string, options?: Intl.NumberFormatOptions): string;
+  $fc(value: number | string, locale?: string, options?: Intl.NumberFormatOptions): string;
+}
+
 declare module 'vue/types/vue' {
-  interface Vue {
-    $fc(value: number | string): string;
-    $fc(value: number | string, options?: Intl.NumberFormatOptions): string;
-    $fc(value: number | string, locale?: string, options?: Intl.NumberFormatOptions): string;
+  interface Vue extends FormatCurrency {
+  }
+}
+
+declare module '@nuxt/types' {
+  interface Context extends FormatCurrency {
   }
 }
 

From ed603af3b91ca95bb81c497976806bcf710fa4b3 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Thu, 12 May 2022 09:15:28 +0200
Subject: [PATCH 10/19] fix: remove randomness from get order id

---
 packages/theme/modules/checkout/getters/orderGetters.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/modules/checkout/getters/orderGetters.ts b/packages/theme/modules/checkout/getters/orderGetters.ts
index 3933bcd6c..a5cd63824 100644
--- a/packages/theme/modules/checkout/getters/orderGetters.ts
+++ b/packages/theme/modules/checkout/getters/orderGetters.ts
@@ -3,7 +3,7 @@ import { CustomerOrder, OrderItemInterface } from '~/modules/GraphQL/types';
 
 export const getDate = (order: CustomerOrder): string => new Date(order?.order_date).toLocaleDateString() || '';
 
-export const getId = (order: CustomerOrder): string => String(Number.parseInt(order?.number, 10) || Math.floor(Math.random() * 100));
+export const getId = (order: CustomerOrder): string => String(Number.parseInt(order?.number, 10) || '');
 
 export const getStatus = (order: CustomerOrder): string => order?.status || 'Failed';
 

From fbdf7c5ca8cbb90686253ffda271fd3c0ad2628c Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Thu, 12 May 2022 09:25:04 +0200
Subject: [PATCH 11/19] fix: replace deprecated created_at with order_date

the orderGetters in the theme already try to get order_date property but fail because
the api-client middleware doesn't return that in the response payload

the created_at property is deprecated in magento
---
 packages/api-client/src/api/customerOrders/customerOrders.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/api-client/src/api/customerOrders/customerOrders.ts b/packages/api-client/src/api/customerOrders/customerOrders.ts
index c93411867..7b9ed5976 100644
--- a/packages/api-client/src/api/customerOrders/customerOrders.ts
+++ b/packages/api-client/src/api/customerOrders/customerOrders.ts
@@ -7,7 +7,7 @@ export default gql`
         items {
           order_number
           id
-          created_at
+          order_date
           grand_total
           total {
             discounts {

From aff38dec3a78d54322459b264ba8dcffff714ea2 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Thu, 12 May 2022 13:56:36 +0200
Subject: [PATCH 12/19] refactor: move myreviews to myaccount subroute

---
 packages/theme/modules/customer/index.ts          |  3 +--
 .../customer/pages/{ => MyAccount}/MyReviews.vue  | 15 +++++++--------
 2 files changed, 8 insertions(+), 10 deletions(-)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyReviews.vue (91%)

diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index f5dd5d088..99a60e60c 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -70,8 +70,7 @@ const moduleRoutes : NuxtRouteConfig = {
     {
       name: 'customer-my-reviews',
       path: 'my-reviews',
-      // component: path.resolve(moduleDir, 'pages/MyReviews.vue'),
-      component: stub,
+      component: path.resolve(moduleDir, 'pages/MyAccount/MyReviews.vue'),
       meta: { titleLabel: 'My reviews' },
     },
   ],
diff --git a/packages/theme/modules/customer/pages/MyReviews.vue b/packages/theme/modules/customer/pages/MyAccount/MyReviews.vue
similarity index 91%
rename from packages/theme/modules/customer/pages/MyReviews.vue
rename to packages/theme/modules/customer/pages/MyAccount/MyReviews.vue
index 5c8b0b6e5..fdffbc3b9 100644
--- a/packages/theme/modules/customer/pages/MyReviews.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyReviews.vue
@@ -1,8 +1,5 @@
 <template>
-  <SfTabs
-    :open-tab="1"
-    class="tab-orphan"
-  >
+  <SfTabs class="tab-orphan">
     <SfTab :title="$t('My reviews')">
       <div v-if="loading">
         <SfLoader />
@@ -51,14 +48,15 @@
   </SfTabs>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SfTabs, SfLoader, SfReview, SfRating,
 } from '@storefront-ui/vue';
-import { reviewGetters } from '~/getters';
 import {
-  computed, defineComponent, onMounted, ref,
+  ref, computed, defineComponent, onMounted,
 } from '@nuxtjs/composition-api';
+import { reviewGetters } from '~/getters';
+import { Customer } from '~/modules/GraphQL/types';
 import { useReview } from '~/composables';
 
 export default defineComponent({
@@ -71,11 +69,12 @@ export default defineComponent({
   },
   setup() {
     const { loading, loadCustomerReviews } = useReview();
-    const reviews = ref([]);
+    const reviews = ref<Customer['reviews'] | null>(null);
 
     const userReviews = computed(() => reviewGetters.getItems(reviews.value));
 
     onMounted(async () => {
+      // @ts-expect-error loadCustomerReviews type is wrong in theme and in api-client, see M2-579
       reviews.value = await loadCustomerReviews();
     });
 

From 429aa739dc8202e0c095bb483738213ebd1555b2 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Thu, 12 May 2022 12:33:20 +0200
Subject: [PATCH 13/19] refactor: move mynewsletter to subroute

---
 packages/theme/modules/customer/index.ts          |  3 +--
 .../pages/{ => MyAccount}/MyNewsletter.vue        | 15 ++++-----------
 2 files changed, 5 insertions(+), 13 deletions(-)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyNewsletter.vue (91%)

diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index 99a60e60c..0c53d0ee5 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -42,8 +42,7 @@ const moduleRoutes : NuxtRouteConfig = {
     {
       name: 'customer-my-newsletter',
       path: 'my-newsletter',
-      // component: path.resolve(moduleDir, 'pages/MyNewsletter.vue'),
-      component: stub,
+      component: path.resolve(moduleDir, 'pages/MyAccount/MyNewsletter.vue'),
       meta: { titleLabel: 'My newsletter' },
     },
     {
diff --git a/packages/theme/modules/customer/pages/MyNewsletter.vue b/packages/theme/modules/customer/pages/MyAccount/MyNewsletter.vue
similarity index 91%
rename from packages/theme/modules/customer/pages/MyNewsletter.vue
rename to packages/theme/modules/customer/pages/MyAccount/MyNewsletter.vue
index 0154f5332..ec7e355c7 100644
--- a/packages/theme/modules/customer/pages/MyNewsletter.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyNewsletter.vue
@@ -1,8 +1,5 @@
 <template>
-  <SfTabs
-    :open-tab="1"
-    class="tab-orphan"
-  >
+  <SfTabs class="tab-orphan">
     <SfTab :title="$t('My newsletter')">
       <p class="message">
         {{ $t('Set up newsletter') }}
@@ -46,7 +43,7 @@
   </SfTabs>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SfTabs, SfCheckbox, SfButton, SfLink,
 } from '@storefront-ui/vue';
@@ -68,15 +65,11 @@ export default defineComponent({
       isAuthenticated,
     } = useUser();
 
-    const isSubscribed = ref(!!user.value.is_subscribed);
+    const isSubscribed = ref<boolean>(!!user.value.is_subscribed);
 
     const saveForm = async () => {
       if (isAuthenticated.value && !!user.value.email) {
-        await updateUser({
-          user: {
-            is_subscribed: isSubscribed.value,
-          },
-        });
+        await updateUser({ user: { is_subscribed: isSubscribed.value } });
       }
     };
 

From b825eca431e0c318058dc72742072e7efe8f30f8 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 09:41:10 +0200
Subject: [PATCH 14/19] refactor: move mywishlist to subroute

---
 packages/theme/modules/customer/index.ts                     | 5 +----
 .../modules/customer/pages/{ => MyAccount}/MyWishlist.vue    | 0
 2 files changed, 1 insertion(+), 4 deletions(-)
 rename packages/theme/modules/customer/pages/{ => MyAccount}/MyWishlist.vue (100%)

diff --git a/packages/theme/modules/customer/index.ts b/packages/theme/modules/customer/index.ts
index 0c53d0ee5..0ff02a603 100644
--- a/packages/theme/modules/customer/index.ts
+++ b/packages/theme/modules/customer/index.ts
@@ -5,8 +5,6 @@ import type { NuxtRouteConfig } from '@nuxt/types/config/router';
 
 const moduleDir = path.dirname(url.fileURLToPath(import.meta.url));
 
-const stub = path.resolve(moduleDir, 'components/RoutePlaceholder.vue');
-
 const moduleRoutes : NuxtRouteConfig = {
   name: 'customer',
   path: '/customer',
@@ -48,8 +46,7 @@ const moduleRoutes : NuxtRouteConfig = {
     {
       name: 'customer-my-wishlist',
       path: 'my-wishlist',
-      // component: path.resolve(moduleDir, 'pages/MyWishlist.vue'),
-      component: stub,
+      component: path.resolve(moduleDir, 'pages/MyAccount/MyWishlist.vue'),
       meta: { titleLabel: 'My wishlist' },
     },
     {
diff --git a/packages/theme/modules/customer/pages/MyWishlist.vue b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
similarity index 100%
rename from packages/theme/modules/customer/pages/MyWishlist.vue
rename to packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue

From a467ee9fa5217a8828e0a33b102daf1b22f4e8a6 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 09:47:04 +0200
Subject: [PATCH 15/19] refactor: fix mywishlist paths

---
 .../modules/customer/pages/MyAccount/MyWishlist.vue      | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
index c14abdae9..34b5466d6 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
@@ -257,15 +257,16 @@ import {
   useContext,
   useAsync,
 } from '@nuxtjs/composition-api';
-import type { Product } from '~/modules/catalog/product/types';
-import { wishlistGetters } from '~/getters';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
+import type { Product } from '~/modules/catalog/product/types';
+import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
+import wishlistGetters from '~/modules/wishlist/getters/wishlistGetters';
+import { useCart } from '~/modules/checkout/composables/useCart';
+
 import {
-  useCart,
   useUiHelpers,
   useUiState,
   useImage,
-  useWishlist,
 } from '~/composables';
 import SvgImage from '~/components/General/SvgImage.vue';
 

From 6167dadf1d6da4f7470e66c35b4ec25dff65fdc2 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 09:48:50 +0200
Subject: [PATCH 16/19] refactor: add missing removeItemFromWishlist type

---
 packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
index 34b5466d6..e64e5dbf1 100644
--- a/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue
@@ -336,7 +336,7 @@ export default defineComponent({
       }
     };
 
-    const removeItemFromWishlist = async (product) => {
+    const removeItemFromWishlist = async (product: Product) => {
       await removeItem({ product });
     };
 

From 64bbd33b38a91c681aa7ee54d6bcffd2f00e0efb Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 09:57:41 +0200
Subject: [PATCH 17/19] chore: remove now-unnecessary RoutePlaceholder.vue

---
 .../theme/modules/customer/components/RoutePlaceholder.vue     | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 packages/theme/modules/customer/components/RoutePlaceholder.vue

diff --git a/packages/theme/modules/customer/components/RoutePlaceholder.vue b/packages/theme/modules/customer/components/RoutePlaceholder.vue
deleted file mode 100644
index 0354ff78d..000000000
--- a/packages/theme/modules/customer/components/RoutePlaceholder.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Work in progress</div>
-</template>

From cae3c992623d93a81268912346e008da99841b3a Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 10:08:49 +0200
Subject: [PATCH 18/19] fix: order number not appearing in order list

---
 .../customer/pages/MyAccount/OrderHistory/OrderHistory.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
index c1630f564..d8954d7c8 100644
--- a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
@@ -41,9 +41,9 @@
           </SfTableHeading>
           <SfTableRow
             v-for="order in orders"
-            :key="orderGetters.getId(order)"
+            :key="order.order_number"
           >
-            <SfTableData>{{ orderGetters.getId(order) }}</SfTableData>
+            <SfTableData>{{ order.order_number }}</SfTableData>
             <SfTableData>{{ orderGetters.getDate(order) }}</SfTableData>
             <SfTableData>{{ $fc(orderGetters.getPrice(order)) }}</SfTableData>
             <SfTableData>

From d75933671fb1cacaac8185e475b1ede63d5cea44 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 10:22:02 +0200
Subject: [PATCH 19/19] chore: ignore ts error, see M2-579

---
 .../customer/pages/MyAccount/OrderHistory/OrderHistory.vue       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
index d8954d7c8..401808cdf 100644
--- a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
@@ -190,6 +190,7 @@ export default defineComponent({
       getStatusTextClass,
       loading,
       orderGetters,
+      // @ts-expect-error Wrong type returned by useUserOrder. See M2-579 in VSF Jira
       orders: computed(() => orderGetters.getItems(orders.value)),
       pagination,
       tableHeaders,