From ebb05e95dfc059fb6a6eae12c6e126a3d137f181 Mon Sep 17 00:00:00 2001
From: Georgiy Slobodenyuk <georgiy@absoluteweb.com>
Date: Mon, 14 Mar 2022 12:49:03 -0400
Subject: [PATCH] chore(M2-261): refactor getters from composables to theme

---
 .../src/composables/useAddresses/index.ts     |  10 +-
 packages/composables/src/index.ts             |  10 +-
 packages/theme/components/AppHeader.vue       |  30 ++-
 packages/theme/components/CartSidebar.vue     |  40 ++--
 .../theme/components/Checkout/CartPreview.vue |   2 +-
 .../Checkout/UserBillingAddresses.vue         |  23 +-
 .../Checkout/UserShippingAddresses.vue        |  26 +--
 .../Checkout/VsfShippingProvider.vue          |   7 +-
 packages/theme/components/CouponCode.vue      |   2 +-
 .../Header/SearchBar/SearchResults.vue        |  75 ++++---
 packages/theme/components/HeaderLogo.vue      |  15 +-
 .../theme/components/MobileMenuSidebar.vue    |   8 +-
 .../MyAccount/ProfileUpdateForm.vue           |  27 +--
 .../theme/components/ProductAddReviewForm.vue |  55 +++--
 .../Products/BundleProductSelector.vue        | 156 +++++++-------
 .../Products/GroupedProductSelector.vue       |  44 ++--
 .../theme/components/ProductsCarousel.vue     |  37 ++--
 packages/theme/components/StoreSwitcher.vue   |  28 +--
 .../components/StoreSwitcher/StoresModal.vue  |  47 ++---
 .../theme/components/UserAddressDetails.vue   |  12 +-
 packages/theme/components/WishlistSidebar.vue |  76 ++++---
 .../composables/useMagentoConfiguration.ts    |   2 +-
 packages/theme/composables/useStore/index.ts  |   4 +-
 .../src => theme}/getters/_utils.ts           |   2 +-
 .../src => theme}/getters/addressGetter.ts    |   3 +-
 .../src => theme}/getters/cartGetters.ts      |  11 +-
 .../src => theme}/getters/categoryGetters.ts  |   4 +-
 .../src => theme}/getters/checkoutGetters.ts  |   2 +-
 .../src => theme}/getters/facetGetters.ts     |   7 +-
 .../getters/forgotPasswordGetters.ts          |   0
 .../src => theme}/getters/index.ts            |   0
 .../src => theme}/getters/orderGetters.ts     |   0
 .../src => theme}/getters/productGetters.ts   |   8 +-
 .../src => theme}/getters/reviewGetters.ts    |   5 +-
 packages/theme/getters/storeConfigGetters.ts  |  31 +++
 .../src => theme}/getters/storeGetters.ts     |   2 +-
 .../getters/userAddressesGetters.ts           |   6 +-
 .../getters/userBillingGetters.ts             |   0
 .../src => theme}/getters/userGetters.ts      |   2 +-
 .../getters/userShippingGetters.ts            |   0
 packages/theme/getters/wishlistGetters.ts     | 139 +++++++++++++
 packages/theme/helpers/cart/addToCart.ts      |  10 +-
 .../theme/helpers/product/bundleProduct.ts    |   2 +-
 packages/theme/helpers/product/productData.ts |   2 +-
 .../theme/modules/catalog/pages/default.vue   | 137 ++++++------
 packages/theme/pages/Checkout.vue             |  56 ++---
 packages/theme/pages/Checkout/Billing.vue     |  58 +++---
 packages/theme/pages/Checkout/Payment.vue     |  40 ++--
 packages/theme/pages/Checkout/Shipping.vue    |  58 ++++--
 packages/theme/pages/Home.vue                 |  66 +++---
 .../pages/MyAccount/AddressesDetails.vue      |  40 ++--
 packages/theme/pages/MyAccount/MyReviews.vue  |  26 ++-
 packages/theme/pages/MyAccount/MyWishlist.vue | 140 ++++++++-----
 packages/theme/pages/Product.vue              | 196 ++++++++++--------
 packages/theme/stores/customer.ts             |   2 +-
 55 files changed, 1052 insertions(+), 739 deletions(-)
 rename packages/{composables/src => theme}/getters/_utils.ts (94%)
 rename packages/{composables/src => theme}/getters/addressGetter.ts (88%)
 rename packages/{composables/src => theme}/getters/cartGetters.ts (97%)
 rename packages/{composables/src => theme}/getters/categoryGetters.ts (91%)
 rename packages/{composables/src => theme}/getters/checkoutGetters.ts (94%)
 rename packages/{composables/src => theme}/getters/facetGetters.ts (98%)
 rename packages/{composables/src => theme}/getters/forgotPasswordGetters.ts (100%)
 rename packages/{composables/src => theme}/getters/index.ts (100%)
 rename packages/{composables/src => theme}/getters/orderGetters.ts (100%)
 rename packages/{composables/src => theme}/getters/productGetters.ts (98%)
 rename packages/{composables/src => theme}/getters/reviewGetters.ts (95%)
 create mode 100644 packages/theme/getters/storeConfigGetters.ts
 rename packages/{composables/src => theme}/getters/storeGetters.ts (97%)
 rename packages/{composables/src => theme}/getters/userAddressesGetters.ts (91%)
 rename packages/{composables/src => theme}/getters/userBillingGetters.ts (100%)
 rename packages/{composables/src => theme}/getters/userGetters.ts (91%)
 rename packages/{composables/src => theme}/getters/userShippingGetters.ts (100%)
 create mode 100644 packages/theme/getters/wishlistGetters.ts

diff --git a/packages/composables/src/composables/useAddresses/index.ts b/packages/composables/src/composables/useAddresses/index.ts
index f060077a9..8fdbb2b1c 100644
--- a/packages/composables/src/composables/useAddresses/index.ts
+++ b/packages/composables/src/composables/useAddresses/index.ts
@@ -26,11 +26,11 @@ type RemoveAddressInput = {
 } & CustomQueryParams;
 
 const factoryParams: UseAddressesParams<CustomerAddress,
