From c4c667864c6a3170347b42bdc335c81c549967e9 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Thu, 7 Jul 2022 13:56:58 +0200
Subject: [PATCH] chore: release 1.0.0-rc.10

---
 components/AppHeader.vue                      |  22 +-
 components/BottomNavigation.vue               |  25 +-
 components/CartSidebar.vue                    |  30 +-
 components/Checkout/UserBillingAddresses.vue  | 111 ------
 .../CurrencySelector/CurrenciesModal.vue      |   7 +-
 .../__tests__/CurrencySelector.spec.ts        |  80 ++++
 .../__tests__/currencyData.mock.ts            |  31 ++
 .../HeaderNavigationSubcategories.vue         |   2 +-
 components/Header/SearchBar/SearchBar.vue     |  22 +-
 components/Header/SearchBar/SearchResults.vue |   3 +-
 components/MobileStoreBanner.vue              |  37 +-
 components/SkeletonLoader/index.vue           |   8 +-
 components/StoreSwitcher/StoresModal.vue      |   4 +-
 .../__tests__/StoresModal.spec.ts             |  81 ++++
 .../__tests__/availableStores.mock.ts         | 136 +++++++
 .../TopBar/checkStoresAndCurrency.gql.ts      |   4 +-
 components/UserAddressDetails.vue             |   7 +-
 components/__tests__/BottomNavigation.spec.ts | 157 ++++++++
 composables/useApi/index.ts                   |  11 +-
 composables/useConfig/index.ts                |   6 +-
 composables/useConfig/useConfig.ts            |   6 +
 .../useContent/commands/loadBlocksCommand.ts  |   2 +-
 .../useContent/commands/loadContentCommand.ts |   2 +-
 composables/useCountrySearch/index.ts         |   2 +-
 .../useCurrency/__tests__/useCurrency.spec.ts |  66 ++++
 .../commands/updateSubscriptionCommand.ts     |   2 +-
 .../useReview/commands/addReviewCommand.ts    |   2 +-
 .../commands/loadCustomerReviewsCommand.ts    |   2 +-
 .../commands/loadReviewMetadataCommand.ts     |   5 +-
 .../commands/searchReviewsCommand.ts          |   2 +-
 composables/useReview/index.ts                |   5 +-
 composables/useReview/useReview.ts            |   2 +-
 composables/useUiHelpers/index.ts             |   1 +
 composables/useUrlResolver/index.ts           |   6 +-
 helpers/cart/addToCart.ts                     |   1 +
 helpers/checkout/address.ts                   |  23 +-
 helpers/integrationPlugin/_proxyUtils.ts      |   2 +-
 jest-setup.js                                 |   5 +-
 jest.config.js                                |   2 +-
 lang/de.js                                    |  14 +-
 lang/en.js                                    |  12 +-
 middleware/is-authenticated.ts                |   3 +-
 .../components/cms/categoryContent.gql.ts     |   4 +-
 .../components/filters/CategoryFilters.scss   |   4 +-
 .../components/filters/CategoryFilters.vue    |   6 -
 .../command/getProductFilterByCategory.gql.ts |   4 +-
 .../filters/renderer/CheckboxType.vue         |  59 +--
 .../components/filters/renderer/RadioType.vue |  63 +--
 .../filters/renderer/SwatchColorType.vue      |  29 +-
 .../components/filters/renderer/YesNoType.vue |   9 +-
 .../components/navbar/CategoryNavbar.vue      |   8 +-
 .../MobileCategorySidebar.vue                 |   4 +-
 .../__tests__/MobileCategorySidebar.spec.ts   |  20 +-
 .../components/views/CategoryProductGrid.vue  |  32 +-
 .../components/views/CategoryProductList.vue  |  20 +
 .../components/views/CategoryProductPrice.vue |   4 +-
 .../views/useProductsWithCommonCardProps.ts   |   4 +-
 .../category/composables/useCategory/index.ts |   2 +-
 .../composables/useCategory/useCategory.ts    |   4 +-
 .../composables/useCategorySearch/index.ts    |   9 +-
 .../composables/useFacet/getFacetData.gql.ts  |   4 +-
 .../category/composables/useFacet/index.ts    |   3 +-
 .../stores/graphql/categoryList.gql.ts        |   6 +-
 modules/catalog/pages/category.vue            |  37 +-
 modules/catalog/pages/product.vue             |  25 +-
 .../pricing/getGroupedProductPriceCommand.ts  |   4 +-
 modules/catalog/pricing/getPricesQuery.gql.ts |   4 +-
 .../components/ProductAddReviewForm.vue       |  16 +-
 .../product-types/bundle/BundleProduct.vue    |  36 +-
 .../bundle/BundleProductOptionSkeleton.vue    |  35 ++
 .../bundle/BundleProductSelector.vue          |  12 +-
 .../configurable/ConfigurableProduct.vue      |  19 +-
 .../grouped/GroupedProductSelector.vue        |  19 +-
 .../product-types/simple/SimpleProduct.vue    |  14 +-
 .../components/product-types/styles.scss      |   4 +
 .../composables/useRelatedProducts/index.ts   |   2 +-
 .../composables/useUpsellProducts/index.ts    |   2 +-
 .../queries/getProductPriceBySku.gql.ts       | 155 ++++++++
 .../checkout/components}/CartPreview.vue      |   2 +-
 .../components/UserBillingAddresses.vue       |  93 +++++
 .../components}/UserShippingAddresses.vue     |  78 ++--
 .../components}/VsfPaymentProvider.vue        |   0
 .../components}/VsfShippingProvider.vue       |   0
 .../components/styles/userAddresses.scss      |  27 ++
 .../commands/saveBillingAddressCommand.ts     |   3 +-
 .../checkout/composables/useBilling/index.ts  |   4 +-
 .../composables/useBilling/useBilling.ts      |   4 +-
 .../useCart/commands/addItemCommand.ts        | 101 ++---
 .../useCart/commands/clearCartCommand.ts      |   7 -
 .../useCart/commands/loadTotalQtyCommand.ts   |   5 +-
 .../useCart/commands/removeItemCommand.ts     |   5 +-
 modules/checkout/composables/useCart/index.ts |  20 +-
 .../checkout/composables/useCart/useCart.ts   |   1 +
 .../getCustomerShippingMethodsCommand.ts      |   7 +-
 .../getGuestShippingMethodsCommand.ts         |   2 +-
 .../useGetShippingMethods/index.ts            |   2 +-
 .../commands/placeOrderCommand.ts             |   5 +-
 .../composables/useMakeOrder/index.ts         |   5 +-
 .../composables/useMakeOrder/useMakeOrder.ts  |   3 +-
 .../getAvailablePaymentMethodsCommand.ts      |   6 +-
 .../commands/setPaymentMethodOnCartCommand.ts |   2 +-
 .../composables/usePaymentProvider/index.ts   |   6 +-
 .../usePaymentProvider/usePaymentProvider.ts  |   7 +-
 .../setShippingMethodsOnCartCommand.ts        |   6 +-
 .../composables/useShippingProvider/index.ts  |   4 +-
 modules/checkout/getters/cartGetters.ts       |   2 +-
 modules/checkout/pages/Checkout.vue           |   2 +-
 modules/checkout/pages/Checkout/Billing.vue   | 180 ++++-----
 modules/checkout/pages/Checkout/Payment.vue   |  13 +-
 modules/checkout/pages/Checkout/Shipping.vue  | 155 ++++----
 .../checkout/pages/Checkout/UserAccount.vue   |  32 +-
 .../components/LoginModal/LoginModal.vue      |  12 +-
 .../LoginModal/__tests__/LoginModal.spec.ts   |  38 --
 .../composables/useAddresses/index.ts         |  11 +-
 .../composables/useAddresses/useAddresses.ts  |   3 +-
 .../composables/useForgotPassword/index.ts    |   4 +-
 .../commands/attachToCartCommand.ts           |   6 +-
 modules/customer/composables/useUser/index.ts | 102 +++--
 .../commands/createCustomerAddressCommand.ts  |   6 +-
 .../commands/deleteCustomerAddressCommand.ts  |   6 +-
 .../commands/updateCustomerAddressCommand.ts  |   6 +-
 .../composables/useUserAddress/index.ts       |  13 +-
 .../useUserAddress/useUserAddress.ts          |   3 +-
 .../composables/useUserOrder/index.ts         |   2 +-
 .../customer/getters/userAddressesGetters.ts  |   6 +-
 .../customer/getters/userBillingGetters.ts    |   2 +
 .../AddressesDetails/AddressForm.vue          |  17 +-
 .../AddressesDetails/AddressesDetails.vue     |  30 +-
 .../MyAccount/MyProfile/ProfileUpdateForm.vue |   4 +-
 .../customer/pages/MyAccount/MyWishlist.vue   |  77 ++--
 .../MyAccount/OrderHistory/OrderHistory.vue   |  13 +-
 .../OrderHistory/SingleOrder/SingleOrder.vue  |  18 +-
 .../pages/MyAccount/useSidebarLinkGroups.ts   |   3 +-
 .../wishlist/components/WishlistSidebar.vue   |  31 +-
 nuxt.config.js                                |   7 +-
 package.json                                  |  15 +-
 plugins/__tests__/i18n.spec.js                |   3 +
 plugins/dompurify.ts                          |   4 +-
 plugins/i18n.ts                               |  38 +-
 plugins/query/StoreConfig.gql.ts              |   4 +-
 plugins/token-expired.ts                      |   2 +-
 test-utils/mocks/categoryTreeDataMock.ts      |   1 +
 test-utils/mocks/useCurrency.ts               |  11 +
 test-utils/mocks/useStore.ts                  |  11 +
 test-utils/mocks/useUiState.ts                |   6 +-
 tests/load/README.md                          |  45 +++
 tests/load/searchProduct.js                   | 370 ++++++++++++++++++
 yarn.lock                                     |  45 +--
 148 files changed, 2413 insertions(+), 984 deletions(-)
 delete mode 100644 components/Checkout/UserBillingAddresses.vue
 create mode 100644 components/CurrencySelector/__tests__/CurrencySelector.spec.ts
 create mode 100644 components/CurrencySelector/__tests__/currencyData.mock.ts
 create mode 100644 components/StoreSwitcher/__tests__/StoresModal.spec.ts
 create mode 100644 components/StoreSwitcher/__tests__/availableStores.mock.ts
 create mode 100644 components/__tests__/BottomNavigation.spec.ts
 create mode 100644 composables/useCurrency/__tests__/useCurrency.spec.ts
 create mode 100644 modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue
 create mode 100644 modules/catalog/product/queries/getProductPriceBySku.gql.ts
 rename {components/Checkout => modules/checkout/components}/CartPreview.vue (98%)
 create mode 100644 modules/checkout/components/UserBillingAddresses.vue
 rename {components/Checkout => modules/checkout/components}/UserShippingAddresses.vue (53%)
 rename {components/Checkout => modules/checkout/components}/VsfPaymentProvider.vue (100%)
 rename {components/Checkout => modules/checkout/components}/VsfShippingProvider.vue (100%)
 create mode 100644 modules/checkout/components/styles/userAddresses.scss
 delete mode 100644 modules/checkout/composables/useCart/commands/clearCartCommand.ts
 create mode 100644 test-utils/mocks/useCurrency.ts
 create mode 100644 test-utils/mocks/useStore.ts
 create mode 100644 tests/load/README.md
 create mode 100644 tests/load/searchProduct.js

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 046bec6..ce5ac04 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -12,8 +12,14 @@
       </template>
       <template #aside>
         <div class="sf-header__switchers">
-          <CurrencySelector class="smartphone-only" />
-          <StoreSwitcher class="smartphone-only" />
+          <CurrencySelector
+            v-if="hasCurrencyToSelect"
+            class="smartphone-only"
+          />
+          <StoreSwitcher
+            v-if="hasStoresToSelect"
+            class="smartphone-only"
+          />
         </div>
       </template>
       <template #header-icons="{ activeIcon }">
@@ -96,6 +102,7 @@
       v-if="isSearchOpen"
       :visible="isSearchOpen"
       :search-results="productSearchResults"
+      @close="isSearchOpen = false"
     />
     <SfOverlay :visible="isSearchOpen" />
   </div>
@@ -126,22 +133,21 @@ import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
 import type { CategoryTree, ProductInterface } from '~/modules/GraphQL/types';
-import CurrencySelector from '~/components/CurrencySelector.vue';
 import HeaderLogo from '~/components/HeaderLogo.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
