fix(theme, composable): expired user token issue (#519)

- add proper handling of unathorized requests

Co-authored-by: Bartosz Herba <[email protected]>

packages/composables/src/composables/useAddresses/index.ts

@@ -35,7 +35,7 @@ RemoveAddressInput> = {
 
     const { data } = await context.$magento.api.getCustomerAddresses();
 
-    return data.customer.addresses;
+    return data?.customer?.addresses ?? [];
   },
   save: async (context: Context, saveParams) => {
     Logger.debug('[Magento] save user address:', saveParams.address);
@@ -45,7 +45,7 @@ RemoveAddressInput> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.createCustomerAddress;
+    return data?.createCustomerAddress ?? {};
   },
   remove: async (context: Context, params) => {
     Logger.debug('[Magento] remove user addresses');
@@ -67,7 +67,7 @@ RemoveAddressInput> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.updateCustomerAddress;
+    return data?.updateCustomerAddress ?? {};
   },
 };
 

packages/composables/src/composables/useBilling/index.ts

@@ -25,7 +25,7 @@ const factoryParams: UseBillingParams<any, any> = {
       await context.cart.load({ customQuery });
     }
 
-    return context.cart.cart.value.billing_address;
+    return context?.cart?.cart?.value?.billing_address ?? {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -79,11 +79,11 @@ const factoryParams: UseBillingParams<any, any> = {
         method_code: shippingMethod.method_code,
       },
     });
+
     /**
      * End of GraphQL Workaround
      */
-
-    return data.setBillingAddressOnCart.cart.billing_address;
+    return data?.setBillingAddressOnCart?.cart?.billing_address ?? {};
   },
 };
 

packages/composables/src/composables/useGetShippingMethods/index.ts

@@ -26,7 +26,7 @@ const factoryParams: UseGetShippingMethodsFactory<ShippingMethod> = {
 
     const hasAddresses = data.customerCart.shipping_addresses.length > 0;
 
-    return hasAddresses ? data.customerCart.shipping_addresses[0].available_shipping_methods : [];
+    return hasAddresses ? data?.customerCart?.shipping_addresses[0]?.available_shipping_methods : [];
   },
 };
 

packages/composables/src/composables/useReview/index.ts

@@ -29,7 +29,7 @@ ProductReviewRatingMetadata> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.products.items;
+    return data?.products?.items ?? [];
   },
   addReview: async (context: Context, params: ComposableFunctionArgs<CreateProductReviewInput>) => {
     Logger.debug('[Magento] add review params input:', JSON.stringify(params, null, 2));
@@ -42,7 +42,7 @@ ProductReviewRatingMetadata> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.createProductReview.review;
+    return data?.createProductReview?.review ?? {};
   },
   loadReviewMetadata: async (context: Context, params) => {
     Logger.debug('[Magento] load review metadata');
@@ -51,7 +51,7 @@ ProductReviewRatingMetadata> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.productReviewRatingsMetadata.items;
+    return data?.productReviewRatingsMetadata?.items ?? [];
   },
   loadCustomerReviews: async (
     context: Context,
@@ -67,7 +67,7 @@ ProductReviewRatingMetadata> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.customer;
+    return data?.customer ?? {};
   },
 };
 

packages/composables/src/composables/useUser/index.ts

@@ -46,7 +46,7 @@ CustomerCreateInput
 
       Logger.debug('[Result]:', { data });
 
-      return data.customer;
+      return data?.customer ?? {};
     } catch {
       // eslint-disable-next-line no-void
       // @ts-ignore
@@ -79,11 +79,15 @@ CustomerCreateInput
       });
     }
 
-    const { data } = await context.$magento.api.updateCustomer(userData);
-
+    const { data, errors } = await context.$magento.api.updateCustomer(userData);
     Logger.debug('[Result]:', { data });
 
