refactor: unify cookie retrieval

packages/api-client/src/helpers/apiClient/defaultSettings.ts

@@ -23,6 +23,9 @@ export const defaultSettings: ClientConfig = {
     setLocale: () => {},
     getCountry: () => '',
     setCountry: () => {},
+    setMessage: () => {},
+    // @ts-ignore
+    getMessage: () => ({}),
   },
   externalCheckout: {
     enable: false,

packages/api-client/src/types/setup.ts

@@ -38,16 +38,25 @@ export type Store = {
 export type ConfigState = {
   getCartId(): string;
   setCartId(id?: string | null): void;
+  removeCartId(): void;
   getCustomerToken(): string;
   setCustomerToken(token?: string | null): void;
+  removeCustomerToken(): void;
   getStore(): string;
   setStore(id?: string | null): void;
+  removeStore(): void;
   getCurrency(): string;
   setCurrency(id?: string | null): void;
+  removeCurrency(): void;
   getLocale(): string;
   setLocale(id?: string | null): void;
+  removeLocale(): void;
   getCountry(): string;
   setCountry(id?: string | null): void;
+  removeCountry(): void;
+  getMessage<T>(): T;
+  setMessage<T>(id?: T | null): void;
+  removeMessage(): void;
 };
 
 export interface ClientConfig {

packages/theme/composables/useApi/index.ts

@@ -1,12 +1,11 @@
 import { useContext } from '@nuxtjs/composition-api';
 import { request as graphQLRequest, GraphQLClient } from 'graphql-request';
-import cookieNames from '~/enums/cookieNameEnum';
 
 export const useApi = () => {
   const { app } = useContext();
-  const customerToken = app.$cookies.get(cookieNames.customerCookieName);
-  const storeCode = app.$cookies.get(cookieNames.storeCookieName);
-  const currency = app.$cookies.get(cookieNames.currencyCookieName);
+  const customerToken = app.$vsf.$magento.config.state.getCustomerToken();
+  const storeCode = app.$vsf.$magento.config.state.getStore();
+  const currency = app.$vsf.$magento.config.state.getCurrency();
   const magentoConfig = app.$vsf.$magento.config;
   // TODO remove once we remove apollo client
   const { useGETForQueries } = magentoConfig.customApolloHttpLinkOptions;

packages/theme/composables/useMagentoConfiguration.ts

@@ -2,7 +2,6 @@ import { computed, ComputedRef, useContext } from '@nuxtjs/composition-api';
 import { StoreConfig } from '~/modules/GraphQL/types';
 import { storeConfigGetters } from '~/getters';
 
-import cookieNames from '~/enums/cookieNameEnum';
 import { useConfig } from '~/composables';
 
 type UseMagentoConfiguration = () => {
@@ -13,20 +12,19 @@ type UseMagentoConfiguration = () => {
   loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => Promise<void>;
 };
 
-// @ts-ignore
 export const useMagentoConfiguration: UseMagentoConfiguration = () => {
-  const { app } = useContext();
+  const { app: { i18n, $vsf: { $magento: { config } } } } = useContext();
 
   const {
     config: storeConfig,
     load: loadConfig,
   } = useConfig();
 
-  const selectedCurrency = computed<string | undefined>(() => app.$cookies.get(cookieNames.currencyCookieName));
-  const selectedLocale = computed<string | undefined>(() => app.$cookies.get(cookieNames.localeCookieName));
-  const selectedStore = computed<string | undefined>(() => app.$cookies.get(cookieNames.storeCookieName));
+  const selectedCurrency = computed<string | undefined>(() => config.state.getCurrency());
+  const selectedLocale = computed<string | undefined>(() => config.state.getLocale());
+  const selectedStore = computed<string | undefined>(() => config.state.getStore());
 
-  const loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => void = (params = {
+  const loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => Promise<void> = async (params = {
     updateCookies: false,
     updateLocale: false,
   }) => {
@@ -35,34 +33,23 @@ export const useMagentoConfiguration: UseMagentoConfiguration = () => {
       updateLocale,
     } = params;
 
-    // eslint-disable-next-line promise/catch-or-return
-    loadConfig().then(() => {
-      if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) {
-        app.$cookies.set(
-          cookieNames.storeCookieName,
-          storeConfigGetters.getCode(storeConfig.value as StoreConfig),
-        );
-      }
+    await loadConfig();
+    if (config.state.getStore() || updateCookies) {
+      config.state.setStore(storeConfigGetters.getCode(storeConfig.value));
+    }
 
-      if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) {
-        app.$cookies.set(
-          cookieNames.localeCookieName,
-          storeConfigGetters.getCode(storeConfig.value as StoreConfig),
-        );
-      }
+    if (!config.state.getLocale() || updateCookies) {
+      config.state.setLocale(storeConfigGetters.getLocale(storeConfig.value));
+    }
 
-      if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) {
-        app.$cookies.set(
-          cookieNames.currencyCookieName,
-          storeConfigGetters.getCurrency(storeConfig.value as StoreConfig),
-        );
-      }
+    if (!config.state.getCurrency() || updateCookies) {
+      config.state.setCurrency(storeConfigGetters.getCurrency(storeConfig.value));
+    }
 
-      if (updateLocale) {
-        app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value as StoreConfig));
-      }
-      return true;
-    });
+    // eslint-disable-next-line promise/always-return
+    if (updateLocale) {
+      i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value));
+    }
   };
 
   return {

packages/theme/composables/useUiNotification/index.ts

@@ -1,17 +1,17 @@
 import { computed, reactive, useContext } from '@nuxtjs/composition-api';
-import cookieNames from '~/enums/cookieNameEnum';
 
-interface UiNotification {
+type UiNotificationType = 'secondary' | 'info' | 'success' | 'warning' | 'danger';
+
+export interface UiNotification {
   message: string;
   title?: string;
   action?: { text: string; onClick: (...args: any) => void };
-  type: 'danger' | 'success' | 'info';
+  type: UiNotificationType;
   icon: string;
   persist?: boolean;
   id: symbol;
   dismiss?: () => void;
 }
-
 interface Notifications {
   notifications: Array<UiNotification>;
 }
@@ -24,7 +24,7 @@ const timeToLive = 3000;
 
 const useUiNotification = () => {
   const { app } = useContext();
-  const cookieMessage: UiNotification = app.$cookies.get(cookieNames.messageCookieName);
+  const cookieMessage = app.$vsf.$magento.config.state.getMessage<UiNotification>();
 
   const send = (notification: UiNotification) => {
     const id = Symbol('id');
@@ -34,7 +34,7 @@ const useUiNotification = () => {
 
       if (index !== -1) state.notifications.splice(index, 1);
 
-      app.$cookies.remove(cookieNames.messageCookieName);
+      app.$vsf.$magento.config.state.removeMessage();
     };
 
     const newNotification = {
@@ -58,7 +58,7 @@ const useUiNotification = () => {
 
   if (cookieMessage) {
     send(cookieMessage);
-    app.$cookies.remove(cookieNames.messageCookieName);
+    app.$vsf.$magento.config.state.removeMessage();
   }
 
   return {

packages/theme/composables/useWishlist/index.ts

@@ -1,6 +1,5 @@
 import { ref, useContext } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
-import cookieNames from '~/enums/cookieNameEnum';
 import { CustomQuery } from '~/composables/types';
 import { useCustomerStore } from '~/stores/customer';
 import { findItemOnWishlist } from '~/composables/useWishlist/helpers';
@@ -156,7 +155,7 @@ export const useWishlist = (): UseWishlist => {
         });
       }
 
-      if (!app.context.$cookies.get(cookieNames.customerCookieName)) { // TODO: replace by value from pinia store after sueCart composable will be refactored
+      if (!app.$vsf.$magento.config.state.getCustomerToken()) { // TODO: replace by value from pinia store after sueCart composable will be refactored
         Logger.error('Need to be authenticated to add a product to wishlist');
       }
 

packages/theme/helpers/integrationPlugin/index.ts

@@ -1,10 +1,17 @@
-import { Context as NuxtContext, Plugin as NuxtPlugin } from '@nuxt/types';
+import { Context as NuxtContext } from '@nuxt/types';
+import { Inject } from '@nuxt/types/app';
 import axios from 'axios';
 import { createExtendIntegrationInCtx, createAddIntegrationToCtx } from './context';
 import { getIntegrationConfig, createProxiedApi } from './_proxyUtils';
 
-type InjectFn = (key: string, value: any) => void;
-export type IntegrationPlugin = (pluginFn: NuxtPlugin) => NuxtPlugin;
+interface IntegrationContext {
+  integration: {
+    configure: (tag: string, configuration: any) => void;
+    extend: (tag: string, integrationProperties: any) => void;
+  }
+}
+
+type NuxtPluginWithIntegration = (ctx: NuxtContext & IntegrationContext, inject: Inject) => void | Promise<void>;
 
 const parseCookies = (cookieString: string): Record<string, string> => Object.fromEntries(cookieString
   .split(';')
@@ -22,8 +29,8 @@ const setCookieValues = (cookieValues: Record<string, string>, cookieString = ''
   return Object.entries(parsed).map(([name, value]) => `${name}=${value}`).join('; ');
 };
 
-export const integrationPlugin = (pluginFn: NuxtPlugin) => (nuxtCtx: NuxtContext, inject: InjectFn) => {
-  const configure = (tag, configuration) => {
+export const integrationPlugin = (pluginFn: NuxtPluginWithIntegration) => (nuxtCtx: NuxtContext, inject: Inject) => {
+  const configure = (tag: string, configuration) => {
     const injectInContext = createAddIntegrationToCtx({ tag, nuxtCtx, inject });
     const config = getIntegrationConfig(nuxtCtx, configuration);
     const { middlewareUrl, ssrMiddlewareUrl } = (nuxtCtx as any).$config;
@@ -51,5 +58,5 @@ export const integrationPlugin = (pluginFn: NuxtPlugin) => (nuxtCtx: NuxtContext
 
   const integration = { configure, extend };
 
-  pluginFn({ ...nuxtCtx, integration } as NuxtContext, inject);
+  pluginFn({ ...nuxtCtx, integration }, inject);
 };

packages/theme/middleware/checkout.js → packages/theme/middleware/checkout.ts

@@ -1,5 +1,8 @@
+import { Middleware } from '@nuxt/types';
 import { Logger } from '~/helpers/logger';
 
-export default () => {
+const middleware : Middleware = () => {
   Logger.error('Please implement vendor-specific checkout.js middleware in the \'middleware\' directory to block access to checkout steps when customer did not yet complete previous steps');
 };
+
+export default middleware;

packages/theme/middleware/is-authenticated.ts

@@ -0,0 +1,8 @@
+import { Middleware } from '@nuxt/types';
+
+const middleware : Middleware = (context) => {
+  if (!context.app.$vsf.$magento.config.state.getCustomerToken()) {
+    context.redirect('/');
+  }
+};
+export default middleware;

packages/theme/modules/magento/defaultConfig.ts

@@ -1,4 +1,4 @@
-export const defaultConfig : Record<string, any> = {
+export const defaultConfig = {
   cookies: {
     currencyCookieName: 'vsf-currency',
     countryCookieName: 'vsf-country',
@@ -8,4 +8,7 @@ export const defaultConfig : Record<string, any> = {
     storeCookieName: 'vsf-store',
     messageCookieName: 'vsf-message',
   },
-};
+  locale: undefined,
+  country: undefined,
+  currency: undefined,
+} as const;

packages/theme/modules/magento/helpers/index.ts

@@ -1,26 +1,24 @@
 import { defaultConfig } from '~/modules/magento/defaultConfig';
 
-export const getLocaleSettings = (app, moduleOptions) => {
-  let localeSettings : Record<string, string> = {};
-
-  if (moduleOptions.cookies) {
-    localeSettings = {
-      locale: app.$cookies.get(moduleOptions.cookies.localeCookieName),
-      country: app.$cookies.get(moduleOptions.cookies.countryCookieName),
-      currency: app.$cookies.get(moduleOptions.cookies.currencyCookieName),
-    };
-  }
+export const getLocaleSettings = (app, moduleOptions, additionalProperties) => {
+  const localeSettings = moduleOptions.cookies
+    ? {
+      currency: additionalProperties.state.getCurrency(),
+      locale: additionalProperties.state.getLocale(),
+      country: additionalProperties.state.getCountry(),
+    }
+    : {};
 
   return {
-    locale: app.i18n.locale || (localeSettings.locale || moduleOptions.locale || defaultConfig.locale || undefined),
-    country: localeSettings.country || moduleOptions.country || defaultConfig.country || undefined,
     currency: localeSettings.currency || moduleOptions.currency || defaultConfig.currency || undefined,
+    locale: app.i18n.locale || localeSettings.locale || moduleOptions.locale || defaultConfig.locale || undefined,
+    country: localeSettings.country || moduleOptions.country || defaultConfig.country || undefined,
   };
 };
 
-export const mapConfigToSetupObject = ({ moduleOptions, app, additionalProperties = {} }) => ({
+export const mapConfigToSetupObject = ({ app, moduleOptions, additionalProperties = {} }) => ({
   ...defaultConfig,
   ...moduleOptions,
   ...additionalProperties,
-  ...getLocaleSettings(app, moduleOptions),
+  ...getLocaleSettings(app, moduleOptions, additionalProperties),
 });