-import StoreSwitcher from '~/components/StoreSwitcher.vue';
+import { useTopBar } from './TopBar/useTopBar';
 
 export default defineComponent({
   components: {
     HeaderNavigation,
     SfHeader,
     SfOverlay,
-    CurrencySelector,
     HeaderLogo,
-    StoreSwitcher,
     SvgImage,
     SfButton,
     SfBadge,
+    CurrencySelector: () => import('~/components/CurrencySelector.vue'),
+    StoreSwitcher: () => import('~/components/StoreSwitcher.vue'),
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
     SearchResults: () => import(
       /* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'
@@ -157,6 +163,8 @@ export default defineComponent({
     const { loadItemsCount: loadWishlistItemsCount } = useWishlist();
     const { categories: categoryList, load: categoriesListLoad } = useCategory();
 
+    const { hasCurrencyToSelect, hasStoresToSelect } = useTopBar();
+
     const isSearchOpen = ref(false);
     const productSearchResults = ref<ProductInterface[] | null>(null);
 
@@ -204,6 +212,8 @@ export default defineComponent({
       toggleWishlistSidebar,
       wishlistHasProducts,
       wishlistItemsQty,
+      hasCurrencyToSelect,
+      hasStoresToSelect,
     };
   },
 });
diff --git a/components/BottomNavigation.vue b/components/BottomNavigation.vue
index 2c389fd..3222264 100644
--- a/components/BottomNavigation.vue
+++ b/components/BottomNavigation.vue
@@ -4,7 +4,8 @@
       <SfBottomNavigationItem
         :class="{ 'sf-bottom-navigation__item--active': $route.name && $route.name.startsWith('home') }"
         label="Home"
-        @click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
+        data-testid="bottom-navigation-home"
+        @click="handleHomeClick"
       >
         <template #icon>
           <SvgImage
@@ -17,6 +18,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Menu"
+        data-testid="bottom-navigation-menu"
         @click="loadCategoryMenu"
       >
         <template #icon>
@@ -31,6 +33,7 @@
       <SfBottomNavigationItem
         v-if="isAuthenticated"
         label="Wishlist"
+        data-testid="bottom-navigation-wishlist"
         @click="toggleWishlistSidebar"
       >
         <template #icon>
@@ -44,6 +47,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Account"
+        data-testid="bottom-navigation-account"
         @click="handleAccountClick"
       >
         <template #icon>
@@ -56,11 +60,12 @@
         </template>
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
-        :label="$route.name && $route.name.startsWith('product') ? 'Add to Cart' : 'Basket'"
+        :label="$t('Cart')"
+        data-testid="bottom-navigation-cart"
         @click="toggleCartSidebar"
       >
         <template #icon>
-          <SfCircleIcon aria-label="Add to cart">
+          <SfCircleIcon aria-label="Go to cart">
             <SvgImage
               icon="add_to_cart"
               width="25"
@@ -78,7 +83,7 @@
 <script lang="ts">
 import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
-import { useUiState } from '~/composables';
+import { useUiState } from '~/composables/useUiState';
 import { useUser } from '~/modules/customer/composables/useUser';
 import SvgImage from '~/components/General/SvgImage.vue';
 import { useCategoryStore } from '~/modules/catalog/category/stores/category';
@@ -86,6 +91,7 @@ import { useCategoryStore } from '~/modules/catalog/category/stores/category';
 const MobileCategorySidebar = () => import('~/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue');
 
 export default defineComponent({
+  name: 'BottomNavigation',
   components: {
     SfBottomNavigation,
     SfCircleIcon,
@@ -103,6 +109,15 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const router = useRouter();
     const { app } = useContext();
+
+    const handleHomeClick = async () => {
+      const homePath = app.localeRoute({ name: 'home' });
+      await router.push(homePath);
+      if (isMobileMenuOpen.value) {
+        toggleMobileMenu();
+      }
+    };
+
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         await router.push(app.localeRoute({ name: 'customer' }));
@@ -127,7 +142,7 @@ export default defineComponent({
       toggleMobileMenu,
       loadCategoryMenu,
       handleAccountClick,
-      app,
+      handleHomeClick,
     };
   },
 });
diff --git a/components/CartSidebar.vue b/components/CartSidebar.vue
index d8d333b..1c9e0ea 100644
--- a/components/CartSidebar.vue
+++ b/components/CartSidebar.vue
@@ -92,6 +92,7 @@
                 <SfCollectedProduct
                   v-for="product in products"
                   :key="product.product.original_sku"
+                  :has-more-actions="false"
                   data-testid="cart-sidebar-collected-product"
                   :image="cartGetters.getItemImage(product)"
                   :title="cartGetters.getItemName(product)"
@@ -293,7 +294,7 @@ import {
   useContext,
   onMounted,
 } from '@nuxtjs/composition-api';
-import _debounce from 'lodash.debounce';
+import { debounce } from 'lodash-es';
 import { cartGetters } from '~/getters';
 import {
   useUiState,
@@ -396,7 +397,7 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-    const delayedUpdateItemQty = _debounce(
+    const delayedUpdateItemQty = debounce(
       (params) => updateItemQty(params),
       1000,
     );
@@ -548,31 +549,12 @@ export default defineComponent({
     }
   }
 
-  &__actions {
-    transition: opacity 150ms ease-in-out;
-  }
-
-  &__save,
-  &__compare {
-    --button-padding: 0;
-
-    &:focus {
-      --cp-save-opacity: 1;
-      --cp-compare-opacity: 1;
-    }
-  }
-
-  &__save {
-    opacity: var(--cp-save-opacity, 0);
-  }
-
-  &__compare {
-    opacity: var(--cp-compare-opacity, 0);
+  ::v-deep .sf-collected-product__actions {
+    display: none;
   }
 
   &:hover {
-    --cp-save-opacity: 1;
-    --cp-compare-opacity: 1;
+    --collected-product-configuration-display: initial;
     @include for-desktop {
       .collected-product__properties {
         display: none;
diff --git a/components/Checkout/UserBillingAddresses.vue b/components/Checkout/UserBillingAddresses.vue
deleted file mode 100644
index 8321b87..0000000
--- a/components/Checkout/UserBillingAddresses.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <SfAddressPicker
-      :selected="`${selectedAddress}`"
-      class="billing__addresses"
-      @change="setCurrentAddress($event)"
-    >
-      <SfAddress
-        v-for="billingAddress in billingAddresses"
-        :key="userBillingGetters.getId(billingAddress)"
-        :name="`${userBillingGetters.getId(billingAddress)}`"
-        class="billing__address"
-      >
-        <UserAddressDetails :address="billingAddress" />
-      </SfAddress>
-    </SfAddressPicker>
-    <SfCheckbox
-      :selected="value"
-      name="setAsDefault"
-      label="Use this address as my default one."
-      class="billing__setAsDefault"
-      @change="$emit('input', $event)"
-    />
-    <hr class="sf-divider">
-  </div>
-</template>
-
-<script lang="ts">
-import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
-import { computed, defineComponent } from '@nuxtjs/composition-api';
-import type { PropType } from '@nuxtjs/composition-api';
-import userBillingGetters from '~/modules/customer/getters/userBillingGetters';
-import UserAddressDetails from '~/components/UserAddressDetails.vue';
-import { CustomerAddress } from '~/composables';
-
-export default defineComponent({
-  name: 'UserBillingAddresses',
-  components: {
-    SfCheckbox,
-    SfAddressPicker,
-    UserAddressDetails,
-  },
-  props: {
-    currentAddressId: {
-      type: [String, Number],
-      required: true,
-    },
-    value: {
-      type: Boolean,
-      required: true,
-    },
-    billingAddresses: {
-      type: Array as PropType<CustomerAddress[]>,
-      required: true,
-    },
-  },
-  emits: ['setCurrentAddress'],
-  setup(props, { emit }) {
-    const setCurrentAddress = (addressId: string) => {
-      const selectedAddress = props.billingAddresses.find((address) => address.id === Number(addressId));
-      if (!selectedAddress) {
-        return;
-      }
-
-      emit('setCurrentAddress', selectedAddress);
-    };
-
-    const selectedAddress = computed(() => (
-      props.currentAddressId
-        ? props.currentAddressId
-        : props.billingAddresses.find((address) => address.default_billing)?.id ?? ''
-    ));
-
-    return {
-      selectedAddress,
-      setCurrentAddress,
-      userBillingGetters,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.billing {
-  &__address {
-    margin-bottom: var(--spacer-base);
-    @include for-desktop {
-      margin-right: var(--spacer-sm);
-      display: flex;
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-
-  &__addresses {
-    margin-bottom: var(--spacer-xl);
-    @include for-desktop {
-      display: flex;
-    }
-  }
-
-  &__setAsDefault {
-    margin-bottom: var(--spacer-xl);
-  }
-}
-
-.sf-divider,
-.form__action-button--margin-bottom {
-  margin-bottom: var(--spacer-xl);
-}
-</style>
diff --git a/components/CurrencySelector/CurrenciesModal.vue b/components/CurrencySelector/CurrenciesModal.vue
index 8f2ba80..5df7fdc 100644
--- a/components/CurrencySelector/CurrenciesModal.vue
+++ b/components/CurrencySelector/CurrenciesModal.vue
@@ -48,7 +48,10 @@ export default defineComponent({
   },
   props: {
     isModalOpen: Boolean,
-    selectedCurrency: String,
+    selectedCurrency: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['closeModal'],
   setup() {
@@ -58,7 +61,7 @@ export default defineComponent({
       load: loadCurrencies,
     } = useCurrency();
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
+    const availableCurrencies = computed<string[]>(() => currencies.value?.available_currency_codes || []);
 
     onMounted(() => {
       if (currencies.value && currencies.value?.available_currency_codes) return;
diff --git a/components/CurrencySelector/__tests__/CurrencySelector.spec.ts b/components/CurrencySelector/__tests__/CurrencySelector.spec.ts
new file mode 100644
index 0000000..72484a9
--- /dev/null
+++ b/components/CurrencySelector/__tests__/CurrencySelector.spec.ts
@@ -0,0 +1,80 @@
+import userEvent from '@testing-library/user-event';
+import { render } from '~/test-utils';
+import CurrenciesModal from '~/components/CurrencySelector/CurrenciesModal.vue';
+import { useCurrencyMock } from '~/test-utils/mocks/useCurrency';
+import { useCurrency } from '~/composables';
+import { currencyDataMock } from '~/components/CurrencySelector/__tests__/currencyData.mock';
+
+jest.mock('~/composables', () => {
+  const originalModule = jest.requireActual('~/composables');
+  return {
+    ...originalModule,
+    useCurrency: jest.fn(),
+  };
+});
+
+describe('<CurrenciesModal>', () => {
+  it('does not render when closed', () => {
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+    const { queryByRole } = render(CurrenciesModal, {
+      props: {
+        isModalOpen: false,
+      },
+    });
+
+    expect(queryByRole('heading', { name: /change store/i })).toBeNull();
+  });
+
+  it('emits "closeModal" event on close', async () => {
+    const user = userEvent.setup();
+
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+    const { getAllByRole, emitted } = render(CurrenciesModal, {
+      props: {
+        isModalOpen: true,
+      },
+    });
+
+    const closeBtn = getAllByRole('button', { name: /close/i })[0];
+
+    await user.click(closeBtn);
+
+    expect(emitted()).toHaveProperty('closeModal');
+  });
+
+  it('renders list of available stores', () => {
+    useCurrencyMock.currency.value = currencyDataMock;
+
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+
+    const { getByRole, getByText } = render(CurrenciesModal, {
+      props: {
+        isModalOpen: true,
+      },
+    });
+
+    expect(getByRole('heading', { name: /choose currency/i })).toBeTruthy();
+    expect(getByText(/eur/i)).toBeTruthy();
+    expect(getByText(/pln/i)).toBeTruthy();
+    expect(getByText(/usd/i)).toBeTruthy();
+  });
+
+  it('on currency selection executes method that must trigger currency switch', async () => {
+    const user = userEvent.setup();
+    useCurrencyMock.currency.value = currencyDataMock;
+
+    (useCurrency as jest.Mock).mockReturnValue(useCurrencyMock);
+
+    const { getByText } = render(CurrenciesModal, {
+      props: {
+        isLangModalOpen: true,
+        storeConfig: { store_code: 'default' },
+      },
+    });
+
+    const eurSwitchBtn = getByText(/eur/i);
+    await user.click(eurSwitchBtn);
+
+    expect(useCurrencyMock.change).toBeCalledWith({ id: 'EUR' });
+  });
+});
diff --git a/components/CurrencySelector/__tests__/currencyData.mock.ts b/components/CurrencySelector/__tests__/currencyData.mock.ts
new file mode 100644
index 0000000..dfe0305
--- /dev/null
+++ b/components/CurrencySelector/__tests__/currencyData.mock.ts
@@ -0,0 +1,31 @@
+export const currencyDataMock = {
+  __typename: 'Currency',
+  available_currency_codes: [
+    'EUR',
+    'PLN',
+    'USD',
+  ],
+  base_currency_code: 'USD',
+  base_currency_symbol: '$',
+  default_display_currecy_code: null,
+  default_display_currecy_symbol: null,
+  default_display_currency_code: 'USD',
+  default_display_currency_symbol: '$',
+  exchange_rates: [
+    {
+      __typename: 'ExchangeRate',
+      currency_to: 'EUR',
+      rate: 0.93,
+    },
+    {
+      __typename: 'ExchangeRate',
+      currency_to: 'PLN',
+      rate: 4.29,
+    },
+    {
+      __typename: 'ExchangeRate',
+      currency_to: 'USD',
+      rate: 1,
+    },
+  ],
+};
diff --git a/components/Header/Navigation/HeaderNavigationSubcategories.vue b/components/Header/Navigation/HeaderNavigationSubcategories.vue
index 490f8ff..b83802c 100644
--- a/components/Header/Navigation/HeaderNavigationSubcategories.vue
+++ b/components/Header/Navigation/HeaderNavigationSubcategories.vue
@@ -181,7 +181,7 @@ export default defineComponent({
 .header-navigation {
   &__subcategories {
     position: absolute;
-    z-index: 10;
+    z-index: 1;
     background-color: #fff;
     box-shadow: 0 3px var(--c-primary);
     left: 0;
diff --git a/components/Header/SearchBar/SearchBar.vue b/components/Header/SearchBar/SearchBar.vue
index efb3b06..df2a5d3 100644
--- a/components/Header/SearchBar/SearchBar.vue
+++ b/components/Header/SearchBar/SearchBar.vue
@@ -5,8 +5,8 @@
     aria-label="Search"
     class="sf-header__search"
     :value="term"
-    @input="handleSearch"
-    @keydown.enter="handleSearch($event)"
+    @input="debouncedHandleSearch($event)"
+    @keyup.enter="handleKeydownEnter($event.target.value) /* https://github.com/vuestorefront/storefront-ui/issues/2453#issuecomment-1160231619 */"
     @keydown.tab="hideSearch"
     @focus="showSearch"
     @click="showSearch"
@@ -53,7 +53,7 @@ import { SfButton, SfSearchBar } from '@storefront-ui/vue';
 import {
   defineComponent, ref, watch, useRoute,
 } from '@nuxtjs/composition-api';
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash-es';
 import { clickOutside } from '~/utilities/directives/click-outside/click-outside-directive';
 import SvgImage from '~/components/General/SvgImage.vue';
 import { useProduct } from '~/modules/catalog/product/composables/useProduct';
@@ -130,7 +130,7 @@ export default defineComponent({
       }
     };
 
-    const handleSearch = debounce(async (searchTerm: string) => {
+    const rawHandleSearch = async (searchTerm: string) => {
       term.value = searchTerm;
       if (term.value.length < props.minTermLen) return;
 
@@ -141,7 +141,15 @@ export default defineComponent({
       }) as unknown as Products;
 
       emit('set-search-results', productList!.items);
-    }, 1000);
+    };
+
+    const debouncedHandleSearch = debounce(rawHandleSearch, 1000);
+
+    const handleKeydownEnter = (searchTerm: string) => {
+      // cancel debounce timeout started by typing into the searchbar - this is to avoid making two network requests instead of one
+      debouncedHandleSearch.cancel();
+      rawHandleSearch(searchTerm);
+    };
 
     watch(route, () => {
       hideSearch();
@@ -153,7 +161,9 @@ export default defineComponent({
       showSearch,
       hideSearch,
       toggleSearch,
-      handleSearch,
+      rawHandleSearch,
+      debouncedHandleSearch,
+      handleKeydownEnter,
       term,
     };
   },
diff --git a/components/Header/SearchBar/SearchResults.vue b/components/Header/SearchBar/SearchResults.vue
index c229458..4fe1794 100644
--- a/components/Header/SearchBar/SearchResults.vue
+++ b/components/Header/SearchBar/SearchResults.vue
@@ -202,6 +202,7 @@ export default defineComponent({
       flex-direction: row;
       flex: 1;
     }
+    width: 100%;
   }
   &__results {
     flex: 1;
@@ -226,7 +227,7 @@ export default defineComponent({
   &--mobile {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
+    justify-content: flex-start;
     background: var(--c-white);
     padding: var(--spacer-base) var(--spacer-sm);
     --product-card-max-width: 9rem;
diff --git a/components/MobileStoreBanner.vue b/components/MobileStoreBanner.vue
index c7175ff..da552a1 100644
--- a/components/MobileStoreBanner.vue
+++ b/components/MobileStoreBanner.vue
@@ -13,13 +13,15 @@
           data-testid="banner-cta-button"
           link="#"
         >
-          <SfImage
-            src="/homepage/apple.png"
-            loading="lazy"
-            alt="Apple"
-            :width="134"
-            :height="44"
-          />
+          <div class="app-store-image">
+            <SfImage
+              src="/homepage/apple.png"
+              loading="lazy"
+              alt="Apple"
+              :width="134"
+              :height="44"
+            />
+          </div>
         </SfLink>
         <SfLink
           class="app-banner__button sf-banner__call-to-action"
@@ -27,13 +29,15 @@
           data-testid="banner-cta-button"
           link="#"
         >
-          <SfImage
-            src="/homepage/google.png"
-            loading="lazy"
-            alt="Google"
-            :width="134"
-            :height="44"
-          />
+          <div class="app-store-image">
+            <SfImage
+              src="/homepage/google.png"
+              loading="lazy"
+              alt="Google"
+              :width="134"
+              :height="44"
+            />
+          </div>
         </SfLink>
       </div>
     </template>
@@ -92,4 +96,9 @@ export default defineComponent({
     }
   }
 }
+// override ".sf-banner img" style spill
+::v-deep .app-store-image img {
+  position: initial;
+  margin-top: var(--spacer-base);
+}
 </style>
diff --git a/components/SkeletonLoader/index.vue b/components/SkeletonLoader/index.vue
index 2c7357f..9992e22 100644
--- a/components/SkeletonLoader/index.vue
+++ b/components/SkeletonLoader/index.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api';
 
 type ComponentStyles = { width?: string, height?: string, borderRadius: string, margin: string };
 
@@ -26,9 +26,11 @@ export default defineComponent({
     },
     width: {
       type: String,
+      default: '',
     },
     height: {
       type: String,
+      default: '',
     },
     margin: {
       type: String,
@@ -50,10 +52,10 @@ export default defineComponent({
       props.animation ? `skeleton--${props.animation}` : null,
     ]);
 
-    const componentStyle = computed<ComponentStyles>(() => ({
+    const componentStyle = ref<ComponentStyles>({
       borderRadius: props.radius,
       margin: props.margin,
-    }));
+    });
 
     if (props.width) {
       componentStyle.value.width = props.width;
diff --git a/components/StoreSwitcher/StoresModal.vue b/components/StoreSwitcher/StoresModal.vue
index 1d15884..ae180aa 100644
--- a/components/StoreSwitcher/StoresModal.vue
+++ b/components/StoreSwitcher/StoresModal.vue
@@ -50,7 +50,7 @@ import {
   SfImage,
 } from '@storefront-ui/vue';
 import { StoreConfig } from '~/modules/GraphQL/types';
-import { useStore } from '~/composables';
+import { AvailableStores, useStore } from '~/composables';
 
 export default defineComponent({
   name: 'StoresModal',
@@ -75,7 +75,7 @@ export default defineComponent({
       load: loadStores,
     } = useStore();
 
-    const availableStores = computed(() => stores.value ?? []);
+    const availableStores = computed<AvailableStores>(() => stores.value ?? []);
 
     onMounted(() => {
       if (stores.value && stores.value?.length) return;
diff --git a/components/StoreSwitcher/__tests__/StoresModal.spec.ts b/components/StoreSwitcher/__tests__/StoresModal.spec.ts
new file mode 100644
index 0000000..2523eb1
--- /dev/null
+++ b/components/StoreSwitcher/__tests__/StoresModal.spec.ts
@@ -0,0 +1,81 @@
+import userEvent from '@testing-library/user-event';
+import { render } from '~/test-utils';
+import StoresModal from '~/components/StoreSwitcher/StoresModal.vue';
+import { useStoreMock } from '~/test-utils/mocks/useStore';
+import { useStore } from '~/composables';
+import { availableStoresMock } from '~/components/StoreSwitcher/__tests__/availableStores.mock';
+
+jest.mock('~/composables', () => {
+  const originalModule = jest.requireActual('~/composables');
+  return {
+    ...originalModule,
+    useStore: jest.fn(),
+  };
+});
+
+describe('<StoresModal>', () => {
+  it('does not render when closed', () => {
+    (useStore as jest.Mock).mockReturnValue(useStoreMock);
+    const { queryByRole } = render(StoresModal, {
+      props: {
+        isLangModalOpen: false,
+      },
+    });
+
+    expect(queryByRole('heading', { name: /change store/i })).toBeNull();
+  });
+
+  it('emits "closeModal" event on close', async () => {
+    const user = userEvent.setup();
+
+    (useStore as jest.Mock).mockReturnValue(useStoreMock);
+    const { getAllByRole, emitted } = render(StoresModal, {
+      props: {
+        isLangModalOpen: true,
+      },
+    });
+
+    const closeBtn = getAllByRole('button', { name: /close/i })[0];
+
+    await user.click(closeBtn);
+
+    expect(emitted()).toHaveProperty('closeModal');
+  });
+
+  it('renders list of available stores', () => {
+    useStoreMock.stores.value = availableStoresMock;
+
+    (useStore as jest.Mock).mockReturnValue(useStoreMock);
+
+    const { getByRole, getByText } = render(StoresModal, {
+      props: {
+        isLangModalOpen: true,
+        storeConfig: { store_code: 'default' },
+      },
+    });
+
+    getByRole('heading', { name: /change store/i });
+    getByText(/default store view/i);
+    getByText(/german/i);
+  });
+
+  it('on store selection executes method that should redirect to a desired store', async () => {
+    const user = userEvent.setup();
+    useStoreMock.stores.value = availableStoresMock;
+
+    (useStore as jest.Mock).mockReturnValue(useStoreMock);
+
+    const { getByText } = render(StoresModal, {
+      props: {
+        isLangModalOpen: true,
+        storeConfig: { store_code: 'default' },
+      },
+    });
+
+    const defaultStoreSwitchBtn = getByText(/default store view/i);
+
+    await user.click(defaultStoreSwitchBtn);
+
+    expect(useStoreMock.change).toBeCalledWith(availableStoresMock[0]);
+  });
+});
diff --git a/components/StoreSwitcher/__tests__/availableStores.mock.ts b/components/StoreSwitcher/__tests__/availableStores.mock.ts
new file mode 100644
index 0000000..8e12963
--- /dev/null
+++ b/components/StoreSwitcher/__tests__/availableStores.mock.ts
@@ -0,0 +1,136 @@
+export const availableStoresMock = [
+  {
+    __typename: 'StoreConfig',
+    absolute_footer: null,
+    allow_guests_to_write_product_reviews: '1',
+    allow_items: null,
+    allow_order: null,
+    autocomplete_on_storefront: false,
+    base_currency_code: 'USD',
+    base_link_url: 'https://magento2-instance.vuestorefront.io/',
+    base_media_url: 'https://magento2-instance.vuestorefront.io/media/',
+    base_static_url: 'https://magento2-instance.vuestorefront.io/static/version1654847492/',
+    base_url: 'https://magento2-instance.vuestorefront.io/',
+    catalog_default_sort_by: 'position',
+    category_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    category_url_suffix: '.html',
+    cms_home_page: 'home',
+    cms_no_cookies: 'enable-cookies',
+    cms_no_route: 'no-route',
+    code: 'default',
+    id: 1,
+    is_default_store: true,
+    is_default_store_group: true,
+    list_mode: 'grid-list',
+    list_per_page: 10,
+    list_per_page_values: '5,10,15,20,25',
+    locale: 'en_US',
+    logo_alt: null,
+    logo_height: null,
+    logo_width: null,
+    magento_wishlist_general_is_enabled: '1',
+    minimum_password_length: '8',
+    no_route: 'cms/noroute/index',
+    payment_payflowpro_cc_vault_active: null,
+    product_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    product_reviews_enabled: '1',
+    product_url_suffix: '.html',
+    required_character_classes_number: '3',
+    root_category_id: 2,
+    root_category_uid: 'Mg==',
+    sales_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    secure_base_link_url: 'https://magento2-instance.vuestorefront.io/',
+    secure_base_media_url: 'https://magento2-instance.vuestorefront.io/media/',
+    secure_base_static_url: 'https://magento2-instance.vuestorefront.io/static/version1654847492/',
+    secure_base_url: 'https://magento2-instance.vuestorefront.io/',
+    show_cms_breadcrumbs: 1,
+    store_code: 'default',
+    store_group_code: 'main_website_store',
+    store_group_name: 'Main Website Store',
+    store_name: 'Default Store View',
+    store_sort_order: 0,
+    timezone: 'America/Chicago',
+    title_prefix: null,
+    title_separator: '-',
+    title_suffix: null,
+    use_store_in_url: false,
+    website_code: 'base',
+    website_id: 1,
+    website_name: 'Main Website',
+    weight_unit: 'lbs',
+    welcome: 'Default welcome msg!',
+  },
+  {
+    __typename: 'StoreConfig',
+    absolute_footer: null,
+    allow_guests_to_write_product_reviews: '1',
+    allow_items: null,
+    allow_order: null,
+    autocomplete_on_storefront: false,
+    base_currency_code: 'USD',
+    base_link_url: 'https://magento2-instance.vuestorefront.io/',
+    base_media_url: 'https://magento2-instance.vuestorefront.io/media/',
+    base_static_url: 'https://magento2-instance.vuestorefront.io/static/version1654847492/',
+    base_url: 'https://magento2-instance.vuestorefront.io/',
+    catalog_default_sort_by: 'position',
+    category_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    category_url_suffix: '.html',
+    cms_home_page: 'home',
+    cms_no_cookies: 'enable-cookies',
+    cms_no_route: 'no-route',
+    code: 'german',
+    configurable_thumbnail_source: 'parent',
+    copyright: 'Copyright © 2013-present Magento, Inc. All rights reserved.',
+    default_description: null,
+    default_display_currency_code: 'USD',
+    default_keywords: null,
+    default_title: 'Magento Commerce',
+    front: 'cms',
+    grid_per_page: 12,
+    grid_per_page_values: '12,24,36',
+    head_includes: '<link  rel="stylesheet" type="text/css"  media="all" href="{{MEDIA_URL}}styles.css" />',
+    head_shortcut_icon: null,
+    header_logo_src: null,
+    id: 2,
+    is_default_store: false,
+    is_default_store_group: true,
+    list_mode: 'grid-list',
+    list_per_page: 10,
+    list_per_page_values: '5,10,15,20,25',
+    locale: 'de_DE',
+    logo_alt: null,
+    logo_height: null,
+    logo_width: null,
+    magento_wishlist_general_is_enabled: '1',
+    minimum_password_length: '8',
+    no_route: 'cms/noroute/index',
+    payment_payflowpro_cc_vault_active: null,
+    product_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    product_reviews_enabled: '1',
+    product_url_suffix: '.html',
+    required_character_classes_number: '3',
+    root_category_id: 2,
+    root_category_uid: 'Mg==',
+    sales_fixed_product_tax_display_setting: 'FPT_DISABLED',
+    secure_base_link_url: 'https://magento2-instance.vuestorefront.io/',
+    secure_base_media_url: 'https://magento2-instance.vuestorefront.io/media/',
+    secure_base_static_url: 'https://magento2-instance.vuestorefront.io/static/version1654847492/',
+    secure_base_url: 'https://magento2-instance.vuestorefront.io/',
+    show_cms_breadcrumbs: 1,
+    store_code: 'german',
+    store_group_code: 'main_website_store',
+    store_group_name: 'Main Website Store',
+    store_name: 'German',
+    store_sort_order: 0,
+    timezone: 'America/Chicago',
+    title_prefix: null,
+    title_separator: '-',
+    title_suffix: null,
+    use_store_in_url: false,
+    website_code: 'base',
+    website_id: 1,
+    website_name: 'Main Website',
+    weight_unit: 'lbs',
+    welcome: 'Default welcome msg!',
+  },
+];
diff --git a/components/TopBar/checkStoresAndCurrency.gql.ts b/components/TopBar/checkStoresAndCurrency.gql.ts
index 55536b4..5dbc99d 100644
--- a/components/TopBar/checkStoresAndCurrency.gql.ts
+++ b/components/TopBar/checkStoresAndCurrency.gql.ts
@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query getStoresAndCurrencies {
       availableStores {
         store_code
diff --git a/components/UserAddressDetails.vue b/components/UserAddressDetails.vue
index 1be1d10..1738653 100644
--- a/components/UserAddressDetails.vue
+++ b/components/UserAddressDetails.vue
@@ -10,7 +10,12 @@
       {{ userAddress.postalCode }}
     </p>
 
-    <p>{{ userAddress.country }}</p>
+    <p>
+      <slot name="country">
+        {{ userAddress.country }}
+      </slot>
+    </p>
+
     <p
       v-if="userAddress.phone"
       class="phone"
diff --git a/components/__tests__/BottomNavigation.spec.ts b/components/__tests__/BottomNavigation.spec.ts
new file mode 100644
index 0000000..f7460ea
--- /dev/null
+++ b/components/__tests__/BottomNavigation.spec.ts
@@ -0,0 +1,157 @@
+import { render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+
+import { createLocalVue } from '@vue/test-utils';
+import { PiniaVuePlugin } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { ref } from '@nuxtjs/composition-api';
+import { useUser } from '~/modules/customer/composables/useUser';
+import { useUiState } from '~/composables';
+import { useUiStateMock, useUserMock } from '~/test-utils';
+
+import { useCategoryStore } from '~/modules/catalog/category/stores/category';
+import BottomNavigation from '../BottomNavigation.vue';
+
+jest.mock('~/composables/useUiState', () => ({
+  useUiState: jest.fn(),
+}));
+
+jest.mock('~/modules/customer/composables/useUser', () => ({
+  useUser: jest.fn(),
+}));
+
+(useUser as jest.Mock).mockReturnValue(useUserMock());
+(useUiState as jest.Mock).mockReturnValue(useUiStateMock());
+
+const localVue = createLocalVue();
+localVue.use(PiniaVuePlugin);
+
+describe('BottomNavigation', () => {
+  it('handles "Home" button click', async () => {
+    const routerPushMock = jest.fn();
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $router: {
+            push: routerPushMock,
+          },
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const homeButton = getByTestId('bottom-navigation-home');
+    userEvent.click(homeButton);
+    await waitFor(() => {
+      expect(routerPushMock).toHaveBeenCalledWith({ name: 'home' });
+    });
+  });
+  it('handles "Menu" (categories) button click', async () => {
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const categoryStore = useCategoryStore();
+
+    const menuButton = getByTestId('bottom-navigation-menu');
+    userEvent.click(menuButton);
+    await waitFor(() => {
+      expect(categoryStore.load).toHaveBeenCalled();
+    });
+  });
+  it('handles "Wishlist" button click', async () => {
+    const useUiStateMockInstance = useUiStateMock();
+    (useUiState as jest.Mock).mockReturnValueOnce(useUiStateMockInstance);
+    const useUserMockInstance = useUserMock({ isAuthenticated: ref(true) });
+    (useUser as jest.Mock).mockReturnValueOnce(useUserMockInstance);
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const wishlistButton = getByTestId('bottom-navigation-wishlist');
+    userEvent.click(wishlistButton);
+    await waitFor(() => {
+      expect(useUiStateMockInstance.toggleWishlistSidebar).toHaveBeenCalled();
+    });
+  });
+  it('handles "Account" button click', async () => {
+    const useUiStateMockInstance = useUiStateMock();
+    (useUiState as jest.Mock).mockReturnValueOnce(useUiStateMockInstance);
+    const useUserMockInstance = useUserMock({ isAuthenticated: ref(true) });
+    (useUser as jest.Mock).mockReturnValueOnce(useUserMockInstance);
+
+    const routerPushMock = jest.fn();
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $router: {
+            push: routerPushMock,
+          },
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const accountButton = getByTestId('bottom-navigation-account');
+    userEvent.click(accountButton);
+    await waitFor(() => {
+      expect(routerPushMock).toHaveBeenCalledWith({ name: 'customer' });
+    });
+  });
+  it('handles "Cart" button click', async () => {
+    const useUiStateMockInstance = useUiStateMock();
+    (useUiState as jest.Mock).mockReturnValueOnce(useUiStateMockInstance);
+    const useUserMockInstance = useUserMock({ isAuthenticated: ref(true) });
+    (useUser as jest.Mock).mockReturnValueOnce(useUserMockInstance);
+
+    const { getByTestId } = render(
+      BottomNavigation,
+      {
+        mocks: {
+          $route: {
+            name: 'home',
+          },
+        },
+        localVue,
+        pinia: createTestingPinia(),
+      },
+    );
+
+    const cartButton = getByTestId('bottom-navigation-cart');
+    userEvent.click(cartButton);
+    await waitFor(() => {
+      expect(useUiStateMockInstance.toggleCartSidebar).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/composables/useApi/index.ts b/composables/useApi/index.ts
index e6782b0..9ad8878 100644
--- a/composables/useApi/index.ts
+++ b/composables/useApi/index.ts
@@ -1,5 +1,4 @@
 import { useContext } from '@nuxtjs/composition-api';
-import type { DocumentNode } from 'graphql';
 import { Logger } from '~/helpers/logger';
 
 export type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';
@@ -19,7 +18,7 @@ export type Error = {
 };
 
 export type Request = <DATA, VARIABLES extends Variables = Variables>(
-  request: DocumentNode,
+  request: string,
   variables?: VARIABLES,
   fetchPolicy?: FetchPolicy,
 ) => Promise<{ data: DATA, errors: Error[] }>;
@@ -75,10 +74,6 @@ export interface UseApiInterface {
   mutate: Request;
 }
 
-function getGqlString(doc: DocumentNode) {
-  return doc.loc && doc.loc.source.body;
-}
-
 /**
  * Allows executing arbitrary GraphQL queries and mutations.
  *
@@ -93,7 +88,7 @@ export function useApi(): UseApiInterface {
     variables,
   ) => {
     const reqID = `id${Math.random().toString(16).slice(2)}`;
-    Logger.debug(`customQuery/request/${reqID}`, getGqlString(request));
+    Logger.debug(`customQuery/request/${reqID}`, request);
     const { data, errors } = await context.app.$vsf.$magento.api.customQuery({ query: request, queryVariables: variables });
     Logger.debug(`customQuery/result/${reqID}`, { data, errors });
 
@@ -106,7 +101,7 @@ export function useApi(): UseApiInterface {
     variables,
   ) => {
     const reqID = `id${Math.random().toString(16).slice(2)}`;
-    Logger.debug(`customQuery/request/${reqID}`, getGqlString(request));
+    Logger.debug(`customQuery/request/${reqID}`, request);
     const { data, errors } = await context.app.$vsf.$magento.api.customMutation({ mutation: request, mutationVariables: variables });
     Logger.debug(`customQuery/result/${reqID}`, { data, errors });
 
diff --git a/composables/useConfig/index.ts b/composables/useConfig/index.ts
index 016eb29..57de813 100644
--- a/composables/useConfig/index.ts
+++ b/composables/useConfig/index.ts
@@ -3,7 +3,7 @@ import {
 } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
 import { useConfigStore } from '~/stores/config';
-import { UseConfigErrors, UseConfigInterface } from './useConfig';
+import type { UseConfigErrors, UseConfigInterface, UseConfigLoadParams } from './useConfig';
 
 /**
  * Allows interacting with the store configuration.
@@ -17,14 +17,14 @@ export function useConfig(): UseConfigInterface {
   const configStore = useConfigStore();
   const config = computed(() => configStore.storeConfig);
 
-  const load = async () => {
+  const load = async (params?: UseConfigLoadParams) => {
     error.value.load = null;
     loading.value = true;
 
     Logger.debug('useConfig/load');
 
     try {
-      const { data } = await app.$vsf.$magento.api.storeConfig();
+      const { data } = await app.$vsf.$magento.api.storeConfig(params?.customQuery ?? null);
       configStore.$patch((state) => {
         state.storeConfig = data.storeConfig || {};
       });
diff --git a/composables/useConfig/useConfig.ts b/composables/useConfig/useConfig.ts
index 2da4e3e..5e45d91 100644
--- a/composables/useConfig/useConfig.ts
+++ b/composables/useConfig/useConfig.ts
@@ -1,5 +1,6 @@
 import { ComputedRef, DeepReadonly, Ref } from '@nuxtjs/composition-api';
 import { StoreConfig } from '~/modules/GraphQL/types';
+import { ComposableFunctionArgs } from '~/composables';
 
 /**
  * Errors that occured in the {@link useConfig|useConfig()} composable
@@ -11,6 +12,11 @@ export interface UseConfigErrors {
   load: Error | null;
 }
 
+/**
+ * The params object accepted by the `load` method in the {@link useConfig|useConfig()} composable
+ */
+export type UseConfigLoadParams = ComposableFunctionArgs<{}>;
+
 /**
  * Data and methods returned from the {@link useConfig|useConfig()} composable
  */
diff --git a/composables/useContent/commands/loadBlocksCommand.ts b/composables/useContent/commands/loadBlocksCommand.ts
index 1cf4d96..a4f02af 100644
--- a/composables/useContent/commands/loadBlocksCommand.ts
+++ b/composables/useContent/commands/loadBlocksCommand.ts
@@ -5,7 +5,7 @@ export const loadBlocksCommand = {
   execute: async (context: VsfContext, params) => {
     Logger.debug('[Magento]: Load CMS Blocks content', { params });
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const { data } = await context.$magento.api.cmsBlocks(params.identifiers);
+    const { data } = await context.$magento.api.cmsBlocks(params.identifiers, params.customQuery ?? null);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/composables/useContent/commands/loadContentCommand.ts b/composables/useContent/commands/loadContentCommand.ts
index 789a8ae..f7bddcc 100644
--- a/composables/useContent/commands/loadContentCommand.ts
+++ b/composables/useContent/commands/loadContentCommand.ts
@@ -5,7 +5,7 @@ export const loadContentCommand = {
   execute: async (context: VsfContext, params) => {
     Logger.debug('[Magento]: Load CMS Page content', { params });
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const { data } = await context.$magento.api.cmsPage(params.identifier);
+    const { data } = await context.$magento.api.cmsPage(params.identifier, params.customQuery ?? null);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/composables/useCountrySearch/index.ts b/composables/useCountrySearch/index.ts
index ded37d3..b1c749c 100644
--- a/composables/useCountrySearch/index.ts
+++ b/composables/useCountrySearch/index.ts
@@ -25,7 +25,7 @@ export function useCountrySearch(): UseCountrySearchInterface {
 
       Logger.debug('[Magento]: Search country information based on', { params });
 
-      const { data } = await app.$vsf.$magento.api.country(params.id);
+      const { data } = await app.$vsf.$magento.api.country(params.id, params?.customQuery ?? null);
 
       Logger.debug('[Result]:', { data });
 
diff --git a/composables/useCurrency/__tests__/useCurrency.spec.ts b/composables/useCurrency/__tests__/useCurrency.spec.ts
new file mode 100644
index 0000000..709c470
--- /dev/null
+++ b/composables/useCurrency/__tests__/useCurrency.spec.ts
@@ -0,0 +1,66 @@
+import { defineComponent, onMounted, useContext } from '@nuxtjs/composition-api';
+import { createLocalVue } from '@vue/test-utils';
+import { PiniaVuePlugin, setActivePinia, createPinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { render } from '@testing-library/vue';
+import { useCurrency } from '../index';
+
+const localVue = createLocalVue();
+localVue.use(PiniaVuePlugin);
+const pinia = createTestingPinia();
+const appMock = {
+  app: {
+    $vsf: {
+      $magento: {
+        api: {
+          currency: jest.fn(),
+        },
+      },
+    },
+  },
+};
+
+jest.mock('@nuxtjs/composition-api', () => {
+  const actual = jest.requireActual('@nuxtjs/composition-api');
+  return {
+    ...actual,
+    useContext: jest.fn(),
+  };
+});
+
+describe('useCurrency', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const MockComponent = defineComponent({
+    name: 'MockComponent',
+    setup() {
+      const { load } = useCurrency();
+
+      onMounted(async () => {
+        await load({
+          customQuery: {
+            currency: 'custom-currency-query',
+          },
+        });
+      });
+    },
+    template: '<div>mock</div>',
+  });
+
+  it('the load method should receive custom query', () => {
+    // given
+    (useContext as jest.Mock).mockReturnValue(appMock);
+
+    // when
+    render(MockComponent, {
+      localVue,
+      pinia,
+    });
+
+    // then
+    expect(appMock.app.$vsf.$magento.api.currency)
+      .toHaveBeenCalledWith({ currency: 'custom-currency-query' });
+  });
+});
diff --git a/composables/useNewsletter/commands/updateSubscriptionCommand.ts b/composables/useNewsletter/commands/updateSubscriptionCommand.ts
index c76bbef..3c369fb 100644
--- a/composables/useNewsletter/commands/updateSubscriptionCommand.ts
+++ b/composables/useNewsletter/commands/updateSubscriptionCommand.ts
@@ -6,7 +6,7 @@ export const updateSubscriptionCommand = {
   execute: async (context: UseContextReturn, params: UseNewsletterUpdateSubscriptionParams): Promise<SubscriptionStatusesEnum | null> => {
     const { data } = await context.app.$vsf.$magento.api.subscribeEmailToNewsletter({
       email: params.email,
-    });
+    }, params?.customQuery ?? null);
 
     return data?.subscribeEmailToNewsletter?.status ?? null;
   },
diff --git a/composables/useReview/commands/addReviewCommand.ts b/composables/useReview/commands/addReviewCommand.ts
index c3dcf7d..f472f1f 100644
--- a/composables/useReview/commands/addReviewCommand.ts
+++ b/composables/useReview/commands/addReviewCommand.ts
@@ -12,7 +12,7 @@ export const addReviewCommand = {
       ...input
     } = params;
 
-    const { data } = await context.$magento.api.createProductReview(input);
+    const { data } = await context.$magento.api.createProductReview(input, params?.customQuery ?? null);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/composables/useReview/commands/loadCustomerReviewsCommand.ts b/composables/useReview/commands/loadCustomerReviewsCommand.ts
index 24e553c..143570b 100644
--- a/composables/useReview/commands/loadCustomerReviewsCommand.ts
+++ b/composables/useReview/commands/loadCustomerReviewsCommand.ts
@@ -11,7 +11,7 @@ export const loadCustomerReviewsCommand = {
   execute: async (context: VsfContext, params?: ComposableFunctionArgs<CustomerProductReviewParams>) => {
     Logger.debug('[Magento] load customer review based on:', { params });
 
-    const { data } = await context.$magento.api.customerProductReview(params);
+    const { data } = await context.$magento.api.customerProductReview(params, params?.customQuery ?? null);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/composables/useReview/commands/loadReviewMetadataCommand.ts b/composables/useReview/commands/loadReviewMetadataCommand.ts
index e47f74a..0ccb979 100644
--- a/composables/useReview/commands/loadReviewMetadataCommand.ts
+++ b/composables/useReview/commands/loadReviewMetadataCommand.ts
@@ -1,11 +1,12 @@
 import { Logger } from '~/helpers/logger';
 import { VsfContext } from '~/composables/context';
+import { ComposableFunctionArgs } from '~/composables';
 
 export const loadReviewMetadataCommand = {
-  execute: async (context: VsfContext) => {
+  execute: async (context: VsfContext, params?: ComposableFunctionArgs<{}>) => {
     Logger.debug('[Magento] load review metadata');
 
-    const { data } = await context.$magento.api.productReviewRatingsMetadata();
+    const { data } = await context.$magento.api.productReviewRatingsMetadata(params?.customQuery ?? null);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/composables/useReview/commands/searchReviewsCommand.ts b/composables/useReview/commands/searchReviewsCommand.ts
index c22526d..27eb84c 100644
--- a/composables/useReview/commands/searchReviewsCommand.ts
+++ b/composables/useReview/commands/searchReviewsCommand.ts
@@ -12,7 +12,7 @@ export const searchReviewsCommand = {
       ...input
     } = params;
 
-    const { data } = await context.$magento.api.productReview(input as GetProductSearchParams);
+    const { data } = await context.$magento.api.productReview(input as GetProductSearchParams, params?.customQuery ?? null);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/composables/useReview/index.ts b/composables/useReview/index.ts
index 95f4f59..b14e8b1 100644
--- a/composables/useReview/index.ts
+++ b/composables/useReview/index.ts
@@ -11,6 +11,7 @@ import type {
   UseReviewSearchParams,
   UseReviewAddReviewParams,
 } from './useReview';
+import { ComposableFunctionArgs } from '~/composables';
 
 /**
  * Allows loading and adding product reviews.
@@ -59,13 +60,13 @@ export function useReview(): UseReviewInterface {
     }
   };
 
-  const loadReviewMetadata = async () => {
+  const loadReviewMetadata = async (params?: ComposableFunctionArgs<{}>) => {
     Logger.debug('useReview/loadReviewMetadata');
 
     try {
       loading.value = true;
       error.value.loadReviewMetadata = null;
-      return await loadReviewMetadataCommand.execute(context);
+      return await loadReviewMetadataCommand.execute(context, params);
     } catch (err) {
       error.value.loadReviewMetadata = err;
       Logger.error('useReview/loadReviewMetadata', err);
diff --git a/composables/useReview/useReview.ts b/composables/useReview/useReview.ts
index b1b5222..bf261bf 100644
--- a/composables/useReview/useReview.ts
+++ b/composables/useReview/useReview.ts
@@ -76,7 +76,7 @@ export interface UseReviewInterface {
    * Internally, it calls the {@link @vue-storefront/magento-api#productReviewRatingsMetadata} API endpoint
    * and accepts the custom queries named `productReviewRatingsMetadata`.
    */
-  loadReviewMetadata(): Promise<ProductReviewRatingsMetadataQuery['productReviewRatingsMetadata']['items'] | []>;
+  loadReviewMetadata(params?: ComposableFunctionArgs<{}>): Promise<ProductReviewRatingsMetadataQuery['productReviewRatingsMetadata']['items'] | []>;
 
   /**
    * Submits a new product review
diff --git a/composables/useUiHelpers/index.ts b/composables/useUiHelpers/index.ts
index e810e38..79712d5 100644
--- a/composables/useUiHelpers/index.ts
+++ b/composables/useUiHelpers/index.ts
@@ -137,6 +137,7 @@ export function useUiHelpers(): UseUiHelpersInterface {
     const query = {
       ...getFiltersDataFromUrl(false),
       itemsPerPage: itemsPerPage.toString(10),
+      page: '0',
     };
 
     if (forcePush) {
diff --git a/composables/useUrlResolver/index.ts b/composables/useUrlResolver/index.ts
index 8ceac84..18b316a 100644
--- a/composables/useUrlResolver/index.ts
+++ b/composables/useUrlResolver/index.ts
@@ -6,7 +6,7 @@ import {
 } from '@nuxtjs/composition-api';
 import { RoutableInterface } from '~/modules/GraphQL/types';
 import { Logger } from '~/helpers/logger';
-import type { UseUrlResolverErrors, UseUrlResolverInterface } from '~/composables';
+import type { ComposableFunctionArgs, UseUrlResolverErrors, UseUrlResolverInterface } from '~/composables';
 
 /**
  * Allows searching the resolver for current
@@ -24,14 +24,14 @@ export function useUrlResolver(): UseUrlResolverInterface {
     search: null,
   });
 
-  const search = async (): Promise<RoutableInterface | null> => {
+  const search = async (params?: ComposableFunctionArgs<{}>): Promise<RoutableInterface | null> => {
     loading.value = true;
     let results: RoutableInterface | null = null;
 
     try {
       const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '');
       Logger.debug('[Magento] Find information based on URL', { clearUrl });
-      const { data } = await context.$magento.api.route(clearUrl);
+      const { data } = await context.$magento.api.route(clearUrl, params?.customQuery ?? null);
       results = data?.route ?? null;
 
       if (!results) nuxtError({ statusCode: 404 });
diff --git a/helpers/cart/addToCart.ts b/helpers/cart/addToCart.ts
index deb8efa..aec08e0 100644
--- a/helpers/cart/addToCart.ts
+++ b/helpers/cart/addToCart.ts
@@ -25,6 +25,7 @@ export const useAddToCart = () => {
         break;
       case 'BundleProduct':
       case 'ConfigurableProduct':
+      case 'GroupedProduct':
         const sku = productGetters.getProductSku(product);
         const slug = productGetters.getSlug(product).replace(/^\//, ''); // remove leading slash from getSlug
 
diff --git a/helpers/checkout/address.ts b/helpers/checkout/address.ts
index 4e77e79..82e4856 100644
--- a/helpers/checkout/address.ts
+++ b/helpers/checkout/address.ts
@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash-es';
 import type { CustomerAddress, CartAddressInterface } from '~/modules/GraphQL/types';
 
 export const formatAddressReturnToData = (address: CartAddressInterface) => ({
@@ -25,7 +26,7 @@ export const addressFromApiToForm = (address: CustomerAddress | CartAddressInter
   apartment: address.street?.[1],
   city: address.city,
   region: (address as CustomerAddress)?.region?.region_code ?? (address as CartAddressInterface).region.code,
-  country_code: (address as CustomerAddress)?.country_code ?? (address as CartAddressInterface).region.code,
+  country_code: (address as CustomerAddress)?.country_code ?? (address as CartAddressInterface).country.code,
   postcode: address.postcode,
   telephone: address.telephone,
 });
@@ -53,3 +54,23 @@ export const getInitialCheckoutAddressForm = () : CheckoutAddressForm => ({
   postcode: '',
   telephone: '',
 });
+
+/**
+ * Try to find an address from the user's saved addresses that exactly matches the address that is bound to a cart.
+ *
+ * `useShipping().save()``sends an addressId to Magento to set the shipping address on the cart,
+ * but when you download the cart after that - the cart's endpoint response doesn't contain that addressId, just the address fields (street etc.)
+ * So the only choice left is to try to compare the fields of the addresses.
+ *
+ * This function exists because if a user returns to a cart whose shipping address was set before, we want the user address to be highlighted in the SfAddressPicker component.
+ *
+ * @param customerAddresses The addresses saved in a user's account
+ * @param cartAddress The address that is bound to the cart, @see Cart["billing_address"] Cart["shipping_addresses"]
+ *
+ */
+export const findUserAddressIdenticalToSavedCartAddress = (
+  customerAddresses: CustomerAddress[] | null,
+  cartAddress: CartAddressInterface,
+) : CustomerAddress => customerAddresses?.find(
+  (userAddress) => isEqual(addressFromApiToForm(userAddress), addressFromApiToForm(cartAddress)),
+) ?? null;
diff --git a/helpers/integrationPlugin/_proxyUtils.ts b/helpers/integrationPlugin/_proxyUtils.ts
index c33fcac..7e147b4 100644
--- a/helpers/integrationPlugin/_proxyUtils.ts
+++ b/helpers/integrationPlugin/_proxyUtils.ts
@@ -1,6 +1,6 @@
 import { IncomingMessage } from 'node:http';
 import { Context as NuxtContext } from '@nuxt/types';
-import merge from 'lodash.merge';
+import { merge } from 'lodash-es';
 
 export type ApiClientMethod = (...args: any) => Promise<any>;
 
diff --git a/jest-setup.js b/jest-setup.js
index 4a8e877..b30310b 100644
--- a/jest-setup.js
+++ b/jest-setup.js
@@ -9,6 +9,7 @@ config.mocks = {
   $t: (text) => text,
   $fc: (text) => text,
   localePath: (text) => text,
+  localeRouter: (route) => route,
 };
 
 const $vsf = {
@@ -28,7 +29,7 @@ Vue.prototype.$nuxt = {
   context: {
     $vsf,
     $fc: jest.fn((label) => label),
-    localeRoute: jest.fn(() => 'some_url'),
+    localeRoute: jest.fn((route) => route),
     localePath: jest.fn((link) => link),
     app: {
       // $vsf intentionally doubled in context top level AND in context.app - this is the way it's in the app
@@ -38,7 +39,7 @@ Vue.prototype.$nuxt = {
       },
       $fc: jest.fn((label) => label),
       localePath: jest.fn((link) => link),
-      localeRoute: jest.fn(() => 'some_url'),
+      localeRoute: jest.fn((path) => path),
     },
     i18n: {
       t: jest.fn((label) => label),
diff --git a/jest.config.js b/jest.config.js
index ee617d5..35b25dd 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -40,7 +40,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 
   transformIgnorePatterns: [
-    'node_modules/(?!(@storefront-ui)|vee-validate/dist/rules|nouislider)',
+    'node_modules/(?!(@storefront-ui)|vee-validate/dist/rules|nouislider|lodash-es)',
   ],
 
   testMatch: ['<rootDir>/**/__tests__/**/*spec.[jt]s?(x)'],
diff --git a/lang/de.js b/lang/de.js
index d90c50b..240c29f 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -15,7 +15,7 @@ export default {
   "Back to home": "Zurück Zur Startseite",
   "Back to homepage": "Zurück zur Homepage",
   "Billing": "Abrechnung",
-  "Billing Address": "Rechnungsadresse",
+  "Billing address": "Rechnungsadresse",
   "Brand": "Marke",
   "Cancel": "Abbrechen",
   "Cart": "Warenkorb",
@@ -55,7 +55,7 @@ export default {
   "Enter promo code": "Geben Sie den Promo-Code ein",
   "Feedback": "Ihr Feedback ist uns wichtig. Lassen Sie uns wissen, was wir verbessern können.",
   "Feel free to edit": "Fühlen Sie sich frei, Ihre unten stehenden Daten zu bearbeiten, damit Ihr Konto immer auf dem neuesten Stand ist",
-  "Filters": "Filters",
+  "Filters": "Filter",
   "Find out more": "Finde mehr heraus",
   "First Name": "Vorname",
   "Forgot Password": "Wenn Sie Ihr Passwort vergessen haben, können Sie es zurücksetzen.",
@@ -156,13 +156,14 @@ export default {
   "Set up newsletter": "Richten Sie Ihren Newsletter ein und wir senden Ihnen wöchentlich Informationen zu neuen Produkten und Trends aus den von Ihnen ausgewählten Bereichen",
   "Share your look": "Teile deinen Look",
   "Shipping": "Versand",
-  "Shipping Address": "Lieferanschrift",
-  "Shipping Details": "Versanddetails",
-  "Shipping Method": "Versandart",
+  "Shipping address": "Lieferanschrift",
+  "Shipping details": "Versanddetails",
+  "Shipping method": "Versandart",
   "Show":"Show",
   "show more": "mehr anzeigen",
   "Show on page": "Auf Seite anzeigen",
   "Sign in": "Einloggen",
+  "Size guide": "Größentabelle",
   "Sign Up for Newsletter": "Anmeldung für Newsletter",
   "Sort by": "Sortieren nach",
   "Sort: Default": "Standard",
@@ -276,4 +277,7 @@ export default {
   "From": "Aus",
   "To": "Zu",
   "Your customization": "Ihre Anpassung",
+  "Passwords don't match":"Passwörter stimmen nicht überein",
+  "The password must be at least 8 characters long and must contain at least: 1 uppercase or lowercase letter, 1 number, or one special character (E.g. , . _ & ? etc)":"Das Passwort muss mindestens 8 Zeichen lang sein und muss mindestens enthalten: 1 Groß- oder Kleinbuchstabe, 1 Ziffer oder ein Sonderzeichen (z. B. , . _ & ? usw.)",
+  "Show all products":"Alle Produkte anzeigen",
 };
diff --git a/lang/en.js b/lang/en.js
index 7c6ac93..7208f03 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -15,7 +15,7 @@ export default {
   "Back to home": "Back to home",
   "Back to homepage": "Back to homepage",
   "Billing": "Billing",
-  "Billing Address": "Billing Address",
+  "Billing address": "Billing address",
   "Brand": "Brand",
   "Cancel": "Cancel",
   "Cart": "Cart",
@@ -151,13 +151,14 @@ export default {
   "Set up newsletter": "Set up your newsletter and we will send you information about new products and trends from the sections you selected every week.",
   "Share your look": "Share your look",
   "Shipping": "Shipping",
-  "Shipping Address": "Shipping Address",
-  "Shipping Details": "Shipping Details",
-  "Shipping Method": "Shipping Method",
+  "Shipping address": "Shipping address",
+  "Shipping details": "Shipping details",
+  "Shipping method": "Shipping method",
   "Show":"Show",
   "show more": "show more",
   "Show on page": "Show on page",
   "Sign in": "Sign in",
+  "Size guide": "Size guide",
   "Sign Up for Newsletter": "Sign Up for Newsletter",
   "Sort by": "Sort by",
   "Sort: Default": "Default",
@@ -274,4 +275,7 @@ export default {
   "From": "From",
   "To": "To",
   "Your customization": "Your customization",
+  "Passwords don't match":"Passwords don't match",
+  "The password must be at least 8 characters long and must contain at least: 1 uppercase or lowercase letter, 1 number, or one special character (E.g. , . _ & ? etc)":"The password must be at least 8 characters long and must contain at least: 1 uppercase or lowercase letter, 1 number, or one special character (E.g. , . _ & ? etc)",
+  "Show all products":"Show all products",
 };
diff --git a/middleware/is-authenticated.ts b/middleware/is-authenticated.ts
index dfd38d5..8eb0820 100644
--- a/middleware/is-authenticated.ts
+++ b/middleware/is-authenticated.ts
@@ -2,7 +2,8 @@ import { Middleware } from '@nuxt/types';
 
 const middleware : Middleware = (context) => {
   if (!context.app.$vsf.$magento.config.state.getCustomerToken()) {
-    context.redirect('/');
+    const homepage = context.localeRoute({ name: 'home' });
+    context.redirect(homepage);
   }
 };
 export default middleware;
diff --git a/modules/catalog/category/components/cms/categoryContent.gql.ts b/modules/catalog/category/components/cms/categoryContent.gql.ts
index 88c745a..dce23a8 100644
--- a/modules/catalog/category/components/cms/categoryContent.gql.ts
+++ b/modules/catalog/category/components/cms/categoryContent.gql.ts
@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query getCategoryContentData($filters: CategoryFilterInput) {
     categoryList(filters: $filters) {
       uid
diff --git a/modules/catalog/category/components/filters/CategoryFilters.scss b/modules/catalog/category/components/filters/CategoryFilters.scss
index f650875..fefb377 100644
--- a/modules/catalog/category/components/filters/CategoryFilters.scss
+++ b/modules/catalog/category/components/filters/CategoryFilters.scss
@@ -1,6 +1,6 @@
 .filters {
   position: relative;
-  &__title {
+  ::v-deep &__title {
     --heading-title-font-size: var(--font-size--xl);
     margin: var(--spacer-xl) 0 var(--spacer-base) 0;
 
@@ -39,7 +39,7 @@
   }
 
   &__accordion-item {
-    --accordion-item-content-padding: 0;
+    --accordion-item-content-padding: var(--spacer-sm);
     position: relative;
     left: 50%;
     right: 50%;
diff --git a/modules/catalog/category/components/filters/CategoryFilters.vue b/modules/catalog/category/components/filters/CategoryFilters.vue
index c172d72..0f465b3 100644
--- a/modules/catalog/category/components/filters/CategoryFilters.vue
+++ b/modules/catalog/category/components/filters/CategoryFilters.vue
@@ -41,12 +41,6 @@
         :key="i"
         data-testid="category-filter"
       >
-        <SfHeading
-          :key="`filter-title-${filter.attribute_code}`"
-          :level="4"
-          :title="filter.label"
-          class="filters__title sf-heading--left"
-        />
         <component
           :is="getFilterConfig(filter.attribute_code).component"
           :filter="filter"
diff --git a/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts b/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts
index 573a140..c0cedc9 100644
--- a/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts
+++ b/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts
@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query getProductFiltersByCategory($categoryIdFilter: FilterEqualTypeInput!) {
     products(filter: { category_uid: $categoryIdFilter }) {
       aggregations {
diff --git a/modules/catalog/category/components/filters/renderer/CheckboxType.vue b/modules/catalog/category/components/filters/renderer/CheckboxType.vue
index 04f51d2..ff75868 100644
--- a/modules/catalog/category/components/filters/renderer/CheckboxType.vue
+++ b/modules/catalog/category/components/filters/renderer/CheckboxType.vue
@@ -1,41 +1,50 @@
 <template>
-  <component
-    :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
-    max-content-height="6.875rem"
-    :show-text="$t('Show more')"
-    :hide-text="$t('Show less')"
-  >
-    <SfCheckbox
-      v-for="option in filter.options"
-      :key="`${filter.attribute_code}-${option.value}`"
-      :label="option.label"
-      :selected="Boolean(selected(filter.attribute_code, option.value))"
-      class="filters__item"
-      data-testid="category-filter"
-      @change="$emit('selectFilter', option)"
+  <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
+    />
+    <component
+      :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
+      max-content-height="6.875rem"
+      :show-text="$t('Show more')"
+      :hide-text="$t('Show less')"
     >
-      <template #label="{ label }">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span
-          :class="{ 'display-none': !label }"
-          class="sf-checkbox__label"
-          v-html="$dompurify(label)"
-        />
-      </template>
-    </SfCheckbox>
-  </component>
+      <SfCheckbox
+        v-for="option in filter.options"
+        :key="`${filter.attribute_code}-${option.value}`"
+        :label="option.label"
+        :selected="Boolean(selected(filter.attribute_code, option.value))"
+        class="filters__item"
+        data-testid="category-filter"
+        @change="$emit('selectFilter', option)"
+      >
+        <template #label="{ label }">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span
+            :class="{ 'display-none': !label }"
+            class="sf-checkbox__label"
+            v-html="$dompurify(label)"
+          />
+        </template>
+      </SfCheckbox>
+    </component>
+  </div>
 </template>
 <script lang="ts">
 import {
   computed, defineComponent, inject, PropType,
 } from '@nuxtjs/composition-api';
-import { SfCheckbox, SfScrollable } from '@storefront-ui/vue';
+import { SfCheckbox, SfScrollable, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfCheckbox,
     SfScrollable,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/modules/catalog/category/components/filters/renderer/RadioType.vue b/modules/catalog/category/components/filters/renderer/RadioType.vue
index 9ddc888..44149cf 100644
--- a/modules/catalog/category/components/filters/renderer/RadioType.vue
+++ b/modules/catalog/category/components/filters/renderer/RadioType.vue
@@ -1,44 +1,53 @@
 <template>
-  <component
-    :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
-    max-content-height="6.875rem"
-    :show-text="$t('Show more')"
-    :hide-text="$t('Show less')"
-  >
-    <SfRadio
-      v-for="option in filter.options"
-      :key="`${filter.attribute_code}-${option.value}`"
-      class="radio-filter"
-      :label="`${option.label}`"
-      :selected="selected(filter.attribute_code, option.value)"
-      :value="option.value"
-      name="filter__price"
-      data-testid="category-filter"
-      @change="$emit('selectFilter', option)"
+  <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
+    />
+    <component
+      :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
+      max-content-height="6.875rem"
+      :show-text="$t('Show more')"
+      :hide-text="$t('Show less')"
     >
-      <template #label="{ label }">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span
-          :class="{ 'display-none': !label }"
-          class="sf-radio__label"
-          v-html="$dompurify(label)"
-        />
-      </template>
-    </SfRadio>
-  </component>
+      <SfRadio
+        v-for="option in filter.options"
+        :key="`${filter.attribute_code}-${option.value}`"
+        class="radio-filter"
+        :label="`${option.label}`"
+        :selected="selected(filter.attribute_code, option.value)"
+        :value="option.value"
+        name="filter__price"
+        data-testid="category-filter"
+        @change="$emit('selectFilter', option)"
+      >
+        <template #label="{ label }">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span
+            :class="{ 'display-none': !label }"
+            class="sf-radio__label"
+            v-html="$dompurify(label)"
+          />
+        </template>
+      </SfRadio>
+    </component>
+  </div>
 </template>
 <script lang="ts">
 import {
   computed,
   defineComponent, inject, PropType,
 } from '@nuxtjs/composition-api';
-import { SfRadio, SfScrollable } from '@storefront-ui/vue';
+import { SfRadio, SfScrollable, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfRadio,
     SfScrollable,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/modules/catalog/category/components/filters/renderer/SwatchColorType.vue b/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
index ee4d973..6c0ec34 100644
--- a/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
+++ b/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
@@ -1,26 +1,35 @@
 <template>
-  <div class="swatch_color_wrapper">
-    <SfColor
-      v-for="option in filter.options"
-      :key="`${filter.attribute_code}-${option.value}`"
-      :color="option.label"
-      :selected="Boolean(selected(filter.attribute_code, option.value))"
-      class="swatch_color"
-      role="button"
-      @click="$emit('selectFilter', option)"
+  <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
     />
+    <div class="swatch_color_wrapper">
+      <SfColor
+        v-for="option in filter.options"
+        :key="`${filter.attribute_code}-${option.value}`"
+        :color="option.label"
+        :selected="Boolean(selected(filter.attribute_code, option.value))"
+        class="swatch_color"
+        role="button"
+        @click="$emit('selectFilter', option)"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts">
 import {
   computed, defineComponent, inject, PropType,
 } from '@nuxtjs/composition-api';
-import { SfColor } from '@storefront-ui/vue';
+import { SfColor, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfColor,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/modules/catalog/category/components/filters/renderer/YesNoType.vue b/modules/catalog/category/components/filters/renderer/YesNoType.vue
index b4ddca0..fde8d7b 100644
--- a/modules/catalog/category/components/filters/renderer/YesNoType.vue
+++ b/modules/catalog/category/components/filters/renderer/YesNoType.vue
@@ -1,5 +1,11 @@
 <template>
   <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
+    />
     <SfRadio
       v-for="option in filter.options"
       :key="`${filter.attribute_code}-${option.value}`"
@@ -18,12 +24,13 @@ import {
   computed,
   defineComponent, inject, PropType, useContext,
 } from '@nuxtjs/composition-api';
-import { SfRadio } from '@storefront-ui/vue';
+import { SfRadio, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation, AggregationOption } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfRadio,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/modules/catalog/category/components/navbar/CategoryNavbar.vue b/modules/catalog/category/components/navbar/CategoryNavbar.vue
index 780ed41..8456988 100644
--- a/modules/catalog/category/components/navbar/CategoryNavbar.vue
+++ b/modules/catalog/category/components/navbar/CategoryNavbar.vue
@@ -139,7 +139,7 @@ export default defineComponent({
   align-content: center;
   border: 1px solid var(--c-light);
   border-width: 0 0 1px 0;
-  padding: var(--spacer-sm);
+  padding: var(--spacer-sm) var(--spacer-xs);;
 
   @include for-desktop {
     border-width: 1px 0 1px 0;
@@ -216,7 +216,6 @@ export default defineComponent({
   }
 
   &__select {
-    --select-width: 185px;
     --select-padding: 0;
     --select-height: auto;
     --select-selected-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
@@ -250,6 +249,11 @@ export default defineComponent({
     order: 1;
     display: flex;
     align-items: center;
+
+    margin: {
+      left: var(--spacer-xs);
+      right: var(--spacer-xs);
+    }
     @include for-desktop {
       margin: auto 0 auto auto;
       order: 0;
diff --git a/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue b/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue
index 919cd5d..ffe5935 100644
--- a/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue
+++ b/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue
@@ -28,7 +28,7 @@
         :key="category.uid"
         :label="category.name"
         class="mobile-menu-sidebar__item"
-        @click="category.children ? navigate(category) : onGoCategoryDown(category)"
+        @click="category.children && category.children.length > 0 ? onGoCategoryDown(category) : navigate(category)"
       />
     </SfList>
   </SfSidebar>
@@ -66,7 +66,7 @@ export default defineComponent({
     };
 
     // A category with no child categories can't be entered into - it can only navigated to
-    const initialHistoryWithSnippedSubcategoryLessTail = initialHistory.value.at(-1)?.children.length
+    const initialHistoryWithSnippedSubcategoryLessTail = initialHistory.value.at(-1)?.children?.length
       ? initialHistory.value
       : initialHistory.value.slice(0, -1);
 
diff --git a/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts b/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts
index ab44fb9..4741ed6 100644
--- a/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts
+++ b/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/MobileCategorySidebar.spec.ts
@@ -1,7 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import { useRoute, useContext, useRouter } from '@nuxtjs/composition-api';
 import { render } from '~/test-utils';
-import MobileCategorySidebar from '../MobileCategorySidebar.vue';
 import { useUiHelpers, useUiState } from '~/composables';
 import { useCategoryStore } from '~/modules/catalog/category/stores/category';
 import useUiHelpersMock from '~/test-utils/mocks/useUiHelpersMock';
@@ -12,6 +11,7 @@ import useContextMock from '~/test-utils/mocks/useContext';
 import { womanCategoryTreeData, defaultCategoryTreeData } from '~/test-utils/mocks/categoryTreeDataMock';
 import useCategoryStoreMock from '~/test-utils/mocks/useCategoryStore';
 import { useMobileCategoryTree } from '../logic';
+import MobileCategorySidebar from '../MobileCategorySidebar.vue';
 
 jest.mock('~/composables', () => {
   const composables = jest.requireActual('~/composables');
@@ -92,19 +92,21 @@ describe('MobileCategorySidebar.vue', () => {
     (useUiHelpers as jest.Mock).mockReturnValue(UiHelpersMock);
     (useUiState as jest.Mock).mockReturnValue(uiStateMock);
 
+    const categoryTreeData = [...defaultCategoryTreeData];
+    const onGoCategoryDownMock = jest.fn(() => categoryTreeData.pop());
+
     (useMobileCategoryTree as jest.Mock).mockReturnValue({
       currentItems: {
         value: defaultCategoryTreeData,
       },
+      onGoCategoryDown: onGoCategoryDownMock,
     });
 
     const { getByText } = render(MobileCategorySidebar);
     const womenCategory = getByText('Women');
 
     await user.click(womenCategory);
-
-    expect(uiStateMock.toggleMobileMenu).toHaveBeenCalledTimes(1);
-    expect(UiHelpersMock.getCatLink).toHaveBeenCalledWith(defaultCategoryTreeData[0]);
+    expect(onGoCategoryDownMock).toHaveBeenCalled();
   });
 
   it('Should render sub categories when current category is selected and should render "Go back" button.', () => {
@@ -138,6 +140,9 @@ describe('MobileCategorySidebar.vue', () => {
 
   it('if the user click on a category without children he will be redirected to that category', async () => {
     const onGoCategoryDownMock = jest.fn((val) => val);
+    const UiHelpersMock = useUiHelpersMock();
+
+    (useUiHelpers as jest.Mock).mockReturnValue(UiHelpersMock);
 
     (useMobileCategoryTree as jest.Mock).mockReturnValue({
       currentItems: {
@@ -148,11 +153,10 @@ describe('MobileCategorySidebar.vue', () => {
 
     const { getByText } = render(MobileCategorySidebar);
 
-    const bagsButton = getByText('Training');
+    const trainingButton = getByText('Training');
 
-    await userEvent.click(bagsButton);
-    expect(onGoCategoryDownMock).toHaveBeenCalledTimes(1);
-    expect(onGoCategoryDownMock).toHaveBeenCalledWith(defaultCategoryTreeData[3]);
+    await userEvent.click(trainingButton);
+    expect(UiHelpersMock.getCatLink).toHaveBeenCalledWith(defaultCategoryTreeData[3]);
   });
 
   it('if the user click on the back arrow (not the go back button) menu will be hidden', async () => {
diff --git a/modules/catalog/category/components/views/CategoryProductGrid.vue b/modules/catalog/category/components/views/CategoryProductGrid.vue
index 9718e0c..4db8a5e 100644
--- a/modules/catalog/category/components/views/CategoryProductGrid.vue
+++ b/modules/catalog/category/components/views/CategoryProductGrid.vue
@@ -26,7 +26,7 @@
         data-testid="product-card"
         :image-height="imageSize.height"
         :image-width="imageSize.width"
-        show-add-to-cart-button
+        :show-add-to-cart-button="true"
         @click:wishlist="$emit('click:wishlist', product)"
         @click:add-to-cart="$emit('click:add-to-cart', { product, quantity: 1 })"
       >
@@ -90,17 +90,39 @@ export default defineComponent({
   }
 }
 .card {
-  --product-card-title-margin: var(--spacer-base) 0 0 0;
   --product-card-title-font-weight: var(--font-weight--medium);
   --product-card-title-margin: var(--spacer-xs) 0 0 0;
-  flex: 1 1 50%;
+  flex: 1 1 100%;
 
   @include for-desktop {
-    flex: 1 1 23%;
+    --product-card-max-width: 25%;
     --product-card-title-font-weight: var(--font-weight--normal);
-    --product-card-add-button-bottom: var(--spacer-base);
     --product-card-title-margin: var(--spacer-sm) 0 0 0;
+    --product-card-add-button-bottom: var(--spacer-base);
+  }
+}
+
+::v-deep .sf-product-card {
+  .card {
+    will-change: transform, opacity;
   }
+
+  &__image-wrapper {
+    height: 257px;
+  }
+
+  &__add-button {
+    @include for-mobile {
+      opacity: 1;
+      display: flex;
+      bottom: 1rem;
+      right: 0;
+    }
+  }
+}
+
+::v-deep .sf-product-card::after {
+  content: none;
 }
 
 </style>
diff --git a/modules/catalog/category/components/views/CategoryProductList.vue b/modules/catalog/category/components/views/CategoryProductList.vue
index ab8d168..51d6d10 100644
--- a/modules/catalog/category/components/views/CategoryProductList.vue
+++ b/modules/catalog/category/components/views/CategoryProductList.vue
@@ -125,6 +125,7 @@ export default defineComponent({
 @import "./transition.scss";
 
 .list-layout {
+  will-change: transform;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
@@ -165,4 +166,23 @@ export default defineComponent({
   }
 }
 
+::v-deep .sf-product-card {
+  &__image-wrapper {
+    height: 257px;
+  }
+
+  &__add-button {
+    @include for-mobile {
+      opacity: 1;
+      display: flex;
+      bottom: 1rem;
+      right: 0;
+    }
+  }
+}
+
+::v-deep .sf-product-card::after {
+  content: none;
+}
+
 </style>
diff --git a/modules/catalog/category/components/views/CategoryProductPrice.vue b/modules/catalog/category/components/views/CategoryProductPrice.vue
index bfb35b3..75903c7 100644
--- a/modules/catalog/category/components/views/CategoryProductPrice.vue
+++ b/modules/catalog/category/components/views/CategoryProductPrice.vue
@@ -52,7 +52,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from '@nuxtjs/composition-api';
 import { SfPrice } from '@storefront-ui/vue';
-import type { ProductWithCommondProductCardProps } from '~/modules/catalog/category/components/views/useProductsWithCommonCardProps';
+import type { ProductWithCommonProductCardProps } from '~/modules/catalog/category/components/views/useProductsWithCommonCardProps';
 
 export default defineComponent({
   name: 'CategoryProductPrice',
@@ -61,7 +61,7 @@ export default defineComponent({
   },
   props: {
     product: {
-      type: Object as PropType<ProductWithCommondProductCardProps>,
+      type: Object as PropType<ProductWithCommonProductCardProps>,
       required: true,
     },
   },
diff --git a/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts b/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
index 1252de0..89fa5f8 100644
--- a/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
+++ b/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
@@ -33,7 +33,7 @@ interface ProductCommonCardProps {
   scoreRating: number,
 }
 
-export type ProductWithCommondProductCardProps = Product & { commonProps: ProductCommonCardProps };
+export type ProductWithCommonProductCardProps = Product & { commonProps: ProductCommonCardProps };
 
 export const useProductsWithCommonProductCardProps = (products: Ref<Product[]>) => {
   const { getMagentoImage } = useImage();
@@ -47,7 +47,7 @@ export const useProductsWithCommonProductCardProps = (products: Ref<Product[]>)
    * To avoid passing tens of props to both components two times,
    * instead the below object is passed to them using `v-bind="product.commonProps"`
    */
-  const productsWithCommonProductCardProps = computed<ProductWithCommondProductCardProps[]>(
+  const productsWithCommonProductCardProps = computed<ProductWithCommonProductCardProps[]>(
     () => products.value.map((product, index) => {
       const imageProps = {
         image: getMagentoImage(getProductThumbnailImage(product)),
diff --git a/modules/catalog/category/composables/useCategory/index.ts b/modules/catalog/category/composables/useCategory/index.ts
index f3fe689..6500e50 100644
--- a/modules/catalog/category/composables/useCategory/index.ts
+++ b/modules/catalog/category/composables/useCategory/index.ts
@@ -80,7 +80,7 @@ export function useCategory(): UseCategoryInterface {
 
     try {
       loading.value = true;
-      const { data } = await app.context.$vsf.$magento.api.categoryList(params);
+      const { data } = await app.context.$vsf.$magento.api.categoryList(params, params?.customQuery ?? null);
       Logger.debug('[Result]:', { data });
       categories.value = data.categories.items;
       error.value.load = null;
diff --git a/modules/catalog/category/composables/useCategory/useCategory.ts b/modules/catalog/category/composables/useCategory/useCategory.ts
index 3c17090..ba54618 100644
--- a/modules/catalog/category/composables/useCategory/useCategory.ts
+++ b/modules/catalog/category/composables/useCategory/useCategory.ts
@@ -37,9 +37,9 @@ export interface UseCategoryErrors {
 }
 
 /** The {@link useCategory} params object received by `load` function. */
-export interface UseCategoryParamsInput {
+export type UseCategoryParamsInput = ComposableFunctionArgs< {
   pageSize: number;
-}
+}>;
 
 /**
  * Data and methods returned from the {@link useCategory} composable
diff --git a/modules/catalog/category/composables/useCategorySearch/index.ts b/modules/catalog/category/composables/useCategorySearch/index.ts
index 9b339e7..1394e70 100644
--- a/modules/catalog/category/composables/useCategorySearch/index.ts
+++ b/modules/catalog/category/composables/useCategorySearch/index.ts
@@ -2,6 +2,7 @@ import { readonly, ref, useContext } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
 import type { CategorySearchQueryVariables, CategoryTree } from '~/modules/GraphQL/types';
 import type { UseCategorySearchErrors, UseCategorySearchInterface } from './useCategorySearch';
+import { ComposableFunctionArgs } from '~/composables';
 
 /**
  * Allows searching for categories. It is
@@ -17,13 +18,13 @@ export function useCategorySearch(): UseCategorySearchInterface {
   });
   const result = ref<CategoryTree[] | null>(null);
 
-  const search = async (searchParams: CategorySearchQueryVariables) => {
-    Logger.debug('useCategory/search', searchParams);
+  const search = async (params: ComposableFunctionArgs<CategorySearchQueryVariables>) => {
+    Logger.debug('useCategory/search', params);
 
     try {
       loading.value = true;
-      const { filters } = searchParams;
-      const { data } = await app.context.$vsf.$magento.api.categorySearch({ filters });
+      const { filters } = params;
+      const { data } = await app.context.$vsf.$magento.api.categorySearch({ filters }, params?.customQuery ?? null);
 
       Logger.debug('[Result]:', { data });
 
diff --git a/modules/catalog/category/composables/useFacet/getFacetData.gql.ts b/modules/catalog/category/composables/useFacet/getFacetData.gql.ts
index 4a9a821..41073bd 100644
--- a/modules/catalog/category/composables/useFacet/getFacetData.gql.ts
+++ b/modules/catalog/category/composables/useFacet/getFacetData.gql.ts
@@ -1,10 +1,8 @@
-import gql from 'graphql-tag';
-
 /**
  * GraphQL Query that fetches products using received search term and the params
  * for filter, sort and pagination.
  */
-export default gql`
+export default `
   query getFacetData($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
     products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
       items {
diff --git a/modules/catalog/category/composables/useFacet/index.ts b/modules/catalog/category/composables/useFacet/index.ts
index 0ee0df5..d8daad5 100644
--- a/modules/catalog/category/composables/useFacet/index.ts
+++ b/modules/catalog/category/composables/useFacet/index.ts
@@ -1,6 +1,5 @@
 import { readonly, ref } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
-import type { ComposableFunctionArgs } from '~/composables/types';
 import type { GetProductSearchParams } from '~/modules/catalog/product/types';
 import useApi from '~/composables/useApi';
 import { sortingOptions } from '~/modules/catalog/category/composables/useFacet/sortingOptions';
@@ -26,7 +25,7 @@ export function useFacet(): UseFacetInterface {
     search: null,
   });
   const defaultItemsPerPage = 20;
-  const search = async (params?: ComposableFunctionArgs<FacetSearchParams>) => {
+  const search = async (params?: FacetSearchParams) => {
     Logger.debug('useFacet/search', params);
 
     result.value.input = params;
diff --git a/modules/catalog/category/stores/graphql/categoryList.gql.ts b/modules/catalog/category/stores/graphql/categoryList.gql.ts
index 1435131..aa5582c 100644
--- a/modules/catalog/category/stores/graphql/categoryList.gql.ts
+++ b/modules/catalog/category/stores/graphql/categoryList.gql.ts
@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-const fragmentCategory = gql`
+const fragmentCategory = `
   fragment CategoryFields on CategoryTree {
     is_anchor
     name
@@ -13,7 +11,7 @@ const fragmentCategory = gql`
   }
 `;
 
-export default gql`
+export default `
   query categoryList {
     categories {
       items {
diff --git a/modules/catalog/pages/category.vue b/modules/catalog/pages/category.vue
index 22fc1b2..604f0f8 100644
--- a/modules/catalog/pages/category.vue
+++ b/modules/catalog/pages/category.vue
@@ -5,8 +5,14 @@
       :content="cmsContent"
     />
     <CategoryBreadcrumbs />
+    <SkeletonLoader
+      v-if="!activeCategoryName"
+      height="57px"
+      width="200px"
+      margin="0"
+    />
     <SfHeading
-      v-if="isShowProducts"
+      v-else
       :level="2"
       :title="activeCategoryName"
       class="category-title"
@@ -110,6 +116,7 @@ import {
   defineComponent, onMounted, ref, ssrRef, useFetch,
 } from '@nuxtjs/composition-api';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
 import CategoryPagination from '~/modules/catalog/category/components/pagination/CategoryPagination.vue';
 import {
   useFacet,
@@ -148,6 +155,7 @@ export default defineComponent({
     SfSelect,
     LazyHydrate,
     SfHeading,
+    SkeletonLoader,
   },
   transition: 'fade',
   setup() {
@@ -185,11 +193,14 @@ export default defineComponent({
         : addItemToWishlistBase({ product }));
     };
 
-    const { activeCategory } = useTraverseCategory();
+    const { activeCategory, loadCategoryTree } = useTraverseCategory();
     const activeCategoryName = computed(() => activeCategory.value?.name ?? '');
     const routeData = ref<CategoryTree | null>(null);
 
     const { fetch } = useFetch(async () => {
+      if (!activeCategory.value) {
+        loadCategoryTree();
+      }
       const resolvedUrl = await resolveUrl();
       if (isCategoryTreeRoute(resolvedUrl)) routeData.value = resolvedUrl;
 
@@ -231,21 +242,21 @@ export default defineComponent({
       isPriceLoaded.value = true;
     });
 
+    const goToPage = (page: number) => {
+      uiHelpers.changePage(page, false);
+      fetch();
+    };
+
     const doChangeItemsPerPage = (itemsPerPage: number) => {
       uiHelpers.changeItemsPerPage(itemsPerPage, false);
-      fetch();
+      goToPage(0);
     };
 
     const onReloadProducts = () => {
-      fetch();
+      goToPage(0);
       productContainerElement.value.scrollIntoView();
     };
 
-    const goToPage = (page: number) => {
-      uiHelpers.changePage(page, false);
-      fetch();
-    };
-
     return {
       isPriceLoaded,
       ...uiHelpers,
@@ -308,10 +319,12 @@ export default defineComponent({
 
 .main {
   &.section {
-    padding: var(--spacer-xs);
+    padding: 0;
 
-    @include for-desktop {
-      padding: 0;
+    @include for-mobile {
+      $padding: var(--spacer-xs);
+      padding: $padding;
+      width: calc(100% - 2 * $padding);
     }
   }
 }
diff --git a/modules/catalog/pages/product.vue b/modules/catalog/pages/product.vue
index 806977d..733ef89 100644
--- a/modules/catalog/pages/product.vue
+++ b/modules/catalog/pages/product.vue
@@ -36,16 +36,20 @@ import {
   useRoute,
   defineComponent,
   useFetch,
+  onMounted,
 } from '@nuxtjs/composition-api';
+import { merge } from 'lodash-es';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 import { SfBreadcrumbs, SfLoader } from '@storefront-ui/vue';
 import { getBreadcrumbs } from '~/modules/catalog/product/getters/productGetters';
 import { useProduct } from '~/modules/catalog/product/composables/useProduct';
 import { ProductTypeEnum } from '~/modules/catalog/product/enums/ProductTypeEnum';
 import LoadWhenVisible from '~/components/utils/LoadWhenVisible.vue';
-
+import { useApi } from '~/composables';
 import type { Product } from '~/modules/catalog/product/types';
+import type { ProductDetailsQuery } from '~/modules/GraphQL/types';
 import ProductSkeleton from '~/modules/catalog/product/components/ProductSkeleton.vue';
+import getProductPriceBySkuGql from '~/modules/catalog/product/queries/getProductPriceBySku.gql';
 
 export default defineComponent({
   name: 'ProductPage',
@@ -65,6 +69,7 @@ export default defineComponent({
   },
   transition: 'fade',
   setup() {
+    const { query } = useApi();
     const product = ref<Product | null>(null);
     const { addTags } = useCache();
     const { localePath } = useContext();
@@ -97,16 +102,22 @@ export default defineComponent({
     // eslint-disable-next-line no-underscore-dangle
     const renderer = computed(() => product.value?.__typename ?? ProductTypeEnum.SIMPLE_PRODUCT);
 
-    const fetchProduct = async (query = getBaseSearchQuery()) => {
+    const fetchProductBaseData = async (searchQuery = getBaseSearchQuery()) => {
       const result = await getProductDetails({
-        ...query,
+        ...searchQuery,
       });
 
-      product.value = result.items[0] as Product ?? null;
+      product.value = merge({}, product.value, result.items[0] as Product ?? null);
+    };
+
+    const fetchProductExtendedData = async (searchQuery = getBaseSearchQuery()) => {
+      const { data } = await query<ProductDetailsQuery>(getProductPriceBySkuGql, searchQuery);
+
+      product.value = merge({}, product.value, data.products?.items?.[0] as Product);
     };
 
     useFetch(async () => {
-      await fetchProduct();
+      await fetchProductBaseData();
 
       if (Boolean(product?.value?.sku) === false) nuxtError({ statusCode: 404 });
 
@@ -126,12 +137,14 @@ export default defineComponent({
       addTags([...tags, ...productTags]);
     });
 
+    onMounted(async () => fetchProductExtendedData());
+
     return {
       renderer,
       loading,
       breadcrumbs,
       product,
-      fetchProduct,
+      fetchProduct: fetchProductExtendedData,
     };
   },
 });
diff --git a/modules/catalog/pricing/getGroupedProductPriceCommand.ts b/modules/catalog/pricing/getGroupedProductPriceCommand.ts
index 601373a..fbd69ee 100644
--- a/modules/catalog/pricing/getGroupedProductPriceCommand.ts
+++ b/modules/catalog/pricing/getGroupedProductPriceCommand.ts
@@ -8,8 +8,8 @@ export function getGroupedProductPriceCommand(product: GroupedProduct): number {
     return regular > special && special !== null ? special : regular;
   };
 
-  return product.items.reduce(
+  return product.items?.reduce(
     (acc, curr) => curr.qty * evalProductPrice(curr.product) + acc,
     0,
-  );
+  ) ?? 0;
 }
diff --git a/modules/catalog/pricing/getPricesQuery.gql.ts b/modules/catalog/pricing/getPricesQuery.gql.ts
index 441fa12..771ec35 100644
--- a/modules/catalog/pricing/getPricesQuery.gql.ts
+++ b/modules/catalog/pricing/getPricesQuery.gql.ts
@@ -1,6 +1,4 @@
-import gql from 'graphql-tag';
-
-export default gql`
+export default `
   query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 20, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
     products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
       items {
diff --git a/modules/catalog/product/components/ProductAddReviewForm.vue b/modules/catalog/product/components/ProductAddReviewForm.vue
index 79bb2e2..96d4540 100644
--- a/modules/catalog/product/components/ProductAddReviewForm.vue
+++ b/modules/catalog/product/components/ProductAddReviewForm.vue
@@ -66,6 +66,7 @@
               :label="metadata.name"
               :name="metadata.name.toLowerCase()"
               class="form__element form__element--half form__element--half-even form__select sf-select--underlined"
+              required
               :valid="!errors[0]"
               :error-message="$t(errors[0])"
             >
@@ -272,11 +273,16 @@ export default defineComponent({
     --select-option-font-size: var(--font-size--lg);
     flex-wrap: wrap;
 
-    ::v-deep .sf-select__dropdown {
-      font-size: var(--font-size--lg);
-      // margin: 0;
-      font-family: var(--font-family--secondary);
-      font-weight: var(--font-weight--normal);
+    ::v-deep .sf-select {
+      &__label {
+        --select-label-color: var(--c-text);
+      }
+      &__dropdown {
+        font-size: var(--font-size--lg);
+        // margin: 0;
+        font-family: var(--font-family--secondary);
+        font-weight: var(--font-weight--normal);
+      }
     }
   }
 
diff --git a/modules/catalog/product/components/product-types/bundle/BundleProduct.vue b/modules/catalog/product/components/product-types/bundle/BundleProduct.vue
index 9da480a..385220d 100644
--- a/modules/catalog/product/components/product-types/bundle/BundleProduct.vue
+++ b/modules/catalog/product/components/product-types/bundle/BundleProduct.vue
@@ -40,17 +40,19 @@
         <div class="product__price">
           <span class="product__price-label">{{ $t('From') }}</span>
           <SfPrice
-            :regular="$fc(productPrice)"
-            :special="productSpecialPrice && $fc(productSpecialPrice)"
+            :regular="$fc(productPrices.regular)"
+            :special="productPrices.special && $fc(productPrices.special)"
           />
           <span class="product__price-label">{{ $t('To') }}</span>
           <SfPrice
-            :regular="$fc(productMaximumPrice)"
-          />
-          <span class="product__price-label">{{ $t('Your customization') }}</span>
-          <SfPrice
-            :regular="$fc(customizationPrice)"
+            :regular="$fc(productPrices.maximum)"
           />
+          <div v-if="customizationPrice">
+            <span class="product__price-label">{{ $t('Your customization') }}</span>
+            <SfPrice
+              :regular="$fc(customizationPrice)"
+            />
+          </div>
         </div>
         <div>
           <div class="product__rating">
@@ -89,10 +91,16 @@
           class="product__description desktop-only"
         />
         <BundleProductSelector
+          v-if="productPrices.regular"
           :can-add-to-cart="canAddToCart(product, qty)"
           :product="product"
           @update-price="customizationPrice = $event"
         />
+        <div v-else>
+          <BundleProductOptionSkeleton />
+          <BundleProductOptionSkeleton />
+          <BundleProductOptionSkeleton />
+        </div>
         <div class="product__additional-actions">
           <AddToWishlist
             :is-in-wishlist="isInWishlist"
@@ -151,10 +159,13 @@ import ProductTabs from '~/modules/catalog/product/components/tabs/ProductTabs.v
 import { useProductGallery } from '~/modules/catalog/product/composables/useProductGallery';
 import { Product } from '~/modules/catalog/product/types';
 import { TabsConfig, useProductTabs } from '~/modules/catalog/product/composables/useProductTabs';
+import BundleProductOptionSkeleton
+  from '~/modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue';
 
 export default defineComponent({
   name: 'BundleProduct',
   components: {
+    BundleProductOptionSkeleton,
     BundleProductSelector,
     HTMLContent,
     LazyHydrate,
@@ -195,11 +206,8 @@ export default defineComponent({
       () => props.product?.description?.html || '',
     );
 
-    const productPrice = ref(getProductPrice(props.product).regular);
-    const productSpecialPrice = ref(getProductPrice(props.product).special);
-    const productMaximumPrice = ref(getProductPrice(props.product).maximum);
-    const customizationPrice = ref(productSpecialPrice.value ?? productPrice.value);
-
+    const productPrices = computed(() => getProductPrice(props.product));
+    const customizationPrice = ref(productPrices.value.special ?? productPrices.value.regular);
     const totalReviews = computed(() => getTotalReviews(props.product));
     const averageRating = computed(() => getAverageRating(props.product));
 
@@ -214,9 +222,7 @@ export default defineComponent({
       productGallery,
       getProductName,
       getProductSwatchData,
-      productPrice,
-      productSpecialPrice,
-      productMaximumPrice,
+      productPrices,
       customizationPrice,
       productShortDescription,
       qty,
diff --git a/modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue b/modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue
new file mode 100644
index 0000000..ff1d749
--- /dev/null
+++ b/modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <SkeletonLoader
+      width="100%"
+      height="23px"
+    />
+    <SkeletonLoader
+      width="100%"
+      height="240px"
+    />
+    <div>
+      <SkeletonLoader
+        width="80px"
+        height="23px"
+      />
+    </div>
+    <SkeletonLoader
+      width="108px"
+      height="52px"
+    />
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+} from '@nuxtjs/composition-api';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+
+export default defineComponent({
+  name: 'BundleProductOptionSkeleton',
+  components: {
+    SkeletonLoader,
+  },
+});
+</script>
diff --git a/modules/catalog/product/components/product-types/bundle/BundleProductSelector.vue b/modules/catalog/product/components/product-types/bundle/BundleProductSelector.vue
index 1af5ef4..dee0e8a 100644
--- a/modules/catalog/product/components/product-types/bundle/BundleProductSelector.vue
+++ b/modules/catalog/product/components/product-types/bundle/BundleProductSelector.vue
@@ -73,6 +73,12 @@
     >
       Add to Cart
     </SfButton>
+    <SfAlert
+      :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+      class="product__add-to-cart-error"
+      :message="addToCartError"
+      type="danger"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -82,6 +88,7 @@ import {
   SfQuantitySelector,
   SfRadio,
   SfButton,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   computed, defineComponent, PropType, ref, watch,
@@ -105,6 +112,7 @@ export default defineComponent({
     SfPrice,
     SfQuantitySelector,
     SfRadio,
+    SfAlert,
   },
   props: {
     canAddToCart: {
@@ -119,9 +127,10 @@ export default defineComponent({
   },
   emits: ['update-bundle', 'update-price'],
   setup(props, { emit }) {
-    const { loading, addItem } = useCart();
+    const { loading, addItem, error: cartError } = useCart();
     const bundleProduct = computed(() => getBundleProducts(props.product));
     const selectedOptions = ref({});
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
 
     selectedOptions.value = bundleProductInitialSelector(bundleProduct.value);
 
@@ -185,6 +194,7 @@ export default defineComponent({
       getProductName,
       getProductPrice,
       selectedOptions,
+      addToCartError,
     };
   },
 });
diff --git a/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue b/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue
index f9b9bfd..b57b7b2 100644
--- a/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue
+++ b/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue
@@ -116,6 +116,7 @@
                 updateProductConfiguration(option.attribute_uid, $event)
             "
           >
+            <SfSelectOption :value="''" />
             <SfSelectOption
               v-for="attribute in option.values"
               :key="attribute.uid"
@@ -130,7 +131,13 @@
           v-e2e="'product_add-to-cart'"
           :disabled="isCartLoading || !canAddToCart(product, qty) || isFetching"
           class="product__add-to-cart"
-          @click="addItem({ product, quantity: parseInt(qty) })"
+          @click="addItem({ product, quantity: parseInt(qty), productConfiguration })"
+        />
+        <SfAlert
+          :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+          class="product__add-to-cart-error"
+          :message="addToCartError"
+          type="danger"
         />
         <div class="product__additional-actions">
           <AddToWishlist
@@ -162,6 +169,7 @@ import {
   SfPrice,
   SfRating,
   SfSelect,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -210,6 +218,7 @@ export default defineComponent({
     SfPrice,
     SfRating,
     SfSelect,
+    SfAlert,
     AddToWishlist,
     SvgImage,
     ProductTabs,
@@ -230,7 +239,9 @@ export default defineComponent({
     const product = toRef(props, 'product');
     const route = useRoute();
     const router = useRouter();
-    const { addItem, loading: isCartLoading, canAddToCart } = useCart();
+    const {
+      addItem, error: cartError, loading: isCartLoading, canAddToCart,
+    } = useCart();
     const { productGallery, imageSizes } = useProductGallery(product);
     const { activeTab, setActiveTab, openNewReviewTab } = useProductTabs();
 
@@ -264,7 +275,7 @@ export default defineComponent({
 
     const totalReviews = computed(() => getTotalReviews(props.product));
     const averageRating = computed(() => getAverageRating(props.product));
-
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
     const updateProductConfiguration = (label: string, value: string) => {
       if (productConfiguration.value[label] === value) return;
 
@@ -280,6 +291,7 @@ export default defineComponent({
 
       emit('fetchProduct', { query: getBaseSearchQuery() });
     };
+
     return {
       addItem,
       addItemToWishlist: addOrRemoveItem,
@@ -304,6 +316,7 @@ export default defineComponent({
       openNewReviewTab,
       activeTab,
       TabsConfig,
+      addToCartError,
     };
   },
 });
diff --git a/modules/catalog/product/components/product-types/grouped/GroupedProductSelector.vue b/modules/catalog/product/components/product-types/grouped/GroupedProductSelector.vue
index 41799a9..59f588c 100644
--- a/modules/catalog/product/components/product-types/grouped/GroupedProductSelector.vue
+++ b/modules/catalog/product/components/product-types/grouped/GroupedProductSelector.vue
@@ -42,6 +42,12 @@
     >
       Add to Cart
     </SfButton>
+    <SfAlert
+      :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+      class="product__add-to-cart-error"
+      :message="addToCartError"
+      type="danger"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -51,6 +57,7 @@ import {
   SfButton,
   SfQuantitySelector,
   SfImage,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   computed, watch, ref, defineComponent, PropType,
@@ -78,6 +85,7 @@ export default defineComponent({
     SfButton,
     SfQuantitySelector,
     SfImage,
+    SfAlert,
   },
   props: {
     canAddToCart: {
@@ -92,7 +100,7 @@ export default defineComponent({
   },
   emits: ['update-price'],
   setup(props, { emit }) {
-    const { addItem } = useCart();
+    const { addItem, error: cartError } = useCart();
     const loading = ref(false);
     const groupedItems = computed(() => getGroupedProducts(props.product));
     const addToCart = async () => {
@@ -105,6 +113,9 @@ export default defineComponent({
           for (const p of groupedItemsFiltered) {
             // eslint-disable-next-line no-await-in-loop
             await addItem({ product: p.product, quantity: p.qty });
+            if (cartError.value.addItem) {
+              break;
+            }
           }
         }
         loading.value = false;
@@ -115,8 +126,8 @@ export default defineComponent({
 
     watch(
       () => props.product,
-      (product) => {
-        const price = getGroupedProductPriceCommand(product);
+      (productNewValue) => {
+        const price = getGroupedProductPriceCommand(productNewValue);
         emit('update-price', price);
       },
       {
@@ -125,6 +136,7 @@ export default defineComponent({
     );
 
     const { getMagentoImage } = useImage();
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
 
     return {
       addToCart,
@@ -134,6 +146,7 @@ export default defineComponent({
       getProductName,
       getProductPrice,
       getProductThumbnailImage,
+      addToCartError,
     };
   },
 });
diff --git a/modules/catalog/product/components/product-types/simple/SimpleProduct.vue b/modules/catalog/product/components/product-types/simple/SimpleProduct.vue
index 1517bf4..776bc2b 100644
--- a/modules/catalog/product/components/product-types/simple/SimpleProduct.vue
+++ b/modules/catalog/product/components/product-types/simple/SimpleProduct.vue
@@ -84,6 +84,12 @@
           class="product__add-to-cart"
           @click="addItem({ product, quantity: parseInt(qty) })"
         />
+        <SfAlert
+          :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+          class="product__add-to-cart-error"
+          :message="addToCartError"
+          type="danger"
+        />
         <div class="product__additional-actions">
           <AddToWishlist
             :is-in-wishlist="isInWishlist"
@@ -112,6 +118,7 @@ import {
   SfLoader,
   SfPrice,
   SfRating,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -154,6 +161,7 @@ export default defineComponent({
     SfLoader,
     SfPrice,
     SfRating,
+    SfAlert,
     AddToWishlist,
     SvgImage,
     ProductTabs,
@@ -172,7 +180,9 @@ export default defineComponent({
   setup(props) {
     const qty = ref(1);
     const product = toRef(props, 'product');
-    const { addItem, loading: isCartLoading, canAddToCart } = useCart();
+    const {
+      addItem, error: cartError, loading: isCartLoading, canAddToCart,
+    } = useCart();
     const { productGallery, imageSizes } = useProductGallery(product);
     const { isAuthenticated } = useUser();
     const { addOrRemoveItem, isInWishlist } = useWishlist();
@@ -186,6 +196,7 @@ export default defineComponent({
     const productSpecialPrice = computed(() => getProductPrice(props.product).special);
     const totalReviews = computed(() => getTotalReviews(props.product));
     const averageRating = computed(() => getAverageRating(props.product));
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
 
     return {
       addItem,
@@ -207,6 +218,7 @@ export default defineComponent({
       openNewReviewTab,
       activeTab,
       TabsConfig,
+      addToCartError,
     };
   },
 });
diff --git a/modules/catalog/product/components/product-types/styles.scss b/modules/catalog/product/components/product-types/styles.scss
index f93cf85..93258a5 100644
--- a/modules/catalog/product/components/product-types/styles.scss
+++ b/modules/catalog/product/components/product-types/styles.scss
@@ -78,6 +78,10 @@
     }
   }
 
+  ::v-deep &__add-to-cart-error {
+    margin: var(--spacer-xs) 0;
+  }
+
   &__guide,
   &__compare,
   &__save {
diff --git a/modules/catalog/product/composables/useRelatedProducts/index.ts b/modules/catalog/product/composables/useRelatedProducts/index.ts
index b4bbe88..0463069 100644
--- a/modules/catalog/product/composables/useRelatedProducts/index.ts
+++ b/modules/catalog/product/composables/useRelatedProducts/index.ts
@@ -31,7 +31,7 @@ export function useRelatedProducts(): UseRelatedProductsInterface {
 
       Logger.debug('[Magento] Load related products based on ', { searchParams });
 
-      const { data } = await app.$vsf.$magento.api.relatedProduct(searchParams as GetProductSearchParams);
+      const { data } = await app.$vsf.$magento.api.relatedProduct(searchParams as GetProductSearchParams, params?.customQuery ?? null);
 
       Logger.debug('[Result] Related products:', { data });
 
diff --git a/modules/catalog/product/composables/useUpsellProducts/index.ts b/modules/catalog/product/composables/useUpsellProducts/index.ts
index b95f6a2..48485a6 100644
--- a/modules/catalog/product/composables/useUpsellProducts/index.ts
+++ b/modules/catalog/product/composables/useUpsellProducts/index.ts
@@ -36,7 +36,7 @@ export function useUpsellProducts(): UseUpsellProductsInterface {
         .$vsf
         .$magento
         .api
-        .upsellProduct(searchParams);
+        .upsellProduct(searchParams, params?.customQuery ?? null);
 
       Logger.debug('[Result] Upsell products:', { data });
 
diff --git a/modules/catalog/product/queries/getProductPriceBySku.gql.ts b/modules/catalog/product/queries/getProductPriceBySku.gql.ts
new file mode 100644
index 0000000..c0c34ba
--- /dev/null
+++ b/modules/catalog/product/queries/getProductPriceBySku.gql.ts
@@ -0,0 +1,155 @@
+const fragmentPriceRangeFields = `
+  fragment PriceRangeFields on PriceRange {
+    maximum_price {
+      final_price {
+        currency
+        value
+      }
+      regular_price {
+        currency
+        value
+      }
+    }
+    minimum_price {
+      final_price {
+        currency
+        value
+      }
+      regular_price {
+        currency
+        value
+      }
+    }
+  }
+`;
+
+export default `
+  query getProductPriceBySku(
+    $filter: ProductAttributeFilterInput,
+    $configurations: [ID!]
+  ) {
+    products(filter: $filter) {
+      items {
+        price_range {
+          ...PriceRangeFields
+        }
+
+        ... on ConfigurableProduct {
+          price_range {
+            maximum_price {
+              final_price {
+                currency
+                value
+              }
+              regular_price {
+                currency
+                value
+              }
+            }
+            minimum_price {
+              final_price {
+                currency
+                value
+              }
+              regular_price {
+                currency
+                value
+              }
+            }
+          }
+
+          configurable_product_options_selection(configurableOptionValueUids: $configurations) {
+            options_available_for_selection {
+              attribute_code
+              option_value_uids
+            }
+            media_gallery {
+              disabled
+              label
+              position
+              url
+            }
+            variant {
+              uid
+              sku
+              name
+              price_range {
+                ...PriceRangeFields
+              }
+            }
+          }
+        }
+
+        ... on BundleProduct {
+          items {
+            position
+            required
+            sku
+            title
+            type
+            uid
+            options {
+              can_change_quantity
+              is_default
+              position
+              uid
+              quantity
+              product {
+                uid
+                sku
+                name
+                price_range {
+                   ...PriceRangeFields
+                }
+              }
+            }
+          }
+        }
+
+        ... on GroupedProduct {
+          items {
+            position
+            qty
+            product {
+              uid
+              sku
+              name
+              stock_status
+              only_x_left_in_stock
+              price_range {
+                maximum_price {
+                  final_price {
+                    currency
+                    value
+                  }
+                  regular_price {
+                    currency
+                    value
+                  }
+                }
+                minimum_price {
+                  final_price {
+                    currency
+                    value
+                  }
+                  regular_price {
+                    currency
+                    value
+                  }
+                }
+              }
+              thumbnail {
+                url
+                position
+                disabled
+                label
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+  ${fragmentPriceRangeFields}
+`;
diff --git a/components/Checkout/CartPreview.vue b/modules/checkout/components/CartPreview.vue
similarity index 98%
rename from components/Checkout/CartPreview.vue
rename to modules/checkout/components/CartPreview.vue
index 3cf375e..4af40f9 100644
--- a/components/Checkout/CartPreview.vue
+++ b/modules/checkout/components/CartPreview.vue
@@ -56,7 +56,7 @@ import { computed, ref, defineComponent } from '@nuxtjs/composition-api';
 import cartGetters from '~/modules/checkout/getters/cartGetters';
 import useCart from '~/modules/checkout/composables/useCart';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
-import CouponCode from '../CouponCode.vue';
+import CouponCode from '../../../components/CouponCode.vue';
 
 const CHARACTERISTICS = [
   {
diff --git a/modules/checkout/components/UserBillingAddresses.vue b/modules/checkout/components/UserBillingAddresses.vue
new file mode 100644
index 0000000..df98164
--- /dev/null
+++ b/modules/checkout/components/UserBillingAddresses.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <SfAddressPicker
+      :selected="`${currentAddressId}`"
+      class="addresses"
+      @change="emitSetCurrentAddress($event)"
+    >
+      <SfAddress
+        v-for="billingAddress in addressesWithCountryName"
+        :key="userBillingGetters.getId(billingAddress)"
+        :name="`${userBillingGetters.getId(billingAddress)}`"
+        class="address"
+      >
+        <UserAddressDetails :address="billingAddress">
+          <template #country>
+            {{ billingAddress.countryName }}
+          </template>
+        </UserAddressDetails>
+      </SfAddress>
+    </SfAddressPicker>
+    <SfCheckbox
+      :selected="value"
+      name="setAsDefault"
+      label="Use this address as my default one."
+      class="setAsDefault"
+      @change="$emit('input', $event)"
+    />
+    <hr class="sf-divider">
+  </div>
+</template>
+
+<script lang="ts">
+import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
+import { computed, defineComponent } from '@nuxtjs/composition-api';
+import type { PropType } from '@nuxtjs/composition-api';
+import userBillingGetters from '~/modules/customer/getters/userBillingGetters';
+import UserAddressDetails from '~/components/UserAddressDetails.vue';
+import type { Country, CustomerAddress } from '~/modules/GraphQL/types';
+
+export default defineComponent({
+  name: 'UserBillingAddresses',
+  components: {
+    SfCheckbox,
+    SfAddressPicker,
+    UserAddressDetails,
+  },
+  props: {
+    currentAddressId: {
+      type: Number,
+      default: null,
+    },
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    billingAddresses: {
+      type: Array as PropType<CustomerAddress[]>,
+      required: true,
+    },
+    countries: {
+      type: Array as PropType<Country[]>,
+      default: () => [],
+
+    },
+  },
+  emits: ['setCurrentAddress'],
+  setup(props, { emit }) {
+    const emitSetCurrentAddress = (addressId: number) => {
+      const address = props.billingAddresses.find(({ id }) => id === Number(addressId));
+      if (address) {
+        emit('setCurrentAddress', address);
+      }
+    };
+    const addressesWithCountryName = computed(() => props.billingAddresses.map((address) => ({
+      ...address,
+      countryName: props.countries
+        .find(({ id }) => id === address.country_code)
+        ?.full_name_locale
+        ?? address.country_code,
+    })));
+
+    return {
+      emitSetCurrentAddress,
+      addressesWithCountryName,
+      userBillingGetters,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/userAddresses";
+</style>
diff --git a/components/Checkout/UserShippingAddresses.vue b/modules/checkout/components/UserShippingAddresses.vue
similarity index 53%
rename from components/Checkout/UserShippingAddresses.vue
rename to modules/checkout/components/UserShippingAddresses.vue
index b47c921..0a25420 100644
--- a/components/Checkout/UserShippingAddresses.vue
+++ b/modules/checkout/components/UserShippingAddresses.vue
@@ -2,16 +2,20 @@
   <div>
     <SfAddressPicker
       :selected="`${currentAddressId}`"
-      class="shipping__addresses"
-      @change="setCurrentAddress($event)"
+      class="addresses"
+      @change="emitSetCurrentAddress($event)"
     >
       <SfAddress
-        v-for="shippingAddress in shippingAddresses"
+        v-for="shippingAddress in addressesWithCountryName"
         :key="userShippingGetters.getId(shippingAddress)"
-        class="shipping__address"
+        class="address"
         :name="`${userShippingGetters.getId(shippingAddress)}`"
       >
-        <UserAddressDetails :address="shippingAddress" />
+        <UserAddressDetails :address="shippingAddress">
+          <template #country>
+            {{ shippingAddress.countryName }}
+          </template>
+        </UserAddressDetails>
       </SfAddress>
     </SfAddressPicker>
     <SfCheckbox
@@ -19,7 +23,7 @@
       :selected="value"
       name="setAsDefault"
       label="Use this address as my default one."
-      class="shipping__setAsDefault"
+      class="setAsDefault"
       @change="$emit('input', $event)"
     />
     <hr class="sf-divider">
@@ -28,12 +32,13 @@
 
 <script lang="ts">
 import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
-import { defineComponent } from '@nuxtjs/composition-api';
+import { computed, defineComponent } from '@nuxtjs/composition-api';
 import type { PropType } from '@nuxtjs/composition-api';
 
 import userShippingGetters from '~/modules/customer/getters/userShippingGetters';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 import { TransformedCustomerAddress } from '~/modules/customer/composables/types';
+import { Countries } from '~/composables';
 
 export default defineComponent({
   name: 'UserShippingAddresses',
@@ -44,8 +49,8 @@ export default defineComponent({
   },
   props: {
     currentAddressId: {
-      type: [String, Number],
-      required: true,
+      type: Number,
+      default: null,
     },
     value: {
       type: Boolean,
@@ -55,20 +60,31 @@ export default defineComponent({
       type: Array as PropType<TransformedCustomerAddress[]>,
       required: true,
     },
+    countries: {
+      type: Array as PropType<Countries[]>,
+      default: () => [],
+
+    },
   },
   emits: ['setCurrentAddress'],
-  setup({ shippingAddresses }, { emit }) {
-    const setCurrentAddress = (addressId: string | number) => {
-      const selectedAddress = shippingAddresses.find((address) => address.id === Number(addressId));
-      if (!selectedAddress) {
-        return;
+  setup(props, { emit }) {
+    const emitSetCurrentAddress = (addressId: number) => {
+      const address = props.shippingAddresses.find(({ id }) => id === Number(addressId));
+      if (address) {
+        emit('setCurrentAddress', address);
       }
-
-      emit('setCurrentAddress', selectedAddress);
     };
+    const addressesWithCountryName = computed(() => props.shippingAddresses.map((address) => ({
+      ...address,
+      countryName: props.countries
+        .find(({ id }) => id === address.country_code)
+        ?.full_name_locale
+        ?? address.country_code,
+    })));
 
     return {
-      setCurrentAddress,
+      emitSetCurrentAddress,
+      addressesWithCountryName,
       userShippingGetters,
     };
   },
@@ -76,31 +92,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.shipping {
-  &__address {
-    margin-bottom: var(--spacer-base);
-    @include for-desktop {
-      margin-right: var(--spacer-sm);
-      display: flex;
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-
-  &__addresses {
-    margin-bottom: var(--spacer-xl);
-    @include for-desktop {
-      display: flex;
-    }
-  }
-
-  &__setAsDefault {
-    margin-bottom: var(--spacer-xl);
-  }
-}
-
-.sf-divider,
-.form__action-button--margin-bottom {
-  margin-bottom: var(--spacer-xl);
-}
+@import "./styles/userAddresses";
 </style>
diff --git a/components/Checkout/VsfPaymentProvider.vue b/modules/checkout/components/VsfPaymentProvider.vue
similarity index 100%
rename from components/Checkout/VsfPaymentProvider.vue
rename to modules/checkout/components/VsfPaymentProvider.vue
diff --git a/components/Checkout/VsfShippingProvider.vue b/modules/checkout/components/VsfShippingProvider.vue
similarity index 100%
rename from components/Checkout/VsfShippingProvider.vue
rename to modules/checkout/components/VsfShippingProvider.vue
diff --git a/modules/checkout/components/styles/userAddresses.scss b/modules/checkout/components/styles/userAddresses.scss
new file mode 100644
index 0000000..12ee42a
--- /dev/null
+++ b/modules/checkout/components/styles/userAddresses.scss
@@ -0,0 +1,27 @@
+.address {
+  margin-bottom: var(--spacer-base);
+  @include for-desktop {
+    margin-right: var(--spacer-sm);
+    display: flex;
+    width: calc(50% - var(--spacer-sm));
+    flex-direction: column;
+  }
+}
+
+.addresses {
+  margin-bottom: var(--spacer-xl);
+  @include for-desktop {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: var(--spacer-sm)
+  }
+}
+
+.setAsDefault {
+  margin-bottom: var(--spacer-xl);
+}
+
+.sf-divider,
+.form__action-button--margin-bottom {
+  margin-bottom: var(--spacer-xl);
+}
diff --git a/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts b/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts
index 5261258..f536fc1 100644
--- a/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts
+++ b/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts
@@ -2,7 +2,7 @@ import { Logger } from '~/helpers/logger';
 import { BillingCartAddress, Maybe, SetBillingAddressOnCartInput } from '~/modules/GraphQL/types';
 
 export const saveBillingAddressCommand = {
-  execute: async (context, cartId, billingDetails): Promise<Maybe<BillingCartAddress>> => {
+  execute: async (context, cartId, billingDetails, customQuery): Promise<Maybe<BillingCartAddress>> => {
     const {
       apartment,
       neighborhood,
@@ -29,6 +29,7 @@ export const saveBillingAddressCommand = {
 
     const { data } = await context.$vsf.$magento.api.setBillingAddressOnCart(
       setBillingAddressOnCartInput,
+      customQuery,
     );
 
     Logger.debug('[Result]:', { data });
diff --git a/modules/checkout/composables/useBilling/index.ts b/modules/checkout/composables/useBilling/index.ts
index fd69851..a1d8a0e 100644
--- a/modules/checkout/composables/useBilling/index.ts
+++ b/modules/checkout/composables/useBilling/index.ts
@@ -50,13 +50,13 @@ export function useBilling(): UseBillingInterface {
     return billingInfo;
   };
 
-  const save = async ({ billingDetails }: UseBillingSaveParams): Promise<Maybe<BillingCartAddress>> => {
+  const save = async ({ billingDetails, customQuery = null }: UseBillingSaveParams): Promise<Maybe<BillingCartAddress>> => {
     Logger.debug('useBilling.save');
     let billingInfo = null;
 
     try {
       loading.value = true;
-      billingInfo = await saveBillingAddressCommand.execute(context, cart.value.id, billingDetails);
+      billingInfo = await saveBillingAddressCommand.execute(context, cart.value.id, billingDetails, customQuery);
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       /**
diff --git a/modules/checkout/composables/useBilling/useBilling.ts b/modules/checkout/composables/useBilling/useBilling.ts
index 2fed259..d17253b 100644
--- a/modules/checkout/composables/useBilling/useBilling.ts
+++ b/modules/checkout/composables/useBilling/useBilling.ts
@@ -44,9 +44,9 @@ export type UseBillingLoadParams = ComposableFunctionArgs<{}>;
 /**
  * The params object accepted by the `save` method in the {@link useBilling|useBilling()} composable
  */
-export interface UseBillingSaveParams {
+export type UseBillingSaveParams = ComposableFunctionArgs<{
   billingDetails: BillingDetails;
-}
+}>;
 
 /**
  * Data and methods returned from the {@link useBilling|useBilling()} composable
diff --git a/modules/checkout/composables/useCart/commands/addItemCommand.ts b/modules/checkout/composables/useCart/commands/addItemCommand.ts
index 9c69328..92e0c1d 100644
--- a/modules/checkout/composables/useCart/commands/addItemCommand.ts
+++ b/modules/checkout/composables/useCart/commands/addItemCommand.ts
@@ -1,12 +1,10 @@
 import { VsfContext } from '~/composables/context';
 import { Logger } from '~/helpers/logger';
 import {
-  AddConfigurableProductsToCartInput,
-  AddDownloadableProductsToCartInput,
-  AddVirtualProductsToCartInput,
   Cart,
   CartItemInput,
 } from '~/modules/GraphQL/types';
+import { CustomQuery } from '~/types/core';
 
 /** Params object used to add items to a cart */
 export declare type AddProductsToCartInput = {
@@ -21,6 +19,8 @@ export const addItemCommand = {
       product,
       quantity,
       currentCart,
+      productConfiguration,
+      customQuery,
     },
   ) => {
     Logger.debug('[Magento]: Add item to cart', {
@@ -30,7 +30,7 @@ export const addItemCommand = {
     });
 
     const apiState = context.$magento.config.state;
-    const currentCartId = apiState.getCartId();
+    const cartId = apiState.getCartId();
 
     if (!product) {
       return;
@@ -39,7 +39,7 @@ export const addItemCommand = {
     switch (product.__typename) {
       case 'SimpleProduct':
         const simpleCartInput: AddProductsToCartInput = {
-          cartId: currentCartId,
+          cartId,
           cartItems: [
             {
               quantity,
@@ -48,9 +48,13 @@ export const addItemCommand = {
           ],
         };
 
-        const simpleProduct = await context.$magento.api.addProductsToCart(simpleCartInput);
+        const simpleProduct = await context.$magento.api.addProductsToCart(simpleCartInput, customQuery as CustomQuery);
 
-        Logger.debug('[Result]:', { data: simpleProduct });
+        Logger.debug('[Result]:', { data: simpleProduct.data });
+
+        if (simpleProduct.data.addProductsToCart.user_errors.length > 0) {
+          throw new Error(String(simpleProduct.data.addProductsToCart.user_errors[0].message));
+        }
 
         // eslint-disable-next-line consistent-return
         return simpleProduct
@@ -58,29 +62,29 @@ export const addItemCommand = {
           .addProductsToCart
           .cart as unknown as Cart;
       case 'ConfigurableProduct':
-        const cartItems = [
-          {
-            parent_sku: product.sku,
-            data: {
+        const selectedOptions = Object.values(productConfiguration as object);
+
+        const configurableCartInput: AddProductsToCartInput = {
+          cartId,
+          cartItems: [
+            {
               quantity,
-              sku: product.configurable_product_options_selection?.variant?.sku || '',
+              sku: product.sku,
+              selected_options: selectedOptions,
             },
-          },
-        ];
-
-        const configurableCartInput: AddConfigurableProductsToCartInput = {
-          cart_id: currentCartId,
-          cart_items: cartItems,
+          ],
         };
 
-        const configurableProduct = await context.$magento.api.addConfigurableProductsToCart(configurableCartInput);
+        const configurableProduct = await context.$magento.api.addProductsToCart(configurableCartInput, customQuery as CustomQuery);
+        Logger.debug('[Result]:', { data: configurableProduct.data });
 
-        Logger.debug('[Result]:', { data: configurableProduct });
+        if (configurableProduct.data.addProductsToCart.user_errors.length > 0) {
+          throw new Error(String(configurableProduct.data.addProductsToCart.user_errors[0].message));
+        }
 
         // eslint-disable-next-line consistent-return
-        return configurableProduct
-          .data
-          .addConfigurableProductsToCart
+        return configurableProduct.data
+          .addProductsToCart
           .cart as unknown as Cart;
       case 'BundleProduct':
         const createEnteredOptions = () =>
@@ -91,7 +95,7 @@ export const addItemCommand = {
           }));
 
         const bundleCartInput: AddProductsToCartInput = {
-          cartId: currentCartId,
+          cartId,
           cartItems: [
             {
               quantity,
@@ -101,60 +105,65 @@ export const addItemCommand = {
           ],
         };
 
-        const bundleProduct = await context.$magento.api.addProductsToCart(bundleCartInput);
+        const bundleProduct = await context.$magento.api.addProductsToCart(bundleCartInput, customQuery as CustomQuery);
 
         Logger.debug('[Result]:', { data: bundleProduct });
 
+        if (bundleProduct.data.addProductsToCart.user_errors.length > 0) {
+          throw new Error(String(bundleProduct.data.addProductsToCart.user_errors[0].message));
+        }
+
         // eslint-disable-next-line consistent-return
         return bundleProduct
           .data
           .addProductsToCart
           .cart as unknown as Cart;
       case 'DownloadableProduct':
-        const downloadableCartItems = [
-          {
-            data: {
+        const downloadableCartInput: AddProductsToCartInput = {
+          cartId,
+          cartItems: [
+            {
               quantity,
               sku: product.sku,
             },
-            downloadable_product_links: product.downloadable_product_links.map((dpl) => ({ link_id: dpl.id })),
-          },
-        ];
-
-        const downloadableCartInput: AddDownloadableProductsToCartInput = {
-          cart_id: currentCartId,
-          cart_items: downloadableCartItems,
+          ],
         };
 
-        const downloadableProduct = await context.$magento.api.addDownloadableProductsToCart(downloadableCartInput);
+        const downloadableProduct = await context.$magento.api.addProductsToCart(downloadableCartInput, customQuery as CustomQuery);
 
         Logger.debug('[Result DownloadableProduct]:', { data: downloadableProduct });
 
+        if (downloadableProduct.data.addProductsToCart.user_errors.length > 0) {
+          throw new Error(String(downloadableProduct.data.addProductsToCart.user_errors[0].message));
+        }
+
         // eslint-disable-next-line consistent-return
         return downloadableProduct
           .data
-          .addDownloadableProductsToCart
+          .addProductsToCart
           .cart as unknown as Cart;
       case 'VirtualProduct':
-        const virtualCartInput: AddVirtualProductsToCartInput = {
-          cart_id: currentCartId,
-          cart_items: [
+        const virtualCartInput: AddProductsToCartInput = {
+          cartId,
+          cartItems: [
             {
-              data: {
-                quantity,
-                sku: product.sku,
-              },
+              quantity,
+              sku: product.sku,
             },
           ],
         };
-        const virtualProduct = await context.$magento.api.addVirtualProductsToCart(virtualCartInput);
+        const virtualProduct = await context.$magento.api.addProductsToCart(virtualCartInput, customQuery as CustomQuery);
 
         Logger.debug('[Result VirtualProduct]:', { data: virtualProduct });
 
+        if (downloadableProduct.data.addProductsToCart.user_errors.length > 0) {
+          throw new Error(String(downloadableProduct.data.addProductsToCart.user_errors[0].message));
+        }
+
         // eslint-disable-next-line consistent-return
         return virtualProduct
           .data
-          .addVirtualProductsToCart
+          .addProductsToCart
           .cart as unknown as Cart;
       default:
         // eslint-disable-next-line no-underscore-dangle
diff --git a/modules/checkout/composables/useCart/commands/clearCartCommand.ts b/modules/checkout/composables/useCart/commands/clearCartCommand.ts
deleted file mode 100644
index 5360c27..0000000
--- a/modules/checkout/composables/useCart/commands/clearCartCommand.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { VsfContext } from '~/composables/context';
-
-export const clearCartCommand = {
-  execute: (context: VsfContext) => {
-    context.$magento.config.state.setCartId(null);
-  },
-};
diff --git a/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts b/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts
index cb56872..2a02c90 100644
--- a/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts
+++ b/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts
@@ -1,13 +1,14 @@
 import { Logger } from '~/helpers/logger';
 import { VsfContext } from '~/composables/context';
+import { ComposableFunctionArgs } from '~/composables';
 
 export const loadTotalQtyCommand = {
-  execute: async (context: VsfContext) => {
+  execute: async (context: VsfContext, params?: ComposableFunctionArgs<{}>) => {
     Logger.debug('[Magento]: Load cart total qty');
 
     const apiState = context.$magento.config.state;
     if (apiState.getCartId()) {
-      const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
+      const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId(), params?.customQuery ?? null);
 
       return data?.cart?.total_quantity ?? 0;
     }
diff --git a/modules/checkout/composables/useCart/commands/removeItemCommand.ts b/modules/checkout/composables/useCart/commands/removeItemCommand.ts
index 3801176..5f56694 100644
--- a/modules/checkout/composables/useCart/commands/removeItemCommand.ts
+++ b/modules/checkout/composables/useCart/commands/removeItemCommand.ts
@@ -1,11 +1,12 @@
 import { Logger } from '~/helpers/logger';
 import { Cart, RemoveItemFromCartInput } from '~/modules/GraphQL/types';
 import { VsfContext } from '~/composables/context';
+import { CustomQuery } from '~/types/core';
 
 export const removeItemCommand = {
   execute: async (
     context: VsfContext,
-    { currentCart, product },
+    { currentCart, product, customQuery },
   ) => {
     Logger.debug('[Magento]: Remove item from cart', {
       product,
@@ -23,7 +24,7 @@ export const removeItemCommand = {
       cart_item_uid: item.uid,
     };
 
-    const { data } = await context.$magento.api.removeItemFromCart(removeItemParams);
+    const { data } = await context.$magento.api.removeItemFromCart(removeItemParams, customQuery as CustomQuery);
 
     Logger.debug('[Result]:', { data });
 
diff --git a/modules/checkout/composables/useCart/index.ts b/modules/checkout/composables/useCart/index.ts
index e7c16ee..c573572 100644
--- a/modules/checkout/composables/useCart/index.ts
+++ b/modules/checkout/composables/useCart/index.ts
@@ -3,7 +3,6 @@ import {
 } from '@nuxtjs/composition-api';
 import { addItemCommand } from '~/modules/checkout/composables/useCart/commands/addItemCommand';
 import { applyCouponCommand } from '~/modules/checkout/composables/useCart/commands/applyCouponCommand';
-import { clearCartCommand } from '~/modules/checkout/composables/useCart/commands/clearCartCommand';
 import { loadCartCommand } from '~/modules/checkout/composables/useCart/commands/loadCartCommand';
 import { loadTotalQtyCommand } from '~/modules/checkout/composables/useCart/commands/loadTotalQtyCommand';
 import { removeCouponCommand } from '~/modules/checkout/composables/useCart/commands/removeCouponCommand';
@@ -13,8 +12,9 @@ import { Logger } from '~/helpers/logger';
 import { Cart, CartItemInterface, ProductInterface } from '~/modules/GraphQL/types';
 import { useCartStore } from '~/modules/checkout/stores/cart';
 import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
-import { UseCartErrors, UseCartInterface } from './useCart';
 import { Product } from '~/modules/catalog/product/types';
+import { ComposableFunctionArgs } from '~/composables';
+import { UseCartErrors, UseCartInterface } from './useCart';
 
 /**
  * Allows loading and manipulating cart of the current user.
@@ -90,7 +90,7 @@ PRODUCT
 
     try {
       loading.value = true;
-      clearCartCommand.execute(context);
+      context.$magento.config.state.removeCartId();
       const loadedCart = await loadCartCommand.execute(context, { customQuery });
 
       cartStore.$patch((state) => {
@@ -104,12 +104,12 @@ PRODUCT
     }
   };
 
-  const loadTotalQty = async (): Promise<void> => {
+  const loadTotalQty = async (params?: ComposableFunctionArgs<{}>): Promise<void> => {
     Logger.debug('useCart.loadTotalQty');
 
     try {
       loading.value = true;
-      const totalQuantity = await loadTotalQtyCommand.execute(context);
+      const totalQuantity = await loadTotalQtyCommand.execute(context, params);
 
       cartStore.$patch((state) => {
         state.cart.total_quantity = totalQuantity;
@@ -122,7 +122,9 @@ PRODUCT
     }
   };
 
-  const addItem = async ({ product, quantity }): Promise<void> => {
+  const addItem = async ({
+    product, quantity, productConfiguration, customQuery,
+  }): Promise<void> => {
     Logger.debug('useCart.addItem', { product, quantity });
 
     try {
@@ -136,7 +138,10 @@ PRODUCT
         currentCart: cart.value,
         product,
         quantity,
+        productConfiguration,
+        customQuery,
       });
+
       error.value.addItem = null;
       cartStore.$patch((state) => {
         state.cart = updatedCart;
@@ -155,7 +160,7 @@ PRODUCT
     }
   };
 
-  const removeItem = async ({ product }) => {
+  const removeItem = async ({ product, customQuery }) => {
     Logger.debug('useCart.removeItem', { product });
 
     try {
@@ -163,6 +168,7 @@ PRODUCT
       const updatedCart = await removeItemCommand.execute(context, {
         currentCart: cart.value,
         product,
+        customQuery,
       });
 
       error.value.removeItem = null;
diff --git a/modules/checkout/composables/useCart/useCart.ts b/modules/checkout/composables/useCart/useCart.ts
index 96073ff..8cd34e6 100644
--- a/modules/checkout/composables/useCart/useCart.ts
+++ b/modules/checkout/composables/useCart/useCart.ts
@@ -8,6 +8,7 @@ import { Product } from '~/modules/catalog/product/types';
 export type UseCartAddItemParams<PRODUCT> = ComposableFunctionArgs<{
   product: PRODUCT;
   quantity: number;
+  productConfiguration?: { [key: string]: string };
 }>;
 
 /**
diff --git a/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts b/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts
index 30f32b2..a2ffa58 100644
--- a/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts
+++ b/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts
@@ -1,9 +1,12 @@
 import { AvailableShippingMethod } from '~/modules/GraphQL/types';
 import { VsfContext } from '~/composables/context';
+import { ComposableFunctionArgs } from '~/composables';
 
 export const getCustomerShippingMethodsCommand = {
-  execute: async (context: VsfContext): Promise<AvailableShippingMethod[]> => {
-    const { data: { customerCart: { shipping_addresses: shippingAddresses } } } = await context.$magento.api.getAvailableCustomerShippingMethods();
+  execute: async (context: VsfContext, params: ComposableFunctionArgs<{}>): Promise<AvailableShippingMethod[]> => {
+    const {
+      data: { customerCart: { shipping_addresses: shippingAddresses } },
+    } = await context.$magento.api.getAvailableCustomerShippingMethods(params?.customQuery ?? null);
     return shippingAddresses[0]?.available_shipping_methods ?? [];
   },
 };
diff --git a/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts b/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts
index 531158c..2212e2b 100644
--- a/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts
+++ b/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts
@@ -4,7 +4,7 @@ import { AvailableShippingMethod } from '~/modules/GraphQL/types';
 
 export const getGuestShippingMethodsCommand = {
   execute: async (context: Context['app'], params: ComposableFunctionArgs<{ cartId: string }>): Promise<AvailableShippingMethod[]> => {
-    const { data } = await context.$vsf.$magento.api.getAvailableShippingMethods({ cartId: params.cartId });
+    const { data } = await context.$vsf.$magento.api.getAvailableShippingMethods({ cartId: params.cartId }, params?.customQuery ?? null);
     const hasAddresses = data.cart.shipping_addresses.length > 0;
 
     return hasAddresses ? data?.cart?.shipping_addresses[0]?.available_shipping_methods : [];
diff --git a/modules/checkout/composables/useGetShippingMethods/index.ts b/modules/checkout/composables/useGetShippingMethods/index.ts
index aa67991..545900c 100644
--- a/modules/checkout/composables/useGetShippingMethods/index.ts
+++ b/modules/checkout/composables/useGetShippingMethods/index.ts
@@ -30,7 +30,7 @@ export function useGetShippingMethods(): UseGetShippingMethodsInterface<Availabl
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         ? getGuestShippingMethodsCommand.execute(context, params)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        : getCustomerShippingMethodsCommand.execute(context)
+        : getCustomerShippingMethodsCommand.execute(context, params)
       );
 
       Logger.debug('[Result]:', { result });
diff --git a/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts b/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts
index 23e9c9d..63a505a 100644
--- a/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts
+++ b/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts
@@ -1,9 +1,10 @@
 import { UseContextReturn } from '~/types/core';
 import type { PlaceOrderOutput } from '~/modules/GraphQL/types';
+import { ComposableFunctionArgs } from '~/composables';
 
 export const placeOrderCommand = {
-  execute: async (context: UseContextReturn, cartId: string): Promise<PlaceOrderOutput | null> => {
-    const { data } = await context.app.$vsf.$magento.api.placeOrder({ cart_id: cartId });
+  execute: async (context: UseContextReturn, cartId: string, params?: ComposableFunctionArgs<{}>): Promise<PlaceOrderOutput | null> => {
+    const { data } = await context.app.$vsf.$magento.api.placeOrder({ cart_id: cartId }, params?.customQuery ?? null);
 
     return data?.placeOrder ?? null;
   },
diff --git a/modules/checkout/composables/useMakeOrder/index.ts b/modules/checkout/composables/useMakeOrder/index.ts
index 687cc05..3ec8b7a 100644
--- a/modules/checkout/composables/useMakeOrder/index.ts
+++ b/modules/checkout/composables/useMakeOrder/index.ts
@@ -4,6 +4,7 @@ import { placeOrderCommand } from '~/modules/checkout/composables/useMakeOrder/c
 import useCart from '~/modules/checkout/composables/useCart';
 import type { PlaceOrderOutput } from '~/modules/GraphQL/types';
 import type { UseMakeOrderErrors, UseMakeOrderInterface } from './useMakeOrder';
+import { ComposableFunctionArgs } from '~/composables';
 
 /**
  * Allows making an order from a cart.
@@ -16,12 +17,12 @@ export function useMakeOrder(): UseMakeOrderInterface {
   const { cart } = useCart();
   const context = useContext();
 
-  const make = async (): Promise<PlaceOrderOutput | null> => {
+  const make = async (params?: ComposableFunctionArgs<{}>): Promise<PlaceOrderOutput | null> => {
     Logger.debug('useMakeOrder.make');
     let placedOrder = null;
     try {
       loading.value = true;
-      placedOrder = await placeOrderCommand.execute(context, cart.value.id);
+      placedOrder = await placeOrderCommand.execute(context, cart.value.id, params?.customQuery ?? null);
       error.value.make = null;
     } catch (err) {
       error.value.make = err;
diff --git a/modules/checkout/composables/useMakeOrder/useMakeOrder.ts b/modules/checkout/composables/useMakeOrder/useMakeOrder.ts
index 32ff0dd..b2812fc 100644
--- a/modules/checkout/composables/useMakeOrder/useMakeOrder.ts
+++ b/modules/checkout/composables/useMakeOrder/useMakeOrder.ts
@@ -1,5 +1,6 @@
 import type { Ref } from '@nuxtjs/composition-api';
 import type { PlaceOrderOutput } from '~/modules/GraphQL/types';
+import { ComposableFunctionArgs } from '~/composables';
 
 /**
  * The {@link useMakeOrder} error object. The properties values' are the errors
@@ -15,7 +16,7 @@ export interface UseMakeOrderErrors {
  */
 export interface UseMakeOrderInterface {
   /** Makes an order with current cart. */
-  make(): Promise<PlaceOrderOutput | null>;
+  make(params?: ComposableFunctionArgs<{}>): Promise<PlaceOrderOutput | null>;
 
   /**
    * Contains errors from any of the composable methods.
diff --git a/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts b/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts
index db6714b..fb46c47 100644
--- a/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts
+++ b/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts
@@ -1,9 +1,9 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
 import type { AvailablePaymentMethod } from '~/modules/GraphQL/types';
 
 export const getAvailablePaymentMethodsCommand = {
-  execute: async (context: UseContextReturn, cartId: string): Promise<AvailablePaymentMethod[]> => {
-    const { data } = await context.app.$vsf.$magento.api.getAvailablePaymentMethods({ cartId });
+  execute: async (context: UseContextReturn, cartId: string, customQuery?: CustomQuery): Promise<AvailablePaymentMethod[]> => {
+    const { data } = await context.app.$vsf.$magento.api.getAvailablePaymentMethods({ cartId }, customQuery);
 
     return data?.cart?.available_payment_methods ?? [];
   },
diff --git a/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts b/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts
index 09fa903..b3c0e45 100644
--- a/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts
+++ b/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts
@@ -4,7 +4,7 @@ import type { PaymentMethodParams } from '../usePaymentProvider';
 
 export const setPaymentMethodOnCartCommand = {
   execute: async (context: UseContextReturn, params: PaymentMethodParams): Promise<AvailablePaymentMethod[]> => {
-    const { data } = await context.app.$vsf.$magento.api.setPaymentMethodOnCart(params);
+    const { data } = await context.app.$vsf.$magento.api.setPaymentMethodOnCart(params, params?.customQuery ?? null);
 
     return data?.setPaymentMethodOnCart?.cart.available_payment_methods ?? [];
   },
diff --git a/modules/checkout/composables/usePaymentProvider/index.ts b/modules/checkout/composables/usePaymentProvider/index.ts
index f554dc8..1e5a184 100644
--- a/modules/checkout/composables/usePaymentProvider/index.ts
+++ b/modules/checkout/composables/usePaymentProvider/index.ts
@@ -10,6 +10,7 @@ import type {
   UsePaymentProviderSaveParams,
   PaymentMethodParams,
 } from './usePaymentProvider';
+import { CustomQuery } from '~/types/core';
 
 /**
  * Allows loading the available payment
@@ -37,6 +38,7 @@ export function usePaymentProvider(): UsePaymentProviderInterface {
         payment_method: {
           ...params.paymentMethod,
         },
+        customQuery: params.customQuery,
       };
 
       result = await setPaymentMethodOnCartCommand.execute(context, paymentMethodParams);
@@ -52,13 +54,13 @@ export function usePaymentProvider(): UsePaymentProviderInterface {
     return result;
   };
 
-  const load = async () => {
+  const load = async (customQuery?: CustomQuery) => {
     Logger.debug('usePaymentProvider.load');
     let result = null;
 
     try {
       loading.value = true;
-      result = await getAvailablePaymentMethodsCommand.execute(context, cart.value.id);
+      result = await getAvailablePaymentMethodsCommand.execute(context, cart.value.id, customQuery);
       error.value.load = null;
     } catch (err) {
       error.value.load = err;
diff --git a/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts b/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts
index 6dd9720..1987a8f 100644
--- a/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts
+++ b/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts
@@ -1,11 +1,12 @@
 import type { Ref } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
 import type { AvailablePaymentMethod, PaymentMethodInput } from '~/modules/GraphQL/types';
+import { CustomQuery } from '~/types/core';
 
-export interface PaymentMethodParams {
+export type PaymentMethodParams = ComposableFunctionArgs<{
   cart_id: string;
   payment_method: PaymentMethodInput;
-}
+}>;
 
 /**
  * The {@link usePaymentProvider} error object. The properties values' are the
@@ -39,7 +40,7 @@ export interface UsePaymentProviderInterface {
   error: Readonly<Ref<UsePaymentProviderErrors>>;
 
   /** Loads the available payment methods for current cart. */
-  load(): Promise<AvailablePaymentMethod[] | null>;
+  load(customQuery?: CustomQuery): Promise<AvailablePaymentMethod[] | null>;
 
   /**
    * Saves the payment method for current cart. It returns the updated available
diff --git a/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts b/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts
index c4c6527..471b539 100644
--- a/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts
+++ b/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts
@@ -1,9 +1,9 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
 import type { SetShippingMethodsOnCartInput, Cart } from '~/modules/GraphQL/types';
 
 export const setShippingMethodsOnCartCommand = {
-  execute: async (context: UseContextReturn, shippingMethodParams: SetShippingMethodsOnCartInput): Promise<Cart | null> => {
-    const { data } = await context.app.$vsf.$magento.api.setShippingMethodsOnCart(shippingMethodParams);
+  execute: async (context: UseContextReturn, shippingMethodParams: SetShippingMethodsOnCartInput, customQuery: CustomQuery): Promise<Cart | null> => {
+    const { data } = await context.app.$vsf.$magento.api.setShippingMethodsOnCart(shippingMethodParams, customQuery);
 
     // TODO: Find out why 'Cart' doesn't match the type of the response data.
     return (data?.setShippingMethodsOnCart?.cart as unknown as Cart) ?? null;
diff --git a/modules/checkout/composables/useShippingProvider/index.ts b/modules/checkout/composables/useShippingProvider/index.ts
index 628113a..80e7932 100644
--- a/modules/checkout/composables/useShippingProvider/index.ts
+++ b/modules/checkout/composables/useShippingProvider/index.ts
@@ -26,7 +26,7 @@ export function useShippingProvider(): UseShippingProviderInterface {
   const { cart, setCart, load: loadCart } = useCart();
   const context = useContext();
 
-  const save = async ({ shippingMethod }: UseShippingProviderSaveParams) => {
+  const save = async ({ shippingMethod, customQuery = null }: UseShippingProviderSaveParams) => {
     Logger.debug('useShippingProvider.save');
     let result = null;
     try {
@@ -37,7 +37,7 @@ export function useShippingProvider(): UseShippingProviderInterface {
         shipping_methods: [shippingMethod],
       };
 
-      const cartData = await setShippingMethodsOnCartCommand.execute(context, shippingMethodParams);
+      const cartData = await setShippingMethodsOnCartCommand.execute(context, shippingMethodParams, customQuery);
       Logger.debug('[Result]:', { cartData });
 
       setCart(cartData);
diff --git a/modules/checkout/getters/cartGetters.ts b/modules/checkout/getters/cartGetters.ts
index 0b03027..8819800 100644
--- a/modules/checkout/getters/cartGetters.ts
+++ b/modules/checkout/getters/cartGetters.ts
@@ -5,12 +5,12 @@ import type { Price } from '~/modules/catalog/types';
 import type { ProductAttribute, Product } from '~/modules/catalog/product/types';
 import { PaymentMethodInterface } from '~/modules/checkout/types';
 import {
-  CartItemInterface,
   Cart,
   Discount,
   ProductInterface,
   SelectedShippingMethod,
   ConfigurableCartItem,
+  CartItemInterface,
 } from '~/modules/GraphQL/types';
 import { CartGetters as CartGettersBase, CartDiscount, Coupon } from '~/getters/types';
 import { getName, getSlug as getSlugGetter, getProductThumbnailImage } from '~/modules/catalog/product/getters/productGetters';
diff --git a/modules/checkout/pages/Checkout.vue b/modules/checkout/pages/Checkout.vue
index 5b14e5b..4c2000d 100644
--- a/modules/checkout/pages/Checkout.vue
+++ b/modules/checkout/pages/Checkout.vue
@@ -44,7 +44,7 @@ import {
 } from '@nuxtjs/composition-api';
 import cartGetters from '~/modules/checkout/getters/cartGetters';
 import useCart from '~/modules/checkout/composables/useCart';
-import CartPreview from '~/components/Checkout/CartPreview.vue';
+import CartPreview from '~/modules/checkout/components/CartPreview.vue';
 
 export default defineComponent({
   name: 'CheckoutPage',
diff --git a/modules/checkout/pages/Checkout/Billing.vue b/modules/checkout/pages/Checkout/Billing.vue
index 98d3626..0135227 100644
--- a/modules/checkout/pages/Checkout/Billing.vue
+++ b/modules/checkout/pages/Checkout/Billing.vue
@@ -13,7 +13,7 @@
         :label="$t('My billing and shipping address are the same')"
         name="copyShippingAddress"
         class="form__element"
-        @change="handleCheckSameAddress"
+        @change="handleCheckSameAddress($event)"
       />
       <div
         v-if="sameAsShipping"
@@ -26,7 +26,11 @@
                 ...billingDetails,
                 region: { region_code: billingDetails.region },
               }"
-            />
+            >
+              <template #country>
+                {{ shippingDetailsCountryName }}
+              </template>
+            </UserAddressDetails>
           </div>
         </div>
       </div>
@@ -34,12 +38,13 @@
         v-if="!sameAsShipping && isAuthenticated && hasSavedBillingAddress"
         v-model="setAsDefault"
         v-e2e="'billing-addresses'"
-        :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
+        :current-address-id="currentAddressId"
         :billing-addresses="addresses"
-        @setCurrentAddress="handleSetCurrentAddress"
+        :countries="countries"
+        @setCurrentAddress="handleSetCurrentAddress($event)"
       />
       <div
-        v-if="!sameAsShipping && canAddNewAddress"
+        v-if="!sameAsShipping && isAddNewAddressFormVisible"
         class="form"
       >
         <ValidationProvider
@@ -57,7 +62,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(firstname) => changeBillingDetails('firstname', firstname)"
+            @input="changeBillingDetails('firstname', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -75,7 +80,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(lastname) => changeBillingDetails('lastname', lastname)"
+            @input="changeBillingDetails('lastname', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -93,7 +98,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(street) => changeBillingDetails('street', street)"
+            @input="changeBillingDetails('street', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -111,7 +116,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(apartment) => changeBillingDetails('apartment', apartment)"
+            @input="changeBillingDetails('apartment', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -129,7 +134,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(city) => changeBillingDetails('city', city)"
+            @input="changeBillingDetails('city', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -151,7 +156,7 @@
             :disabled="!billingDetails.country_code"
             name="state"
             class="form__element form__element--half form__element--half-even"
-            @input="(region) => changeBillingDetails('region', region)"
+            @input="changeBillingDetails('region', $event)"
           />
           <SfSelect
             v-else
@@ -163,8 +168,9 @@
             :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="changeBillingDetails('region', $event)"
           >
+            <SfSelectOption :value="''" />
             <SfSelectOption
               v-for="regionOption in regionInformation"
               :key="regionOption.id"
@@ -191,6 +197,7 @@
             :error-message="$t(errors[0])"
             @input="changeCountry"
           >
+            <SfSelectOption :value="''" />
             <SfSelectOption
               v-for="countryOption in countriesList"
               :key="countryOption.id"
@@ -215,13 +222,13 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(postcode) => changeBillingDetails('postcode', postcode)"
+            @input="changeBillingDetails('postcode', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
           v-slot="{ errors }"
           name="telephone"
-          rules="required"
+          rules="required|min:8"
           slim
         >
           <SfInput
@@ -233,12 +240,12 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(telephone) => changeBillingDetails('telephone', telephone)"
+            @input="changeBillingDetails('telephone', $event)"
           />
         </ValidationProvider>
       </div>
       <SfButton
-        v-if="!sameAsShipping && !canAddNewAddress"
+        v-if="!sameAsShipping && !isAddNewAddressFormVisible"
         class="color-light form__action-button form__action-button--add-address"
         type="submit"
         @click="handleAddNewAddressBtnClick"
@@ -281,16 +288,14 @@ import {
   ref,
   computed,
   onMounted,
-  watch,
   useRouter,
   defineComponent,
   useContext,
 } from '@nuxtjs/composition-api';
 import userBillingGetters from '~/modules/customer/getters/userBillingGetters';
 import addressGetter from '~/modules/customer/getters/addressGetter';
-import {
-  useCountrySearch,
-} from '~/composables';
+import { useCountrySearch } from '~/composables';
+
 import useShipping from '~/modules/checkout/composables/useShipping';
 import useBilling from '~/modules/checkout/composables/useBilling';
 import { useUser } from '~/modules/customer/composables/useUser';
@@ -299,6 +304,7 @@ import UserAddressDetails from '~/components/UserAddressDetails.vue';
 import {
   addressFromApiToForm,
   CheckoutAddressForm,
+  findUserAddressIdenticalToSavedCartAddress,
   formatAddressReturnToData,
   getInitialCheckoutAddressForm,
 } from '~/helpers/checkout/address';
@@ -306,11 +312,9 @@ import { mergeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
 import type {
-  ShippingCartAddress, BillingCartAddress, Country, Customer, CustomerAddress,
+  ShippingCartAddress, Country, Customer, CustomerAddress,
 } from '~/modules/GraphQL/types';
 
-const NOT_SELECTED_ADDRESS = '';
-
 extend('required', {
   ...required,
   message: 'This field is required',
@@ -334,14 +338,13 @@ export default defineComponent({
     SfCheckbox,
     ValidationProvider,
     ValidationObserver,
-    UserBillingAddresses: () => import('~/components/Checkout/UserBillingAddresses.vue'),
+    UserBillingAddresses: () => import('~/modules/checkout/components/UserBillingAddresses.vue'),
     UserAddressDetails,
   },
   setup() {
     const router = useRouter();
     const { app } = useContext();
     const shippingDetails = ref<ShippingCartAddress | null>(null);
-    const billingAddress = ref<BillingCartAddress | null>(null);
     const userBilling = ref<Customer | null>(null);
 
     const {
@@ -361,24 +364,25 @@ export default defineComponent({
 
     const countries = ref<Country[]>([]);
     const country = ref<Country | null>(null);
+
+    const shippingDetailsCountryName = computed(() => countries
+      .value
+      .find((countryItem) => countryItem.id === shippingDetails.value?.country.code)?.full_name_locale ?? '');
+
     const { isAuthenticated } = useUser();
     let oldBilling : CheckoutAddressForm | null = null;
     const sameAsShipping = ref(false);
-    const billingDetails = ref<CheckoutAddressForm>(
-      billingAddress.value
-        ? addressFromApiToForm(billingAddress.value)
-        : getInitialCheckoutAddressForm(),
-    );
-    const currentAddressId = ref(NOT_SELECTED_ADDRESS);
+    const billingDetails = ref<CheckoutAddressForm>(getInitialCheckoutAddressForm());
+
+    const currentAddressId = ref<number | null>(null);
     const setAsDefault = ref(false);
     const isFormSubmitted = ref(false);
-    const canAddNewAddress = ref(true);
+    const isAddNewAddressFormVisible = ref(true);
 
     const isBillingDetailsStepCompleted = ref(false);
     const addresses = computed(() => (userBilling.value ? userBillingGetters.getAddresses(userBilling.value) : []));
 
     const canMoveForward = computed(() => !loading.value && billingDetails.value && Object.keys(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       billingDetails.value,
     ).length > 0);
 
@@ -389,7 +393,6 @@ export default defineComponent({
       return addresses.value.length > 0;
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const countriesList = computed(() => addressGetter.countriesList(countries.value));
     const regionInformation = computed(() => addressGetter.regionList(country.value));
 
@@ -398,12 +401,12 @@ export default defineComponent({
       const billingDetailsData = {
         billingDetails: {
           ...billingDetails.value,
-          customerAddressId: addressId,
+          customerAddressId: addressId === null ? null : String(addressId),
           sameAsShipping: sameAsShipping.value,
         },
       };
       await save(billingDetailsData);
-      if (addressId !== NOT_SELECTED_ADDRESS && setAsDefault.value) {
+      if (addressId !== null && setAsDefault.value) {
         const [chosenAddress] = userBillingGetters.getAddresses(
           userBilling.value,
           { id: addressId },
@@ -416,20 +419,20 @@ export default defineComponent({
       }
       reset();
       await mergeItem('checkout', { billing: billingDetailsData });
-      await router.push(`${app.localePath('/checkout/payment')}`);
+      await router.push(app.localeRoute({ name: 'payment' }));
       isBillingDetailsStepCompleted.value = true;
     };
 
-    const handleCheckSameAddress = async () => {
-      sameAsShipping.value = !sameAsShipping.value;
-      if (sameAsShipping.value) {
+    const handleCheckSameAddress = async (value: boolean) => {
+      sameAsShipping.value = value;
+      if (value) {
         shippingDetails.value = await loadShipping();
-        country.value = await searchCountry({ id: (shippingDetails.value as ShippingCartAddress).country.code });
+        country.value = await searchCountry({ id: (shippingDetails.value).country.code });
         oldBilling = { ...billingDetails.value };
         billingDetails.value = {
           ...formatAddressReturnToData(shippingDetails.value),
         };
-        currentAddressId.value = NOT_SELECTED_ADDRESS;
+        currentAddressId.value = null;
         setAsDefault.value = false;
         if (billingDetails.value.country_code) {
           country.value = await searchCountry({ id: billingDetails?.value.country_code });
@@ -443,85 +446,74 @@ export default defineComponent({
     };
 
     const handleAddNewAddressBtnClick = () => {
-      currentAddressId.value = NOT_SELECTED_ADDRESS;
+      currentAddressId.value = null;
       billingDetails.value = getInitialCheckoutAddressForm();
-      canAddNewAddress.value = true;
+      isAddNewAddressFormVisible.value = true;
       isBillingDetailsStepCompleted.value = false;
     };
 
-    const handleSetCurrentAddress = (addr: CustomerAddress) => {
-      billingDetails.value = { ...addressFromApiToForm(addr) };
-      currentAddressId.value = String(addr?.id);
-      canAddNewAddress.value = false;
+    const handleSetCurrentAddress = async (customerAddress: CustomerAddress) => {
+      const id = customerAddress?.id;
+      currentAddressId.value = id;
+      if (id) {
+        isAddNewAddressFormVisible.value = false;
+      }
+      billingDetails.value = addressFromApiToForm(customerAddress);
+      country.value = customerAddress.country_code ? await searchCountry({ id: customerAddress.country_code }) : null;
       isBillingDetailsStepCompleted.value = false;
     };
 
-    const changeBillingDetails = (field: string, value: unknown) => {
-      billingDetails.value = {
-        ...billingDetails.value,
-        [field]: value,
-      };
+    const changeBillingDetails = (field: keyof CheckoutAddressForm, value: string) => {
+      billingDetails.value[field] = value;
+      currentAddressId.value = null;
       isBillingDetailsStepCompleted.value = false;
-      currentAddressId.value = NOT_SELECTED_ADDRESS;
-    };
-
-    const selectDefaultAddress = () => {
-      const defaultAddress = userBillingGetters.getAddresses(
-        userBilling.value,
-        { default_billing: true },
-      );
-      if (defaultAddress && defaultAddress.length > 0) {
-        handleSetCurrentAddress(defaultAddress[0]);
-      }
     };
 
     const changeCountry = async (id: string) => {
       changeBillingDetails('country_code', id);
-      country.value = await searchCountry({ id });
+      const newCountry = await searchCountry({ id });
+      billingDetails.value.region = '';
+      country.value = newCountry;
     };
 
-    watch(billingAddress, (addr) => {
-      billingDetails.value = addr ? addressFromApiToForm(addr) : getInitialCheckoutAddressForm();
-    });
-
     onMounted(async () => {
-      const validStep = await isPreviousStepValid('shipping');
+      const validStep = await isPreviousStepValid('user-account');
       if (!validStep) {
-        await router.push(app.localePath('/checkout/user-account'));
+        await router.push(app.localeRoute({ name: 'user-account' }));
       }
+      const [loadedBillingInfoBoundToCart, loadedUserBilling, loadedCountries] = await Promise.all([
+        loadBilling(),
+        loadUserBilling(),
+        loadCountries(),
+      ]);
+      const [defaultAddress = null] = userBillingGetters.getAddresses(loadedUserBilling, { default_shipping: true });
+      const wasBillingAddressAlreadySetOnCart = Boolean(loadedBillingInfoBoundToCart);
+
+      // keep in mind default billing address is set on a customer's cart during cart creation
+      if (wasBillingAddressAlreadySetOnCart) {
+        const userAddressIdenticalToSavedCartAddress = findUserAddressIdenticalToSavedCartAddress(
+          loadedUserBilling?.addresses,
+          loadedBillingInfoBoundToCart,
+        );
 
-      const [loadedCountries, loadedBilling] = await Promise.all([loadCountries(), loadBilling()]);
-      countries.value = loadedCountries;
-      billingAddress.value = loadedBilling;
-
+        handleSetCurrentAddress({ ...loadedBillingInfoBoundToCart, id: userAddressIdenticalToSavedCartAddress?.id });
+      } else if (defaultAddress) {
+        handleSetCurrentAddress(defaultAddress);
+      }
       if (billingDetails.value?.country_code) {
         country.value = await searchCountry({ id: billingDetails.value.country_code });
       }
-
-      if (!(userBilling.value as Customer)?.addresses && isAuthenticated.value) {
-        userBilling.value = await loadUserBilling();
-      }
-      const billingAddresses = userBilling.value ? userBillingGetters.getAddresses(userBilling.value) : [];
-
-      if (!billingAddresses || billingAddresses.length === 0) {
-        return;
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      const hasEmptyBillingDetails = !billingDetails.value || Object.keys(billingDetails.value).length === 0;
-      if (hasEmptyBillingDetails) {
-        selectDefaultAddress();
-        return;
-      }
-      canAddNewAddress.value = false;
+      userBilling.value = loadedUserBilling;
+      countries.value = loadedCountries;
     });
 
     return {
-      canAddNewAddress,
+      isAddNewAddressFormVisible,
       canMoveForward,
       changeCountry,
       changeBillingDetails,
       countriesList,
+      countries,
       country,
       currentAddressId,
       handleAddNewAddressBtnClick,
@@ -533,12 +525,12 @@ export default defineComponent({
       isFormSubmitted,
       isBillingDetailsStepCompleted,
       loading,
-      NOT_SELECTED_ADDRESS,
       regionInformation,
       searchCountry,
       setAsDefault,
       billingDetails,
       sameAsShipping,
+      shippingDetailsCountryName,
       addresses,
     };
   },
diff --git a/modules/checkout/pages/Checkout/Payment.vue b/modules/checkout/pages/Checkout/Payment.vue
index fe7da42..6bb896f 100644
--- a/modules/checkout/pages/Checkout/Payment.vue
+++ b/modules/checkout/pages/Checkout/Payment.vue
@@ -68,10 +68,7 @@
         <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(getRowTotal(product)) "
             class="product-price"
           />
         </SfTableData>
@@ -178,6 +175,7 @@ import {
   useContext,
   onMounted,
 } from '@nuxtjs/composition-api';
+
 import cartGetters from '~/modules/checkout/getters/cartGetters';
 import { useImage } from '~/composables';
 import useMakeOrder from '~/modules/checkout/composables/useMakeOrder';
@@ -185,7 +183,7 @@ import useCart from '~/modules/checkout/composables/useCart';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 import { removeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
-import type { BundleCartItem, ConfigurableCartItem } from '~/modules/GraphQL/types';
+import type { BundleCartItem, ConfigurableCartItem, CartItemInterface } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   name: 'ReviewOrderAndPayment',
@@ -199,7 +197,7 @@ export default defineComponent({
     SfProperty,
     SfLink,
     SfImage,
-    VsfPaymentProvider: () => import('~/components/Checkout/VsfPaymentProvider.vue'),
+    VsfPaymentProvider: () => import('~/modules/checkout/components/VsfPaymentProvider.vue'),
   },
   setup() {
     const order = ref(null);
@@ -243,7 +241,7 @@ export default defineComponent({
     );
 
     const { getMagentoImage, imageSizes } = useImage();
-
+    const getRowTotal = (product: CartItemInterface) => cartGetters.getItemPrice(product).regular - cartGetters.getItemPrice(product).special;
     return {
       cart,
       cartGetters,
@@ -263,6 +261,7 @@ export default defineComponent({
       getBundles,
       getMagentoImage,
       imageSizes,
+      getRowTotal,
     };
   },
 });
diff --git a/modules/checkout/pages/Checkout/Shipping.vue b/modules/checkout/pages/Checkout/Shipping.vue
index 8ee8445..c0908df 100644
--- a/modules/checkout/pages/Checkout/Shipping.vue
+++ b/modules/checkout/pages/Checkout/Shipping.vue
@@ -3,21 +3,22 @@
     <SfHeading
       v-e2e="'shipping-heading'"
       :level="3"
-      :title="$t('Shipping')"
+      :title="$t('Shipping address')"
       class="sf-heading--left sf-heading--no-underline title"
     />
 
     <form @submit.prevent="handleSubmit(handleAddressSubmit(reset))">
       <UserShippingAddresses
         v-if="isAuthenticated && hasSavedShippingAddress"
-        v-model="setAsDefault"
+        v-model="isSetAsDefaultRequested"
         v-e2e="'shipping-addresses'"
-        :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
+        :current-address-id="currentAddressId"
         :shipping-addresses="addresses"
-        @setCurrentAddress="handleSetCurrentAddress"
+        :countries="countries"
+        @setCurrentAddress="handleSetCurrentAddress($event)"
       />
       <div
-        v-if="canAddNewAddress"
+        v-if="isAddNewAddressFormVisible"
         class="form"
       >
         <ValidationProvider
@@ -35,9 +36,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="
-              (firstname) => changeShippingDetails('firstname', firstname)
-            "
+            @input=" changeShippingDetails('firstname', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -55,7 +54,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(lastname) => changeShippingDetails('lastname', lastname)"
+            @input="changeShippingDetails('lastname', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -73,7 +72,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(street) => changeShippingDetails('street', street)"
+            @input="changeShippingDetails('street', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -91,9 +90,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="
-              (apartment) => changeShippingDetails('apartment', apartment)
-            "
+            @input="changeShippingDetails('apartment', $event) "
           />
         </ValidationProvider>
         <ValidationProvider
@@ -111,7 +108,7 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(city) => changeShippingDetails('city', city)"
+            @input="changeShippingDetails('city', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
@@ -140,7 +137,7 @@
                 ? $t('Please select a country first')
                 : ''
             "
-            @input="(region) => changeShippingDetails('region', region)"
+            @input="changeShippingDetails('region', $event)"
           />
           <SfSelect
             v-else
@@ -151,8 +148,9 @@
             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="changeShippingDetails('region', $event)"
           >
+            <SfSelectOption :value="''" />
             <SfSelectOption
               v-for="regionOption in regionInformation"
               :key="regionOption.id"
@@ -179,6 +177,7 @@
             :error-message="$t(errors[0])"
             @input="changeCountry"
           >
+            <SfSelectOption :value="''" />
             <SfSelectOption
               v-for="countryOption in countriesList"
               :key="countryOption.id"
@@ -203,13 +202,13 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="(postcode) => changeShippingDetails('postcode', postcode)"
+            @input="changeShippingDetails('postcode', $event)"
           />
         </ValidationProvider>
         <ValidationProvider
           v-slot="{ errors }"
           name="phone"
-          rules="required"
+          rules="required|min:8"
           slim
         >
           <SfInput
@@ -221,14 +220,12 @@
             required
             :valid="!errors[0]"
             :error-message="$t(errors[0])"
-            @input="
-              (telephone) => changeShippingDetails('telephone', telephone)
-            "
+            @input="changeShippingDetails('telephone', $event)"
           />
         </ValidationProvider>
       </div>
       <SfButton
-        v-if="!canAddNewAddress"
+        v-if="!isAddNewAddressFormVisible"
         class="color-light form__action-button form__action-button--add-address"
         type="submit"
         @click="handleAddNewAddressBtnClick"
@@ -251,7 +248,7 @@
       <VsfShippingProvider
         v-if="isShippingDetailsStepCompleted && !dirty"
         :shipping-methods="shippingMethods"
-        @submit="$router.push(`${localePath('/checkout/billing')}`)"
+        @submit="$router.push(localeRoute({ name: 'billing' }))"
       />
     </form>
   </ValidationObserver>
@@ -264,7 +261,6 @@ import {
 import {
   ref,
   computed,
-  watch,
   onMounted,
   defineComponent,
   useRouter,
@@ -274,21 +270,19 @@ import { required, min, digits } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import userShippingGetters from '~/modules/customer/getters/userShippingGetters';
 import addressGetter from '~/modules/customer/getters/addressGetter';
-import {
-  useCountrySearch,
-} from '~/composables';
+import { useCountrySearch } from '~/composables';
 import type {
-  Country, AvailableShippingMethod, ShippingCartAddress, CustomerAddress, Customer,
+  Country, AvailableShippingMethod, CustomerAddress, Customer,
 } from '~/modules/GraphQL/types';
 import useShipping from '~/modules/checkout/composables/useShipping';
 import useUser from '~/modules/customer/composables/useUser';
 import useUserAddress from '~/modules/customer/composables/useUserAddress';
-import { addressFromApiToForm, CheckoutAddressForm, getInitialCheckoutAddressForm } from '~/helpers/checkout/address';
+import {
+  addressFromApiToForm, CheckoutAddressForm, findUserAddressIdenticalToSavedCartAddress, getInitialCheckoutAddressForm,
+} from '~/helpers/checkout/address';
 import { mergeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
-const NOT_SELECTED_ADDRESS = '';
-
 extend('required', {
   ...required,
   message: 'This field is required',
@@ -311,13 +305,12 @@ export default defineComponent({
     SfSelect,
     ValidationProvider,
     ValidationObserver,
-    UserShippingAddresses: () => import('~/components/Checkout/UserShippingAddresses.vue'),
-    VsfShippingProvider: () => import('~/components/Checkout/VsfShippingProvider.vue'),
+    UserShippingAddresses: () => import('~/modules/checkout/components/UserShippingAddresses.vue'),
+    VsfShippingProvider: () => import('~/modules/checkout/components/VsfShippingProvider.vue'),
   },
   setup() {
     const router = useRouter();
     const { app } = useContext();
-    const address = ref<ShippingCartAddress | null>(null);
     const userShipping = ref<Customer | null>(null);
     const {
       load: loadShipping,
@@ -336,13 +329,13 @@ export default defineComponent({
     const countries = ref<Country[]>([]);
     const country = ref<Country | null>(null);
     const { isAuthenticated } = useUser();
-    const shippingDetails = ref<CheckoutAddressForm>(address.value ? addressFromApiToForm(address.value) : getInitialCheckoutAddressForm());
+    const shippingDetails = ref<CheckoutAddressForm>(getInitialCheckoutAddressForm());
     const shippingMethods = ref<AvailableShippingMethod[]>([]);
-    const currentAddressId = ref(NOT_SELECTED_ADDRESS);
+    const currentAddressId = ref<number | null>(null);
 
-    const setAsDefault = ref(false);
+    const isSetAsDefaultRequested = ref(false);
     const isFormSubmitted = ref(false);
-    const canAddNewAddress = ref(true);
+    const isAddNewAddressFormVisible = ref(true);
 
     const isShippingDetailsStepCompleted = ref(false);
     const addresses = computed(() => userShippingGetters.getAddresses(userShipping.value));
@@ -373,12 +366,12 @@ export default defineComponent({
       const shippingInfo = await saveShipping({ shippingDetails: shippingDetailsData });
       shippingMethods.value = shippingInfo?.available_shipping_methods ?? [];
 
-      if (addressId !== NOT_SELECTED_ADDRESS && setAsDefault.value) {
+      if (addressId !== null && isSetAsDefaultRequested.value) {
         const [chosenAddress] = userShippingGetters.getAddresses(
           userShipping.value,
           { id: addressId },
         );
-        chosenAddress.default_shipping = setAsDefault.value;
+        chosenAddress.default_shipping = isSetAsDefaultRequested.value;
         if (chosenAddress) {
           await setDefaultAddress({ address: chosenAddress });
           userShipping.value = await loadUserShipping(true);
@@ -389,85 +382,72 @@ export default defineComponent({
     };
 
     const handleAddNewAddressBtnClick = () => {
-      currentAddressId.value = NOT_SELECTED_ADDRESS;
+      currentAddressId.value = null;
       shippingDetails.value = getInitialCheckoutAddressForm();
-      canAddNewAddress.value = true;
+      isAddNewAddressFormVisible.value = true;
       isShippingDetailsStepCompleted.value = false;
     };
 
-    const handleSetCurrentAddress = (addr: CustomerAddress) => {
-      shippingDetails.value = { ...addressFromApiToForm(addr) };
-      currentAddressId.value = String(addr?.id);
-      canAddNewAddress.value = false;
+    const handleSetCurrentAddress = async (customerAddress: CustomerAddress) => {
+      const id = customerAddress?.id;
+      currentAddressId.value = id;
+      if (id) {
+        isAddNewAddressFormVisible.value = false;
+      }
+      shippingDetails.value = addressFromApiToForm(customerAddress);
+      country.value = customerAddress.country_code ? await searchCountry({ id: customerAddress.country_code }) : null;
       isShippingDetailsStepCompleted.value = false;
     };
 
-    const changeShippingDetails = (field: string, value: unknown) => {
-      shippingDetails.value = {
-        ...shippingDetails.value,
-        [field]: value,
-      };
+    const changeShippingDetails = (field: keyof CheckoutAddressForm, value: string) => {
+      shippingDetails.value[field] = value;
       isShippingDetailsStepCompleted.value = false;
-      currentAddressId.value = NOT_SELECTED_ADDRESS;
-    };
-
-    const selectDefaultAddress = () => {
-      const defaultAddress = userShippingGetters.getAddresses(
-        userShipping.value,
-        { default_shipping: true },
-      ) as [CustomerAddress] | [];
-      if (defaultAddress && defaultAddress.length > 0) {
-        handleSetCurrentAddress(defaultAddress[0]);
-      }
+      currentAddressId.value = null;
     };
 
     const changeCountry = async (id: string) => {
       changeShippingDetails('country_code', id);
-      country.value = await searchCountry({ id });
+      const newCountry = await searchCountry({ id });
+      shippingDetails.value.region = '';
+      country.value = newCountry;
     };
 
-    watch(address, (addr) => {
-      shippingDetails.value = addr ? addressFromApiToForm(addr) : getInitialCheckoutAddressForm();
-    });
     onMounted(async () => {
       const validStep = await isPreviousStepValid('user-account');
       if (!validStep) {
-        await router.push(app.localePath('/checkout/user-account'));
+        await router.push(app.localeRoute({ name: 'user-account' }));
       }
-      const [loadedShippingInfo, loadedUserShipping, loadedCountries] = await Promise.all([
+      const [loadedShippingInfoBoundToCart, loadedUserShipping, loadedCountries] = await Promise.all([
         loadShipping(),
         loadUserShipping(),
         loadCountries(),
       ]);
 
-      address.value = loadedShippingInfo;
-      userShipping.value = loadedUserShipping;
-      countries.value = loadedCountries;
+      const [defaultAddress = null] = userShippingGetters.getAddresses(loadedUserShipping, { default_shipping: true });
+      const wasShippingAddressAlreadySetOnCart = Boolean(loadedShippingInfoBoundToCart);
 
+      if (wasShippingAddressAlreadySetOnCart) {
+        const userAddressIdenticalToSavedCartAddress = findUserAddressIdenticalToSavedCartAddress(
+          loadedUserShipping?.addresses,
+          loadedShippingInfoBoundToCart,
+        );
+        handleSetCurrentAddress({ ...loadedShippingInfoBoundToCart, id: userAddressIdenticalToSavedCartAddress?.id });
+      } else if (defaultAddress) {
+        handleSetCurrentAddress(defaultAddress);
+      }
       if (shippingDetails.value?.country_code) {
         country.value = await searchCountry({ id: shippingDetails.value.country_code });
       }
-
-      const shippingAddresses = userShippingGetters.getAddresses(
-        userShipping.value,
-      );
-
-      if (!shippingAddresses || shippingAddresses.length === 0) {
-        return;
-      }
-
-      const hasEmptyShippingDetails = !shippingDetails.value
-        || Object.keys(shippingDetails.value).length === 0;
-      if (hasEmptyShippingDetails) {
-        selectDefaultAddress();
-      }
+      userShipping.value = loadedUserShipping;
+      countries.value = loadedCountries;
     });
 
     return {
-      canAddNewAddress,
+      isAddNewAddressFormVisible,
       canMoveForward,
       changeCountry,
       changeShippingDetails,
+      countries,
       countriesList,
       country,
       currentAddressId,
@@ -479,10 +459,9 @@ export default defineComponent({
       isFormSubmitted,
       isShippingDetailsStepCompleted,
       isShippingLoading,
-      NOT_SELECTED_ADDRESS,
       regionInformation,
       searchCountry,
-      setAsDefault,
+      isSetAsDefaultRequested,
       shippingDetails,
       shippingMethods,
       addresses,
diff --git a/modules/checkout/pages/Checkout/UserAccount.vue b/modules/checkout/pages/Checkout/UserAccount.vue
index 0ebc0d8..a6939fe 100644
--- a/modules/checkout/pages/Checkout/UserAccount.vue
+++ b/modules/checkout/pages/Checkout/UserAccount.vue
@@ -147,9 +147,7 @@ import {
   required, min, email,
 } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import {
-  useUiNotification, useGuestUser,
-} from '~/composables';
+import { useGuestUser } from '~/composables';
 import useCart from '~/modules/checkout/composables/useCart';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { getItem, mergeItem } from '~/helpers/asyncLocalStorage';
@@ -208,15 +206,13 @@ export default defineComponent({
       error: errorUser,
     } = useUser();
 
-    const { send: sendNotification } = useUiNotification();
-
     const isFormSubmitted = ref(false);
     const createUserAccount = ref(false);
     const loginUserAccount = ref(false);
     const loading = computed(() => loadingUser.value || loadingGuestUser.value);
 
     const canMoveForward = computed(() => !(loading.value));
-    const hasError = computed(() => errorUser.value.register || errorGuestUser.value.attachToCart);
+    const anyError = computed(() => errorUser.value.login || errorUser.value.register || errorGuestUser.value.attachToCart);
 
     type Form = {
       firstname: string,
@@ -249,9 +245,9 @@ export default defineComponent({
         }
 
         await (
-          !createUserAccount.value
-            ? attachToCart({ email: form.value.email, cart })
-            : register({ user: form.value })
+          createUserAccount.value
+            ? register({ user: form.value })
+            : attachToCart({ email: form.value.email, cart })
         );
       }
 
@@ -270,24 +266,14 @@ export default defineComponent({
         });
       }
 
-      if (!hasError.value) {
+      if (!anyError.value) {
         await mergeItem('checkout', { 'user-account': form.value });
-        await router.push(`${app.localePath('/checkout/shipping')}`);
+        await router.push(app.localeRoute({ name: 'shipping' }));
         reset();
         isFormSubmitted.value = true;
-      } else {
-        sendNotification({
-          id: Symbol('user_form_error'),
-          message: 'Something went wrong during form submission. Please try again later',
-          type: 'danger',
-          icon: 'error',
-          persist: false,
-          title: 'Error',
-        });
       }
 
       if (isRecaptchaEnabled.value) {
-        // reset recaptcha
         $recaptcha.reset();
       }
     };
@@ -332,7 +318,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .form {
-  --button-width: 100%;
 
   &__select {
     display: flex;
@@ -356,7 +341,6 @@ export default defineComponent({
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    --button-width: auto;
   }
 
   &__element {
@@ -379,7 +363,9 @@ export default defineComponent({
   }
 
   &__action {
+    --button-width: 100%;
     @include for-desktop {
+      --button-width: auto;
       flex: 0 0 100%;
       display: flex;
     }
diff --git a/modules/customer/components/LoginModal/LoginModal.vue b/modules/customer/components/LoginModal/LoginModal.vue
index 1a5801f..181b623 100644
--- a/modules/customer/components/LoginModal/LoginModal.vue
+++ b/modules/customer/components/LoginModal/LoginModal.vue
@@ -26,11 +26,7 @@
           :form="loginForm"
           @submit="form => onLoginFormSubmit(form)"
           @change-form="currentlyDisplayedForm = $event"
-        >
-          <template #error>
-            {{ userError.login && userError.login.message }}
-          </template>
-        </LoginForm>
+        />
         <RegisterForm
           v-else-if="currentlyDisplayedForm === 'register'"
           data-testid="register-form"
@@ -39,11 +35,7 @@
           :form="registerForm"
           @submit="form => onRegisterFormSubmit(form)"
           @change-form="currentlyDisplayedForm = $event"
-        >
-          <template #error>
-            {{ userError.register && userError.register.message }}
-          </template>
-        </RegisterForm>
+        />
         <ForgotPasswordForm
           v-else-if="currentlyDisplayedForm === 'forgotPassword'"
           data-testid="forgot-password-form"
diff --git a/modules/customer/components/LoginModal/__tests__/LoginModal.spec.ts b/modules/customer/components/LoginModal/__tests__/LoginModal.spec.ts
index fe85558..26d142e 100644
--- a/modules/customer/components/LoginModal/__tests__/LoginModal.spec.ts
+++ b/modules/customer/components/LoginModal/__tests__/LoginModal.spec.ts
@@ -63,23 +63,6 @@ describe('LoginModal', () => {
     expect(useUserMock.login).toHaveBeenCalled();
   });
 
-  it('displays error message if login fails', async () => {
-    const useUserMockWithError = {
-      login: jest.fn(),
-      register: jest.fn(),
-      loading: false,
-      error: { login: { message: 'error:login' } },
-    };
-    (useUser as jest.Mock).mockReturnValueOnce(useUserMockWithError);
-    const { getByText } = render(LoginModal, {
-      localVue,
-      pinia: createTestingPinia(),
-    });
-    await waitFor(() => {
-      getByText('error:login');
-    });
-  });
-
   it('sends register form', async () => {
     const { getByTestId } = render(LoginModal, {
       localVue,
@@ -105,27 +88,6 @@ describe('LoginModal', () => {
     });
   });
 
-  it('displays error message if register fails', async () => {
-    const useUserMockWithError = {
-      login: jest.fn(),
-      register: jest.fn(),
-      loading: false,
-      error: { register: { message: 'error:register' } },
-    };
-    (useUser as jest.Mock).mockReturnValueOnce(useUserMockWithError);
-    const { getByText, getByTestId } = render(LoginModal, {
-      localVue,
-      pinia: createTestingPinia(),
-    });
-
-    await waitFor(() => {
-      (getByTestId('login-form') as HTMLElementWithVue).__vue__.$emit('change-form', 'register' as FormName);
-    });
-    await waitFor(() => {
-      getByText('error:register');
-    });
-  });
-
   it('sends forgot password form and shows thank you page', async () => {
     const { getByTestId, getByText } = render(LoginModal, {
       localVue,
diff --git a/modules/customer/composables/useAddresses/index.ts b/modules/customer/composables/useAddresses/index.ts
index 080c201..5f8047b 100644
--- a/modules/customer/composables/useAddresses/index.ts
+++ b/modules/customer/composables/useAddresses/index.ts
@@ -4,6 +4,7 @@ import { Logger } from '~/helpers/logger';
 import { transformUserCreateAddressInput, transformUserUpdateAddressInput } from '~/modules/customer/helpers/userAddressManipulator';
 import type { ComposableFunctionArgs } from '~/composables/types';
 import type { UseAddressesInterface, UseAddressesParamsInput, UseAddressesErrors } from './useAddresses';
+import { CustomQuery } from '~/types/core';
 
 /**
  * @public
@@ -24,13 +25,13 @@ export function useAddresses(): UseAddressesInterface {
   const { app } = useContext();
   const context = app.$vsf;
 
-  const load = async () => {
+  const load = async (customQuery?: CustomQuery) => {
     Logger.debug('[Magento] load user addresses');
     let results = null;
 
     try {
       loading.value = true;
-      const { data } = await context.$magento.api.getCustomerAddresses();
+      const { data } = await context.$magento.api.getCustomerAddresses(customQuery);
       results = data?.customer?.addresses ?? [];
       Logger.debug('[Magento] load user addresses results:', results);
       error.value.load = null;
@@ -50,7 +51,7 @@ export function useAddresses(): UseAddressesInterface {
 
     try {
       loading.value = true;
-      const { data } = await context.$magento.api.createCustomerAddress(transformUserCreateAddressInput(params));
+      const { data } = await context.$magento.api.createCustomerAddress(transformUserCreateAddressInput(params), params?.customQuery ?? null);
       results = data?.createCustomerAddress ?? {};
       Logger.debug('[Magento] save user address results:', params.address);
       error.value.save = null;
@@ -70,7 +71,7 @@ export function useAddresses(): UseAddressesInterface {
 
     try {
       loading.value = true;
-      const { data } = await context.$magento.api.updateCustomerAddress(transformUserUpdateAddressInput(params));
+      const { data } = await context.$magento.api.updateCustomerAddress(transformUserUpdateAddressInput(params), params?.customQuery ?? null);
       results = data?.updateCustomerAddress ?? {};
       Logger.debug('[Magento] update user address results:', results);
       error.value.update = null;
@@ -90,7 +91,7 @@ export function useAddresses(): UseAddressesInterface {
 
     try {
       loading.value = true;
-      const { data } = await context.$magento.api.deleteCustomerAddress(params.address.id);
+      const { data } = await context.$magento.api.deleteCustomerAddress(params.address.id, params?.customQuery ?? null);
       results = !!data.deleteCustomerAddress;
       Logger.debug('[Magento] remove user address results:', results);
       error.value.remove = null;
diff --git a/modules/customer/composables/useAddresses/useAddresses.ts b/modules/customer/composables/useAddresses/useAddresses.ts
index c6efc56..ffd01f3 100644
--- a/modules/customer/composables/useAddresses/useAddresses.ts
+++ b/modules/customer/composables/useAddresses/useAddresses.ts
@@ -1,6 +1,7 @@
 import type { Ref } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
 import type { CustomerAddress } from '~/modules/GraphQL/types';
+import { CustomQuery } from '~/types/core';
 
 /**
  * Errors that occured in the {@link useAddresses|useAddresses()} composable
@@ -76,7 +77,7 @@ export interface UseAddressesInterface {
    * }
    * ```
    */
-  load(): Promise<CustomerAddress[]>;
+  load(customQuery?: CustomQuery): Promise<CustomerAddress[]>;
 
   /**
    * Saves a new address in the profile of the current customer
diff --git a/modules/customer/composables/useForgotPassword/index.ts b/modules/customer/composables/useForgotPassword/index.ts
index f8d0c30..9cfbb73 100644
--- a/modules/customer/composables/useForgotPassword/index.ts
+++ b/modules/customer/composables/useForgotPassword/index.ts
@@ -39,7 +39,7 @@ export function useForgotPassword(): UseForgotPasswordInterface {
       loading.value = true;
       Logger.debug('[Magento]: Reset user password', resetPasswordParams);
       // eslint-disable-next-line max-len
-      const { data } = await app.context.$vsf.$magento.api.requestPasswordResetEmail({ email: resetPasswordParams.email, recaptchaToken: resetPasswordParams.recaptchaToken });
+      const { data } = await app.context.$vsf.$magento.api.requestPasswordResetEmail({ email: resetPasswordParams.email, recaptchaToken: resetPasswordParams.recaptchaToken }, resetPasswordParams?.customQuery ?? null);
       Logger.debug('[Result]:', { data });
       error.value.request = data;
       result.value.resetPasswordResult = data?.requestPasswordResetEmail ?? false;
@@ -61,7 +61,7 @@ export function useForgotPassword(): UseForgotPasswordInterface {
         newPassword: setNewPasswordParams.newPassword,
         resetPasswordToken: setNewPasswordParams.tokenValue,
         recaptchaToken: setNewPasswordParams.recaptchaToken,
-      });
+      }, setNewPasswordParams?.customQuery ?? null);
 
       Logger.debug('[Result]:', { data });
       result.value.setNewPasswordResult = data?.resetPassword ?? false;
diff --git a/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts b/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts
index bcd7ad7..9d423b9 100644
--- a/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts
+++ b/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts
@@ -1,9 +1,11 @@
 import { UseContextReturn } from '~/types/core';
 import { Logger } from '~/helpers/logger';
 import { SetGuestEmailOnCartInput } from '~/modules/GraphQL/types';
+import { AttachToCartParams } from '~/modules/customer/composables/useGuestUser';
+import { ComposableFunctionArgs } from '~/composables';
 
 export const attachToCartCommand = {
-  execute: async (context: UseContextReturn, params): Promise<void> => {
+  execute: async (context: UseContextReturn, params: ComposableFunctionArgs<AttachToCartParams>): Promise<void> => {
     Logger.debug('[Magento]: Attach guest cart to user');
 
     const emailOnCartInput: SetGuestEmailOnCartInput = {
@@ -13,6 +15,6 @@ export const attachToCartCommand = {
 
     await context.app.$vsf.$magento.api.setGuestEmailOnCart({
       ...emailOnCartInput,
-    });
+    }, params?.customQuery ?? null);
   },
 };
diff --git a/modules/customer/composables/useUser/index.ts b/modules/customer/composables/useUser/index.ts
index 0da71e8..8439c15 100644
--- a/modules/customer/composables/useUser/index.ts
+++ b/modules/customer/composables/useUser/index.ts
@@ -10,7 +10,8 @@ import { Logger } from '~/helpers/logger';
 import { useCustomerStore } from '~/modules/customer/stores/customer';
 import { useCart } from '~/modules/checkout/composables/useCart';
 import { generateUserData } from '~/modules/customer/helpers/generateUserData';
-import { Customer } from '~/modules/GraphQL/types';
+import { useUiNotification } from '~/composables/useUiNotification';
+import type { Customer } from '~/modules/GraphQL/types';
 import type {
   UseUserInterface,
   UseUserErrors,
@@ -29,8 +30,10 @@ import type {
  */
 export function useUser(): UseUserInterface {
   const customerStore = useCustomerStore();
-  const { app } = useContext();
+  // @ts-ignore
+  const { app, $recaptcha } = useContext();
   const { setCart } = useCart();
+  const { send: sendNotification } = useUiNotification();
   const loading: Ref<boolean> = ref(false);
   const errorsFactory = () : UseUserErrors => ({
     updateUser: null,
@@ -78,7 +81,7 @@ export function useUser(): UseUserInterface {
         });
       }
 
-      const { data, errors } = await app.context.$vsf.$magento.api.updateCustomer(userData);
+      const { data, errors } = await app.context.$vsf.$magento.api.updateCustomer(userData, customQuery);
       Logger.debug('[Result]:', { data });
 
       if (errors) {
@@ -104,7 +107,7 @@ export function useUser(): UseUserInterface {
     try {
       const apiState = app.context.$vsf.$magento.config.state;
 
-      await app.context.$vsf.$magento.api.revokeCustomerToken({ customQuery });
+      await app.context.$vsf.$magento.api.revokeCustomerToken(customQuery);
 
       apiState.removeCustomerToken();
       apiState.removeCartId();
@@ -160,7 +163,7 @@ export function useUser(): UseUserInterface {
       loading.value = true;
       const apiState = app.context.$vsf.$magento.config.state;
 
-      const { data, errors } = await app.context.$vsf.$magento.api.generateCustomerToken(
+      const { data, errors } = await app.$vsf.$magento.api.generateCustomerToken(
         {
           email: providedUser.email,
           password: providedUser.password,
@@ -173,9 +176,16 @@ export function useUser(): UseUserInterface {
       if (errors) {
         const joinedErrors = errors.map((e) => e.message).join(',');
         Logger.error(joinedErrors);
-        error.value.login = { message: joinedErrors };
-
-        return;
+        errors.forEach((registerError, i) => sendNotification({
+          icon: 'error',
+          id: Symbol(`registration_error-${i}`),
+          message: registerError.message,
+          persist: true,
+          title: 'Registration error',
+          type: 'danger',
+        }));
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        throw new Error(joinedErrors);
       }
 
       customerStore.setIsLoggedIn(true);
@@ -187,23 +197,29 @@ export function useUser(): UseUserInterface {
       const cart = await app.context.$vsf.$magento.api.customerCart();
       const newCartId = cart.data.customerCart.id;
 
-      if (newCartId && currentCartId && currentCartId !== newCartId) {
-        const { data: dataMergeCart } = await app.context.$vsf.$magento.api.mergeCarts(
-          {
-            sourceCartId: currentCartId,
-            destinationCartId: newCartId,
-          },
-        );
-
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        setCart(dataMergeCart.mergeCarts);
-
-        apiState.setCartId(dataMergeCart.mergeCarts.id);
-      } else {
+      try {
+        if (newCartId && currentCartId && currentCartId !== newCartId) {
+          const { data: dataMergeCart } = await app.context.$vsf.$magento.api.mergeCarts(
+            {
+              sourceCartId: currentCartId,
+              destinationCartId: newCartId,
+            },
+          );
+
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          setCart(dataMergeCart.mergeCarts);
+
+          apiState.setCartId(dataMergeCart.mergeCarts.id);
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          setCart(cart.data.customerCart);
+        }
+      } catch {
+        // Workaround for Magento 2.4.4 mergeCarts mutation error related with Bundle products
+        // It can be removed when Magento 2.4.5 will be release
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         setCart(cart.data.customerCart);
       }
-
       error.value.login = null;
     } catch (err) {
       error.value.login = err;
@@ -228,7 +244,7 @@ export function useUser(): UseUserInterface {
         ...baseData
       } = generateUserData(providedUser);
 
-      const { data, errors } = await app.context.$vsf.$magento.api.createCustomer(
+      const { data, errors } = await app.$vsf.$magento.api.createCustomer(
         {
           email,
           password,
@@ -241,22 +257,26 @@ export function useUser(): UseUserInterface {
       Logger.debug('[Result]:', { data });
 
       if (errors) {
-        Logger.error(errors.map((e) => e.message).join(','));
+        const joinedErrors = errors.map((e) => e.message).join(',');
+        Logger.error(joinedErrors);
+        errors.forEach((registerError, i) => sendNotification({
+          icon: 'error',
+          id: Symbol(`registration_error-${i}`),
+          message: registerError.message,
+          persist: true,
+          title: 'Registration error',
+          type: 'danger',
+        }));
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        throw new Error(joinedErrors);
       }
-
-      if (!data || !data.createCustomerV2 || !data.createCustomerV2.customer) {
-        Logger.error('Customer registration error'); // todo: handle errors in better way
+      error.value.register = null;
+      let loginRecaptchaToken = '';
+      if ($recaptcha && recaptchaToken) {
+        loginRecaptchaToken = await $recaptcha.getResponse();
       }
 
-      // if (recaptchaToken) { // todo: move recaptcha to separate module
-      //   // generate a new token for the login action
-      //   const { recaptchaInstance } = params;
-      //   const newRecaptchaToken = await recaptchaInstance.getResponse();
-      //
-      //   return factoryParams.logIn(context, { username: email, password, recaptchaToken: newRecaptchaToken });
-      // }
-      error.value.register = null;
-      await login({ user: { email, password }, customQuery: {} });
+      await login({ user: { email, password, recaptchaToken: loginRecaptchaToken }, customQuery: {} });
     } catch (err) {
       error.value.register = err;
       Logger.error('useUser/register', err);
@@ -277,17 +297,19 @@ export function useUser(): UseUserInterface {
         currentUser: customerStore.user,
         currentPassword: params.current,
         newPassword: params.new,
-        customQuery: params.customQuery,
-      });
+      }, params.customQuery);
+
+      let joinedErrors = null;
 
       if (errors) {
-        Logger.error(errors.map((e) => e.message).join(','));
+        joinedErrors = errors.map((e) => e.message).join(',');
+        Logger.error(joinedErrors);
       }
 
       Logger.debug('[Result] ', { data });
 
       customerStore.user = data?.changeCustomerPassword;
-      error.value.changePassword = null;
+      error.value.changePassword = joinedErrors;
     } catch (err) {
       error.value.changePassword = err;
       Logger.error('useUser/changePassword', err);
diff --git a/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts b/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts
index dd74df2..c85b23c 100644
--- a/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts
+++ b/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts
@@ -1,9 +1,9 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
 import { CustomerAddressInput } from '~/modules/GraphQL/types';
 
 export const createCustomerAddressCommand = {
-  execute: async (context: UseContextReturn, params: CustomerAddressInput) => {
-    const { data } = await context.app.$vsf.$magento.api.createCustomerAddress(params);
+  execute: async (context: UseContextReturn, params: CustomerAddressInput, customQuery: CustomQuery) => {
+    const { data } = await context.app.$vsf.$magento.api.createCustomerAddress(params, customQuery);
 
     return data?.createCustomerAddress ?? {};
   },
diff --git a/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts b/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts
index b9d3b6e..7ecc304 100644
--- a/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts
+++ b/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts
@@ -1,9 +1,9 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
 import { CustomerAddress } from '~/modules/GraphQL/types';
 
 export const deleteCustomerAddressCommand = {
-  execute: async (context: UseContextReturn, address: CustomerAddress) => {
-    const { data } = await context.app.$vsf.$magento.api.deleteCustomerAddress(address.id);
+  execute: async (context: UseContextReturn, address: CustomerAddress, customQuery: CustomQuery) => {
+    const { data } = await context.app.$vsf.$magento.api.deleteCustomerAddress(address.id, customQuery);
 
     return data?.deleteCustomerAddress ?? {};
   },
diff --git a/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts b/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts
index c0b9007..be9dfa0 100644
--- a/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts
+++ b/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts
@@ -1,12 +1,12 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
 import { CustomerAddressInput } from '~/modules/GraphQL/types';
 
 export const updateCustomerAddressCommand = {
   execute: async (context: UseContextReturn, params: {
     addressId: number;
     input: CustomerAddressInput;
-  }) => {
-    const { data } = await context.app.$vsf.$magento.api.updateCustomerAddress(params);
+  }, customQuery: CustomQuery) => {
+    const { data } = await context.app.$vsf.$magento.api.updateCustomerAddress(params, customQuery);
 
     return data?.updateCustomerAddress ?? {};
   },
diff --git a/modules/customer/composables/useUserAddress/index.ts b/modules/customer/composables/useUserAddress/index.ts
index d981aa8..a2a956b 100644
--- a/modules/customer/composables/useUserAddress/index.ts
+++ b/modules/customer/composables/useUserAddress/index.ts
@@ -15,6 +15,7 @@ import type {
   UseUserAddressUpdateAddressParams,
   UseUserAddressSetDefaultAddressParams,
 } from './useUserAddress';
+import { CustomQuery } from '~/types/core';
 
 /**
  * Allows loading and manipulating addresses of the current user.
@@ -42,9 +43,8 @@ export function useUserAddress(): UseUserAddressInterface {
       const customerAddressInput = transformUserCreateAddressInput({
         address,
         shipping: shipping.value,
-        customQuery,
       });
-      result = await createCustomerAddressCommand.execute(context, customerAddressInput);
+      result = await createCustomerAddressCommand.execute(context, customerAddressInput, customQuery);
       error.value.addAddress = null;
     } catch (err) {
       error.value.addAddress = err;
@@ -58,13 +58,13 @@ export function useUserAddress(): UseUserAddressInterface {
     return result;
   };
 
-  const deleteAddress = async (address: CustomerAddress) => {
+  const deleteAddress = async (address: CustomerAddress, customQuery: CustomQuery) => {
     Logger.debug('useUserAddress.deleteAddress', address);
     let result = {};
 
     try {
       loading.value = true;
-      result = await deleteCustomerAddressCommand.execute(context, address);
+      result = await deleteCustomerAddressCommand.execute(context, address, customQuery);
       error.value.deleteAddress = null;
     } catch (err) {
       error.value.deleteAddress = err;
@@ -87,9 +87,8 @@ export function useUserAddress(): UseUserAddressInterface {
       const customerAddressInput = transformUserUpdateAddressInput({
         address,
         shipping: shipping.value,
-        customQuery,
       });
-      result = await updateCustomerAddressCommand.execute(context, customerAddressInput);
+      result = await updateCustomerAddressCommand.execute(context, customerAddressInput, customQuery);
       error.value.updateAddress = null;
     } catch (err) {
       error.value.updateAddress = err;
@@ -133,7 +132,7 @@ export function useUserAddress(): UseUserAddressInterface {
         customQuery,
       });
 
-      result = await updateCustomerAddressCommand.execute(context, updateAddressInput);
+      result = await updateCustomerAddressCommand.execute(context, updateAddressInput, customQuery);
       error.value.setDefaultAddress = null;
     } catch (err) {
       error.value.setDefaultAddress = err;
diff --git a/modules/customer/composables/useUserAddress/useUserAddress.ts b/modules/customer/composables/useUserAddress/useUserAddress.ts
index fa2db7d..a584b84 100644
--- a/modules/customer/composables/useUserAddress/useUserAddress.ts
+++ b/modules/customer/composables/useUserAddress/useUserAddress.ts
@@ -2,6 +2,7 @@ import type { Ref, DeepReadonly } from '@nuxtjs/composition-api';
 import type { CustomerAddress } from '~/modules/GraphQL/types';
 import type { ComposableFunctionArgs } from '~/composables/types';
 import { Customer } from '~/modules/GraphQL/types';
+import { CustomQuery } from '~/types/core';
 
 /**
  * Errors that occured in the {@link UseUserAddressErrors|UseUserAddressErrors()} composable
@@ -76,7 +77,7 @@ export interface UseUserAddressInterface {
    * Internally, it calls the {@link @vue-storefront/magento-api#deleteCustomerAddress} API endpoint
    * and accepts the custom queries named `deleteCustomerAddress`.
    */
-  deleteAddress(address: CustomerAddress): Promise<boolean | {}>; // TODO: Should accept custom queries
+  deleteAddress(address: CustomerAddress, customQuery: CustomQuery): Promise<boolean | {}>;
 
   /**
    * Updates an existing address from the profile of the current user
diff --git a/modules/customer/composables/useUserOrder/index.ts b/modules/customer/composables/useUserOrder/index.ts
index 6f18eb0..923ab25 100644
--- a/modules/customer/composables/useUserOrder/index.ts
+++ b/modules/customer/composables/useUserOrder/index.ts
@@ -26,7 +26,7 @@ export function useUserOrder(): UseUserOrderInterface {
 
       Logger.debug('[Magento] search user orders', { params });
 
-      const { data } = await app.$vsf.$magento.api.customerOrders(params);
+      const { data } = await app.$vsf.$magento.api.customerOrders(params, params?.customQuery ?? null);
 
       Logger.debug('[Result]:', { data });
 
diff --git a/modules/customer/getters/userAddressesGetters.ts b/modules/customer/getters/userAddressesGetters.ts
index c67f157..84a0bcc 100644
--- a/modules/customer/getters/userAddressesGetters.ts
+++ b/modules/customer/getters/userAddressesGetters.ts
@@ -11,7 +11,7 @@ export interface UserAddressesGetters<GENERIC_USER_ADDRESS_ITEM, SPECIFIC_USER_A
   getFirstName: (address: GENERIC_USER_ADDRESS_ITEM) => string;
   getLastName: (address: GENERIC_USER_ADDRESS_ITEM) => string;
   getCountry: (address: GENERIC_USER_ADDRESS_ITEM) => string;
-  getPhone: (address: SPECIFIC_USER_ADDRESS_ITEM) => string;
+  getPhone: (address: GENERIC_USER_ADDRESS_ITEM) => string;
   getEmail: (address: SPECIFIC_USER_ADDRESS_ITEM) => string;
   getApartmentNumber: (address: SPECIFIC_USER_ADDRESS_ITEM) => string | number;
   getProvince: (address: GENERIC_USER_ADDRESS_ITEM) => string;
@@ -48,10 +48,10 @@ const userAddressesGetters: UserAddressesGetters<CustomerAddress, TransformedCus
   getFirstName: (address) => address?.firstname || '',
   getLastName: (address) => address?.lastname || '',
   getCountry: (address) => address?.country_code || '',
-  getPhone: (address) => address?.phone || '',
+  getPhone: (address) => address?.telephone || '',
   getEmail: (address) => address?.email || '',
   getApartmentNumber: (address) => (Array.isArray(address?.street) ? address?.street[1] : address?.apartment),
-  getProvince: (address) => (address?.region?.region_code || address?.region?.region) || '',
+  getProvince: (address) => (address?.region?.region || address?.region?.region_code) || '',
   getCompanyName: (address) => address?.company || '',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getTaxNumber: (address) => address?.vat_id || '',
diff --git a/modules/customer/getters/userBillingGetters.ts b/modules/customer/getters/userBillingGetters.ts
index 53cf3ca..309058c 100644
--- a/modules/customer/getters/userBillingGetters.ts
+++ b/modules/customer/getters/userBillingGetters.ts
@@ -4,6 +4,8 @@ import { TransformedCustomerAddress } from '../composables/types';
 
 const userBillingGetters: UserBillingGetters<Customer, CustomerAddress, TransformedCustomerAddress> = {
   getAddresses: (billing, criteria?: Record<string, any>) => {
+    if (!billing || !billing.addresses) return [] as CustomerAddress[];
+
     if (!criteria || Object.keys(criteria).length === 0) {
       return billing.addresses;
     }
diff --git a/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue b/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue
index cdf8079..f050cd2 100644
--- a/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue
+++ b/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue
@@ -149,6 +149,8 @@
             :disabled="loading"
             @input="updateCountry({ id: $event })"
           >
+            <!-- don't use SfSelect :placeholder="" to avoid applying SfSelect is-selected class -->
+            <SfSelectOption :value="''" />
             <SfSelectOption
               v-for="countryOption in countriesList"
               :key="countryOption.id"
@@ -279,18 +281,21 @@ export default defineComponent({
   setup(props, { emit }) {
     const { load: loadCountries, search: searchCountry } = useCountrySearch();
 
+    const form = ref<TransformedCustomerAddress | null>(null);
+
     const countries = ref<Countries[]>([]);
     const countriesList = computed(() => addressGetter.countriesList(countries.value));
-
     const country = ref<Country | null>(null);
+    const regionInformation = computed(() => addressGetter.regionList(country.value));
+
     const updateCountry = async (params: UseCountrySearchParams) => {
       country.value = await searchCountry(params);
+      form.value.region = {
+        // let region SfSelect know it should display initial state
+        ...(regionInformation.value.length > 0 ? { region_id: null } : {}),
+      };
     };
 
-    const regionInformation = computed(() => addressGetter.regionList(country.value));
-
-    const form = ref<TransformedCustomerAddress | null>(null);
-
     watch(() => props.address, () => {
       form.value = {
         apartment: props.address.apartment,
@@ -327,7 +332,7 @@ export default defineComponent({
     onBeforeMount(async () => {
       countries.value = await loadCountries();
       if (props.address.country_code) {
-        await updateCountry({ id: props.address.country_code });
+        country.value = await searchCountry({ id: props.address.country_code });
       }
     });
 
diff --git a/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue b/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
index ee7d709..f5efb8c 100644
--- a/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
+++ b/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
@@ -52,13 +52,17 @@
           class="addresses-list"
         >
           <div
-            v-for="address in userAddresses"
+            v-for="address in addressesWithCountryName"
             :key="getId(address)"
             class="addresses"
           >
             <div class="addresses__content">
               <div class="addresses__address">
-                <UserAddressDetails :address="address" />
+                <UserAddressDetails :address="address">
+                  <template #country>
+                    {{ address.countryName }}
+                  </template>
+                </UserAddressDetails>
               </div>
             </div>
             <div class="addresses__actions">
@@ -75,6 +79,7 @@
               </SfButton>
             </div>
             <SvgImage
+              v-if="!isDefault(address)"
               icon="cross"
               :label="$t('Remove Address')"
               role="button"
@@ -102,6 +107,7 @@ import {
   useRouter,
   useContext,
   ref,
+  computed,
   useFetch,
 } from '@nuxtjs/composition-api';
 import { useAddresses } from '~/modules/customer/composables/useAddresses';
@@ -110,6 +116,8 @@ import SvgImage from '~/components/General/SvgImage.vue';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 import { CustomerAddress } from '~/modules/GraphQL/types';
 import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import { useCountrySearch } from '~/composables/useCountrySearch';
+import type { Country } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   name: 'AddressesDetails',
@@ -125,10 +133,14 @@ export default defineComponent({
     const router = useRouter();
 
     const userAddresses = ref<CustomerAddress[]>([]);
+    const countries = ref<Country[]>([]);
     const { load, remove } = useAddresses();
+    const { load: loadCountries } = useCountrySearch();
+
     const { fetch } = useFetch(async () => {
-      const addressesData = await load();
-      userAddresses.value = userAddressesGetters.getAddresses(addressesData);
+      const [addressesResponse, countriesResponse] = await Promise.all([load(), loadCountries()]);
+      userAddresses.value = userAddressesGetters.getAddresses(addressesResponse);
+      countries.value = countriesResponse;
     });
 
     const goToCreateAddressPage = () => router.push(
@@ -144,8 +156,18 @@ export default defineComponent({
       fetch();
     };
 
+    const addressesWithCountryName = computed(() => userAddresses.value.map((address) => ({
+      ...address,
+      countryName: countries.value
+        .find(({ id }) => id === address.country_code)
+        ?.full_name_locale
+        ?? address.country_code,
+    })));
+
     return {
+      countries,
       userAddresses,
+      addressesWithCountryName,
       goToCreateAddressPage,
       goToEditAddressPage,
       removeAddress,
diff --git a/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue b/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
index dcf70e4..0940fbb 100644
--- a/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
+++ b/modules/customer/pages/MyAccount/MyProfile/ProfileUpdateForm.vue
@@ -7,7 +7,7 @@
       <div class="form__horizontal">
         <ValidationProvider
           v-slot="{ errors }"
-          rules="required|min:2"
+          rules="required"
           class="form__element"
         >
           <SfInput
@@ -21,7 +21,7 @@
         </ValidationProvider>
         <ValidationProvider
           v-slot="{ errors }"
-          rules="required|min:2"
+          rules="required"
           class="form__element"
         >
           <SfInput
diff --git a/modules/customer/pages/MyAccount/MyWishlist.vue b/modules/customer/pages/MyAccount/MyWishlist.vue
index 2c7b512..d49f621 100644
--- a/modules/customer/pages/MyAccount/MyWishlist.vue
+++ b/modules/customer/pages/MyAccount/MyWishlist.vue
@@ -75,40 +75,41 @@
                   "
                 />
               </transition-group>
-              <LazyHydrate on-interaction>
-                <SfPagination
-                  v-if="!loading"
-                  v-show="pagination.totalPages > 1"
-                  class="products__pagination desktop-only"
-                  :current="pagination.currentPage"
-                  :total="pagination.totalPages"
-                  :visible="5"
-                />
-              </LazyHydrate>
-
-              <div
-                v-show="pagination.totalPages > 1"
-                class="products__show-on-page"
-              >
-                <span class="products__show-on-page__label">
-                  {{ $t('Show on page') }}
-                </span>
+              <div class="products__display-opt">
                 <LazyHydrate on-interaction>
-                  <SfSelect
-                    :value="pagination.itemsPerPage.toString()"
-                    class="products__items-per-page"
-                    @input="th.changeItemsPerPage"
-                  >
-                    <SfSelectOption
-                      v-for="option in pagination.pageOptions"
-                      :key="option"
-                      :value="option"
-                      class="products__items-per-page__option"
-                    >
-                      {{ option }}
-                    </SfSelectOption>
-                  </SfSelect>
+                  <SfPagination
+                    v-if="!loading"
+                    v-show="pagination.totalPages > 1"
+                    class="products__pagination"
+                    :current="pagination.currentPage"
+                    :total="pagination.totalPages"
+                    :visible="5"
+                  />
                 </LazyHydrate>
+                <div
+                  v-show="pagination.totalPages > 1"
+                  class="products__show-on-page"
+                >
+                  <span class="products__show-on-page__label">
+                    {{ $t('Show on page') }}
+                  </span>
+                  <LazyHydrate on-interaction>
+                    <SfSelect
+                      :value="pagination.itemsPerPage.toString()"
+                      class="products__items-per-page"
+                      @input="th.changeItemsPerPage"
+                    >
+                      <SfSelectOption
+                        v-for="option in pagination.pageOptions"
+                        :key="option"
+                        :value="option"
+                        class="products__items-per-page__option"
+                      >
+                        {{ option }}
+                      </SfSelectOption>
+                    </SfSelect>
+                  </LazyHydrate>
+                </div>
               </div>
             </div>
           </SfLoader>
@@ -506,6 +507,18 @@ export default defineComponent({
       font-size: var(--font-size--sm);
     }
   }
+
+  &__display-opt {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    @include for-mobile {
+      .sf-pagination {
+        margin-bottom: 10px;
+      }
+    }
+  }
 }
 
 .loading {
diff --git a/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue b/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
index 77231be..92a3d05 100644
--- a/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
+++ b/modules/customer/pages/MyAccount/OrderHistory/OrderHistory.vue
@@ -63,7 +63,7 @@
           <SfPagination
             v-if="!$fetchState.pending"
             v-show="pagination.totalPages > 1"
-            class="products__pagination desktop-only"
+            class="products__pagination"
             :current="pagination.currentPage"
             :total="pagination.totalPages"
             :visible="5"
@@ -235,13 +235,10 @@ export default defineComponent({
   flex: 1;
   margin: 0;
 
-  @include for-desktop {
-
-    &__pagination {
-      display: flex;
-      justify-content: flex-start;
-      margin: var(--spacer-xl) 0 0 0;
-    }
+  &__pagination {
+    display: flex;
+    justify-content: flex-start;
+    margin: var(--spacer-xl) 0 0 0;
   }
 
   &__show-on-page {
diff --git a/modules/customer/pages/MyAccount/OrderHistory/SingleOrder/SingleOrder.vue b/modules/customer/pages/MyAccount/OrderHistory/SingleOrder/SingleOrder.vue
index 0155d28..0370ee6 100644
--- a/modules/customer/pages/MyAccount/OrderHistory/SingleOrder/SingleOrder.vue
+++ b/modules/customer/pages/MyAccount/OrderHistory/SingleOrder/SingleOrder.vue
@@ -28,12 +28,15 @@
             :key="item.product_sku"
           >
             <SfTableData class="products__name">
-              {{ item.product_name }}
+              <span v-html="$dompurify(item.product_name)" />
               <div
                 v-for="option in item.selected_options"
                 :key="option.label"
               >
-                <span class="configurable-option-label">{{ option.label }}</span>
+                <span
+                  class="configurable-option-label"
+                  v-html="$dompurify(option.label)"
+                />
                 <span>{{ option.value }}</span>
               </div>
             </SfTableData>
@@ -136,7 +139,9 @@ import {
   SfLoader,
   SfHeading,
 } from '@storefront-ui/vue';
-import { defineComponent, useAsync, useContext } from '@nuxtjs/composition-api';
+import {
+  defineComponent, useAsync, useContext, useRouter,
+} from '@nuxtjs/composition-api';
 import { useUserOrder } from '~/modules/customer/composables/useUserOrder';
 import orderGetters from '~/modules/checkout/getters/orderGetters';
 import { useCountrySearch } from '~/composables';
@@ -157,12 +162,19 @@ export default defineComponent({
   props: { orderId: { type: String, required: true } },
   setup(props) {
     const context = useContext();
+    const router = useRouter();
     const { search, loading } = useUserOrder();
     const { search: searchCountries } = useCountrySearch();
     const asyncData = useAsync(async () => {
       const orderResult = await search({ filter: { number: { eq: props.orderId } } });
       const order = orderResult.items[0] ?? null;
 
+      if (!order) {
+        router.push(context.localeRoute({ name: 'customer-order-history' }));
+
+        return null;
+      }
+
       const uniqueCountryCodePromises = [...new Set([order.shipping_address.country_code, order.billing_address.country_code])]
         .map((countryCode) => searchCountries({ id: countryCode }));
       const countries = await Promise.all(uniqueCountryCodePromises);
diff --git a/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts b/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts
index 7f3032b..d871130 100644
--- a/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts
+++ b/modules/customer/pages/MyAccount/useSidebarLinkGroups.ts
@@ -49,7 +49,8 @@ export const useSidebarLinkGroups = () => {
           label: 'Log out',
           listeners: {
             click: async () => {
-              await Promise.all([logout({}), clear({})]);
+              await logout({});
+              await clear({});
               await router.push(localeRoute({ name: 'home' }));
             },
           },
diff --git a/modules/wishlist/components/WishlistSidebar.vue b/modules/wishlist/components/WishlistSidebar.vue
index dc355ed..9eb5f80 100644
--- a/modules/wishlist/components/WishlistSidebar.vue
+++ b/modules/wishlist/components/WishlistSidebar.vue
@@ -99,27 +99,16 @@
               </template>
             </SfCollectedProduct>
           </div>
-          <div class="sidebar-bottom">
-            <SfProperty
-              class="sf-property--full-width my-wishlist__total-price"
-            >
-              <template #name>
-                <span class="my-wishlist__total-price-label">{{ $t('Total price') }}:</span>
-              </template>
-              <template #value>
-                <SfPrice :regular="$fc(totals.subtotal)" />
-              </template>
-            </SfProperty>
-          </div>
         </div>
         <EmptyWishlist v-else />
       </SfLoader>
       <template #content-bottom>
         <SfButton
+          v-if="isShowGoToWishlistButton"
           class="sf-button--full-width color-secondary"
-          @click="toggleWishlistSidebar"
+          @click="$router.push(localeRoute({ name: 'customer-my-wishlist' }))"
         >
-          {{ $t('Start shopping') }}
+          {{ $t('Show all products') }}
         </SfButton>
       </template>
     </SfSidebar>
@@ -131,7 +120,6 @@ import {
   SfHeading,
   SfButton,
   SfProperty,
-  SfPrice,
   SfCollectedProduct,
   SfLink,
   SfLoader,
@@ -165,7 +153,6 @@ export default defineComponent({
     SfButton,
     SfHeading,
     SfProperty,
-    SfPrice,
     SfCollectedProduct,
     SfLink,
     SfLoader,
@@ -231,11 +218,10 @@ export default defineComponent({
     });
 
     const { getMagentoImage, imageSizes } = useImage();
+    const isShowGoToWishlistButton = computed(() => wishlistStore.wishlist.items_count > wishlistStore.wishlist?.items_v2?.items.length);
 
     onMounted(async () => {
-      if (!wishlistStore.wishlist.id) {
-        await loadWishlist();
-      }
+      await loadWishlist({ searchParams: { pageSize: 100 } });
     });
 
     router.afterEach(() => {
@@ -260,6 +246,7 @@ export default defineComponent({
       imageSizes,
       loading,
       getItemPrice,
+      isShowGoToWishlistButton,
     };
   },
 });
@@ -270,7 +257,7 @@ export default defineComponent({
   --sidebar-z-index: 3;
   --overlay-z-index: 3;
   --sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0
-    var(--spacer-base);
+  var(--spacer-base);
   --sidebar-content-padding: var(--spacer-lg) var(--spacer-base);
 }
 
@@ -280,7 +267,7 @@ export default defineComponent({
   flex-direction: column;
   &__total-items {
     font: var(--font-weight--normal) var(--font-size--lg) / 1.6
-      var(--font-family--secondary);
+    var(--font-family--secondary);
     color: var(--c-link);
     margin: 0;
   }
@@ -290,7 +277,7 @@ export default defineComponent({
     margin: 0 0 var(--spacer-xl) 0;
     &-label {
       font: var(--font-weight--normal) var(--font-size--2xl) / 1.6
-        var(--font-family--secondary);
+      var(--font-family--secondary);
       color: var(--c-link);
     }
   }
diff --git a/nuxt.config.js b/nuxt.config.js
index 82445ea..34d5614 100755
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -207,6 +207,7 @@ export default () => {
       ],
       transpile: [
         'vee-validate',
+        'lodash-es',
         /^@storefront-ui/,
       ],
     },
@@ -261,10 +262,10 @@ export default () => {
     baseConfig.modules.push('@nuxtjs/recaptcha');
 
     baseConfig.recaptcha = {
-      hideBadge: process.env.VSF_RECAPTCHA_HIDE_BADGE, // Hide badge element (v3 & v2 via size=invisible)
+      hideBadge: Boolean(process.env.VSF_RECAPTCHA_HIDE_BADGE), // Hide badge element (v3 & v2 via size=invisible)
       siteKey: process.env.VSF_RECAPTCHA_SITE_KEY, // Site key for requests
-      version: process.env.VSF_RECAPTCHA_VERSION, // Version 2 or 3
-      size: process.env.VSF_RECATPCHA_SIZE, // Size: 'compact', 'normal', 'invisible' (v2)
+      version: Number(process.env.VSF_RECAPTCHA_VERSION), // Version 2 or 3
+      size: process.env.VSF_RECAPTCHA_SIZE, // Size: 'compact', 'normal', 'invisible' (v2)
     };
 
     baseConfig.publicRuntimeConfig = {
diff --git a/package.json b/package.json
index afb30e6..b3355df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/magento-theme",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0-rc.10",
   "private": true,
   "license": "MIT",
   "homepage": "https://github.com/vuestorefront/magento2",
@@ -32,11 +32,12 @@
     "@nuxtjs/composition-api": "^0.31.0",
     "@nuxtjs/device": "^2.1.0",
     "@nuxtjs/pwa": "^3.3.5",
+    "@nuxtjs/recaptcha": "^1.1.1",
     "@nuxtjs/style-resources": "^1.2.1",
     "@pinia/nuxt": "^0.1.8",
     "@storefront-ui/vue": "^0.13.0",
     "@vue-storefront/cache": "~2.5.6",
-    "@vue-storefront/magento-api": "^1.0.0-rc.9",
+    "@vue-storefront/magento-api": "^1.0.0-rc.10",
     "@vue-storefront/middleware": "~2.5.6",
     "@vue-storefront/nuxt": "~2.5.6",
     "@vue-storefront/redis-cache": "^1.0.1",
@@ -46,12 +47,9 @@
     "cookie-universal-nuxt": "^2.1.5",
     "deepdash": "^5.3.9",
     "express": "4.17.3",
-    "graphql-tag": "^2.12.6",
     "is-https": "^4.0.0",
     "isomorphic-dompurify": "^0.18.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.merge": "^4.6.2",
-    "lodash.unescape": "^4.0.1",
+    "lodash-es": "^4.17.21",
     "nuxt": "^2.15.8",
     "nuxt-i18n": "^6.28.0",
     "omit-deep": "^0.3.0",
@@ -70,9 +68,8 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^14.2.0",
     "@testing-library/vue": "^5.8.3",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/lodash.unescape": "^4.0.7",
+    "@types/k6": "^0.37.0",
+    "@types/lodash-es": "^4.17.6",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^27.4.6",
diff --git a/plugins/__tests__/i18n.spec.js b/plugins/__tests__/i18n.spec.js
index 2d16659..c88aa53 100644
--- a/plugins/__tests__/i18n.spec.js
+++ b/plugins/__tests__/i18n.spec.js
@@ -118,5 +118,8 @@ describe('i18n plugin', () => {
     expect(testCaseAppMock.$vsf.$magento.config.state.setLocale).toHaveBeenCalledWith('de_DE');
     expect(testCaseAppMock.$vsf.$magento.config.state.setStore).toHaveBeenCalledWith('de_DE');
     expect(testCaseAppMock.$vsf.$magento.config.state.setCurrency).toHaveBeenCalledWith('EUR');
+    expect(callbackRequest.headers.cookie).toMatchInlineSnapshot(
+      '"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=EUR; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "',
+    );
   });
 });
diff --git a/plugins/dompurify.ts b/plugins/dompurify.ts
index 3ed6dcf..f1316e1 100644
--- a/plugins/dompurify.ts
+++ b/plugins/dompurify.ts
@@ -1,4 +1,4 @@
-import _unescape from 'lodash.unescape';
+import { unescape } from 'lodash-es';
 import DOMPurify from 'isomorphic-dompurify';
 import type { Plugin } from '@nuxt/types';
 
@@ -9,7 +9,7 @@ declare module 'vue/types/vue' {
 }
 
 const plugin : Plugin = (_, inject) => {
-  inject('dompurify', (html: string): string => _unescape(DOMPurify.sanitize(html)));
+  inject('dompurify', (html: string): string => unescape(DOMPurify.sanitize(html)));
 };
 
 export default plugin;
diff --git a/plugins/i18n.ts b/plugins/i18n.ts
index d8efca3..d6367b8 100644
--- a/plugins/i18n.ts
+++ b/plugins/i18n.ts
@@ -1,4 +1,4 @@
-import { Context } from '@nuxt/types';
+import { Context, NuxtAppOptions } from '@nuxt/types';
 import { LocaleObject } from 'nuxt-i18n';
 
 const findLocaleBasedOnMagentoStoreCode = (storeCode: string, locales: Array<string | LocaleObject>) => locales.find((locale) => ((typeof locale === 'object' ? locale.code : locale) === storeCode));
@@ -8,6 +8,35 @@ const findCurrencyBasedOnMagentoStoreCode = (storeCode: string, locales: Array<s
   return match?.defaultCurrency;
 };
 
+/**
+ * Prepare new cookie string based on app state.
+ *
+ * @param app {NuxtAppOptions}
+ * @param newStoreCode {string}
+ * @param currency {string}
+ * @returns {string}
+ */
+const prepareNewCookieString = (app: NuxtAppOptions, newStoreCode: string, currency: string) => {
+  const apiState = app.$vsf.$magento.config.state;
+  const customerTokenCookie = apiState.getCustomerToken();
+  const cartIdCookie = apiState.getCartId();
+
+  let cookie = `vsf-store=${newStoreCode}; `;
+  cookie += `vsf-locale=${newStoreCode}; `;
+  cookie += `vsf-currency=${currency}; `;
+  cookie += `vsf-country=${apiState.getCountry()}; `;
+
+  if (customerTokenCookie) {
+    cookie += `vsf-customer=${customerTokenCookie}; `;
+  }
+
+  if (cartIdCookie) {
+    cookie += `vsf-cart=${cartIdCookie} `;
+  }
+
+  return cookie;
+};
+
 export default ({ app, route }: Context) => app.$vsf.$magento.client.interceptors.request.use(async (request) => {
   const {
     $vsf: { $magento: { config: { state } } },
@@ -25,11 +54,14 @@ export default ({ app, route }: Context) => app.$vsf.$magento.client.interceptor
   const shouldLocaleBeRefreshed = i18nCurrentLocaleCode !== state.getLocale();
 
   if (shouldLocaleBeRefreshed) {
-    const currency = findCurrencyBasedOnMagentoStoreCode(currentStoreCode, i18n.locales);
-    state.setCurrency(currency);
+    const currency = findCurrencyBasedOnMagentoStoreCode(i18nCurrentLocaleCode, i18n.locales);
 
     state.setStore(i18nCurrentLocaleCode);
     state.setLocale(i18nCurrentLocaleCode);
+    state.setCurrency(currency);
+
+    // eslint-disable-next-line no-param-reassign
+    request.headers.cookie = prepareNewCookieString(app, i18nCurrentLocaleCode, currency);
   }
 
   return request;
diff --git a/plugins/query/StoreConfig.gql.ts b/plugins/query/StoreConfig.gql.ts
index 1d36bb7..8bcadb9 100644
--- a/plugins/query/StoreConfig.gql.ts
+++ b/plugins/query/StoreConfig.gql.ts
@@ -1,7 +1,5 @@
-import gql from 'graphql-tag';
-
 /** GraphQL Query that fetches store configuration from the API */
-export const StoreConfigQuery = gql`
+export const StoreConfigQuery = `
   query storeConfig {
     storeConfig {
         store_code,
diff --git a/plugins/token-expired.ts b/plugins/token-expired.ts
index 12b8f2b..d628b9b 100644
--- a/plugins/token-expired.ts
+++ b/plugins/token-expired.ts
@@ -4,7 +4,7 @@ import type { UiNotification } from '~/composables/useUiNotification';
 import { useCustomerStore } from '~/modules/customer/stores/customer';
 
 export const hasGraphqlAuthorizationError = (res: ApolloQueryResult<unknown>) => res?.errors
-  ?.some((error) => error.extensions.category === 'graphql-authorization') ?? false;
+  ?.some((error) => error?.extensions?.category === 'graphql-authorization') ?? false;
 
 const plugin : Plugin = ({ $pinia, app }) => {
   const customerStore = useCustomerStore($pinia);
diff --git a/test-utils/mocks/categoryTreeDataMock.ts b/test-utils/mocks/categoryTreeDataMock.ts
index 15e250e..0e60dd9 100644
--- a/test-utils/mocks/categoryTreeDataMock.ts
+++ b/test-utils/mocks/categoryTreeDataMock.ts
@@ -571,6 +571,7 @@ export const defaultCategoryTreeData = [
     url_path: 'training',
     url_suffix: '.html',
     include_in_menu: 1,
+    children: [],
   },
 ];
 
diff --git a/test-utils/mocks/useCurrency.ts b/test-utils/mocks/useCurrency.ts
new file mode 100644
index 0000000..b5507ba
--- /dev/null
+++ b/test-utils/mocks/useCurrency.ts
@@ -0,0 +1,11 @@
+import { ref } from '@nuxtjs/composition-api';
+
+export const useCurrencyMock = {
+  currency: ref({}),
+  load: jest.fn(),
+  change: jest.fn(),
+  error: ref({
+    load: null,
+    change: null,
+  }),
+};
diff --git a/test-utils/mocks/useStore.ts b/test-utils/mocks/useStore.ts
new file mode 100644
index 0000000..3739c14
--- /dev/null
+++ b/test-utils/mocks/useStore.ts
@@ -0,0 +1,11 @@
+import { ref } from '@nuxtjs/composition-api';
+
+export const useStoreMock = {
+  stores: ref([]),
+  load: jest.fn(),
+  change: jest.fn(),
+  error: ref({
+    load: null,
+    change: null,
+  }),
+};
diff --git a/test-utils/mocks/useUiState.ts b/test-utils/mocks/useUiState.ts
index d9a35a9..3547cda 100644
--- a/test-utils/mocks/useUiState.ts
+++ b/test-utils/mocks/useUiState.ts
@@ -1,9 +1,13 @@
+import { computed } from '@nuxtjs/composition-api';
+
 export const useUiStateMock = (extend = {}) => ({
-  isCartSidebarOpen: false,
+  isCartSidebarOpen: computed(() => false),
+  isMobileMenuOpen: computed(() => false),
   changeToCategoryGridView: jest.fn(),
   changeToCategoryListView: jest.fn(),
   toggleCartSidebar: jest.fn(),
   toggleFilterSidebar: jest.fn(),
+  toggleWishlistSidebar: jest.fn(),
   toggleMobileMenu: jest.fn(),
   ...extend,
 });
diff --git a/tests/load/README.md b/tests/load/README.md
new file mode 100644
index 0000000..e6e9073
--- /dev/null
+++ b/tests/load/README.md
@@ -0,0 +1,45 @@
+# Load testing
+We use K6 for load testing. "K6" refers to both the `k6` executable used in the terminal, and the K6 cloud SAAS platform at [app.k6.io](https://app.k6.io)
+
+## Installing the `k6` executable
+To run load tests locally, you need to install the `k6` executable.\
+On Mac with Homebrew, you can run:
+```sh
+brew install k6
+k6 --help
+```
+
+## Running load tests
+
+### Running locally
+
+To run the load test `searchProducts.js` on your computer, with its cannons aimed at our `canary` environment, run:
+```sh
+k6 run searchProducts.js -e BASE_URL=https://demo-magento2-canary.europe-west1.gcp.storefrontcloud.io
+```
+Please run tests locally before running on the cloud or comitting them to make sure the tests can execute at all.
+
+### Running in the cloud
+
+#### Accessing K6 web dashboard
+Before you ask the K6 cloud to run the tests for you, please make sure that:
+1. You logged in at [app.k6.io](https://app.k6.io) with your VSF Google domain account
+2. You were invited to the VSF K6 organization (K6 won't automatically add you to it - even though you're using your domain account) - ask Miłosz if you don't have access
+3. In the sidebar in the top right, select the "Magento" project.
+That way you'll be able to access the test results.
+
+K6 tests whose options assign the test to the Magento project ID will be shown there. Only tests ran in the cloud appear (ran through GitHub action or locally with `k6 cloud`).
+
+#### Running from our GitHub Action workflow
+
+Go to [the GitHub Actions tab in our repository](https://github.com/vuestorefront/magento2/actions/workflows/run-k6-load-test.yml). On the right, click the "Run workflow" button. A form with these fields will appear:
+
+* Through the checkbox at the top of the form, you can decide if you want to run the test on K6 cloud or within the GitHub action agent (similar to running the test with `k6 run` on your computer, just remotely in GitHub Actions). If you're unsure the test will run correctly, try running it within the Actions agent first, then in the cloud. This avoids wasting a test run from our K6 cloud paid plan.
+* The path of the K6 test case file to run
+* The `BASE_URL` on which tests will be ran. This the `canary` environment URL by default, since you're most likely to be load testing pre-releases.
+* The flags to pass to the k6 command.\
+This is useful for overriding or setting options for this particular workflow run. For example, putting `-e K6_VUS=7` in this field makes the test spawn 7 virtual users instead of 10 (default).\
+You'll find flag names for other options in the [K6 options reference](https://k6.io/docs/using-k6/k6-options/reference/) - look for the environment variable version of the command in the `ENV` column in the reference table. Some options, like `Extensions` can't be passed as ENV flag - you'll have to hardcode the option in test definition JavaScript code.
+
+### Requesting a cloud run manually
+Use the `k6 cloud` command to issue a cloud run request manually. Though the GitHub action workflow is preferred.
diff --git a/tests/load/searchProduct.js b/tests/load/searchProduct.js
new file mode 100644
index 0000000..4bd6749
--- /dev/null
+++ b/tests/load/searchProduct.js
@@ -0,0 +1,370 @@
+// Creator: k6 Browser Recorder 0.6.2 (+ handmade cleanups)
+import { sleep, group } from 'k6';
+import http from 'k6/http';
+
+import jsonpath from 'https://jslib.k6.io/jsonpath/1.0.2/index.js';
+
+/**
+ * @type {import('k6/options').Options}
+ */
+export const options = {
+  vus: 10,
+  duration: '5m',
+  ext: {
+    loadimpact: {
+      name: 'Search products',
+      note: 'Guest user browsing through a product',
+      // eslint-disable-next-line unicorn/numeric-separators-style
+      projectID: 3591701,
+    },
+  },
+};
+
+const { BASE_URL } = __ENV;
+
+if (BASE_URL === undefined) {
+  throw new Error('BASE_URL is not set');
+}
+
+export default function main() {
+  let response;
+
+  const vars = {};
+
+  group(`page_1 - ${BASE_URL}/default`, () => {
+    response = http.get(`${BASE_URL}/default`);
+    sleep(0.5);
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query storeConfig {
+    storeConfig {
+        store_code,
+        default_title,
+        store_name,
+        default_display_currency_code,
+        locale,
+        header_logo_src,
+        logo_width,
+        logo_height,
+        logo_alt
+    }
+  }
+"}]`,
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query getStoresAndCurrencies {
+      availableStores {
+        store_code
+      }
+    currency {
+      available_currency_codes
+    }
+  }
+"}]`,
+    );
+    sleep(2.6);
+
+    response = http.post(
+      `${BASE_URL}/api/magento/route`,
+      '["/women/tops-women/jackets-women.html",null]',
+    );
+
+    [vars.uid1] = jsonpath.query(response.json(), '$.data.route.uid');
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query categoryList {
+    categories {
+      items {
+        ...CategoryFields
+        children {
+          ...CategoryFields
+          children {
+            ...CategoryFields
+            children {
+              ...CategoryFields
+            }
+          }
+        }
+      }
+    }
+  }
+
+  fragment CategoryFields on CategoryTree {
+    is_anchor
+    name
+    position
+    product_count
+    uid
+    url_path
+    url_suffix
+    include_in_menu
+  }
+
+"}]`,
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query getCategoryContentData($filters: CategoryFilterInput) {
+    categoryList(filters: $filters) {
+      uid
+      display_mode
+      landing_page
+      cms_block {
+        identifier
+        content
+      }
+    }
+  }
+","queryVariables":{"filters":{"category_uid":{"eq":"${vars.uid1}"}}}}]`,
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query getFacetData($search: String = \\"\\", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
+    products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
+      items {
+        __typename
+        uid
+        sku
+        name
+        stock_status
+        only_x_left_in_stock
+        thumbnail {
+          url
+          position
+          disabled
+          label
+        }
+        url_key
+        url_rewrites {
+          url
+        }
+        price_range {
+          maximum_price {
+            final_price {
+              currency
+              value
+            }
+            regular_price {
+              currency
+              value
+            }
+          }
+          minimum_price {
+            final_price {
+              currency
+              value
+            }
+            regular_price {
+              currency
+              value
+            }
+          }
+        }
+      }
+      page_info {
+        current_page
+        page_size
+        total_pages
+      }
+      total_count
+    }
+  }
+","queryVariables":{"pageSize":10,"search":"","filter":{"category_uid":{"in":["${vars.uid1}"]}},"sort":{},"currentPage":1}}]`,
+    );
+    sleep(0.5);
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query getProductFiltersByCategory($categoryIdFilter: FilterEqualTypeInput!) {
+    products(filter: { category_uid: $categoryIdFilter }) {
+      aggregations {
+        label
+        count
+        attribute_code
+        options {
+          count
+          label
+          value
+          __typename
+        }
+        position
+        __typename
+      }
+      __typename
+    }
+  }
+","queryVariables":{"categoryIdFilter":{"eq":"${vars.uid1}"}}}]`,
+    );
+    sleep(1.8);
+
+    response = http.post(
+      `${BASE_URL}/api/magento/productDetail`,
+      '[{"filter":{"sku":{"eq":"WJ12"}},"configurations":[]},{"productDetail":"productDetail"}]',
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/customQuery`,
+      `[{"query":"
+  query getProductPriceBySku($sku: String) {
+    products(filter: {sku: {eq: $sku}}) {
+      items {
+        price_range {
+          ...PriceRangeFields
+        }
+
+        ... on BundleProduct {
+          items {
+            position
+            required
+            sku
+            title
+            type
+            uid
+            options {
+              can_change_quantity
+              is_default
+              position
+              uid
+              quantity
+              product {
+                uid
+                sku
+                name
+                price_range {
+                  maximum_price {
+                    final_price {
+                      currency
+                      value
+                    }
+                    regular_price {
+                      currency
+                      value
+                    }
+                  }
+                  minimum_price {
+                    final_price {
+                      currency
+                      value
+                    }
+                    regular_price {
+                      currency
+                      value
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        ... on GroupedProduct {
+          items {
+            position
+            qty
+            product {
+              uid
+              sku
+              name
+              stock_status
+              only_x_left_in_stock
+              price_range {
+                maximum_price {
+                  final_price {
+                    currency
+                    value
+                  }
+                  regular_price {
+                    currency
+                    value
+                  }
+                }
+                minimum_price {
+                  final_price {
+                    currency
+                    value
+                  }
+                  regular_price {
+                    currency
+                    value
+                  }
+                }
+              }
+              thumbnail {
+                url
+                position
+                disabled
+                label
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+  fragment PriceRangeFields on PriceRange {
+    maximum_price {
+      final_price {
+        currency
+        value
+      }
+      regular_price {
+        currency
+        value
+      }
+    }
+    minimum_price {
+      final_price {
+        currency
+        value
+      }
+      regular_price {
+        currency
+        value
+      }
+    }
+  }
+
+","queryVariables":{"sku":"WJ12"}}]`,
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/upsellProduct`,
+      '[{"filter":{"sku":{"eq":"WJ12"}}},null]',
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/relatedProduct`,
+      '[{"filter":{"sku":{"eq":"WJ12"}}},null]',
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/productReviewRatingsMetadata`,
+      '[null]',
+    );
+    sleep(2.3);
+
+    response = http.post(
+      `${BASE_URL}/api/magento/productReview`,
+      '[{"filter":{"sku":{"eq":"WJ12"}}},null]',
+    );
+
+    response = http.post(
+      `${BASE_URL}/api/magento/productReviewRatingsMetadata`,
+      '[null]',
+    );
+  });
+}
diff --git a/yarn.lock b/yarn.lock
index a3081c1..53fe71b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1988,6 +1988,11 @@
     serve-static "^1.14.1"
     workbox-cdn "^5.1.4"
 
+"@nuxtjs/recaptcha@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/recaptcha/-/recaptcha-1.1.1.tgz#21f9dcd53d7b869b570ab4829404df1200ed26de"
+  integrity sha512-maHqf6x6EgfRm7lvjK7nTwle/17cRzMkeFDWPGdcdKjDnAjuli7Mei5qPG0CFZX1zG9ohIEv+0QEs7fgudyLrg==
+
 "@nuxtjs/style-resources@^1.0.0", "@nuxtjs/style-resources@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@nuxtjs/style-resources/-/style-resources-1.2.1.tgz#9a2b6580b2ed9b06e930bee488a56b8376a263de"
@@ -2449,29 +2454,20 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/k6@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@types/k6/-/k6-0.37.0.tgz#fb357d5218c8c2b5bc197dae818eebe7085906fc"
+  integrity sha512-8ou8tK3i/8HJFiyxz9ktrT1CWvtdItlq5ybaysnnwX7wSNLZv3TdR28Q2kW9byYVJKNhuwOnoecB2oM/NytN2Q==
+
 "@types/less@3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/less/-/less-3.0.2.tgz#2761d477678c8374cb9897666871662eb1d1115e"
   integrity sha512-62vfe65cMSzYaWmpmhqCMMNl0khen89w57mByPi1OseGfcV/LV03fO8YVrNj7rFQsRWNJo650WWyh6m7p8vZmA==
 
-"@types/lodash.debounce@^4.0.6":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
-  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash.merge@^4.6.7":
-  version "4.6.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.merge/-/lodash.merge-4.6.7.tgz#0af6555dd8bc6568ef73e5e0d820a027362946b1"
-  integrity sha512-OwxUJ9E50gw3LnAefSHJPHaBLGEKmQBQ7CZe/xflHkyy/wH2zVyEIAKReHvVrrn7zKdF58p16We9kMfh7v0RRQ==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash.unescape@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.unescape/-/lodash.unescape-4.0.7.tgz#69f1cab2e755b824151346a44faeaaf93702972b"
-  integrity sha512-KGxcfHpWcOnLeK5g71YErXL6m947wQC9XfhVjENlCku85C6WxsqNIxwxpqDCpL06rY5ExQiXZH50KgJDFLzc7Q==
+"@types/lodash-es@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.6.tgz#c2ed4c8320ffa6f11b43eb89e9eaeec65966a0a0"
+  integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
   dependencies:
     "@types/lodash" "*"
 
@@ -2759,10 +2755,10 @@
     lodash-es "^4.17.15"
     vue "^2.6.11"
 
-"@vue-storefront/magento-api@^1.0.0-rc.9":
-  version "1.0.0-rc.9"
-  resolved "https://registry.yarnpkg.com/@vue-storefront/magento-api/-/magento-api-1.0.0-rc.9.tgz#3e39796d935fd8d36d3e131d64910315cbb36e9b"
-  integrity sha512-RuFfJPOQlElkoWMldwX9jF7/vmKYLedAmdm07BG3rA2A7xGMuAesYuZ8yZT7IgsaydsghGm9cB/aLl3xoRh4mQ==
+"@vue-storefront/magento-api@^1.0.0-rc.10":
+  version "1.0.0-rc.10"
+  resolved "https://registry.yarnpkg.com/@vue-storefront/magento-api/-/magento-api-1.0.0-rc.10.tgz#26abf9e7ed02be460c5c9637e2a0dbe51ce2c527"
+  integrity sha512-f7HNz9ag3ddalTZFzxHyfy+F56I6oVsNioXLHbGh2LSi2j2/lGt5kK8nIpU7uK29tvvN6fq+PtUslWtWxuVN+g==
   dependencies:
     "@apollo/client" "^3.5.8"
     agentkeepalive "^4.2.1"
@@ -9666,11 +9662,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.unescape@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
-  integrity sha512-DhhGRshNS1aX6s5YdBE3njCCouPgnG29ebyHvImlZzXZf2SHgt+J08DHgytTPnpywNbO1Y8mNUFyQuIDBq2JZg==
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"