-    return data.updateCustomerV2.customer;
+    if (errors) {
+      throw new Error(errors.map((e) => e.message).join(','));
+    }
+
+    // return data.updateCustomerV2.customer;
+    return data?.updateCustomerV2?.customer || {};
   },
   register: async (context: Context, params) => {
     const {

packages/composables/src/composables/useUserBilling/index.ts

@@ -22,7 +22,7 @@ const factoryParams: UseUserBillingFactoryParams<any, CustomerAddress> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.createCustomerAddress;
+    return data?.createCustomerAddress ?? {};
   },
 
   deleteAddress: async (context: Context, params?) => {
@@ -32,7 +32,7 @@ const factoryParams: UseUserBillingFactoryParams<any, CustomerAddress> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.deleteCustomerAddress;
+    return data?.deleteCustomerAddress ?? {};
   },
 
   updateAddress: async (context: Context, params?) => {
@@ -42,7 +42,7 @@ const factoryParams: UseUserBillingFactoryParams<any, CustomerAddress> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.updateCustomerAddress;
+    return data?.updateCustomerAddress ?? {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -63,9 +63,8 @@ const factoryParams: UseUserBillingFactoryParams<any, CustomerAddress> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.updateCustomerAddress;
+    return data?.updateCustomerAddress ?? {};
   },
-
 };
 
 export default useUserBillingFactory<any, CustomerAddress>(factoryParams);

packages/composables/src/composables/useUserOrder/index.ts

@@ -26,7 +26,7 @@ const factoryParams: UseUserOrderFactoryParams<any, GetOrdersSearchParams> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.customer.orders;
+    return data?.customer?.orders ?? {};
   },
 };
 

packages/composables/src/composables/useUserShipping/index.ts

@@ -23,22 +23,22 @@ const factoryParams: UseUserShippingFactoryParams<any, any> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.createCustomerAddress;
+    return data?.createCustomerAddress ?? {};
   },
 
   deleteAddress: async (context: Context, params) => {
     Logger.debug('[Magento] delete shipping address', { params });
     const { data } = await context.$magento.api.deleteCustomerAddress(params.address.id);
 
-    return data.deleteCustomerAddress;
+    return data?.deleteCustomerAddress ?? {};
   },
 
   updateAddress: async (context: Context, params) => {
     Logger.debug('[Magento] update shipping address', { params });
 
     const { data } = await context.$magento.api.updateCustomerAddress(transformUserUpdateAddressInput(params));
 
-    return data.updateCustomerAddress;
+    return data?.updateCustomerAddress ?? {};
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -59,7 +59,7 @@ const factoryParams: UseUserShippingFactoryParams<any, any> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.updateCustomerAddress;
+    return data?.updateCustomerAddress ?? {};
   },
 };
 

packages/composables/src/composables/useWishlist/index.ts

@@ -25,7 +25,7 @@ const factoryParams: UseWishlistFactoryParams<any, any, any> = {
 
       Logger.debug('[Result]:', { data });
 
-      return data.customer.wishlists;
+      return data?.customer?.wishlists ?? [];
     }
 
     return [];
