refactor: fixed customer logging and authorization checking (#1081)

Author: Marcin Kwiatkowski

packages/theme/components/LoginModal.vue

@@ -31,7 +31,7 @@
               rules="required|email"
             >
               <SfInput
-                v-model="form.username"
+                v-model="form.email"
                 v-e2e="'login-modal-email'"
                 :valid="!errors[0]"
                 :error-message="$t(errors[0])"

packages/theme/modules/customer/composables/useUser/loginStatusPingQuery.gql.ts

@@ -37,6 +37,7 @@ const appMockFactory = (callbackResponse, authResponse) => ({
       },
       config: {
         state: {
+          getCustomerToken: jest.fn(),
           removeCustomerToken: jest.fn(),
           removeCartId: jest.fn(),
           setMessage: jest.fn(),
@@ -65,6 +66,7 @@ describe('Token Expired plugin', () => {
 
   it('sets initial login status', async () => {
     const appMock = appMockFactory(validRes, validRes);
+    appMock.$vsf.$magento.config.state.getCustomerToken.mockReturnValue(true);
     const customerStore = useCustomerStore();
     jest.spyOn(customerStore, 'setIsLoggedIn');
 
@@ -75,6 +77,7 @@ describe('Token Expired plugin', () => {
 
   it('doesn\'t set initial login status if not logged in', async () => {
     const appMock = appMockFactory(validRes, errRes.data); // need .data because it's ApolloGraphQlResponse, not axios
+    appMock.$vsf.$magento.config.state.getCustomerToken.mockReturnValue(false);
     const customerStore = useCustomerStore();
 
     await tokenExpiredPlugin({ app: appMock });

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

@@ -2,16 +2,13 @@ import type { Plugin } from '@nuxt/types';
 import type { ApolloQueryResult } from '@apollo/client/core/types';
 import type { UiNotification } from '~/composables/useUiNotification';
 import { useCustomerStore } from '~/modules/customer/stores/customer';
-import loginStatusPingQueryGql from '~/modules/customer/composables/useUser/loginStatusPingQuery.gql';
 
 export const hasGraphqlAuthorizationError = (res: ApolloQueryResult<unknown>) => res?.errors
   ?.some((error) => error.extensions.category === 'graphql-authorization') ?? false;
 
-const plugin : Plugin = async ({ $pinia, app }) => {
+const plugin : Plugin = ({ $pinia, app }) => {
   const customerStore = useCustomerStore($pinia);
-
-  const responseOfLoginStatusPing = await app.$vsf.$magento.api.customQuery({ query: loginStatusPingQueryGql });
-  if (!hasGraphqlAuthorizationError(responseOfLoginStatusPing)) {
+  if (app.$vsf.$magento.config.state.getCustomerToken()) {
     customerStore.setIsLoggedIn(true);
   }