refactor(composables): align refactor perf improvements branch to cur…

…rent develop (#713) * refactor(theme): refactored Page route to use asyncData * perf(theme): refactored asyncData to useAsync on page.vue * refactor(theme): restored redis support for cms pages * refactor(theme): add nuxt/pinia module to manage app state (#568) Co-authored-by: Bartosz Herba <[email protected]> * refactor(theme): add core pinia module * refactor(theme): refactored AppHeader to use the useAsync composable instead of onSSR (#570) * refactor(theme): refactor useConfig composable (#572) - mark composable useCnfig as deprecated - move composable to theme module - rework composable to get rid of core dependency and to utilize Pinia store Co-authored-by: Bartosz Herba <[email protected]> * refactor(composables): moved the useExternalCheckout composable to theme (#571) * refactor: m2-154. refactor use store composable to use pinia store (#576) * temp use store * refactor(theme): refactor useStore composable - mark useStore as deprecated in composables - add useStore composable in a theme module BREAKING CHANGE: rework useStore composable Co-authored-by: Bartosz Herba <[email protected]> * refactor: restored loadUser in app header * refactor: useWishlist (#577) * refactor: refactored context binding * refactor: refactored useWishlist, fixed removing from wishlist in my account * refactor: wishlist: cr changes * refactor(theme): M2 155. refactor useCurrency composable (#579) * refactor(theme): move stores to pinia store * refactor(theme): refactor useCurrency composable BREAKING CHANGES: - mark useCurrency as a deprecated in composables module - add refactored and lightweight useCurrency in theme with usage of pinia store management Co-authored-by: Bartosz Herba <[email protected]> * refactor: useUser (#582) * refactor: added new theme composable: useUser * refactor(theme): changed useUser binding to the new composable * refactor(useuser): added types * docs: added depracated infor to useUser composable * refactor: removed console.log * refactor(theme): refactored UseForgotPassword (#583) * refactor: refactored useCategory composable (#585) * refactor: refactored useFacet composable (#587) * refactor(theme): refactor useCart composable (#584) Co-authored-by: Bartosz Herba <[email protected]> * refactor: refactored useCategorySearch (#589) * refactor(theme): refactor useContent composable (#590) BREAKING CHANGE: - mark useContent as deprecated, implement useContent in theme package * fix(theme): fix page component data load * refactor: refactored usecontent to work with useasync composable * refactor: a/B testing: changed config loading from on moundted to useFetch (#593) * fix: fixed ssr issues (#594) * refactor: restored chunks * refactor: removed chunks * test: a/b: disabled config loading, and navigation * refactor(theme): refactor useUiState (#595) Co-authored-by: Bartosz Herba <[email protected]> * - fix issues with dynamic modules import - fix issues with useUiState import * - update cart store and usage of useCart composable * - fix wishlist issues after merge * - mark tests as skipped for a further refactor * Update .github/workflows/deploy-vue-storefront-cloud.yml Co-authored-by: Artur Tagisow <[email protected]> * Update .github/workflows/deploy-vue-storefront-cloud.yml * Update packages/composables/src/composables/useCart/index.ts * Update packages/composables/src/composables/useCart/index.ts * Update packages/composables/src/composables/useCategorySearch/index.ts * Update packages/theme/composables/useCart/commands/loadTotalQtyCommand.ts * Update packages/composables/src/composables/useCategorySearch/index.ts * Update packages/composables/src/composables/useConfig/index.ts * Update packages/composables/src/composables/useContent/index.ts * Update packages/composables/src/composables/useContent/index.ts * - update docblocks Co-authored-by: Marcin Kwiatkowski <[email protected]> Co-authored-by: Bartosz Herba <[email protected]> Co-authored-by: Artur Tagisow <[email protected]>
vuestorefront · May 4, 2022 · da562a1 · da562a1
1 parent aaa1162
commit da562a1
Show file tree

Hide file tree

Showing 114 changed files with 2,654 additions and 119 deletions.
diff --git a/packages/api-client/src/types/GraphQL.ts b/packages/api-client/src/types/GraphQL.ts
@@ -660,13 +660,13 @@ export interface Cart {
   /** The entered gift message for the cart */
   gift_message?: Maybe<GiftMessage>;
   /** The unique ID for a `Cart` object */
-  id: Scalars['ID'];
-  is_virtual: Scalars['Boolean'];
+  id?: Maybe<Scalars['ID']>;
+  is_virtual: Maybe<Scalars['Boolean']>;
   items?: Maybe<Array<Maybe<CartItemInterface>>>;
   prices?: Maybe<CartPrices>;
   selected_payment_method?: Maybe<SelectedPaymentMethod>;
-  shipping_addresses: Array<Maybe<ShippingCartAddress>>;
-  total_quantity: Scalars['Float'];
+  shipping_addresses?: Maybe<Array<Maybe<ShippingCartAddress>>>;
+  total_quantity?: Maybe<Scalars['Float']>;
 }
 
 export interface CartAddressCountry {

diff --git a/packages/composables/nuxt/plugin.js b/packages/composables/nuxt/plugin.js
@@ -5,6 +5,7 @@ import cookie from '@vue-storefront/magento/nuxt/cookie';
 
 const moduleOptions = JSON.parse('<%= JSON.stringify(options) %>');
 
+// TODO should be moved to THEME and expose consistent cookie management API
 export default integrationPlugin(({ app, res, req, integration }) => {
   const cartCookieName = moduleOptions.cookies?.cartCookieName || defaultConfig.cookies.cartCookieName;
   const customerCookieName = moduleOptions.cookies?.customerCookieName || defaultConfig.cookies.customerCookieName;

diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
@@ -1,5 +1,6 @@
-/* istanbul ignore file */
-/* eslint-disable no-param-reassign */
+/**
+ * @deprecated since version 1.0.0
+ */
 import {
   ComposableFunctionArgs,
   Context,

diff --git a/packages/composables/src/composables/useCategorySearch/index.ts b/packages/composables/src/composables/useCategorySearch/index.ts
@@ -5,6 +5,9 @@ import { Category, CategorySearchQueryVariables } from '@vue-storefront/magento-
 import { UseCategorySearchFactory, useCategorySearchFactory } from '../../factories/useCategorySearchFactory';
 import { UseCategorySearch } from '../../types/composables';
 
+/**
+ * @deprecated since version 1.0.0
+ */
 const factoryParams: UseCategorySearchFactory<Category, CategorySearchQueryVariables> = {
   search: async (context: Context, params): Promise<Category[]> => {
     Logger.debug('[Magento]: Search for category using', { params });

diff --git a/packages/composables/src/composables/useConfig/index.ts b/packages/composables/src/composables/useConfig/index.ts
@@ -1,4 +1,7 @@
-import {Context, Logger} from '@vue-storefront/core';
+/**
+ * @deprecated since version 1.0.0
+ */
+import { Context, Logger } from '@vue-storefront/core';
 import { StoreConfig } from '@vue-storefront/magento-api';
 import { useConfigFactory, UseConfigFactoryParams } from '../../factories/useConfigFactory';
 import { UseConfig } from '../../types/composables';

diff --git a/packages/composables/src/composables/useContent/index.ts b/packages/composables/src/composables/useContent/index.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import { Context, Logger } from '@vue-storefront/core';
 import { Page, CmsBlock } from '@vue-storefront/magento-api';
 import { useContentFactory, UseContentFactoryParams } from '../../factories/useContentFactory';

diff --git a/packages/composables/src/composables/useCurrency/index.ts b/packages/composables/src/composables/useCurrency/index.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { Context } from '@vue-storefront/core';
 import { Currency } from '@vue-storefront/magento-api';
 import { useCurrencyFactory, UseCurrencyFactoryParams } from '../../factories/useCurrencyFactory';

diff --git a/packages/composables/src/composables/useExternalCheckout/index.ts b/packages/composables/src/composables/useExternalCheckout/index.ts
@@ -3,6 +3,9 @@ import { useExternalCheckoutFactory, UseExternalCheckoutFactoryParams } from '..
 import useCart from '../useCart';
 // import useConfig from '../useConfig';
 
+/**
+ * @deprecated since version1.0.0
+ */
 const factoryParams: UseExternalCheckoutFactoryParams = {
   provide() {
     return {

diff --git a/packages/composables/src/composables/useFacet/_utils.ts b/packages/composables/src/composables/useFacet/_utils.ts
@@ -1,3 +1,5 @@
+// @depracated - moved to theme
+
 import { SearchData } from '../../types';
 
 const buildBreadcrumbsList = (rootCat, bc) => {

diff --git a/packages/composables/src/composables/useFacet/index.ts b/packages/composables/src/composables/useFacet/index.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import {
   ComposableFunctionArgs,
   Context,
@@ -58,6 +61,9 @@ const constructSortObject = (sortData: string) => {
   return baseData.length > 0 ? Object.fromEntries([baseData]) : {};
 };
 
+/**
+ * @deprecated since version1.0.0
+ */
 const factoryParams = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   search: async (context: Context, params: ComposableFunctionArgs<FacetSearchResult<any>>) => {

diff --git a/packages/composables/src/composables/useForgotPassword/index.ts b/packages/composables/src/composables/useForgotPassword/index.ts
@@ -4,6 +4,9 @@ import {
 } from '@vue-storefront/core';
 import { UseForgotPasswordFactoryParams } from '../../factories/useForgotPasswordFactory';
 
+/**
+ * @deprecated since version1.0.0
+ */
 const factoryParams: UseForgotPasswordFactoryParams<any> = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   resetPassword: async (context: Context, params) => {

diff --git a/packages/composables/src/composables/useGuestUser/index.ts b/packages/composables/src/composables/useGuestUser/index.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { SetGuestEmailOnCartInput } from '@vue-storefront/magento-api';
 import { Logger } from '@vue-storefront/core';
 import { useGuestUserFactory, UseGuestUserFactoryParams } from '../../factories/useGuestUserFactory';

diff --git a/packages/composables/src/composables/useStore/index.ts b/packages/composables/src/composables/useStore/index.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { Context } from '@vue-storefront/core';
 import { AvailableStores, StoreConfig } from '@vue-storefront/magento-api';
 import { useStoreFactory, UseStoreFactoryParams } from '../../factories/useStoreFactory';

diff --git a/packages/composables/src/composables/useUser/index.ts b/packages/composables/src/composables/useUser/index.ts
@@ -25,6 +25,9 @@ interface UseUserFactoryParams<USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS>
   }) => Promise<USER>;
 }
 
+/**
+ * @deprecated since version1.0.0
+ */
 const factoryParams: UseUserFactoryParams<
 any,
 UpdateCustomerEmailMutationVariables,
@@ -175,6 +178,7 @@ CustomerCreateInput
 
     return factoryParams.load(context);
   },
+
   changePassword: async (context: Context, params) => {
     Logger.debug('[Magento] changing user password');
     const { data, errors } = await context.$magento.api.changeCustomerPassword(params);

diff --git a/packages/composables/src/composables/useWishlist/index.ts b/packages/composables/src/composables/useWishlist/index.ts
@@ -8,6 +8,9 @@ import useUser from '../useUser';
 import { findItemOnWishlist } from '../../helpers/findItemOnWishlist';
 import { useWishlistFactory, UseWishlistFactoryParams } from '../../factories/useWishlistFactory';
 
+/**
+ * @deprecated since version1.0.0
+ */
 // @ts-ignore
 const factoryParams: UseWishlistFactoryParams<any, any, any> = {
   provide() {

diff --git a/packages/composables/src/factories/useCartFactory.ts b/packages/composables/src/factories/useCartFactory.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import {
   UseCart as UseCartCore,
   Context,

diff --git a/packages/composables/src/factories/useCategorySearchFactory.ts b/packages/composables/src/factories/useCategorySearchFactory.ts
@@ -13,7 +13,9 @@ import { UseCategorySearch, UseCategorySearchErrors } from '../types/composables
 export interface UseCategorySearchFactory<CATEGORY, CATEGORY_SEARCH_PARAMS, API extends PlatformApi = any> extends FactoryParams<API> {
   search: (context: Context, params: ComposableFunctionArgs<CATEGORY_SEARCH_PARAMS>) => Promise<CATEGORY[]>;
 }
-
+/**
+ * @deprecated since version1.0.0
+ */
 export function useCategorySearchFactory<CATEGORY, CATEGORY_SEARCH_PARAMS, API extends PlatformApi = any>(
   factoryParams: UseCategorySearchFactory<CATEGORY, CATEGORY_SEARCH_PARAMS, API>,
 ) {

diff --git a/packages/composables/src/factories/useConfigFactory.ts b/packages/composables/src/factories/useConfigFactory.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { computed } from '@vue/composition-api';
 import {
   Context,

diff --git a/packages/composables/src/factories/useContentFactory.ts b/packages/composables/src/factories/useContentFactory.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { computed, Ref } from '@vue/composition-api';
 import {
   ComposableFunctionArgs,

diff --git a/packages/composables/src/factories/useCurrencyFactory.ts b/packages/composables/src/factories/useCurrencyFactory.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { computed } from '@vue/composition-api';
 import {
   Context,

diff --git a/packages/composables/src/factories/useExternalCheckoutFactory.ts b/packages/composables/src/factories/useExternalCheckoutFactory.ts
@@ -14,6 +14,9 @@ export interface UseExternalCheckoutFactoryParams<API extends PlatformApi = any>
   initializeCheckout: (context: Context, params: ComposableFunctionArgs<{ baseUrl: string }>) => Promise<string>;
 }
 
+/**
+ * @deprecated since version1.0.0
+ */
 export const useExternalCheckoutFactory = <API extends PlatformApi = any>(
   factoryParams: UseExternalCheckoutFactoryParams<API>,
 ) => {

diff --git a/packages/composables/src/factories/useForgotPasswordFactory.ts b/packages/composables/src/factories/useForgotPasswordFactory.ts
@@ -27,6 +27,9 @@ export interface UseForgotPasswordFactoryParams<RESULT> extends FactoryParams {
   setNewPassword: (context: Context, params: ComposableFunctionArgs<SetNewPasswordParams & { currentResult: RESULT }>) => Promise<RESULT>;
 }
 
+/**
+ * @deprecated since version1.0.0
+ */
 export function useForgotPasswordFactory<RESULT>(
   factoryParams: UseForgotPasswordFactoryParams<RESULT>,
 ) {

diff --git a/packages/composables/src/factories/useGuestUserFactory.ts b/packages/composables/src/factories/useGuestUserFactory.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { Ref, computed } from '@vue/composition-api';
 import {
   Context,

diff --git a/packages/composables/src/factories/useStoreFactory.ts b/packages/composables/src/factories/useStoreFactory.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version1.0.0
+ */
 import { computed } from '@vue/composition-api';
 import {
   Context,

diff --git a/packages/composables/src/factories/useWishlistFactory.ts b/packages/composables/src/factories/useWishlistFactory.ts
@@ -43,6 +43,9 @@ export interface UseWishlistFactoryParams<WISHLIST,
   isInWishlist: (context: Context, params: { currentWishlist: WISHLIST; product: PRODUCT }) => boolean;
 }
 
+/**
+ * @deprecated since version1.0.0
+ */
 export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends PlatformApi = any>(
   factoryParams: UseWishlistFactoryParams<WISHLIST, WISHLIST_ITEM, PRODUCT, API>,
 ) => {

diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/composables/src/getters/cartGetters.ts
@@ -13,6 +13,7 @@ import {
   Product,
   SelectedShippingMethod, ConfigurableCartItem, ProductInterface,
 } from '@vue-storefront/magento-api';
+
 import productGetters from './productGetters';
 import { AgnosticPaymentMethod } from '../types';
 
@@ -145,7 +146,7 @@ export const getCoupons = (cart: Cart): AgnosticCoupon[] => (Array.isArray(cart?
   code: c.code,
 } as AgnosticCoupon)) : []);
 
-export const getDiscounts = (cart: Cart): AgnosticDiscount[] => (Array.isArray(cart?.prices.discounts) ? cart.prices.discounts.map((d) => ({
+export const getDiscounts = (cart: Cart): AgnosticDiscount[] => (Array.isArray(cart?.prices?.discounts) ? cart.prices.discounts.map((d) => ({
   id: d.label,
   name: d.label,
   description: '',

diff --git a/packages/composables/src/helpers/userDataGenerator.ts b/packages/composables/src/helpers/userDataGenerator.ts
@@ -1,5 +1,9 @@
 import { CustomerUpdateParameters } from '@vue-storefront/magento-api';
 
+/**
+ * @deprecated
+ * @use packages/theme/helpers/customer/userDataGenerator.ts
+ */
 export const generateUserData = (userData): CustomerUpdateParameters => {
   const baseData = {
     email: userData.email,

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
@@ -120,12 +120,7 @@ import {
   SfBadge,
 } from '@storefront-ui/vue';
 
-import {
-  categoryGetters,
-  useCart,
-  useCategory,
-  useUser, useWishlist,
-} from '@vue-storefront/magento';
+import { categoryGetters } from '@vue-storefront/magento';
 import {
   computed,
   ref,
@@ -137,9 +132,14 @@ import {
 } from '@nuxtjs/composition-api';
 import HeaderNavigationItem from '~/components/Header/Navigation/HeaderNavigationItem.vue';
 import {
+  useCart,
+  useCategory,
   useUiHelpers,
   useUiState,
+  useWishlist,
+  useUser,
 } from '~/composables';
+
 import CurrencySelector from '~/components/CurrencySelector.vue';
 import HeaderLogo from '~/components/HeaderLogo.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
@@ -169,8 +169,8 @@ export default defineComponent({
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated } = useUser();
-    const { totalQuantity: cartTotalItems, loadTotalQty: loadCartTotalQty } = useCart();
-    const { itemsCount: wishlistItemsQty, loadItemsCount: loadWishlistItemsCount } = useWishlist('GlobalWishlist');
+    const { loadTotalQty: loadCartTotalQty, cart } = useCart();
+    const { loadItemsCount: loadWishlistItemsCount, wishlist } = useWishlist();
 
     const {
       categories: categoryList,
@@ -180,9 +180,9 @@ export default defineComponent({
     const isSearchOpen = ref(false);
     const result = ref(null);
 
-    const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
+    const wishlistHasProducts = computed(() => wishlist.value.items_count > 0);
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
-    const categoryTree = categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0);
+    const categoryTree = ref([]);
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
@@ -194,6 +194,7 @@ export default defineComponent({
 
     useFetch(async () => {
       await categoriesListSearch({ pageSize: 20 });
+      categoryTree.value = categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0);
     });
 
     onMounted(() => {
@@ -205,7 +206,7 @@ export default defineComponent({
 
     return {
       accountIcon,
-      cartTotalItems,
+      cartTotalItems: computed(() => cart.value.total_quantity),
       categoryTree,
       getAgnosticCatLink,
       handleAccountClick,
@@ -216,7 +217,7 @@ export default defineComponent({
       toggleCartSidebar,
       toggleWishlistSidebar,
       wishlistHasProducts,
-      wishlistItemsQty,
+      wishlistItemsQty: computed(() => wishlist.value.items_count),
     };
   },
 });

diff --git a/packages/theme/components/BottomNavigation.vue b/packages/theme/components/BottomNavigation.vue
@@ -78,9 +78,8 @@
 
 <script>
 import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
-import { useUser } from '@vue-storefront/magento';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
-import { useUiState } from '~/composables';
+import { useUiState, useUser } from '~/composables';
 import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
 

diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
@@ -249,13 +249,16 @@ import {
   useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import {
-  useCart,
-  useUser,
   cartGetters,
-  useExternalCheckout,
 } from '@vue-storefront/magento';
 import _debounce from 'lodash.debounce';
-import { useUiState, useUiNotification } from '~/composables';
+import {
+  useCart,
+  useUiState,
+  useUiNotification,
+  useUser,
+  useExternalCheckout,
+} from '~/composables';
 import stockStatusEnum from '~/enums/stockStatusEnum';
 import CouponCode from './CouponCode.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
@@ -304,7 +307,7 @@ export default defineComponent({
     const tempProduct = ref();
 
     onMounted(() => {
-      if (cart.value === null) {
+      if (!cart.value.id) {
         loadCart();
       }
     });

diff --git a/packages/theme/components/Checkout/CartPreview.vue b/packages/theme/components/Checkout/CartPreview.vue
@@ -53,7 +53,8 @@
 <script>
 import { SfHeading, SfProperty, SfCharacteristic } from '@storefront-ui/vue';
 import { computed, ref, defineComponent } from '@nuxtjs/composition-api';
-import { useCart, cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '@vue-storefront/magento';
+import { useCart } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 import CouponCode from '../CouponCode.vue';