@@ -68,7 +68,7 @@ const factoryParams: UseWishlistFactoryParams<any, any, any> = {
 
         Logger.debug('[Result]:', { data });
 
-        return data.addProductsToWishlist.wishlist;
+        return data?.addProductsToWishlist?.wishlist ?? {};
       case 'ConfigurableProduct':
         const { data: configurableProductData } = await context.$magento.api.addProductToWishList({
           id: '0',
@@ -81,7 +81,7 @@ const factoryParams: UseWishlistFactoryParams<any, any, any> = {
 
         Logger.debug('[Result]:', { data: configurableProductData });
 
-        return configurableProductData.addProductsToWishlist.wishlist;
+        return configurableProductData?.addProductsToWishlist?.wishlist ?? {};
       case 'BundleProduct':
         const { data: bundleProductData } = await context.$magento.api.addProductToWishList({
           id: '0',
@@ -94,7 +94,7 @@ const factoryParams: UseWishlistFactoryParams<any, any, any> = {
 
         Logger.debug('[Result]:', { data: bundleProductData });
 
-        return bundleProductData.addProductsToWishlist.wishlist;
+        return bundleProductData?.addProductsToWishlist?.wishlist ?? {};
       default:
         // todo implement other options
         // @ts-ignore
@@ -117,7 +117,7 @@ const factoryParams: UseWishlistFactoryParams<any, any, any> = {
 
     Logger.debug('[Result]:', { data });
 
-    return data.removeProductsFromWishlist.wishlist;
+    return data?.removeProductsFromWishlist?.wishlist ?? {};
   },
   clear: async ({ currentWishlist }) => ({}),
   isInWishlist: (context, params) => {

packages/theme/composables/useUiNotification/index.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, useContext} from '@nuxtjs/composition-api';
+import { computed, reactive, useContext } from '@nuxtjs/composition-api';
 import cookieNames from '~/enums/cookieNameEnum';
 
 interface UiNotification {
@@ -56,7 +56,6 @@ const useUiNotification = () => {
     }
   };
 
-
   if (cookieMessage) {
     send(cookieMessage);
   }

packages/theme/pages/MyAccount/MyProfile.vue

@@ -55,6 +55,7 @@ extend('min', {
 
 extend('password', {
   message: invalidPasswordMsg,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   validate: (value) => customerPasswordRegExp.test(value),
 });
 
@@ -84,8 +85,9 @@ export default defineComponent({
 
     const formHandler = async (fn, onComplete, onError) => {
       await fn();
-      if (error.value.changePassword !== null) {
-        onError(error.value.changePassword);
+      const actionErr = error.value.changePassword || error.value.updateUser;
+      if (actionErr) {
+        onError(actionErr);
       } else {
         onComplete();
       }

packages/theme/plugins/__tests__/token-expired.spec.js

@@ -1,14 +1,25 @@
 import tokenExpiredPlugin from '../token-expired';
 import cookieNames from '~/enums/cookieNameEnum';
 
-const callbackResponse = {
+const errRes = {
   data: {
-    message: 'The current customer isn\'t authorized.',
+    errors: [
+      {
+        extensions: {
+          category: 'graphql-authorization',
+        },
+      },
+    ],
   },
 };
 
+const validRes = {
+  data: {
+    errors: [],
+  },
+};
 
-const appMock = {
+const appMockFactory = (callbackResponse) => ({
   $vsf: {
     $magento: {
       client: {
@@ -26,29 +37,34 @@ const appMock = {
     remove: jest.fn(),
     set: jest.fn(),
   },
+  router: {
+    go: jest.fn(),
+  },
   localePath: (t) => t,
   i18n: {
     t: (t) => t,
   },
-};
-
-const redirectMock = jest.fn();
+});
 
 describe('Token Expired plugin', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
-  it('should work only when the current customer is not authorized', async () => {
+  it('should be executed only if there is the "graphql-authorization" error', async () => {
+    const appMock = appMockFactory(validRes);
+
     // eslint-disable-next-line @typescript-eslint/await-thenable
-    await tokenExpiredPlugin({ app: appMock, redirect: redirectMock });
+    await tokenExpiredPlugin({ app: appMock });
 
-    expect(redirectMock).toHaveBeenCalledWith('/');
+    expect(appMock.router.go).toHaveBeenCalledTimes(0);
   });
 
   it('should set message cookie', async () => {
+    const appMock = appMockFactory(errRes);
+
     // eslint-disable-next-line @typescript-eslint/await-thenable
-    await tokenExpiredPlugin({ app: appMock, redirect: redirectMock });
+    await tokenExpiredPlugin({ app: appMock });
 
     const messageMock = {
       icon: null,
@@ -62,8 +78,10 @@ describe('Token Expired plugin', () => {
   });
 
   it('should clear customer token and clear cart id', async () => {
+    const appMock = appMockFactory(errRes);
+
     // eslint-disable-next-line @typescript-eslint/await-thenable
-    await tokenExpiredPlugin({ app: appMock, redirect: redirectMock });
+    await tokenExpiredPlugin({ app: appMock });
 
     expect(appMock.$cookies.remove).toHaveBeenCalledTimes(2);
     expect(appMock.$cookies.remove).toHaveBeenCalledWith(cookieNames.customerCookieName);