-CustomQueryParams,
-SaveAddressInput,
-UpdateAddressInput,
-RemoveAddressInput> = {
-  load: async (context: Context, params?: CustomQueryParams) => {
+  CustomQueryParams,
+  SaveAddressInput,
+  UpdateAddressInput,
+  RemoveAddressInput> = {
+  load: async (context: Context) => {
     Logger.debug('[Magento] load user addresses');
 
     const { data } = await context.$magento.api.getCustomerAddresses();
diff --git a/packages/composables/src/index.ts b/packages/composables/src/index.ts
index 374dd5067..fde2ba736 100644
--- a/packages/composables/src/index.ts
+++ b/packages/composables/src/index.ts
@@ -3,7 +3,6 @@ import { track } from '@vue-storefront/core';
 
 track('VSFMagento');
 
-export * from './getters';
 export * from './getVueContext';
 
 export { default as useAddresses } from './composables/useAddresses';
@@ -39,3 +38,12 @@ export { default as useUserOrder } from './composables/useUserOrder';
 export { default as useUserShipping } from './composables/useUserShipping';
 export { default as useWishlist } from './composables/useWishlist';
 export * from './dataTypes';
+export * from './types';
+export * from './types/getters';
+export * from './helpers/userAddressManipulator';
+export * from './helpers/htmlDecoder';
+export {
+    Countries, Discount,
+    SelectedShippingMethod, ConfigurableCartItem, ProductInterface, ProductReviewRatingMetadata,
+    ProductReviews, WishlistQuery,
+} from '@vue-storefront/magento-api';
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index efb6530c5..514aa2d47 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -2,15 +2,13 @@
   <div>
     <SfHeader
       class="sf-header--has-mobile-search"
-      :class="{'header-on-top': isSearchOpen}"
+      :class="{ 'header-on-top': isSearchOpen }"
     >
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
         <HeaderLogo />
       </template>
-      <template
-        #navigation
-      >
+      <template #navigation>
         <HeaderNavigationItem
           v-for="(category, index) in categoryTree"
           :key="index"
@@ -26,9 +24,7 @@
           <StoreSwitcher class="smartphone-only" />
         </div>
       </template>
-      <template
-        #header-icons="{activeIcon}"
-      >
+      <template #header-icons="{ activeIcon }">
         <div class="sf-header__icons">
           <SfButton
             v-e2e="'app-header-account'"
@@ -114,13 +110,10 @@
 
 <script>
 import {
-  SfOverlay,
-  SfHeader,
-  SfButton,
-  SfBadge,
+  SfOverlay, SfHeader, SfButton, SfBadge,
 } from '@storefront-ui/vue';
 
-import { categoryGetters } from '@vue-storefront/magento';
+import { categoryGetters } from '~/getters';
 import {
   computed,
   ref,
@@ -157,7 +150,9 @@ export default defineComponent({
     SfButton,
     SfBadge,
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
-    SearchResults: () => import(/* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'),
+    SearchResults: () => import(
+      /* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'
+    ),
   },
   setup() {
     const router = useRouter();
@@ -168,10 +163,7 @@ export default defineComponent({
     const { loadTotalQty: loadCartTotalQty, cart } = useCart();
     const { loadItemsCount: loadWishlistItemsCount, wishlist } = useWishlist();
 
-    const {
-      categories: categoryList,
-      search: categoriesListSearch,
-    } = useCategory('AppHeader:CategoryList');
+    const { categories: categoryList, search: categoriesListSearch } = useCategory('AppHeader:CategoryList');
 
     const isSearchOpen = ref(false);
     const result = ref(null);
@@ -190,7 +182,9 @@ export default defineComponent({
 
     useFetch(async () => {
       await categoriesListSearch({ pageSize: 20 });
-      categoryTree.value = categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0);
+      categoryTree.value = categoryGetters
+        .getCategoryTree(categoryList.value?.[0])
+        ?.items.filter((c) => c.count > 0);
     });
 
     onMounted(() => {
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index a24aeb67d..91a448913 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -120,7 +120,9 @@
                         :disabled="loading"
                         :qty="cartGetters.getItemQty(product)"
                         class="sf-collected-product__quantity-selector"
-                        @input="delayedUpdateItemQty({ product, quantity: $event })"
+                        @input="
+                          delayedUpdateItemQty({ product, quantity: $event })
+                        "
                       />
                     </div>
                     <SfBadge
@@ -187,18 +189,13 @@
           <div v-if="totalItems">
             <SfProperty
               :name="$t('Subtotal price')"
-              class="
-                sf-property--full-width sf-property--large
-                my-cart__total-price
-              "
+              class="sf-property--full-width sf-property--large my-cart__total-price"
             >
               <template #value>
                 <SfPrice
                   :regular="$fc(totals.subtotal)"
                   :special="
-                    totals.subtotal <= totals.special
-                      ? ''
-                      : $fc(totals.special)
+                    totals.subtotal <= totals.special ? '' : $fc(totals.special)
                   "
                 />
               </template>
@@ -246,11 +243,10 @@ import {
   defineComponent,
   ref,
   useRouter,
-  useContext, onMounted,
+  useContext,
+  onMounted,
 } from '@nuxtjs/composition-api';
-import {
-  cartGetters,
-} from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import _debounce from 'lodash.debounce';
 import {
   useCart,
@@ -260,8 +256,8 @@ import {
   useExternalCheckout,
 } from '~/composables';
 import stockStatusEnum from '~/enums/stockStatusEnum';
-import CouponCode from './CouponCode.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
+import CouponCode from './CouponCode.vue';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -298,7 +294,14 @@ export default defineComponent({
     const products = computed(() => cartGetters
       .getItems(cart.value)
       .filter(Boolean)
-      .map((item) => ({ ...item, product: { ...item.product, ...item.configured_variant, original_sku: item.product.sku } })));
+      .map((item) => ({
+        ...item,
+        product: {
+          ...item.product,
+          ...item.configured_variant,
+          original_sku: item.product.sku,
+        },
+      })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];
@@ -313,7 +316,9 @@ export default defineComponent({
     });
 
     const goToCheckout = async () => {
-      const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' });
+      const redirectUrl = await initializeCheckout({
+        baseUrl: '/checkout/user-account',
+      });
       await router.push(`${app.localePath(redirectUrl)}`);
     };
 
@@ -341,7 +346,10 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-    const delayedUpdateItemQty = _debounce((params) => updateItemQty(params), 1000);
+    const delayedUpdateItemQty = _debounce(
+      (params) => updateItemQty(params),
+      1000,
+    );
     const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
 
     return {
diff --git a/packages/theme/components/Checkout/CartPreview.vue b/packages/theme/components/Checkout/CartPreview.vue
index f0212a53d..b12263aec 100644
--- a/packages/theme/components/Checkout/CartPreview.vue
+++ b/packages/theme/components/Checkout/CartPreview.vue
@@ -53,7 +53,7 @@
 <script>
 import { SfHeading, SfProperty, SfCharacteristic } from '@storefront-ui/vue';
 import { computed, ref, defineComponent } from '@nuxtjs/composition-api';
-import { cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import { useCart } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 import CouponCode from '../CouponCode.vue';
diff --git a/packages/theme/components/Checkout/UserBillingAddresses.vue b/packages/theme/components/Checkout/UserBillingAddresses.vue
index bccbf8ca4..6ba896372 100644
--- a/packages/theme/components/Checkout/UserBillingAddresses.vue
+++ b/packages/theme/components/Checkout/UserBillingAddresses.vue
@@ -26,17 +26,10 @@
 </template>
 
 <script>
-import {
-  SfCheckbox,
-  SfAddressPicker,
-} from '@storefront-ui/vue';
-import {
-  useUserBilling,
-  userBillingGetters,
-} from '@vue-storefront/magento';
-import {
-  defineComponent,
-} from '@nuxtjs/composition-api';
+import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
+import { useUserBilling } from '@vue-storefront/magento';
+import { userBillingGetters } from '~/getters';
+import { defineComponent } from '@nuxtjs/composition-api';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 
 export default defineComponent({
@@ -61,7 +54,10 @@ export default defineComponent({
     const { billing: userBilling } = useUserBilling();
 
     const setCurrentAddress = (addressId) => {
-      const selectedAddress = userBillingGetters.getAddresses(userBilling.value, { id: Number.parseInt(addressId, 10) });
+      const selectedAddress = userBillingGetters.getAddresses(
+        userBilling.value,
+        { id: Number.parseInt(addressId, 10) },
+      );
       if (!selectedAddress || selectedAddress.length === 0) {
         return;
       }
@@ -103,7 +99,8 @@ export default defineComponent({
   }
 }
 
-.sf-divider, .form__action-button--margin-bottom {
+.sf-divider,
+.form__action-button--margin-bottom {
   margin-bottom: var(--spacer-xl);
 }
 </style>
diff --git a/packages/theme/components/Checkout/UserShippingAddresses.vue b/packages/theme/components/Checkout/UserShippingAddresses.vue
index fdbdadc35..1f36106f7 100644
--- a/packages/theme/components/Checkout/UserShippingAddresses.vue
+++ b/packages/theme/components/Checkout/UserShippingAddresses.vue
@@ -11,9 +11,7 @@
         class="shipping__address"
         :name="`${userShippingGetters.getId(shippingAddress)}`"
       >
-        <UserAddressDetails
-          :address="shippingAddress"
-        />
+        <UserAddressDetails :address="shippingAddress" />
       </SfAddress>
     </SfAddressPicker>
     <SfCheckbox
@@ -29,18 +27,10 @@
 </template>
 
 <script>
-import {
-  SfCheckbox,
-  SfAddressPicker,
-} from '@storefront-ui/vue';
-import {
-  useUserShipping,
-  userShippingGetters,
-} from '@vue-storefront/magento';
-import {
-  computed,
-  defineComponent,
-} from '@nuxtjs/composition-api';
+import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
+import { useUserShipping } from '@vue-storefront/magento';
+import { userShippingGetters } from '~/getters';
+import { computed, defineComponent } from '@nuxtjs/composition-api';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 
 export default defineComponent({
@@ -77,8 +67,7 @@ export default defineComponent({
       emit('setCurrentAddress', selectedAddress[0]);
     };
 
-    const shippingAddresses = computed(() => userShippingGetters
-      .getAddresses(userShipping.value));
+    const shippingAddresses = computed(() => userShippingGetters.getAddresses(userShipping.value));
 
     return {
       setCurrentAddress,
@@ -113,7 +102,8 @@ export default defineComponent({
   }
 }
 
-.sf-divider, .form__action-button--margin-bottom {
+.sf-divider,
+.form__action-button--margin-bottom {
   margin-bottom: var(--spacer-xl);
 }
 </style>
diff --git a/packages/theme/components/Checkout/VsfShippingProvider.vue b/packages/theme/components/Checkout/VsfShippingProvider.vue
index 2e3e510b0..856ecc2c2 100644
--- a/packages/theme/components/Checkout/VsfShippingProvider.vue
+++ b/packages/theme/components/Checkout/VsfShippingProvider.vue
@@ -30,8 +30,7 @@
           :label="method.method_title"
           :value="method.method_code"
           :selected="
-            selectedShippingMethod &&
-              selectedShippingMethod.method_code
+            selectedShippingMethod && selectedShippingMethod.method_code
           "
           name="shippingMethod"
           :description="method.carrier_title"
@@ -73,14 +72,12 @@
 </template>
 
 <script>
-import {
-  cartGetters,
-} from '@vue-storefront/magento';
 import {
   SfHeading, SfButton, SfRadio, SfLoader,
 } from '@storefront-ui/vue';
 
 import { computed, defineComponent, ref } from '@nuxtjs/composition-api';
+import { cartGetters } from '~/getters';
 import { useCart, useShippingProvider } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 
diff --git a/packages/theme/components/CouponCode.vue b/packages/theme/components/CouponCode.vue
index aa8066450..32f5df305 100644
--- a/packages/theme/components/CouponCode.vue
+++ b/packages/theme/components/CouponCode.vue
@@ -27,7 +27,7 @@
 
 <script>
 import { SfButton, SfInput } from '@storefront-ui/vue';
-import { cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import {
   computed,
   onMounted,
diff --git a/packages/theme/components/Header/SearchBar/SearchResults.vue b/packages/theme/components/Header/SearchBar/SearchResults.vue
index 0b5367df4..213e5df07 100644
--- a/packages/theme/components/Header/SearchBar/SearchResults.vue
+++ b/packages/theme/components/Header/SearchBar/SearchResults.vue
@@ -18,18 +18,14 @@
             :title="$t('Categories')"
             class="sf-mega-menu-column--pined-content-on-mobile search__categories"
           >
-            <template #title="{title}">
-              <SfMenuItem
-                :label="title"
-              >
+            <template #title="{ title }">
+              <SfMenuItem :label="title">
                 <template #mobile-nav-icon>
                   &#8203;
                 </template>
               </SfMenuItem>
             </template>
-            <SfList
-              v-if="categories.length > 0"
-            >
+            <SfList v-if="categories.length > 0">
               <SfListItem
                 v-for="(category, key) in categories"
                 :key="key"
@@ -49,7 +45,7 @@
             :title="$t('Product suggestions')"
             class="sf-mega-menu-column--pined-content-on-mobile search__results"
           >
-            <template #title="{title}">
+            <template #title="{ title }">
               <SfMenuItem
                 :label="title"
                 class="sf-mega-menu-column__header search__header"
@@ -75,10 +71,23 @@
                   :reviews-count="productGetters.getTotalReviews(product)"
                   :image-width="imageSizes.productCard.width"
                   :image-height="imageSizes.productCard.height"
-                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
+                  :image="
+                    getMagentoImage(
+                      productGetters.getProductThumbnailImage(product)
+                    )
+                  "
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
-                  :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+                  :link="
+                    localePath(
+                      `/p/${productGetters.getProductSku(
+                        product
+                      )}${productGetters.getSlug(
+                        product,
+                        product.categories[0]
+                      )}`
+                    )
+                  "
                   :wishlist-icon="isAuthenticated ? 'heart' : ''"
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
@@ -94,7 +103,10 @@
                     >
                       <template v-if="Array.isArray(imageSlotProps.image)">
                         <nuxt-img
-                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          v-for="(picture, key) in imageSlotProps.image.slice(
+                            0,
+                            2
+                          )"
                           :key="key"
                           class="sf-product-card__picture"
                           :src="picture"
@@ -127,10 +139,20 @@
                 :reviews-count="productGetters.getTotalReviews(product)"
                 :image-width="imageSizes.productCardHorizontal.width"
                 :image-height="imageSizes.productCardHorizontal.height"
-                :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
+                :image="
+                  getMagentoImage(
+                    productGetters.getProductThumbnailImage(product)
+                  )
+                "
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
-                :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+                :link="
+                  localePath(
+                    `/p/${productGetters.getProductSku(
+                      product
+                    )}${productGetters.getSlug(product, product.categories[0])}`
+                  )
+                "
                 :wishlist-icon="isAuthenticated ? 'heart' : ''"
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"
@@ -146,7 +168,10 @@
                   >
                     <template v-if="Array.isArray(imageSlotProps.image)">
                       <nuxt-img
-                        v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                        v-for="(picture, key) in imageSlotProps.image.slice(
+                          0,
+                          2
+                        )"
                         :key="key"
                         class="sf-product-card__picture"
                         :src="picture"
@@ -215,13 +240,11 @@ import {
   SfMenuItem,
   SfButton,
 } from '@storefront-ui/vue';
+import { ref, computed, defineComponent } from '@nuxtjs/composition-api';
+import { productGetters } from '~/getters';
 import {
-  ref,
-  computed,
-  defineComponent,
-} from '@nuxtjs/composition-api';
-import { productGetters } from '@vue-storefront/magento';
-import { useUiHelpers, useImage, useWishlist, useUser } from '~/composables';
+  useUiHelpers, useImage, useWishlist, useUser,
+} from '~/composables';
 import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
@@ -255,11 +278,9 @@ export default defineComponent({
     const categories = computed(() => props.result?.categories);
 
     const addItemToWishlist = async (product) => {
-      await (
-        isInWishlist({ product })
-          ? removeItem({ product })
-          : addItem({ product })
-      );
+      await (isInWishlist({ product })
+        ? removeItem({ product })
+        : addItem({ product }));
     };
 
     const { getMagentoImage, imageSizes } = useImage();
@@ -303,7 +324,7 @@ export default defineComponent({
     flex: 0 0 220px;
   }
   &__results {
-    flex: 1
+    flex: 1;
   }
   &__header {
     margin-left: var(--spacer-sm);
@@ -328,7 +349,7 @@ export default defineComponent({
     justify-content: space-around;
     background: var(--c-white);
     padding: var(--spacer-base) var(--spacer-sm);
-    --product-card-max-width: 9rem ;
+    --product-card-max-width: 9rem;
   }
 }
 .see-all {
diff --git a/packages/theme/components/HeaderLogo.vue b/packages/theme/components/HeaderLogo.vue
index 23b609f52..ee5562fcd 100644
--- a/packages/theme/components/HeaderLogo.vue
+++ b/packages/theme/components/HeaderLogo.vue
@@ -23,7 +23,8 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api';
-import { useConfig, storeConfigGetters } from '@vue-storefront/magento';
+import { useConfig } from '@vue-storefront/magento';
+import { storeConfigGetters } from '~/getters';
 import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
@@ -32,14 +33,12 @@ export default defineComponent({
   setup() {
     const { config } = useConfig();
 
-    const logoSrc = computed(
-      () => {
-        const baseMediaUrl = storeConfigGetters.getBaseMediaUrl(config.value);
-        const logo = storeConfigGetters.getLogoSrc(config.value);
+    const logoSrc = computed(() => {
+      const baseMediaUrl = storeConfigGetters.getBaseMediaUrl(config.value);
+      const logo = storeConfigGetters.getLogoSrc(config.value);
 
-        return baseMediaUrl && logo ? `${baseMediaUrl}logo/${logo}` : ''
-      }
-    );
+      return baseMediaUrl && logo ? `${baseMediaUrl}logo/${logo}` : '';
+    });
 
     const logoWidth = computed(
       () => storeConfigGetters.getLogoWidth(config.value) || '35',
diff --git a/packages/theme/components/MobileMenuSidebar.vue b/packages/theme/components/MobileMenuSidebar.vue
index 1730bd432..8ea972b2c 100644
--- a/packages/theme/components/MobileMenuSidebar.vue
+++ b/packages/theme/components/MobileMenuSidebar.vue
@@ -20,7 +20,7 @@
 <script>
 import { SfSidebar, SfList, SfMenuItem } from '@storefront-ui/vue';
 import { defineComponent, computed, useAsync } from '@nuxtjs/composition-api';
-import { categoryGetters } from '@vue-storefront/magento';
+import { categoryGetters } from '~/getters';
 import { useUiHelpers, useUiState, useCategory } from '~/composables';
 
 export default defineComponent({
@@ -35,9 +35,9 @@ export default defineComponent({
     const { isMobileMenuOpen, toggleMobileMenu } = useUiState();
     const { getAgnosticCatLink } = useUiHelpers();
 
-    const categoryTree = computed(
-      () => categoryGetters.getCategoryTree(categories?.value?.[0])?.items.filter((c) => c.count > 0),
-    );
+    const categoryTree = computed(() => categoryGetters
+      .getCategoryTree(categories?.value?.[0])
+      ?.items.filter((c) => c.count > 0));
 
     useAsync(() => {
       search({
diff --git a/packages/theme/components/MyAccount/ProfileUpdateForm.vue b/packages/theme/components/MyAccount/ProfileUpdateForm.vue
index 9d5061810..3cf28c54a 100644
--- a/packages/theme/components/MyAccount/ProfileUpdateForm.vue
+++ b/packages/theme/components/MyAccount/ProfileUpdateForm.vue
@@ -56,7 +56,9 @@
         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"
@@ -78,7 +80,9 @@
         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"
@@ -96,7 +100,10 @@
           {{ $t('Update personal data') }}
         </SfButton>
       </div>
-      <SfButton v-if="!requirePassword" class="form__button">
+      <SfButton
+        v-if="!requirePassword"
+        class="form__button"
+      >
         {{ $t('Update personal data') }}
       </SfButton>
     </form>
@@ -107,12 +114,8 @@
 import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { email } from 'vee-validate/dist/rules';
-import { userGetters } from '@vue-storefront/magento';
-import {
-  SfInput,
-  SfButton,
-  SfModal,
-} from '@storefront-ui/vue';
+import { userGetters } from '~/getters';
+import { SfInput, SfButton, SfModal } from '@storefront-ui/vue';
 import { useUiNotification, useUser } from '~/composables';
 
 extend('email', {
@@ -146,9 +149,7 @@ export default defineComponent({
       lastname: userGetters.getLastName(user.value),
       email: userGetters.getEmailAddress(user.value),
     });
-    const {
-      send: sendNotification,
-    } = useUiNotification();
+    const { send: sendNotification } = useUiNotification();
 
     const form = ref(resetForm());
 
@@ -197,7 +198,7 @@ export default defineComponent({
   },
 });
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .form {
   &__element {
     display: block;
diff --git a/packages/theme/components/ProductAddReviewForm.vue b/packages/theme/components/ProductAddReviewForm.vue
index 9598a53d1..393ac2ba1 100644
--- a/packages/theme/components/ProductAddReviewForm.vue
+++ b/packages/theme/components/ProductAddReviewForm.vue
@@ -1,13 +1,9 @@
 <template>
   <div>
-    <div
-      v-if="reviewSent && !error.addReview"
-    >
+    <div v-if="reviewSent && !error.addReview">
       <p>Your review was submitted!</p>
     </div>
-    <div
-      v-else-if="error.addReview"
-    >
+    <div v-else-if="error.addReview">
       <p>{{ error.addReview }}</p>
     </div>
     <ValidationObserver
@@ -120,17 +116,13 @@ import {
   useRoute,
   useContext,
 } from '@nuxtjs/composition-api';
-import {
-  reviewGetters, useReview, userGetters,
-} from '@vue-storefront/magento';
+import { useReview } from '@vue-storefront/magento';
 import { extend, ValidationObserver, ValidationProvider } from 'vee-validate';
 import { min, oneOf, required } from 'vee-validate/dist/rules';
 import {
-  SfInput,
-  SfButton,
-  SfSelect,
-  SfTextarea,
+  SfInput, SfButton, SfSelect, SfTextarea,
 } from '@storefront-ui/vue';
+import { reviewGetters, userGetters } from '~/getters';
 import { useUser } from '~/composables';
 
 extend('required', {
@@ -168,15 +160,18 @@ export default defineComponent({
   emits: ['add-review'],
   setup(_, { emit }) {
     const route = useRoute();
-    const { params: { id } } = route.value;
+    const {
+      params: { id },
+    } = route.value;
     const { $recaptcha, $config } = useContext();
-    const isRecaptchaEnabled = ref(typeof $recaptcha !== 'undefined' && $config.isRecaptcha);
+    const isRecaptchaEnabled = ref(
+      typeof $recaptcha !== 'undefined' && $config.isRecaptcha,
+    );
     const {
-      loading,
-      loadReviewMetadata,
-      metadata,
-      error,
-    } = useReview(`productReviews-${id}`);
+      loading, loadReviewMetadata, metadata, error,
+    } = useReview(
+      `productReviews-${id}`,
+    );
     const { isAuthenticated, user } = useUser();
 
     const reviewSent = ref(false);
@@ -204,14 +199,16 @@ export default defineComponent({
     });
 
     const submitForm = (reset) => async () => {
-      if (!(
-        formSubmitValue.value.ratings[0].value_id
-        || formSubmitValue.value.ratings[0].id
-        || formSubmitValue.value.nickname
-        || formSubmitValue.value.summary
-        || formSubmitValue.value.sku
-        || formSubmitValue.value.text
-      )) return;
+      if (
+        !(
+          formSubmitValue.value.ratings[0].value_id
+          || formSubmitValue.value.ratings[0].id
+          || formSubmitValue.value.nickname
+          || formSubmitValue.value.summary
+          || formSubmitValue.value.sku
+          || formSubmitValue.value.text
+        )
+      ) return;
       try {
         if (isRecaptchaEnabled.value) {
           $recaptcha.init();
@@ -255,7 +252,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .form {
   &__element {
     display: block;
diff --git a/packages/theme/components/Products/BundleProductSelector.vue b/packages/theme/components/Products/BundleProductSelector.vue
index 9707a2b2f..14cbb9429 100644
--- a/packages/theme/components/Products/BundleProductSelector.vue
+++ b/packages/theme/components/Products/BundleProductSelector.vue
@@ -1,61 +1,63 @@
 <template>
-  <div
-    v-if="!productLoading"
-  >
+  <div v-if="!productLoading">
     <SfList class="bundle_products">
       <SfListItem
-        v-for="(bundle) in bundleProduct"
+        v-for="bundle in bundleProduct"
         :key="`${bundle.uid}`"
         class="bundle_products--item"
       >
-        <p
-          :class="{'bundle_products--item-required': bundle.required }"
-        >
+        <p :class="{ 'bundle_products--item-required': bundle.required }">
           {{ bundle.title }}
         </p>
-        <SfList
-          class="bundle_products--options"
-        >
+        <SfList class="bundle_products--options">
           <SfListItem
-            v-for="(option) in bundle.options"
+            v-for="option in bundle.options"
             :key="`${option.uid}`"
             class="bundle_products--options-option"
           >
-            <template
-              v-if="bundle.options.length === 1"
-            >
+            <template v-if="bundle.options.length === 1">
               <div class="bundle_products--options-option__container">
                 <p>{{ productGetters.getName(option.product) }}</p>
                 <SfPrice
-                  :regular="$fc(productGetters.getPrice(option.product).regular)"
-                  :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
+                  :regular="
+                    $fc(productGetters.getPrice(option.product).regular)
+                  "
+                  :special="
+                    productGetters.getPrice(option.product).special &&
+                      $fc(productGetters.getPrice(option.product).special)
+                  "
                 />
               </div>
             </template>
-            <template
-              v-else
-            >
+            <template v-else>
               <SfRadio
                 v-if="selectedOptions[bundle.uid]"
                 v-model="selectedOptions[bundle.uid].uid"
                 :name="bundle.uid"
                 :value="option.uid"
                 :label="productGetters.getName(option.product)"
-                @change="selectedOptions[bundle.uid].price = productGetters.getPrice(option.product).regular"
+                @change="
+                  selectedOptions[bundle.uid].price = productGetters.getPrice(
+                    option.product
+                  ).regular
+                "
               >
                 <template #description>
                   <SfPrice
-                    :regular="$fc(productGetters.getPrice(option.product).regular)"
-                    :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
+                    :regular="
+                      $fc(productGetters.getPrice(option.product).regular)
+                    "
+                    :special="
+                      productGetters.getPrice(option.product).special &&
+                        $fc(productGetters.getPrice(option.product).special)
+                    "
                   />
                 </template>
               </SfRadio>
             </template>
           </SfListItem>
         </SfList>
-        <p>
-          Quantity
-        </p>
+        <p>Quantity</p>
         <SfQuantitySelector
           v-if="selectedOptions[bundle.uid]"
           v-model="selectedOptions[bundle.uid].quantity"
@@ -81,12 +83,9 @@ import {
   SfRadio,
   SfButton,
 } from '@storefront-ui/vue';
-import { productGetters } from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 import {
-  computed,
-  defineComponent,
-  ref,
-  watch,
+  computed, defineComponent, ref, watch,
 } from '@nuxtjs/composition-api';
 import { useCart } from '~/composables';
 import { bundleProductInitialSelector } from '~/helpers/product/bundleProduct';
@@ -121,14 +120,21 @@ export default defineComponent({
     selectedOptions.value = bundleProductInitialSelector(bundleProduct.value);
 
     const canChangeQuantity = (bundle) => {
-      const selectedOption = bundle.options.find((o) => o.uid === selectedOptions.value[bundle.uid]?.uid);
+      const selectedOption = bundle.options.find(
+        (o) => o.uid === selectedOptions.value[bundle.uid]?.uid,
+      );
 
       return !selectedOption.can_change_quantity;
     };
 
     const price = computed(() => Object.keys(selectedOptions.value)
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      .reduce((s, k) => s + (Number.parseFloat(selectedOptions.value[k].price) * selectedOptions.value[k].quantity), 0));
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      .reduce(
+        (s, k) => s
+            + Number.parseFloat(selectedOptions.value[k].price)
+              * selectedOptions.value[k].quantity,
+        0,
+      ));
 
     const addToCart = async () => {
       const bundleProductData = computed(() => Object.keys(selectedOptions.value).map((selectedOptionKey) => {
@@ -148,14 +154,22 @@ export default defineComponent({
       });
     };
 
-    watch(bundleProduct, (newVal) => {
-      selectedOptions.value = newVal;
-    }, { deep: true });
+    watch(
+      bundleProduct,
+      (newVal) => {
+        selectedOptions.value = newVal;
+      },
+      { deep: true },
+    );
 
-    watch(computed(() => selectedOptions.value), () => {
-      emit('update-bundle', selectedOptions.value);
-      emit('update-price', price.value);
-    }, { deep: true });
+    watch(
+      computed(() => selectedOptions.value),
+      () => {
+        emit('update-bundle', selectedOptions.value);
+        emit('update-price', price.value);
+      },
+      { deep: true },
+    );
 
     return {
       addToCart,
@@ -173,47 +187,49 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .bundle_products {
-  &--add-to-cart{
+  &--add-to-cart {
     width: 100%;
   }
 
   &--item {
-      padding: 0 0 var(--spacer-base) 0 !important;
-      border-bottom: 1px solid #e4e4e4 !important;
-      .sf-quantity-selector{
-        margin: 0 var(--spacer-sm) !important;
-      }
-      p {
-        font-weight: 600;
-        padding: 0 var(--spacer-sm);
-      }
-      &-required{
-        &:after{
-          content: '*';
-          color: #e02b27;
-          font-size: 1.2rem;
-          margin: 0 0 0 5px;
-        }
+    padding: 0 0 var(--spacer-base) 0 !important;
+    border-bottom: 1px solid #e4e4e4 !important;
+    .sf-quantity-selector {
+      margin: 0 var(--spacer-sm) !important;
+    }
+    p {
+      font-weight: 600;
+      padding: 0 var(--spacer-sm);
+    }
+    &-required {
+      &:after {
+        content: '*';
+        color: #e02b27;
+        font-size: 1.2rem;
+        margin: 0 0 0 5px;
       }
     }
+  }
 
-  &--options{
-
-    &-option{
+  &--options {
+    &-option {
       &__container {
-       p, .sf-price {
-        padding: 0 var(--spacer-sm) !important;
-       }
+        p,
+        .sf-price {
+          padding: 0 var(--spacer-sm) !important;
+        }
       }
-      .sf-price{
-        &:before{
+      .sf-price {
+        &:before {
           content: '+';
           margin-right: 5px;
-          font: var(--price-regular-font,
-                var(--price-regular-font-weight,
-                var(--font-weight--medium)) var(--price-regular-font-size,
-                var(--font-size--lg))/var(--price-regular-font-line-height, 1.6) var(--price-regular-font-family,
-                var(--font-family--secondary)));
+          font: var(
+            --price-regular-font,
+            var(--price-regular-font-weight, var(--font-weight--medium))
+              var(--price-regular-font-size, var(--font-size--lg)) /
+              var(--price-regular-font-line-height, 1.6)
+              var(--price-regular-font-family, var(--font-family--secondary))
+          );
           color: var(--price-regular-color, var(--c-text));
         }
       }
diff --git a/packages/theme/components/Products/GroupedProductSelector.vue b/packages/theme/components/Products/GroupedProductSelector.vue
index b2856b531..dac39009b 100644
--- a/packages/theme/components/Products/GroupedProductSelector.vue
+++ b/packages/theme/components/Products/GroupedProductSelector.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    v-if="!productLoading"
-  >
+  <div v-if="!productLoading">
     <SfList class="grouped_items">
       <SfListItem
         v-for="(groupedItem, index) in groupedItems"
@@ -9,7 +7,11 @@
         class="grouped_items--item"
       >
         <nuxt-img
-          :src="getMagentoImage(productGetters.getProductThumbnailImage(groupedItem.product))"
+          :src="
+            getMagentoImage(
+              productGetters.getProductThumbnailImage(groupedItem.product)
+            )
+          "
           :alt="productGetters.getName(groupedItem.product)"
           :width="60"
           :height="60"
@@ -18,7 +20,10 @@
           <p>{{ productGetters.getName(groupedItem.product) }}</p>
           <SfPrice
             :regular="$fc(productGetters.getPrice(groupedItem.product).regular)"
-            :special="productGetters.getPrice(groupedItem.product).special && $fc(productGetters.getPrice(groupedItem.product).special)"
+            :special="
+              productGetters.getPrice(groupedItem.product).special &&
+                $fc(productGetters.getPrice(groupedItem.product).special)
+            "
           />
         </div>
         <SfQuantitySelector
@@ -44,7 +49,7 @@ import {
   SfButton,
   SfQuantitySelector,
 } from '@storefront-ui/vue';
-import { productGetters } from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 import {
   computed, watch, ref, defineComponent,
 } from '@nuxtjs/composition-api';
@@ -91,19 +96,26 @@ export default defineComponent({
       }
     };
 
-    watch(groupedItems, (newValue) => {
-      const getProductPrice = (p) => {
-        const { regular, special } = productGetters.getPrice(p);
+    watch(
+      groupedItems,
+      (newValue) => {
+        const getProductPrice = (p) => {
+          const { regular, special } = productGetters.getPrice(p);
 
-        return regular > special ? regular : special;
-      };
+          return regular > special ? regular : special;
+        };
 
-      const price = newValue.reduce((acc, curr) => curr.qty * getProductPrice(curr.product) + acc, 0);
+        const price = newValue.reduce(
+          (acc, curr) => curr.qty * getProductPrice(curr.product) + acc,
+          0,
+        );
 
-      emit('update-price', price);
-    }, {
-      deep: true,
-    });
+        emit('update-price', price);
+      },
+      {
+        deep: true,
+      },
+    );
 
     const { getMagentoImage } = useImage();
 
diff --git a/packages/theme/components/ProductsCarousel.vue b/packages/theme/components/ProductsCarousel.vue
index 0884c3470..e62e85be6 100644
--- a/packages/theme/components/ProductsCarousel.vue
+++ b/packages/theme/components/ProductsCarousel.vue
@@ -21,10 +21,21 @@
             :title="productGetters.getName(product)"
             :image-width="imageSizes.productCard.width"
             :image-height="imageSizes.productCard.height"
-            :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
+            :image="
+              getMagentoImage(productGetters.getProductThumbnailImage(product))
+            "
             :regular-price="$fc(productGetters.getPrice(product).regular)"
-            :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
-            :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
+            :special-price="
+              productGetters.getPrice(product).special &&
+                $fc(productGetters.getPrice(product).special)
+            "
+            :link="
+              localePath(
+                `/p/${productGetters.getProductSku(
+                  product
+                )}${productGetters.getSlug(product, product.categories[0])}`
+              )
+            "
             :max-rating="5"
             :score-rating="productGetters.getAverageRating(product)"
             :reviews-count="productGetters.getTotalReviews(product)"
@@ -106,9 +117,7 @@ import {
   SfButton,
 } from '@storefront-ui/vue';
 
-import {
-  productGetters,
-} from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 import { computed, defineComponent } from '@nuxtjs/composition-api';
 import { useAddToCart } from '~/helpers/cart/addToCart';
 import { useImage, useWishlist, useUser } from '~/composables';
@@ -133,17 +142,14 @@ export default defineComponent({
     products: {
       type: Array,
       required: false,
-      default: () => ([]),
+      default: () => [],
     },
     loading: Boolean,
   },
   setup(props) {
     const { isAuthenticated } = useUser();
     const { isInWishlist, addItem, removeItem } = useWishlist();
-    const {
-      addItemToCart,
-      isInCart,
-    } = useAddToCart();
+    const { addItemToCart, isInCart } = useAddToCart();
 
     const mappedProducts = computed(() => props.products.map((product) => ({
       // @ts-ignore
@@ -152,11 +158,9 @@ export default defineComponent({
     })));
 
     const addItemToWishlist = async (product) => {
-      await (
-        isInWishlist({ product })
-          ? removeItem({ product })
-          : addItem({ product })
-      );
+      await (isInWishlist({ product })
+        ? removeItem({ product })
+        : addItem({ product }));
     };
 
     const { getMagentoImage, imageSizes } = useImage();
@@ -199,5 +203,4 @@ export default defineComponent({
     }
   }
 }
-
 </style>
diff --git a/packages/theme/components/StoreSwitcher.vue b/packages/theme/components/StoreSwitcher.vue
index d3848f872..7d65ef3db 100644
--- a/packages/theme/components/StoreSwitcher.vue
+++ b/packages/theme/components/StoreSwitcher.vue
@@ -8,9 +8,14 @@
         <template #title>
           <span class="desktop-only">{{ storeConfig.store_name }}</span>
         </template>
-        <template #icon v-if="storeConfigGetters.getLocale(storeConfig)">
+        <template
+          v-if="storeConfigGetters.getLocale(storeConfig)"
+          #icon
+        >
           <nuxt-img
-            :src="`/icons/langs/${storeConfigGetters.getLocale(storeConfig)}.webp`"
+            :src="`/icons/langs/${storeConfigGetters.getLocale(
+              storeConfig
+            )}.webp`"
             width="20"
             height="20"
             alt="Flag"
@@ -32,20 +37,11 @@
 
 <script>
 import LazyHydrate from 'vue-lazy-hydration';
-import {
-  storeConfigGetters,
-  storeGetters,
-} from '@vue-storefront/magento';
+import { storeConfigGetters, storeGetters } from '~/getters';
 
-import {
-  SfButton,
-  SfCharacteristic,
-} from '@storefront-ui/vue';
+import { SfButton, SfCharacteristic } from '@storefront-ui/vue';
 
-import {
-  ref,
-  defineComponent,
-} from '@nuxtjs/composition-api';
+import { ref, defineComponent } from '@nuxtjs/composition-api';
 import StoresModal from '~/components/StoreSwitcher/StoresModal.vue';
 import { useConfig } from '~/composables';
 
@@ -58,9 +54,7 @@ export default defineComponent({
     LazyHydrate,
   },
   setup() {
-    const {
-      config,
-    } = useConfig();
+    const { config } = useConfig();
 
     const isLangModalOpen = ref(false);
 
diff --git a/packages/theme/components/StoreSwitcher/StoresModal.vue b/packages/theme/components/StoreSwitcher/StoresModal.vue
index e6d551202..98f101601 100644
--- a/packages/theme/components/StoreSwitcher/StoresModal.vue
+++ b/packages/theme/components/StoreSwitcher/StoresModal.vue
@@ -1,12 +1,10 @@
 <template>
   <SfBottomModal
     :is-open="isLangModalOpen"
-    :title="availableStores.length > 0 ? 'Change Store': ''"
+    :title="availableStores.length > 0 ? 'Change Store' : ''"
     @click:close="closeModal"
   >
-    <SfList
-      v-if="availableStores.length > 1"
-    >
+    <SfList v-if="availableStores.length > 1">
       <SfListItem
         v-for="store in availableStores"
         :key="store.id"
@@ -14,12 +12,18 @@
         <a
           href="/"
           class="container__store--link"
-          :class="storeGetters.getSelected(storeConfig, store) ? 'container__store--selected' : ''"
-          @click="handleChanges({
-            callback: () => changeStore(store),
-            redirect: false,
-            windowRefresh: true,
-          })"
+          :class="
+            storeGetters.getSelected(storeConfig, store)
+              ? 'container__store--selected'
+              : ''
+          "
+          @click="
+            handleChanges({
+              callback: () => changeStore(store),
+              redirect: false,
+              windowRefresh: true,
+            })
+          "
         >
           <SfCharacteristic class="language">
             <template #title>
@@ -27,7 +31,9 @@
             </template>
             <template #icon>
               <nuxt-img
-                :src="`/icons/langs/${storeConfigGetters.getLocale(store)}.webp`"
+                :src="`/icons/langs/${storeConfigGetters.getLocale(
+                  store
+                )}.webp`"
                 width="20"
                 height="20"
                 alt="Flag"
@@ -41,21 +47,10 @@
   </SfBottomModal>
 </template>
 <script>
-import {
-  defineComponent,
-  onMounted,
-  computed,
-} from '@nuxtjs/composition-api';
-import {
-  SfList,
-  SfBottomModal,
-  SfCharacteristic,
-} from '@storefront-ui/vue';
-import {
-  useStore,
-  storeConfigGetters,
-  storeGetters,
-} from '@vue-storefront/magento';
+import { defineComponent, onMounted, computed } from '@nuxtjs/composition-api';
+import { SfList, SfBottomModal, SfCharacteristic } from '@storefront-ui/vue';
+import { useStore } from '@vue-storefront/magento';
+import { storeGetters, storeConfigGetters } from '~/getters';
 import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 
 export default defineComponent({
diff --git a/packages/theme/components/UserAddressDetails.vue b/packages/theme/components/UserAddressDetails.vue
index b7c09e175..5361c1253 100644
--- a/packages/theme/components/UserAddressDetails.vue
+++ b/packages/theme/components/UserAddressDetails.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <p
-      :style="userAddress.isDefault ? 'font-weight: bold;' : ''"
-    >
+    <p :style="userAddress.isDefault ? 'font-weight: bold;' : ''">
       {{ userAddress.firstName }} {{ userAddress.lastName }}
     </p>
     <p>{{ userAddress.street }}, {{ userAddress.streetNumber }}</p>
@@ -40,12 +38,8 @@
 </template>
 
 <script>
-import {
-  toRef,
-  computed,
-  defineComponent,
-} from '@nuxtjs/composition-api';
-import { userAddressesGetters } from '@vue-storefront/magento';
+import { toRef, computed, defineComponent } from '@nuxtjs/composition-api';
+import { userAddressesGetters } from '~/getters';
 
 export default defineComponent({
   name: 'UserAddressDetails',
diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index 52fae8ebe..3efa364a6 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -44,9 +44,23 @@
               :key="item"
               :image="wishlistGetters.getItemImage(product)"
               :title="wishlistGetters.getItemName(product)"
-              :regular-price="$fc(wishlistGetters.getItemPrice(product).regular)"
-              :link="localePath(`/p/${wishlistGetters.getItemSku(product)}${productGetters.getSlug(product.product, product.product.categories[0])}`)"
-              :special-price="wishlistGetters.getItemPrice(product).special && $fc(wishlistGetters.getItemPrice(product).special)"
+              :regular-price="
+                $fc(wishlistGetters.getItemPrice(product).regular)
+              "
+              :link="
+                localePath(
+                  `/p/${wishlistGetters.getItemSku(
+                    product
+                  )}${productGetters.getSlug(
+                    product.product,
+                    product.product.categories[0]
+                  )}`
+                )
+              "
+              :special-price="
+                wishlistGetters.getItemPrice(product).special &&
+                  $fc(wishlistGetters.getItemPrice(product).special)
+              "
               :stock="99999"
               class="collected-product"
               @click:remove="removeItem({ product: product.product })"
@@ -57,11 +71,20 @@
               <template #image>
                 <SfLink
                   :link="
-                    localePath(`/p/${wishlistGetters.getItemSku(product)}${productGetters.getSlug(product.product, product.product.categories[0])}`)
+                    localePath(
+                      `/p/${wishlistGetters.getItemSku(
+                        product
+                      )}${productGetters.getSlug(
+                        product.product,
+                        product.product.categories[0]
+                      )}`
+                    )
                   "
                 >
                   <nuxt-img
-                    :src="getMagentoImage(wishlistGetters.getItemImage(product))"
+                    :src="
+                      getMagentoImage(wishlistGetters.getItemImage(product))
+                    "
                     :alt="wishlistGetters.getItemName(product)"
                     :width="140"
                     :height="200"
@@ -70,9 +93,7 @@
                 </SfLink>
               </template>
               <template #configuration>
-                <div
-                  v-if="getAttributes(product).length > 0"
-                >
+                <div v-if="getAttributes(product).length > 0">
                   <SfProperty
                     v-for="(attr, index) in getAttributes(product)"
                     :key="index"
@@ -80,9 +101,7 @@
                     :value="attr.value_label"
                   />
                 </div>
-                <div
-                  v-if="getBundles(product).length > 0"
-                >
+                <div v-if="getBundles(product).length > 0">
                   <SfProperty
                     v-for="(bundle, i) in getBundles(product)"
                     :key="i"
@@ -101,7 +120,9 @@
             </SfCollectedProduct>
           </div>
           <div class="sidebar-bottom">
-            <SfProperty class="sf-property--full-width my-wishlist__total-price">
+            <SfProperty
+              class="sf-property--full-width my-wishlist__total-price"
+            >
               <template #name>
                 <span class="my-wishlist__total-price-label">Total price:</span>
               </template>
@@ -155,10 +176,7 @@ import {
   SfLoader,
 } from '@storefront-ui/vue';
 import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
-import {
-  wishlistGetters,
-  productGetters,
-} from '@vue-storefront/magento';
+import { wishlistGetters, productGetters } from '~/getters';
 import {
   useUiState, useImage, useWishlist, useUser,
 } from '~/composables';
@@ -183,9 +201,15 @@ export default defineComponent({
       wishlist, removeItem, load: loadWishlist, loading,
     } = useWishlist();
     const { isAuthenticated } = useUser();
-    const products = computed(() => wishlistGetters.getProducts(wishlist.value) ?? []);
-    const totals = computed(() => wishlistGetters.getTotals(wishlist.value) ?? {});
-    const totalItems = computed(() => wishlistGetters.getTotalItems(wishlist.value) ?? 0);
+    const products = computed(
+      () => wishlistGetters.getProducts(wishlist.value) ?? [],
+    );
+    const totals = computed(
+      () => wishlistGetters.getTotals(wishlist.value) ?? {},
+    );
+    const totalItems = computed(
+      () => wishlistGetters.getTotalItems(wishlist.value) ?? 0,
+    );
 
     const getAttributes = (product) => product?.product?.configurable_options || [];
     const getBundles = (product) => product?.product?.items?.map((b) => b.title).flat() || [];
@@ -223,7 +247,8 @@ export default defineComponent({
 .sidebar {
   --sidebar-z-index: 3;
   --overlay-z-index: 3;
-  --sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0 var(--spacer-base);
+  --sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0
+    var(--spacer-base);
   --sidebar-content-padding: var(--spacer-lg) var(--spacer-base);
 }
 
@@ -232,7 +257,8 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   &__total-items {
-    font: var(--font-weight--normal) var(--font-size--lg) / 1.6 var(--font-family--secondary);
+    font: var(--font-weight--normal) var(--font-size--lg) / 1.6
+      var(--font-family--secondary);
     color: var(--c-link);
     margin: 0;
   }
@@ -241,7 +267,8 @@ export default defineComponent({
     --price-font-size: var(--font-size--xl);
     margin: 0 0 var(--spacer-xl) 0;
     &-label {
-      font: var(--font-weight--normal) var(--font-size--2xl) / 1.6 var(--font-family--secondary);
+      font: var(--font-weight--normal) var(--font-size--2xl) / 1.6
+        var(--font-family--secondary);
       color: var(--c-link);
     }
   }
@@ -268,10 +295,10 @@ export default defineComponent({
     --heading-title-margin: 0 0 var(--spacer-xl) 0;
     --heading-title-color: var(--c-primary);
     --heading-title-font-weight: var(--font-weight--semibold);
-      @include for-desktop {
+    @include for-desktop {
       --heading-title-font-size: var(--font-size--xl);
       --heading-title-margin: 0 0 var(--spacer-sm) 0;
-  }
+    }
   }
   &__icon {
     --image-width: 16rem;
@@ -302,5 +329,4 @@ export default defineComponent({
     margin: var(--spacer-sm) 0 0 0;
   }
 }
-
 </style>
diff --git a/packages/theme/composables/useMagentoConfiguration.ts b/packages/theme/composables/useMagentoConfiguration.ts
index 69f2a43ea..c5f7aa853 100644
--- a/packages/theme/composables/useMagentoConfiguration.ts
+++ b/packages/theme/composables/useMagentoConfiguration.ts
@@ -1,7 +1,7 @@
 import {
-  storeConfigGetters,
   StoreConfig,
 } from '@vue-storefront/magento';
+import { storeConfigGetters } from '~/getters';
 
 import { computed, ComputedRef, useContext } from '@nuxtjs/composition-api';
 import cookieNames from '~/enums/cookieNameEnum';
diff --git a/packages/theme/composables/useStore/index.ts b/packages/theme/composables/useStore/index.ts
index d1ae36392..c457991b0 100644
--- a/packages/theme/composables/useStore/index.ts
+++ b/packages/theme/composables/useStore/index.ts
@@ -3,8 +3,8 @@ import {
   ref, Ref, useContext,
 } from '@nuxtjs/composition-api';
 import { Logger } from '@vue-storefront/core';
-import { StoreConfig } from '@vue-storefront/magento-api';
-import { storeConfigGetters } from '@vue-storefront/magento';
+import { StoreConfig } from '@vue-storefront/magento';
+import { storeConfigGetters } from '~/getters';
 import { UseStoreInterface, UseStore, UseStoreErrors } from '~/composables/useStore/useStore';
 import { useConfigStore } from '~/stores/config';
 
diff --git a/packages/composables/src/getters/_utils.ts b/packages/theme/getters/_utils.ts
similarity index 94%
rename from packages/composables/src/getters/_utils.ts
rename to packages/theme/getters/_utils.ts
index 179f9c88e..6fc801a94 100644
--- a/packages/composables/src/getters/_utils.ts
+++ b/packages/theme/getters/_utils.ts
@@ -1,5 +1,5 @@
 import { AgnosticAttribute } from '@vue-storefront/core';
-import { Product } from '@vue-storefront/magento-api';
+import { Product } from '@vue-storefront/magento';
 
 export const getAttributeValue = (attribute) => attribute.values;
 
diff --git a/packages/composables/src/getters/addressGetter.ts b/packages/theme/getters/addressGetter.ts
similarity index 88%
rename from packages/composables/src/getters/addressGetter.ts
rename to packages/theme/getters/addressGetter.ts
index a0bd18293..ee6ed707b 100644
--- a/packages/composables/src/getters/addressGetter.ts
+++ b/packages/theme/getters/addressGetter.ts
@@ -1,5 +1,4 @@
-import { Countries, Country } from '@vue-storefront/magento-api';
-import { AddressGetter } from '../types';
+import { Countries, Country, AddressGetter } from '@vue-storefront/magento';
 
 const countriesList: AddressGetter['countriesList'] = (countries: Countries[]) => countries
   .filter((c) => c.id && c.full_name_english && c.full_name_locale)
diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/theme/getters/cartGetters.ts
similarity index 97%
rename from packages/composables/src/getters/cartGetters.ts
rename to packages/theme/getters/cartGetters.ts
index c32e46f31..0208f87ef 100644
--- a/packages/composables/src/getters/cartGetters.ts
+++ b/packages/theme/getters/cartGetters.ts
@@ -7,15 +7,16 @@ import {
   AgnosticDiscount,
 } from '@vue-storefront/core';
 import {
-  Discount,
   Cart,
   CartItem,
   Product,
-  SelectedShippingMethod, ConfigurableCartItem, ProductInterface,
-} from '@vue-storefront/magento-api';
-
+  AgnosticPaymentMethod,
+  Discount,
+  ProductInterface,
+  SelectedShippingMethod,
+  ConfigurableCartItem,
+} from '@vue-storefront/magento';
 import productGetters from './productGetters';
-import { AgnosticPaymentMethod } from '../types';
 
 export const getItems = (cart: Cart): CartItem[] => {
   if (!cart || !cart.items) {
diff --git a/packages/composables/src/getters/categoryGetters.ts b/packages/theme/getters/categoryGetters.ts
similarity index 91%
rename from packages/composables/src/getters/categoryGetters.ts
rename to packages/theme/getters/categoryGetters.ts
index 5a90b2c5c..aa631e83e 100644
--- a/packages/composables/src/getters/categoryGetters.ts
+++ b/packages/theme/getters/categoryGetters.ts
@@ -1,6 +1,6 @@
 import { CategoryGetters, AgnosticCategoryTree, AgnosticBreadcrumb } from '@vue-storefront/core';
-import { Category } from '@vue-storefront/magento-api';
-import { buildCategoryTree } from '../helpers/buildCategoryTree';
+import { Category } from '@vue-storefront/magento';
+import { buildCategoryTree } from '~/modules/catalog/category/helpers';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const getTree = (category: Category): AgnosticCategoryTree | null => {
diff --git a/packages/composables/src/getters/checkoutGetters.ts b/packages/theme/getters/checkoutGetters.ts
similarity index 94%
rename from packages/composables/src/getters/checkoutGetters.ts
rename to packages/theme/getters/checkoutGetters.ts
index bd6ba115f..4bf791865 100644
--- a/packages/composables/src/getters/checkoutGetters.ts
+++ b/packages/theme/getters/checkoutGetters.ts
@@ -1,4 +1,4 @@
-import { ShippingMethod } from '@vue-storefront/magento-api';
+import { ShippingMethod } from '@vue-storefront/magento';
 import productGetters from './productGetters';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/packages/composables/src/getters/facetGetters.ts b/packages/theme/getters/facetGetters.ts
similarity index 98%
rename from packages/composables/src/getters/facetGetters.ts
rename to packages/theme/getters/facetGetters.ts
index 95ce57217..83b657a16 100644
--- a/packages/composables/src/getters/facetGetters.ts
+++ b/packages/theme/getters/facetGetters.ts
@@ -8,15 +8,16 @@ import {
   AgnosticFacet,
 } from '@vue-storefront/core';
 
+import {
+  SearchData,
+} from '@vue-storefront/magento';
+
 import {
   buildFacets,
   reduceForGroupedFacets,
   reduceForFacets,
 } from '../composables/useFacet/_utils';
 
-import {
-  SearchData,
-} from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getAll = (searchData: SearchData, criteria?: string[]): AgnosticFacet[] => buildFacets(searchData, reduceForFacets, criteria);
diff --git a/packages/composables/src/getters/forgotPasswordGetters.ts b/packages/theme/getters/forgotPasswordGetters.ts
similarity index 100%
rename from packages/composables/src/getters/forgotPasswordGetters.ts
rename to packages/theme/getters/forgotPasswordGetters.ts
diff --git a/packages/composables/src/getters/index.ts b/packages/theme/getters/index.ts
similarity index 100%
rename from packages/composables/src/getters/index.ts
rename to packages/theme/getters/index.ts
diff --git a/packages/composables/src/getters/orderGetters.ts b/packages/theme/getters/orderGetters.ts
similarity index 100%
rename from packages/composables/src/getters/orderGetters.ts
rename to packages/theme/getters/orderGetters.ts
diff --git a/packages/composables/src/getters/productGetters.ts b/packages/theme/getters/productGetters.ts
similarity index 98%
rename from packages/composables/src/getters/productGetters.ts
rename to packages/theme/getters/productGetters.ts
index abd2d7af7..29f8e76db 100644
--- a/packages/composables/src/getters/productGetters.ts
+++ b/packages/theme/getters/productGetters.ts
@@ -6,13 +6,11 @@ import {
   ProductGetters as ProductGettersBase,
 } from '@vue-storefront/core';
 import {
-  BundleProduct,
+  htmlDecode, BundleProduct,
   Category, GroupedProduct,
   Product,
-} from '@vue-storefront/magento-api';
-
+} from '@vue-storefront/magento';
 import categoryGetters from './categoryGetters';
-import { htmlDecode } from '../helpers/htmlDecoder';
 import reviewGetters from './reviewGetters';
 
 type ProductVariantFilters = any;
@@ -249,7 +247,7 @@ export const getGroupedProducts = (product: GroupedProduct & { __typename: strin
 // eslint-disable-next-line no-underscore-dangle
 export const getBundleProducts = (product: BundleProduct & { __typename: string }): BundleProduct['items'] | undefined => product.__typename === 'BundleProduct' && product?.items?.sort(sortProduct);
 
-export interface ProductGetters extends ProductGettersBase<Product, ProductVariantFilters>{
+export interface ProductGetters extends ProductGettersBase<Product, ProductVariantFilters> {
   getCategory(product: Product, currentUrlPath: string): Category | null;
   getProductRelatedProduct(product: Product): Product[];
   getProductSku(product: Product): string;
diff --git a/packages/composables/src/getters/reviewGetters.ts b/packages/theme/getters/reviewGetters.ts
similarity index 95%
rename from packages/composables/src/getters/reviewGetters.ts
rename to packages/theme/getters/reviewGetters.ts
index ec2cae0f0..6cabeb5d2 100644
--- a/packages/composables/src/getters/reviewGetters.ts
+++ b/packages/theme/getters/reviewGetters.ts
@@ -4,9 +4,8 @@ import {
   ProductReview,
   ProductReviewRatingMetadata,
   ProductReviews,
-  ReviewMetadata,
-} from '@vue-storefront/magento-api';
-import { AgnosticReviewMetadata } from '../types';
+  ReviewMetadata, AgnosticReviewMetadata
+} from '@vue-storefront/magento';
 
 export const getItems = (review): ProductReview[] => review?.reviews?.items || [];
 
diff --git a/packages/theme/getters/storeConfigGetters.ts b/packages/theme/getters/storeConfigGetters.ts
new file mode 100644
index 000000000..a38650700
--- /dev/null
+++ b/packages/theme/getters/storeConfigGetters.ts
@@ -0,0 +1,31 @@
+import { StoreConfig } from '@vue-storefront/magento';
+
+const getCode = (config: StoreConfig) => config.store_code;
+const getTitle = (config: StoreConfig) => config.default_title;
+const getName = (config: StoreConfig) => config.store_name;
+const getCurrency = (config: StoreConfig) => config.default_display_currency_code;
+const getLocale = (config: StoreConfig) => config.locale;
+const allowGuestProductReview = (config: StoreConfig) => config.allow_guests_to_write_product_reviews;
+const enabledWishlist = (config: StoreConfig) => config.magento_wishlist_general_is_enabled;
+const getBaseMediaUrl = (config: StoreConfig) => config.base_media_url;
+const getLogoSrc = (config: StoreConfig) => config.header_logo_src;
+const getLogoWidth = (config: StoreConfig) => config.logo_width;
+const getLogoHeight = (config: StoreConfig) => config.logo_height;
+const getLogoAlt = (config: StoreConfig) => config.logo_alt;
+
+const storeConfigGetters = {
+  getCode,
+  getTitle,
+  getName,
+  getCurrency,
+  getLocale,
+  allowGuestProductReview,
+  enabledWishlist,
+  getBaseMediaUrl,
+  getLogoSrc,
+  getLogoWidth,
+  getLogoHeight,
+  getLogoAlt,
+};
+
+export default storeConfigGetters;
diff --git a/packages/composables/src/getters/storeGetters.ts b/packages/theme/getters/storeGetters.ts
similarity index 97%
rename from packages/composables/src/getters/storeGetters.ts
rename to packages/theme/getters/storeGetters.ts
index ed5c1f52d..6d32f1f2b 100644
--- a/packages/composables/src/getters/storeGetters.ts
+++ b/packages/theme/getters/storeGetters.ts
@@ -1,4 +1,4 @@
-import { AvailableStores, StoreConfig } from '@vue-storefront/magento-api';
+import { AvailableStores, StoreConfig } from '@vue-storefront/magento';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function getItems(stores: AvailableStores, criteria: any = {}): AvailableStores {
diff --git a/packages/composables/src/getters/userAddressesGetters.ts b/packages/theme/getters/userAddressesGetters.ts
similarity index 91%
rename from packages/composables/src/getters/userAddressesGetters.ts
rename to packages/theme/getters/userAddressesGetters.ts
index 3b9ebd1d3..8c768c850 100644
--- a/packages/composables/src/getters/userAddressesGetters.ts
+++ b/packages/theme/getters/userAddressesGetters.ts
@@ -1,7 +1,7 @@
-import { UserAddressesGetters as BaseGetters } from '../types/getters';
-import { transformUserGetter } from '../helpers/userAddressManipulator';
+import { UserAddressesGetters as BaseGetters } from '@vue-storefront/magento';
+import { transformUserGetter } from '@vue-storefront/magento';
 
-interface UserAddressesGetters extends BaseGetters<any, any>{
+interface UserAddressesGetters extends BaseGetters<any, any> {
   getNeighborhood: (address: any) => string
   getAddressExtra: (address: any) => string
 }
diff --git a/packages/composables/src/getters/userBillingGetters.ts b/packages/theme/getters/userBillingGetters.ts
similarity index 100%
rename from packages/composables/src/getters/userBillingGetters.ts
rename to packages/theme/getters/userBillingGetters.ts
diff --git a/packages/composables/src/getters/userGetters.ts b/packages/theme/getters/userGetters.ts
similarity index 91%
rename from packages/composables/src/getters/userGetters.ts
rename to packages/theme/getters/userGetters.ts
index 3193fcb7b..35787374c 100644
--- a/packages/composables/src/getters/userGetters.ts
+++ b/packages/theme/getters/userGetters.ts
@@ -1,6 +1,6 @@
 /* istanbul ignore file */
 import { UserGetters as BaseUserGetters } from '@vue-storefront/core';
-import { Customer } from '@vue-storefront/magento-api';
+import { Customer } from '@vue-storefront/magento';
 
 export const getFirstName = (user: Customer): string => (user ? user.firstname : '');
 
diff --git a/packages/composables/src/getters/userShippingGetters.ts b/packages/theme/getters/userShippingGetters.ts
similarity index 100%
rename from packages/composables/src/getters/userShippingGetters.ts
rename to packages/theme/getters/userShippingGetters.ts
diff --git a/packages/theme/getters/wishlistGetters.ts b/packages/theme/getters/wishlistGetters.ts
new file mode 100644
index 000000000..a856a1dba
--- /dev/null
+++ b/packages/theme/getters/wishlistGetters.ts
@@ -0,0 +1,139 @@
+/* istanbul ignore file */
+import {
+  WishlistGetters as BaseWishlistGetters,
+  AgnosticPrice,
+  AgnosticTotals, AgnosticPagination,
+} from '@vue-storefront/core';
+import {
+  Wishlist, WishlistQuery,
+} from '@vue-storefront/magento-api';
+
+export type WishlistProduct = WishlistQuery['customer']['wishlists'][0]['items_v2']['items'][0] & { variant: any };
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getItems = (wishlist): WishlistProduct[] => wishlist.items_v2.items;
+
+export const getItemName = (product: WishlistProduct): string => product?.product?.name || '';
+
+export const getItemImage = (product: WishlistProduct): string => product?.product?.thumbnail.url || '';
+
+export const getItemPrice = (product: WishlistProduct): AgnosticPrice => {
+  let regular = 0;
+  let special = null;
+
+  if (product?.product?.price_range) {
+    regular = product?.product?.price_range.minimum_price.regular_price.value;
+    const final = product?.product?.price_range.minimum_price.final_price.value;
+
+    if (final < regular) {
+      special = final;
+    }
+  }
+
+  return {
+    regular,
+    special,
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getItemQty = (product: WishlistProduct): number => product.quantity;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getItemAttributes = (product: WishlistProduct, filterByAttributeName?: string[]) => ({ '': '' });
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getItemSku = (product: WishlistProduct): string => product?.product?.sku || '';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getTotals = (wishlist): AgnosticTotals => {
+  if (Array.isArray(wishlist)) {
+    return wishlist[0]?.items_v2?.items.reduce((acc, curr) => ({
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      total: acc.total + getItemPrice(curr).special,
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      subtotal: acc.subtotal + getItemPrice(curr).regular,
+    }), ({ total: 0, subtotal: 0 }));
+  }
+  return wishlist?.items_v2?.items.reduce((acc, curr) => ({
+    total: acc.total + getItemPrice(curr).special,
+    subtotal: acc.subtotal + getItemPrice(curr).regular,
+  }), ({ total: 0, subtotal: 0 }));
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getShippingPrice = (wishlist: Wishlist): number => 0;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getTotalItems = (wishlist: Wishlist): number => (Array.isArray(wishlist) ? wishlist[0]?.items_count : (wishlist?.items_count || 0));
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getFormattedPrice = (price: number): string => '';
+
+const getPagination = (wishlistData: Wishlist): AgnosticPagination => ({
+  currentPage: wishlistData?.items_v2?.page_info?.current_page || 1,
+  totalPages: wishlistData?.items_v2?.page_info?.total_pages || 1,
+  totalItems: wishlistData?.items_count || 0,
+  itemsPerPage: wishlistData?.items_v2?.page_info?.page_size || 10,
+  pageOptions: [10, 50, 100],
+});
+
+const getProducts = (wishlistData: Wishlist[] | Wishlist): {
+  product: WishlistProduct;
+  quantity: number;
+  added_at: string;
+}[] => {
+  if (!wishlistData || (Array.isArray(wishlistData) && wishlistData.length === 0)) {
+    return [];
+  }
+
+  const reducer = (acc, curr) => [...acc, ...curr?.items_v2?.items.map((item) => ({
+    product: item.product,
+    quantity: item.quantity,
+    added_at: item.added_at,
+    id: item.id,
+  }))];
+
+  const mapper = (item) => ({
+    product: item.product,
+    quantity: item.quantity,
+    added_at: item.added_at,
+    id: item.id,
+  });
+
+  return Array.isArray(wishlistData)
+    ? wishlistData.reduce((acc, curr) => reducer(acc, curr), [])
+    : wishlistData?.items_v2?.items.map((e) => mapper(e));
+};
+
+export interface WishlistGetters extends BaseWishlistGetters<Wishlist, WishlistProduct> {
+  getShippingPrice(wishlist: Wishlist): number;
+
+  getItemQty(product: WishlistProduct): number;
+
+  getPagination(wishlistData): AgnosticPagination;
+
+  getProducts(wishlistData): {
+    product: WishlistProduct;
+    quantity: number;
+    added_at: string;
+  }[];
+}
+
+const wishlistGetters: WishlistGetters = {
+  getTotals,
+  getShippingPrice,
+  getItems,
+  getItemName,
+  getItemImage,
+  getItemPrice,
+  getItemQty,
+  getItemAttributes,
+  getItemSku,
+  getTotalItems,
+  getFormattedPrice,
+  getPagination,
+  getProducts,
+};
+
+export default wishlistGetters;
diff --git a/packages/theme/helpers/cart/addToCart.ts b/packages/theme/helpers/cart/addToCart.ts
index 4a1378cd2..46f56e6f5 100644
--- a/packages/theme/helpers/cart/addToCart.ts
+++ b/packages/theme/helpers/cart/addToCart.ts
@@ -1,4 +1,5 @@
-import { Product, productGetters } from '@vue-storefront/magento';
+import { Product } from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 import { useRouter, useContext } from '@nuxtjs/composition-api';
 import { useCart } from '~/composables';
 
@@ -11,8 +12,8 @@ export const useAddToCart = () => {
   const { app } = useContext();
   const addItemToCart = async (params: { product: Product, quantity: number }) => {
     const { product, quantity } = params;
-    // eslint-disable-next-line no-underscore-dangle
     // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
     const productType = product.__typename;
 
     switch (productType) {
@@ -24,9 +25,8 @@ export const useAddToCart = () => {
         break;
       case 'BundleProduct':
       case 'ConfigurableProduct':
-        const path = `/p/${productGetters.getProductSku(product)}${
-          productGetters.getSlug(product, product.categories[0])
-        }`;
+        const path = `/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])
+          }`;
         await router.push(String(app.localePath(path)));
         break;
       default:
diff --git a/packages/theme/helpers/product/bundleProduct.ts b/packages/theme/helpers/product/bundleProduct.ts
index c5e7797d5..c16d2101f 100644
--- a/packages/theme/helpers/product/bundleProduct.ts
+++ b/packages/theme/helpers/product/bundleProduct.ts
@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { BundleProduct } from '@vue-storefront/magento-api';
-import { productGetters } from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 
 // eslint-disable-next-line unicorn/prefer-object-from-entries
 export const bundleProductInitialSelector = (bundles: BundleProduct['items']) => (Array.isArray(bundles) ? bundles.reduce((acc, curr) => {
diff --git a/packages/theme/helpers/product/productData.ts b/packages/theme/helpers/product/productData.ts
index 94dcc612b..8df6f48a6 100644
--- a/packages/theme/helpers/product/productData.ts
+++ b/packages/theme/helpers/product/productData.ts
@@ -1,5 +1,5 @@
 import { computed, useRoute } from '@nuxtjs/composition-api';
-import { productGetters } from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 
 export const productData = (products) => {
   const route = useRoute();
diff --git a/packages/theme/modules/catalog/pages/default.vue b/packages/theme/modules/catalog/pages/default.vue
index ec90f67ce..c821e75db 100644
--- a/packages/theme/modules/catalog/pages/default.vue
+++ b/packages/theme/modules/catalog/pages/default.vue
@@ -39,9 +39,7 @@
       </div>
       <div v-else-if="isShowProducts">
         <EmptyResults v-if="products.length === 0" />
-        <div
-          class="products"
-        >
+        <div class="products">
           <transition-group
             v-if="isCategoryGridView"
             appear
@@ -61,16 +59,19 @@
               :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
               :link="
                 localePath(
-                  `/p/${getProductSku(
-                    product
-                  )}${getSlug(product, product.categories[0])}`
+                  `/p/${getProductSku(product)}${getSlug(
+                    product,
+                    product.categories[0]
+                  )}`
                 )
               "
               :regular-price="$fc(getPrice(product).regular)"
               :reviews-count="getTotalReviews(product)"
               :score-rating="getAverageRating(product)"
               :show-add-to-cart-button="true"
-              :special-price="getPrice(product).special && $fc(getPrice(product).special)"
+              :special-price="
+                getPrice(product).special && $fc(getPrice(product).special)
+              "
               :style="{ '--index': i }"
               :title="getName(product)"
               :wishlist-icon="isAuthenticated ? 'heart' : ''"
@@ -123,19 +124,22 @@
               :image="getMagentoImage(getProductThumbnailImage(product))"
               :image-height="imageSizes.productCardHorizontal.height"
               :image-width="imageSizes.productCardHorizontal.width"
-              :is-in-wishlist="isInWishlist({product})"
+              :is-in-wishlist="isInWishlist({ product })"
               :is-in-wishlist-icon="isAuthenticated ? '' : ''"
               :link="
                 localePath(
-                  `/p/${getProductSku(
-                    product
-                  )}${getSlug(product, product.categories[0])}`
+                  `/p/${getProductSku(product)}${getSlug(
+                    product,
+                    product.categories[0]
+                  )}`
                 )
               "
               :regular-price="$fc(getPrice(product).regular)"
               :reviews-count="getTotalReviews(product)"
               :score-rating="getAverageRating(product)"
-              :special-price="getPrice(product).special && $fc(getPrice(product).special)"
+              :special-price="
+                getPrice(product).special && $fc(getPrice(product).special)
+              "
               :style="{ '--index': i }"
               :title="getName(product)"
               :wishlist-icon="isAuthenticated ? '' : ''"
@@ -146,10 +150,7 @@
               <template #image="imageSlotProps">
                 <SfLink
                   :link="imageSlotProps.link"
-                  class="
-                    sf-product-card-horizontal__link
-                    sf-product-card-horizontal__link--image
-                  "
+                  class="sf-product-card-horizontal__link sf-product-card-horizontal__link--image"
                 >
                   <template v-if="Array.isArray(imageSlotProps.image)">
                     <nuxt-img
@@ -191,7 +192,11 @@
                   class="sf-button--text products__product-card-horizontal__add-to-wishlist"
                   @click="addItemToWishlist(product)"
                 >
-                  {{ isInWishlist({ product }) ? $t('Remove from Wishlist') : $t('Save for later') }}
+                  {{
+                    isInWishlist({ product })
+                      ? $t('Remove from Wishlist')
+                      : $t('Save for later')
+                  }}
                 </SfButton>
               </template>
             </SfProductCardHorizontal>
@@ -211,7 +216,9 @@
               v-show="pagination.totalPages > 1"
               class="products__show-on-page"
             >
-              <span class="products__show-on-page__label">{{ $t('Show') }}</span>
+              <span class="products__show-on-page__label">{{
+                $t('Show')
+              }}</span>
               <LazyHydrate on-interaction>
                 <SfSelect
                   :value="pagination.itemsPerPage.toString()"
@@ -270,7 +277,9 @@
                 <SfRadio
                   v-for="option in facet.options"
                   :key="`${facet.id}-${option.value}`"
-                  :label="`${option.id}${option.count ? ` (${option.count})` : ''}`"
+                  :label="`${option.id}${
+                    option.count ? ` (${option.count})` : ''
+                  }`"
                   :selected="isFilterSelected(facet, option)"
                   :value="option.value"
                   name="filter__price"
@@ -281,7 +290,9 @@
                 <SfFilter
                   v-for="option in facet.options"
                   :key="`${facet.id}-${option.value}`"
-                  :label="option.id + `${option.count ? ` (${option.count})` : ''}`"
+                  :label="
+                    option.id + `${option.count ? ` (${option.count})` : ''}`
+                  "
                   :selected="isFilterSelected(facet, option)"
                   class="filters__item"
                   @change="() => selectFilter(facet, option)"
@@ -303,7 +314,9 @@
                   <SfRadio
                     v-for="option in facet.options"
                     :key="`${facet.id}-${option.value}`"
-                    :label="`${option.id}${option.count ? ` (${option.count})` : ''}`"
+                    :label="`${option.id}${
+                      option.count ? ` (${option.count})` : ''
+                    }`"
                     :selected="isFilterSelected(facet, option)"
                     :value="option.value"
                     name="filter__price"
@@ -362,15 +375,17 @@ import {
   SfSelect,
   SfSidebar,
 } from '@storefront-ui/vue';
-import {
-  defineComponent, ref, useFetch,
-} from '@nuxtjs/composition-api';
-import { facetGetters, productGetters } from '@vue-storefront/magento';
+import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api';
 import { useVSFContext } from '@vue-storefront/core';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
+import { facetGetters, productGetters } from '~/getters';
 import {
-  useFacet, useUser, useWishlist,
-  useImage, useUiHelpers, useUiState,
+  useFacet,
+  useUser,
+  useWishlist,
+  useImage,
+  useUiHelpers,
+  useUiState,
 } from '~/composables';
 import { useUrlResolver } from '~/composables/useUrlResolver.ts';
 import cacheControl from '~/helpers/cacheControl';
@@ -422,46 +437,39 @@ export default defineComponent({
     const facets = ref([]);
     const pagination = ref({});
 
+    const { path, result: routeData, search: resolveUrl } = useUrlResolver();
     const {
-      path,
-      result: routeData,
-      search: resolveUrl,
-    } = useUrlResolver();
-    const { $magento: { config: magentoConfig } } = useVSFContext();
+      $magento: { config: magentoConfig },
+    } = useVSFContext();
     const { isAuthenticated } = useUser();
     const {
       addItem: addItemToWishlistBase,
       isInWishlist,
       removeItem: removeItemFromWishlist,
     } = useWishlist('GlobalWishlist');
-    const {
-      result,
-      search,
-    } = useFacet(`facetId:${path}`);
+    const { result, search } = useFacet(`facetId:${path}`);
     const { toggleFilterSidebar } = useUiState();
-    const {
-      addItemToCart,
-      isInCart,
-    } = useAddToCart();
+    const { addItemToCart, isInCart } = useAddToCart();
 
     const getSelectedFilterValues = () => {
       const selectedFilterValues = Object.fromEntries(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        (magentoConfig.facets.available)
-          .map((curr) => [curr, (curr === 'price' ? '' : [])]),
+        magentoConfig.facets.available.map((curr) => [
+          curr,
+          curr === 'price' ? '' : [],
+        ]),
       );
       const { filters } = uiHelpers.getFacetsFromURL();
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      Object.keys(filters)
-        .forEach((filter) => {
-          if (filter === 'price') {
-            const [firstFilter] = filters[filter];
-            selectedFilterValues[filter] = firstFilter;
-          } else {
-            selectedFilterValues[filter] = filters[filter];
-          }
-        });
+      Object.keys(filters).forEach((filter) => {
+        if (filter === 'price') {
+          const [firstFilter] = filters[filter];
+          selectedFilterValues[filter] = firstFilter;
+        } else {
+          selectedFilterValues[filter] = filters[filter];
+        }
+      });
       return selectedFilterValues;
     };
     const selectedFilters = ref(getSelectedFilterValues());
@@ -489,7 +497,7 @@ export default defineComponent({
       if (selectedFilters.value[facet.id].find((f) => f === option.value)) {
         selectedFilters.value[facet.id] = selectedFilters.value[
           facet.id
-          ]?.filter((f) => f !== option.value);
+        ]?.filter((f) => f !== option.value);
         return;
       }
 
@@ -507,11 +515,9 @@ export default defineComponent({
     };
 
     const addItemToWishlist = async (product) => {
-      await (
-        isInWishlist({ product })
-          ? removeItemFromWishlist({ product })
-          : addItemToWishlistBase({ product })
-      );
+      await (isInWishlist({ product })
+        ? removeItemFromWishlist({ product })
+        : addItemToWishlistBase({ product }));
     };
 
     const searchCategoryProduct = async () => {
@@ -534,21 +540,24 @@ export default defineComponent({
       selectedFilters.value = getSelectedFilterValues();
       products.value = facetGetters.getProducts(result.value) ?? [];
       sortBy.value = facetGetters.getSortOptions(result.value);
-      facets.value = facetGetters.getGrouped(result.value, magentoConfig.facets.available);
+      facets.value = facetGetters.getGrouped(
+        result.value,
+        magentoConfig.facets.available,
+      );
       pagination.value = facetGetters.getPagination(result.value);
 
       const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
       // eslint-disable-next-line no-underscore-dangle
-      const productTags = products.value.map((product) => ({ prefix: CacheTagPrefix.Product, value: product.uid }));
+      const productTags = products.value.map((product) => ({
+        prefix: CacheTagPrefix.Product,
+        value: product.uid,
+      }));
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       addTags([...tags, ...productTags]);
     });
 
-    const {
-      getMagentoImage,
-      imageSizes,
-    } = useImage();
+    const { getMagentoImage, imageSizes } = useImage();
 
     return {
       routeData,
@@ -669,7 +678,7 @@ export default defineComponent({
       @include for-mobile {
         margin: 1rem auto;
       }
-      display: block
+      display: block;
     }
   }
 
diff --git a/packages/theme/pages/Checkout.vue b/packages/theme/pages/Checkout.vue
index 94e13d439..d91d35d66 100644
--- a/packages/theme/pages/Checkout.vue
+++ b/packages/theme/pages/Checkout.vue
@@ -5,7 +5,7 @@
         <SfSteps
           v-if="!isThankYou"
           :active="currentStepIndex"
-          :class="{ 'checkout__steps': true }"
+          :class="{ checkout__steps: true }"
           @change="handleStepClick"
         >
           <SfStep
@@ -33,11 +33,15 @@
 </template>
 <script>
 import { SfSteps } from '@storefront-ui/vue';
+import { cartGetters } from '~/getters';
 import {
-  cartGetters,
-} from '@vue-storefront/magento';
-import {
-  computed, defineComponent, ref, useRoute, useRouter, useContext, onMounted,
+  computed,
+  defineComponent,
+  ref,
+  useRoute,
+  useRouter,
+  useContext,
+  onMounted,
 } from '@nuxtjs/composition-api';
 import { useCart } from '~/composables';
 import CartPreview from '~/components/Checkout/CartPreview.vue';
@@ -57,29 +61,26 @@ export default defineComponent({
     const products = computed(() => cartGetters.getItems(cart.value));
     const currentStep = computed(() => path.split('/').pop());
 
-    const STEPS = ref(
-      [
-        {
-          title: 'User Account',
-          url: 'user-account',
-        },
-        {
-          title: 'Shipping',
-          url: 'shipping',
-        },
-        {
-          title: 'Billing',
-          url: 'billing',
-        },
-        {
-          title: 'Payment',
-          url: 'payment',
-        },
-      ],
-    );
+    const STEPS = ref([
+      {
+        title: 'User Account',
+        url: 'user-account',
+      },
+      {
+        title: 'Shipping',
+        url: 'shipping',
+      },
+      {
+        title: 'Billing',
+        url: 'billing',
+      },
+      {
+        title: 'Payment',
+        url: 'payment',
+      },
+    ]);
 
-    const currentStepIndex = computed(() => STEPS.value
-      .findIndex((step) => step.url === currentStep.value));
+    const currentStepIndex = computed(() => STEPS.value.findIndex((step) => step.url === currentStep.value));
     const isThankYou = computed(() => currentStep.value === 'thank-you');
 
     const handleStepClick = async (stepIndex) => {
@@ -149,5 +150,4 @@ export default defineComponent({
     }
   }
 }
-
 </style>
diff --git a/packages/theme/pages/Checkout/Billing.vue b/packages/theme/pages/Checkout/Billing.vue
index 1d15c69be..f7420b162 100644
--- a/packages/theme/pages/Checkout/Billing.vue
+++ b/packages/theme/pages/Checkout/Billing.vue
@@ -6,9 +6,7 @@
       :title="$t('Billing address')"
       class="sf-heading--left sf-heading--no-underline title"
     />
-    <form
-      @submit.prevent="handleSubmit(handleAddressSubmit(reset))"
-    >
+    <form @submit.prevent="handleSubmit(handleAddressSubmit(reset))">
       <SfCheckbox
         v-e2e="'copy-address'"
         :selected="sameAsShipping"
@@ -23,7 +21,12 @@
       >
         <div class="copy__shipping__address">
           <div class="sf-address">
-            <UserAddressDetails :address="{... billingDetails, region: {region_code: billingDetails.region}}" />
+            <UserAddressDetails
+              :address="{
+                ...billingDetails,
+                region: { region_code: billingDetails.region },
+              }"
+            />
           </div>
         </div>
       </div>
@@ -53,7 +56,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="firstname => changeBillingDetails('firstname', firstname)"
+            @input="(firstname) => changeBillingDetails('firstname', firstname)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -71,7 +74,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="lastname => changeBillingDetails('lastname', lastname)"
+            @input="(lastname) => changeBillingDetails('lastname', lastname)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -89,7 +92,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="street => changeBillingDetails('street', street)"
+            @input="(street) => changeBillingDetails('street', street)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -107,7 +110,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="apartment => changeBillingDetails('apartment', apartment)"
+            @input="(apartment) => changeBillingDetails('apartment', apartment)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -125,7 +128,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="city => changeBillingDetails('city', city)"
+            @input="(city) => changeBillingDetails('city', city)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -135,7 +138,9 @@
           slim
         >
           <SfInput
-            v-if="!billingDetails.country_code || regionInformation.length === 0"
+            v-if="
+              !billingDetails.country_code || regionInformation.length === 0
+            "
             v-model="billingDetails.region"
             v-e2e="'state'"
             label="State/Province"
@@ -145,7 +150,7 @@
             :disabled="!billingDetails.country_code"
             name="state"
             class="form__element form__element--half form__element--half-even"
-            @input="region => changeBillingDetails('region', region)"
+            @input="(region) => changeBillingDetails('region', region)"
           />
           <SfSelect
             v-else
@@ -157,7 +162,7 @@
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
             class="form__element form__element--half form__element--half-even form__select sf-select--underlined"
-            @input="state => changeBillingDetails('region', state)"
+            @input="(state) => changeBillingDetails('region', state)"
           >
             <SfSelectOption
               v-for="regionOption in regionInformation"
@@ -209,7 +214,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="postcode => changeBillingDetails('postcode', postcode)"
+            @input="(postcode) => changeBillingDetails('postcode', postcode)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -227,7 +232,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="telephone => changeBillingDetails('telephone', telephone)"
+            @input="(telephone) => changeBillingDetails('telephone', telephone)"
           />
         </ValidationProvider>
       </div>
@@ -271,11 +276,11 @@ import {
 } from '@storefront-ui/vue';
 import {
   useUserBilling,
-  userBillingGetters,
   useBilling,
   useCountrySearch,
   addressGetter,
 } from '@vue-storefront/magento';
+import { userBillingGetters } from '~/getters';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, min, digits } from 'vee-validate/dist/rules';
 import {
@@ -289,7 +294,10 @@ import {
 } from '@nuxtjs/composition-api';
 import { useShipping, useUser } from '~/composables';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
-import { addressFromApiToForm, formatAddressReturnToData } from '~/helpers/checkout/address';
+import {
+  addressFromApiToForm,
+  formatAddressReturnToData,
+} from '~/helpers/checkout/address';
 import { mergeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
@@ -326,10 +334,7 @@ export default defineComponent({
     const { app } = useContext();
     const shippingDetails = ref({});
     const {
-      load,
-      save,
-      loading,
-      billing: address,
+      load, save, loading, billing: address,
     } = useBilling();
     const {
       billing: userBilling,
@@ -408,7 +413,9 @@ export default defineComponent({
           await searchCountry({ id: shippingDetails.value.country_code });
         }
         oldBilling = { ...billingDetails.value };
-        billingDetails.value = { ...formatAddressReturnToData(shippingDetails.value) };
+        billingDetails.value = {
+          ...formatAddressReturnToData(shippingDetails.value),
+        };
         currentAddressId.value = NOT_SELECTED_ADDRESS;
         setAsDefault.value = false;
         if (billingDetails.value.country_code) {
@@ -470,10 +477,7 @@ export default defineComponent({
         await router.push(app.localePath('/checkout/user-account'));
       }
 
-      await Promise.all([
-        loadCountries(),
-        load(),
-      ]);
+      await Promise.all([loadCountries(), load()]);
 
       if (billingDetails.value?.country_code) {
         await searchCountry({ id: billingDetails.value.country_code });
@@ -482,7 +486,9 @@ export default defineComponent({
       if (!userBilling.value?.addresses && isAuthenticated.value) {
         await loadUserBilling();
       }
-      const billingAddresses = userBillingGetters.getAddresses(userBilling.value);
+      const billingAddresses = userBillingGetters.getAddresses(
+        userBilling.value,
+      );
 
       if (!billingAddresses || billingAddresses.length === 0) {
         return;
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index 5d2fb8424..04e5367c6 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -39,9 +39,7 @@
           <div class="product-sku">
             {{ cartGetters.getItemSku(product) }}
           </div>
-          <template
-            v-if="getAttributes(product).length > 0"
-          >
+          <template v-if="getAttributes(product).length > 0">
             <p
               v-for="attr in getAttributes(product)"
               :key="attr.option_label"
@@ -50,9 +48,7 @@
               <strong>{{ `${attr.option_label}:` }}</strong>{{ `${attr.value_label}` }}
             </p>
           </template>
-          <template
-            v-if="getBundles(product).length > 0"
-          >
+          <template v-if="getBundles(product).length > 0">
             <p
               v-for="bundle in getBundles(product)"
               :key="bundle.label"
@@ -68,7 +64,10 @@
         <SfTableData class="table__data price">
           <SfPrice
             :regular="$fc(cartGetters.getItemPrice(product).regular)"
-            :special="cartGetters.getItemPrice(product).special && $fc(cartGetters.getItemPrice(product).special)"
+            :special="
+              cartGetters.getItemPrice(product).special &&
+                $fc(cartGetters.getItemPrice(product).special)
+            "
             class="product-price"
           />
         </SfTableData>
@@ -99,7 +98,9 @@
           >
             <template #name>
               <span class="sf-property__name">
-                {{ selectedShippingMethod.carrier_title }} (<small>{{ selectedShippingMethod.method_title }}</small>)
+                {{ selectedShippingMethod.carrier_title }} (<small>{{
+                  selectedShippingMethod.method_title
+                }}</small>)
               </span>
             </template>
           </SfProperty>
@@ -113,9 +114,7 @@
           class="sf-property--full-width sf-property--large summary__property-total"
         />
 
-        <VsfPaymentProvider
-          @status="isPaymentReady = true"
-        />
+        <VsfPaymentProvider @status="isPaymentReady = true" />
 
         <SfCheckbox
           v-model="terms"
@@ -172,12 +171,11 @@ import {
   computed,
   defineComponent,
   useRouter,
-  useContext, onMounted,
+  useContext,
+  onMounted,
 } from '@nuxtjs/composition-api';
-import {
-  useMakeOrder,
-  cartGetters,
-} from '@vue-storefront/magento';
+import { useMakeOrder } from '@vue-storefront/magento';
+import { cartGetters } from '~/getters';
 import { useCart, useImage } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 import { removeItem } from '~/helpers/asyncLocalStorage';
@@ -222,12 +220,18 @@ export default defineComponent({
       $magento.config.state.setCartId();
       await load();
       await removeItem('checkout');
-      await router.push(`${app.localePath(`/checkout/thank-you?order=${order.value.order_number}`)}`);
+      await router.push(
+        `${app.localePath(
+          `/checkout/thank-you?order=${order.value.order_number}`,
+        )}`,
+      );
     };
 
     const discounts = computed(() => cartGetters.getDiscounts(cart.value));
     const hasDiscounts = computed(() => discounts.value.length > 0);
-    const discountsAmount = computed(() => -1 * discounts.value.reduce((a, el) => el.value + a, 0));
+    const discountsAmount = computed(
+      () => -1 * discounts.value.reduce((a, el) => el.value + a, 0),
+    );
 
     const { getMagentoImage, imageSizes } = useImage();
 
diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
index f5215902e..1712379b1 100644
--- a/packages/theme/pages/Checkout/Shipping.vue
+++ b/packages/theme/pages/Checkout/Shipping.vue
@@ -34,7 +34,9 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="firstname => changeShippingDetails('firstname', firstname)"
+            @input="
+              (firstname) => changeShippingDetails('firstname', firstname)
+            "
           />
         </ValidationProvider>
         <ValidationProvider
@@ -52,7 +54,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="lastname => changeShippingDetails('lastname', lastname)"
+            @input="(lastname) => changeShippingDetails('lastname', lastname)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -70,7 +72,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="street => changeShippingDetails('street', street)"
+            @input="(street) => changeShippingDetails('street', street)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -88,7 +90,9 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="apartment => changeShippingDetails('apartment', apartment)"
+            @input="
+              (apartment) => changeShippingDetails('apartment', apartment)
+            "
           />
         </ValidationProvider>
         <ValidationProvider
@@ -106,17 +110,23 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="city => changeShippingDetails('city', city)"
+            @input="(city) => changeShippingDetails('city', city)"
           />
         </ValidationProvider>
         <ValidationProvider
           v-slot="{ errors }"
           name="region"
-          :rules="!shippingDetails.country_code || regionInformation.length === 0 ? null : 'required|min:2'"
+          :rules="
+            !shippingDetails.country_code || regionInformation.length === 0
+              ? null
+              : 'required|min:2'
+          "
           slim
         >
           <SfInput
-            v-if="!shippingDetails.country_code || regionInformation.length === 0"
+            v-if="
+              !shippingDetails.country_code || regionInformation.length === 0
+            "
             v-e2e="'shipping-state'"
             :value="shippingDetails.region"
             label="State/Province"
@@ -124,8 +134,12 @@
             name="state"
             class="form__element form__element--half form__element--half-even"
             :valid="!!shippingDetails.country_code"
-            :error-message="!shippingDetails.country_code ? $t('Please select a country first') : ''"
-            @input="region => changeShippingDetails('region', region)"
+            :error-message="
+              !shippingDetails.country_code
+                ? $t('Please select a country first')
+                : ''
+            "
+            @input="(region) => changeShippingDetails('region', region)"
           />
           <SfSelect
             v-else
@@ -136,7 +150,7 @@
             class="form__element form__element--half form__element--half-even form__select sf-select--underlined"
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="region => changeShippingDetails('region', region)"
+            @input="(region) => changeShippingDetails('region', region)"
           >
             <SfSelectOption
               v-for="regionOption in regionInformation"
@@ -188,7 +202,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="postcode => changeShippingDetails('postcode', postcode)"
+            @input="(postcode) => changeShippingDetails('postcode', postcode)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -206,7 +220,9 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="telephone => changeShippingDetails('telephone', telephone)"
+            @input="
+              (telephone) => changeShippingDetails('telephone', telephone)
+            "
           />
         </ValidationProvider>
       </div>
@@ -242,24 +258,23 @@
 
 <script>
 import {
-  SfHeading,
-  SfInput,
-  SfButton,
-  SfSelect,
+  SfHeading, SfInput, SfButton, SfSelect,
 } from '@storefront-ui/vue';
 import {
   ref,
   computed,
   watch,
   onMounted,
-  defineComponent, useRouter, useContext,
+  defineComponent,
+  useRouter,
+  useContext,
 } from '@nuxtjs/composition-api';
 import {
   addressGetter,
   useCountrySearch,
-  userShippingGetters,
   useUserShipping,
 } from '@vue-storefront/magento';
+import { userShippingGetters } from '~/getters';
 import { required, min, digits } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { useUser, useShipping } from '~/composables';
@@ -427,14 +442,17 @@ export default defineComponent({
         await searchCountry({ id: shippingDetails.value.country_code });
       }
 
-      const shippingAddresses = userShippingGetters.getAddresses(userShipping.value);
+      const shippingAddresses = userShippingGetters.getAddresses(
+        userShipping.value,
+      );
 
       if (!shippingAddresses || shippingAddresses.length === 0) {
         return;
       }
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      const hasEmptyShippingDetails = !shippingDetails.value || Object.keys(shippingDetails.value).length === 0;
+      const hasEmptyShippingDetails = !shippingDetails.value
+        || Object.keys(shippingDetails.value).length === 0;
       if (hasEmptyShippingDetails) {
         selectDefaultAddress();
       }
diff --git a/packages/theme/pages/Home.vue b/packages/theme/pages/Home.vue
index f750ec96c..f0460d4ea 100644
--- a/packages/theme/pages/Home.vue
+++ b/packages/theme/pages/Home.vue
@@ -71,7 +71,11 @@
       <SfCallToAction
         :title="$t('Subscribe to Newsletters')"
         :button-text="$t('Subscribe')"
-        :description="$t('Be aware of upcoming sales and events. Receive gifts and special offers!')"
+        :description="
+          $t(
+            'Be aware of upcoming sales and events. Receive gifts and special offers!'
+          )
+        "
         image="https://cdn.shopify.com/s/files/1/0407/1902/4288/files/newsletter_1240x202.jpg?v=1616496568"
         class="call-to-action"
       />
@@ -93,15 +97,14 @@ import {
   SfCallToAction,
   SfBannerGrid,
 } from '@storefront-ui/vue';
-import {
-  productGetters,
-} from '@vue-storefront/magento';
+import { productGetters } from '~/getters';
 
 import {
   computed,
   defineComponent,
   ref,
-  useContext, useFetch,
+  useContext,
+  useFetch,
 } from '@nuxtjs/composition-api';
 import LazyHydrate from 'vue-lazy-hydration';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
@@ -132,10 +135,7 @@ export default defineComponent({
     const year = new Date().getFullYear();
     const products = ref({});
 
-    const {
-      getProductList,
-      loading: newProductsLoading,
-    } = useProduct();
+    const { getProductList, loading: newProductsLoading } = useProduct();
 
     const heroes = ref([
       {
@@ -145,9 +145,9 @@ export default defineComponent({
         background: '#eceff1',
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_328x224.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_328x224.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_1240x400.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_1240x400.jpg',
         },
         link: '/c/women/women-clothing-shirts',
       },
@@ -158,9 +158,9 @@ export default defineComponent({
         background: '#fce4ec',
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerH_328x224.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerH_328x224.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerH_1240x400.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerH_1240x400.jpg',
         },
         link: '/c/women/women-clothing-dresses',
       },
@@ -171,13 +171,13 @@ export default defineComponent({
         background: '#efebe9',
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerA_328x224.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerA_328x224.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerA_1240x400.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerA_1240x400.jpg',
         },
         link: '/c/women/women-shoes-sandals',
         className:
-            'sf-hero-item--position-bg-top-left sf-hero-item--align-right',
+          'sf-hero-item--position-bg-top-left sf-hero-item--align-right',
       },
     ]);
     const banners = ref([
@@ -185,14 +185,15 @@ export default defineComponent({
         slot: 'banner-A',
         subtitle: app.i18n.t('Dresses'),
         title: app.i18n.t('Cocktail & Party'),
-        description:
-            app.i18n.t('Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.'),
+        description: app.i18n.t(
+          'Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.',
+        ),
         buttonText: app.i18n.t('Shop now'),
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_328x343.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_328x343.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerF_332x840.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerF_332x840.jpg',
         },
         class: 'sf-banner--slim desktop-only',
         link: '/c/women/women-clothing-skirts',
@@ -201,13 +202,15 @@ export default defineComponent({
         slot: 'banner-B',
         subtitle: app.i18n.t('Dresses'),
         title: app.i18n.t('Linen Dresses'),
-        description: app.i18n.t('Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.'),
+        description: app.i18n.t(
+          'Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.',
+        ),
         buttonText: app.i18n.t('Shop now'),
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerE_328x343.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerE_328x343.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerE_496x840.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerE_496x840.jpg',
         },
         class: 'sf-banner--slim banner-central desktop-only',
         link: '/c/women/women-clothing-dresses',
@@ -218,9 +221,9 @@ export default defineComponent({
         title: app.i18n.t('The Office Life'),
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerC_328x343.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerC_328x343.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerC_332x400.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerC_332x400.jpg',
         },
         class: 'sf-banner--slim banner__tshirt',
         link: '/c/women/women-clothing-shirts',
@@ -231,9 +234,9 @@ export default defineComponent({
         title: app.i18n.t('Eco Sandals'),
         image: {
           mobile:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerG_328x343.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerG_328x343.jpg',
           desktop:
-              'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerG_332x400.jpg',
+            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerG_332x400.jpg',
         },
         class: 'sf-banner--slim',
         link: '/c/women/women-shoes-sandals',
@@ -251,9 +254,7 @@ export default defineComponent({
           position: 'ASC',
         },
       });
-      addTags([
-        { prefix: CacheTagPrefix.View, value: 'home' },
-      ]);
+      addTags([{ prefix: CacheTagPrefix.View, value: 'home' }]);
     });
 
     return {
@@ -280,7 +281,7 @@ export default defineComponent({
 
 .article-item__meta-item:not(:last-child)::after {
   display: inline-block;
-  content: "";
+  content: '';
   width: 5px;
   height: 5px;
   margin: -1px 10px 0 10px;
@@ -335,7 +336,8 @@ export default defineComponent({
         --hero-item-wrapper-text-align: right;
         --hero-item-subtitle-width: 100%;
         --hero-item-title-width: 100%;
-        --hero-item-wrapper-padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-sm) var(--spacer-2xl);
+        --hero-item-wrapper-padding: var(--spacer-sm) var(--spacer-sm)
+          var(--spacer-sm) var(--spacer-2xl);
       }
     }
   }
diff --git a/packages/theme/pages/MyAccount/AddressesDetails.vue b/packages/theme/pages/MyAccount/AddressesDetails.vue
index ac95de9d4..838f29896 100644
--- a/packages/theme/pages/MyAccount/AddressesDetails.vue
+++ b/packages/theme/pages/MyAccount/AddressesDetails.vue
@@ -47,9 +47,7 @@
               </div>
             </div>
             <div class="addresses__actions">
-              <SfButton
-                @click="changeAddress(address)"
-              >
+              <SfButton @click="changeAddress(address)">
                 {{ $t('Change') }}
               </SfButton>
 
@@ -84,9 +82,14 @@
 </template>
 <script>
 import { SfTabs, SfButton } from '@storefront-ui/vue';
-import { userAddressesGetters, useAddresses } from '@vue-storefront/magento';
+import { useAddresses } from '@vue-storefront/magento';
+import { userAddressesGetters } from '~/getters';
 import {
-  computed, defineComponent, useRouter, useRoute, useContext,
+  computed,
+  defineComponent,
+  useRouter,
+  useRoute,
+  useContext,
 } from '@nuxtjs/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import AddressForm from '~/components/MyAccount/AddressForm.vue';
@@ -104,27 +107,28 @@ export default defineComponent({
   },
   setup() {
     const {
-      addresses,
-      load,
-      remove,
-      update,
-      save,
+      addresses, load, remove, update, save,
     } = useAddresses();
 
     const userAddresses = computed(() => userAddressesGetters.getAddresses(addresses.value));
     const router = useRouter();
     const route = useRoute();
     const { app } = useContext();
-    const activeAddress = computed(
-      () => userAddresses.value.filter((address) => String(address?.id) === route.value.query.id).pop(),
-    );
+    const activeAddress = computed(() => userAddresses.value
+      .filter((address) => String(address?.id) === route.value.query.id)
+      .pop());
 
     const getTranslatedUrlAddress = (title) => app.i18n.t(`${title}`).toLowerCase().replace(' ', '-');
     const isNewAddress = computed(() => !activeAddress.value);
     const editingAddress = computed(() => !!route.value.query.id);
     const changeAddress = async (address) => {
       const addressId = address?.id || 'new';
-      await router.push(`${app.localePath({ path: `/my-account/${getTranslatedUrlAddress('Addresses details')}`, query: { id: addressId } })}`);
+      await router.push(
+        `${app.localePath({
+          path: `/my-account/${getTranslatedUrlAddress('Addresses details')}`,
+          query: { id: addressId },
+        })}`,
+      );
     };
 
     const removeAddress = async (address) => {
@@ -140,7 +144,11 @@ export default defineComponent({
         const actionMethod = isNewAddress.value ? save : update;
         const data = await actionMethod({ address: form });
         await onComplete(data);
-        await router.push(app.localePath(`/my-account/${getTranslatedUrlAddress('Addresses details')}`));
+        await router.push(
+          app.localePath(
+            `/my-account/${getTranslatedUrlAddress('Addresses details')}`,
+          ),
+        );
       } catch (error) {
         onError(error);
       }
@@ -165,7 +173,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .message {
   font-family: var(--font-family--primary);
   line-height: 1.6;
diff --git a/packages/theme/pages/MyAccount/MyReviews.vue b/packages/theme/pages/MyAccount/MyReviews.vue
index d84d0cf84..09810e736 100644
--- a/packages/theme/pages/MyAccount/MyReviews.vue
+++ b/packages/theme/pages/MyAccount/MyReviews.vue
@@ -53,12 +53,10 @@
 
 <script>
 import {
-  SfTabs,
-  SfLoader,
-  SfReview,
-  SfRating,
+  SfTabs, SfLoader, SfReview, SfRating,
 } from '@storefront-ui/vue';
-import { reviewGetters, useReview } from '@vue-storefront/magento';
+import { useReview } from '@vue-storefront/magento';
+import { reviewGetters } from '~/getters';
 import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
 
 export default defineComponent({
@@ -70,11 +68,9 @@ export default defineComponent({
     SfRating,
   },
   setup() {
-    const {
-      reviews,
-      loading,
-      loadCustomerReviews,
-    } = useReview('productReviews-my-reviews');
+    const { reviews, loading, loadCustomerReviews } = useReview(
+      'productReviews-my-reviews',
+    );
 
     const userReviews = computed(() => reviewGetters.getItems(reviews.value));
 
@@ -92,11 +88,12 @@ export default defineComponent({
 });
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .no-reviews {
   &__title {
     margin: 0 0 var(--spacer-lg) 0;
-    font: var(--font-weight--normal) var(--font-size--base) / 1.6 var(--font-family--primary);
+    font: var(--font-weight--normal) var(--font-size--base) / 1.6
+      var(--font-family--primary);
   }
 }
 
@@ -110,7 +107,8 @@ export default defineComponent({
 
 .message {
   margin: 0 0 var(--spacer-2xl) 0;
-  font: var(--font-weight--light) var(--font-size--base) / 1.6 var(--font-family--primary);
+  font: var(--font-weight--light) var(--font-size--base) / 1.6
+    var(--font-family--primary);
 
   &__link {
     color: var(--c-primary);
@@ -124,7 +122,7 @@ export default defineComponent({
     }
   }
 }
-.sf-review__rating{
+.sf-review__rating {
   width: 100%;
   display: flex;
   align-items: center;
diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index 1407565d2..a2efa7d7b 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -7,20 +7,22 @@
       <div v-if="loading">
         <SfLoader />
       </div>
-      <div
-        v-else
-      >
+      <div v-else>
         <div class="navbar section">
           <div class="navbar__main">
             <div class="navbar__counter">
-              <span class="navbar__label desktop-only">{{ $t('Products found') }}</span>
+              <span class="navbar__label desktop-only">{{
+                $t('Products found')
+              }}</span>
               <span class="desktop-only">{{ pagination.totalItems }}</span>
               <span class="navbar__label smartphone-only">
                 {{ pagination.totalItems }} {{ $t('Items') }}</span>
             </div>
 
             <div class="navbar__view">
-              <span class="navbar__view-label desktop-only">{{ $t('View') }}</span>
+              <span class="navbar__view-label desktop-only">{{
+                $t('View')
+              }}</span>
               <SvgImage
                 icon="tiles"
                 :label="$t('Change to grid view')"
@@ -68,27 +70,44 @@
                   class="products__product-card"
                   :image-width="imageSizes.productCard.width"
                   :image-height="imageSizes.productCard.height"
-                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product.product))"
+                  :image="
+                    getMagentoImage(
+                      productGetters.getProductThumbnailImage(product.product)
+                    )
+                  "
                   :is-added-to-cart="isInCart({ product: product.product })"
                   :is-in-wishlist="true"
                   :link="
                     localePath(
                       `/p/${productGetters.getProductSku(
                         product.product
-                      )}${productGetters.getSlug(product.product, product.product.categories[0])}`
+                      )}${productGetters.getSlug(
+                        product.product,
+                        product.product.categories[0]
+                      )}`
                     )
                   "
-                  :regular-price="$fc(productGetters.getPrice(product.product).regular)"
-                  :reviews-count="productGetters.getTotalReviews(product.product)"
-                  :score-rating="productGetters.getAverageRating(product.product)"
+                  :regular-price="
+                    $fc(productGetters.getPrice(product.product).regular)
+                  "
+                  :reviews-count="
+                    productGetters.getTotalReviews(product.product)
+                  "
+                  :score-rating="
+                    productGetters.getAverageRating(product.product)
+                  "
                   :show-add-to-cart-button="true"
-                  :special-price="productGetters.getPrice(product.product).special
-                    && $fc(productGetters.getPrice(product.product).special)"
+                  :special-price="
+                    productGetters.getPrice(product.product).special &&
+                      $fc(productGetters.getPrice(product.product).special)
+                  "
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
                   @click:wishlist="removeItemFromWishlist(product.product)"
-                  @click:add-to-cart="addItemToCart({ product: product.product, quantity: 1 })"
+                  @click:add-to-cart="
+                    addItemToCart({ product: product.product, quantity: 1 })
+                  "
                 >
                   <template #image="imageSlotProps">
                     <SfButton
@@ -100,7 +119,10 @@
                     >
                       <template v-if="Array.isArray(imageSlotProps.image)">
                         <nuxt-img
-                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          v-for="(picture, key) in imageSlotProps.image.slice(
+                            0,
+                            2
+                          )"
                           :key="key"
                           class="sf-product-card__picture"
                           :src="picture"
@@ -133,7 +155,11 @@
                   :key="productGetters.getSlug(product.product)"
                   class="products__product-card-horizontal"
                   :description="productGetters.getDescription(product.product)"
-                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product.product))"
+                  :image="
+                    getMagentoImage(
+                      productGetters.getProductThumbnailImage(product.product)
+                    )
+                  "
                   :image-width="imageSizes.productCardHorizontal.width"
                   :image-height="imageSizes.productCardHorizontal.height"
                   :is-in-wishlist="true"
@@ -141,31 +167,44 @@
                     localePath(
                       `/p/${productGetters.getProductSku(
                         product.product
-                      )}${productGetters.getSlug(product.product, product.product.categories[0])}`
+                      )}${productGetters.getSlug(
+                        product.product,
+                        product.product.categories[0]
+                      )}`
                     )
                   "
-                  :regular-price="$fc(productGetters.getPrice(product.product).regular)"
-                  :reviews-count="productGetters.getTotalReviews(product.product)"
-                  :score-rating="productGetters.getAverageRating(product.product)"
-                  :special-price="productGetters.getPrice(product.product).special
-                    && $fc(productGetters.getPrice(product.product).special)"
+                  :regular-price="
+                    $fc(productGetters.getPrice(product.product).regular)
+                  "
+                  :reviews-count="
+                    productGetters.getTotalReviews(product.product)
+                  "
+                  :score-rating="
+                    productGetters.getAverageRating(product.product)
+                  "
+                  :special-price="
+                    productGetters.getPrice(product.product).special &&
+                      $fc(productGetters.getPrice(product.product).special)
+                  "
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
                   @click:wishlist="removeItemFromWishlist(product.product)"
-                  @click:add-to-cart="addItemToCart({ product: product.product, quantity: 1 })"
+                  @click:add-to-cart="
+                    addItemToCart({ product: product.product, quantity: 1 })
+                  "
                 >
                   <template #image="imageSlotProps">
                     <SfLink
                       :link="imageSlotProps.link"
-                      class="
-                    sf-product-card-horizontal__link
-                    sf-product-card-horizontal__link--image
-                  "
+                      class="sf-product-card-horizontal__link sf-product-card-horizontal__link--image"
                     >
                       <template v-if="Array.isArray(imageSlotProps.image)">
                         <nuxt-img
-                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          v-for="(picture, key) in imageSlotProps.image.slice(
+                            0,
+                            2
+                          )"
                           :key="key"
                           class="sf-product-card-horizontal__picture"
                           :src="picture"
@@ -224,7 +263,9 @@
                 v-show="pagination.totalPages > 1"
                 class="products__show-on-page"
               >
-                <span class="products__show-on-page__label">{{ $t('Show on page') }}</span>
+                <span class="products__show-on-page__label">{{
+                  $t('Show on page')
+                }}</span>
                 <LazyHydrate on-interaction>
                   <SfSelect
                     :value="pagination.itemsPerPage.toString()"
@@ -270,12 +311,13 @@ import {
   useRoute,
   useContext,
 } from '@nuxtjs/composition-api';
+import { productGetters, wishlistGetters } from '~/getters';
 import {
-  productGetters,
-  wishlistGetters,
-} from '@vue-storefront/magento';
-import {
-  useCart, useUiHelpers, useUiState, useImage, useWishlist,
+  useCart,
+  useUiHelpers,
+  useUiState,
+  useImage,
+  useWishlist,
 } from '~/composables';
 import SvgImage from '~/components/General/SvgImage.vue';
 
@@ -295,34 +337,22 @@ export default defineComponent({
   },
   setup() {
     const {
-      load,
-      loading,
-      wishlist,
-      removeItem,
+      load, loading, wishlist, removeItem,
     } = useWishlist();
     const route = useRoute();
     const { app } = useContext();
     const {
-      query: {
-        page,
-        itemsPerPage,
-      },
+      query: { page, itemsPerPage },
     } = route.value;
     const router = useRouter();
     const th = useUiHelpers();
     const uiState = useUiState();
-    const {
-      addItem: addItemToCartBase,
-      isInCart,
-    } = useCart();
+    const { addItem: addItemToCartBase, isInCart } = useCart();
 
     const products = computed(() => wishlistGetters.getProducts(wishlist.value));
     const pagination = computed(() => wishlistGetters.getPagination(wishlist.value[0]));
 
-    const addItemToCart = async ({
-      product,
-      quantity,
-    }) => {
+    const addItemToCart = async ({ product, quantity }) => {
       // eslint-disable-next-line no-underscore-dangle
       const productType = product.__typename;
 
@@ -335,14 +365,15 @@ export default defineComponent({
           break;
         case 'BundleProduct':
         case 'ConfigurableProduct':
-          const path = `/p/${productGetters.getProductSku(product)}${productGetters.getSlug(
+          const path = `/p/${productGetters.getProductSku(
             product,
-            product.categories[0],
-          )}`;
+          )}${productGetters.getSlug(product, product.categories[0])}`;
           await router.push(`${app.localePath(path)}`);
           break;
         default:
-          throw new Error(`Product Type ${productType} not supported in add to cart yet`);
+          throw new Error(
+            `Product Type ${productType} not supported in add to cart yet`,
+          );
       }
     };
 
@@ -544,7 +575,8 @@ export default defineComponent({
 
     &-label {
       margin: 0 var(--spacer-sm) 0 0;
-      font: var(--font-weight--normal) var(--font-size--base) / 1.6 var(--font-family--secondary);
+      font: var(--font-weight--normal) var(--font-size--base) / 1.6
+        var(--font-family--secondary);
       text-decoration: none;
       color: var(--c-link);
     }
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 60336f047..6ced7da86 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -9,9 +9,7 @@
           class="breadcrumbs desktop-only"
           :breadcrumbs="breadcrumbs"
         />
-        <div
-          class="product"
-        >
+        <div class="product">
           <LazyHydrate when-idle>
             <SfLoader
               :class="{ 'loading--product-gallery': productLoading }"
@@ -82,9 +80,7 @@
               <SfButton class="sf-button--text desktop-only product__guide">
                 {{ $t('Size guide') }}
               </SfButton>
-              <template
-                v-for="option in configurableOptions"
-              >
+              <template v-for="option in configurableOptions">
                 <div
                   v-if="option.attribute_code === 'color'"
                   :key="option.uid"
@@ -97,9 +93,17 @@
                     v-for="color in option.values"
                     :key="color.uid"
                     :color="productGetters.getSwatchData(color.swatch_data)"
-                    :selected="productConfiguration[option.attribute_uid] === color.uid"
+                    :selected="
+                      productConfiguration[option.attribute_uid] === color.uid
+                    "
                     class="product__color"
-                    @click="() => updateProductConfiguration(option.attribute_uid, color.uid)"
+                    @click="
+                      () =>
+                        updateProductConfiguration(
+                          option.attribute_uid,
+                          color.uid
+                        )
+                    "
                   />
                 </div>
                 <SfSelect
@@ -109,7 +113,10 @@
                   :label="option.label"
                   class="sf-select--underlined product__select-size"
                   :required="true"
-                  @input="($event) => updateProductConfiguration(option.attribute_uid, $event)"
+                  @input="
+                    ($event) =>
+                      updateProductConfiguration(option.attribute_uid, $event)
+                  "
                 >
                   <SfSelectOption
                     v-for="attribute in option.values"
@@ -120,17 +127,13 @@
                   </SfSelectOption>
                 </SfSelect>
               </template>
-              <template
-                v-if="product.__typename === 'GroupedProduct'"
-              >
+              <template v-if="product.__typename === 'GroupedProduct'">
                 <grouped-product-selector
                   :can-add-to-cart="canAddToCart"
                   @update-price="basePrice = $event"
                 />
               </template>
-              <template
-                v-else-if="product.__typename === 'BundleProduct'"
-              >
+              <template v-else-if="product.__typename === 'BundleProduct'">
                 <BundleProductSelector
                   :can-add-to-cart="canAddToCart"
                   @update-price="basePrice = $event"
@@ -267,11 +270,7 @@ import {
   SfSelect,
   SfTabs,
 } from '@storefront-ui/vue';
-import {
-  productGetters,
-  useReview,
-  reviewGetters,
-} from '@vue-storefront/magento';
+import { useReview } from '@vue-storefront/magento';
 import {
   ref,
   computed,
@@ -281,6 +280,7 @@ import {
   defineComponent, useFetch,
 } from '@nuxtjs/composition-api';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
+import { productGetters, reviewGetters } from '~/getters';
 import {
   useProduct, useCart, useWishlist, useUser,
 } from '~/composables';
@@ -334,21 +334,12 @@ export default defineComponent({
     const qty = ref(1);
     const products = ref([]);
 
-    const {
-      product,
-      id,
-    } = productData(products);
+    const { product, id } = productData(products);
 
     const route = useRoute();
     const router = useRouter();
-    const {
-      getProductDetails,
-      loading: productLoading,
-    } = useProduct();
-    const {
-      addItem,
-      loading,
-    } = useCart();
+    const { getProductDetails, loading: productLoading } = useProduct();
+    const { addItem, loading } = useCart();
     const {
       reviews: productReviews,
       search: searchReviews,
@@ -360,16 +351,25 @@ export default defineComponent({
     const { error: nuxtError, app } = useContext();
     const basePrice = ref(0);
     const openTab = ref(1);
-    const productDataIsLoading = computed(() => productLoading.value && !productGetters.getName(product.value));
-    const productShortDescription = computed(() => product.value.short_description?.html || '');
-    const productDescription = computed(() => product.value.description?.html || '');
+    const productDataIsLoading = computed(
+      () => productLoading.value && !productGetters.getName(product.value),
+    );
+    const productShortDescription = computed(
+      () => product.value.short_description?.html || '',
+    );
+    const productDescription = computed(
+      () => product.value.description?.html || '',
+    );
     const canAddToCart = computed(() => {
       // eslint-disable-next-line no-underscore-dangle
       if (product.value.__typename === 'ConfigurableProduct') {
-        return !!product.value.configurable_product_options_selection?.variant?.uid;
+        return !!product.value.configurable_product_options_selection?.variant
+          ?.uid;
       }
       const inStock = product.value.stock_status || '';
-      const stockLeft = product.value.only_x_left_in_stock === null ? true : qty.value <= product.value.only_x_left_in_stock;
+      const stockLeft = product.value.only_x_left_in_stock === null
+        ? true
+        : qty.value <= product.value.only_x_left_in_stock;
       return inStock && stockLeft;
     });
     const categories = computed(() => productGetters.getCategoryIds(product.value));
@@ -386,16 +386,17 @@ export default defineComponent({
         Array.isArray(productCategories) ? [...productCategories].pop() : [],
       );
     });
-    const productGallery = computed(() => productGetters.getGallery(product.value)
-      .map((img) => ({
-        mobile: { url: img.small },
-        desktop: { url: img.normal },
-        big: { url: img.big },
-        // eslint-disable-next-line no-underscore-dangle
-        alt: product.value._name || product.value.name,
-      })));
-
-    const configurableOptions = computed(() => product.value.configurable_options);
+    const productGallery = computed(() => productGetters.getGallery(product.value).map((img) => ({
+      mobile: { url: img.small },
+      desktop: { url: img.normal },
+      big: { url: img.big },
+      // eslint-disable-next-line no-underscore-dangle
+      alt: product.value._name || product.value.name,
+    })));
+
+    const configurableOptions = computed(
+      () => product.value.configurable_options,
+    );
     const productConfiguration = ref(Object.entries(route.value.query));
     const productTypedPrice = computed(() => {
       // eslint-disable-next-line no-underscore-dangle
@@ -408,7 +409,10 @@ export default defineComponent({
           return 0;
       }
     });
-    const productPrice = computed(() => productTypedPrice.value || productGetters.getPrice(product.value).regular);
+    const productPrice = computed(
+      () => productTypedPrice.value
+        || productGetters.getPrice(product.value).regular,
+    );
     const productSpecialPrice = computed(() => {
       // eslint-disable-next-line no-underscore-dangle
       switch (product.value.__typename) {
@@ -419,33 +423,30 @@ export default defineComponent({
     });
 
     const changeTab = (tabNumber, callback) => {
-      document
-        .querySelector('#tabs')
-        .scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
+      document.querySelector('#tabs').scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
       openTab.value = tabNumber;
       if (callback && typeof callback === 'function') callback();
     };
     const changeNewReview = () => {
       changeTab(2, () => {
-        setTimeout(() => document
-          .querySelector('#addReview')
-          .scrollIntoView({
+        setTimeout(
+          () => document.querySelector('#addReview').scrollIntoView({
             behavior: 'smooth',
             block: 'end',
-          }), 500);
+          }),
+          500,
+        );
       });
     };
     const successAddReview = async (reviewData) => {
       await addReview(reviewData);
-      document
-        .querySelector('#tabs')
-        .scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
+      document.querySelector('#tabs').scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
     };
 
     const updateProductConfiguration = async (label, value) => {
@@ -467,7 +468,11 @@ export default defineComponent({
           },
         },
         ...(productConfiguration.value.length > 0
-          ? { configurations: productConfiguration.value.map((config) => config[1]) }
+          ? {
+            configurations: productConfiguration.value.map(
+              (config) => config[1],
+            ),
+          }
           : {}),
       };
 
@@ -479,10 +484,21 @@ export default defineComponent({
 
       await searchReviews(baseSearchQuery);
 
-      const tags = [{ prefix: CacheTagPrefix.View, value: `product-${route.value.params.id}` }];
-      const productTags = { prefix: CacheTagPrefix.Product, value: product.value.uid };
+      const tags = [
+        {
+          prefix: CacheTagPrefix.View,
+          value: `product-${route.value.params.id}`,
+        },
+      ];
+      const productTags = {
+        prefix: CacheTagPrefix.Product,
+        value: product.value.uid,
+      };
 
-      const categoriesTags = categories.value.map((catId) => ({ prefix: CacheTagPrefix.Category, value: catId }));
+      const categoriesTags = categories.value.map((catId) => ({
+        prefix: CacheTagPrefix.Category,
+        value: catId,
+      }));
       addTags(tags.concat(productTags, categoriesTags));
     });
 
@@ -535,7 +551,7 @@ export default defineComponent({
 
 .product-loader {
   height: 38px;
-  margin: var(--spacer-base) auto var(--spacer-lg)
+  margin: var(--spacer-base) auto var(--spacer-lg);
 }
 
 .product {
@@ -568,7 +584,7 @@ export default defineComponent({
 
   &__drag-icon {
     animation: moveicon 1s ease-in-out infinite;
-    color: var(--c-text-disabled)
+    color: var(--c-text-disabled);
   }
 
   &__price-and-rating {
@@ -590,11 +606,11 @@ export default defineComponent({
 
   &__count {
     @include font(
-            --count-font,
-            var(--font-weight--normal),
-            var(--font-size--sm),
-            1.4,
-            var(--font-family--secondary)
+      --count-font,
+      var(--font-weight--normal),
+      var(--font-size--sm),
+      1.4,
+      var(--font-family--secondary)
     );
     color: var(--c-text);
     text-decoration: none;
@@ -603,11 +619,11 @@ export default defineComponent({
 
   &__description {
     @include font(
-            --product-description-font,
-            var(--font-weight--light),
-            var(--font-size--base),
-            1.6,
-            var(--font-family--primary)
+      --product-description-font,
+      var(--font-weight--light),
+      var(--font-size--base),
+      1.6,
+      var(--font-family--primary)
     );
   }
 
@@ -620,11 +636,11 @@ export default defineComponent({
 
   &__colors {
     @include font(
-            --product-color-font,
-            var(--font-weight--normal),
-            var(--font-size--lg),
-            1.6,
-            var(--font-family--secondary)
+      --product-color-font,
+      var(--font-weight--normal),
+      var(--font-size--lg),
+      1.6,
+      var(--font-family--secondary)
     );
     display: flex;
     align-items: center;
@@ -683,11 +699,11 @@ export default defineComponent({
   &__additional-info {
     color: var(--c-link);
     @include font(
-            --additional-info-font,
-            var(--font-weight--light),
-            var(--font-size--sm),
-            1.6,
-            var(--font-family--primary)
+      --additional-info-font,
+      var(--font-weight--light),
+      var(--font-size--sm),
+      1.6,
+      var(--font-family--primary)
     );
 
     &__title {
diff --git a/packages/theme/stores/customer.ts b/packages/theme/stores/customer.ts
index 7aaa6bcb3..dd26f46ee 100644
--- a/packages/theme/stores/customer.ts
+++ b/packages/theme/stores/customer.ts
@@ -3,7 +3,7 @@ import { Wishlist, Cart } from '@vue-storefront/magento';
 
 const wishlist: Wishlist = { items_count: 0 };
 const user: any = {};
-const cart: Cart = { id: '', is_virtual: false, total_quantity: 0 };
+const cart: Cart = { id: '', is_virtual: false, total_quantity: 0, shipping_addresses: [] };
 
 interface CustomerState {
   wishlist,