refactor(composables): moved the useExternalCheckout composable to theme

Author: Marcin Kwiatkowski

packages/composables/src/composables/useExternalCheckout/index.ts

@@ -3,6 +3,11 @@ import { useExternalCheckoutFactory, UseExternalCheckoutFactoryParams } from '..
 import useCart from '../useCart';
 // import useConfig from '../useConfig';
 
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 const factoryParams: UseExternalCheckoutFactoryParams = {
   provide() {
     return {

packages/composables/src/factories/useExternalCheckoutFactory.ts

@@ -14,6 +14,11 @@ export interface UseExternalCheckoutFactoryParams<API extends PlatformApi = any>
   initializeCheckout: (context: Context, params: ComposableFunctionArgs<{ baseUrl: string }>) => Promise<string>;
 }
 
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 export const useExternalCheckoutFactory = <API extends PlatformApi = any>(
   factoryParams: UseExternalCheckoutFactoryParams<API>,
 ) => {

packages/theme/components/CartSidebar.vue

@@ -304,15 +304,17 @@ export default defineComponent({
     const visible = ref(false);
     const isLoaderVisible = ref(false);
     const tempProduct = ref();
+    const redirectUrl = ref();
 
-    onMounted(() => {
+    onMounted(async () => {
+      const checkoutURL = await initializeCheckout({ baseUrl: '/checkout/user-account' });
+      redirectUrl.value = checkoutURL;
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       loadCart();
     });
 
     const goToCheckout = async () => {
-      const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' });
-      await router.push(`${app.localePath(redirectUrl)}`);
+      await router.push(`${app.localePath(redirectUrl.value)}`);
     };
 
     const sendToRemove = ({ product }) => {

packages/theme/composables/index.ts

@@ -3,3 +3,4 @@ export { default as useUiNotification } from './useUiNotification';
 export { default as useUiState } from './useUiState';
 export { default as useImage } from './useImage';
 export { default as useConfig } from './useConfig';
+export { default as useExternalCheckout } from './useExternalCheckout';

packages/theme/composables/useExternalCheckout/index.ts

@@ -0,0 +1,53 @@
+import { Logger } from '@vue-storefront/core';
+
+import { ref, useContext } from '@nuxtjs/composition-api';
+import { UseExternalCheckout } from '~/composables/useExternalCheckout/useExternalCheckout';
+
+export const useExternalCheckout = (): UseExternalCheckout => {
+  const { app } = useContext();
+  const loading = ref(false);
+  const error = ref(null);
+
+  // eslint-disable-next-line consistent-return
+  const initializeCheckout = (params) => {
+    Logger.debug('[Magento]: Initialize external checkout', { params });
+
+    try {
+      const { externalCheckout, state } = app.context.$vsf.$magento.config;
+      const userToken = state.getCustomerToken();
+      const cartToken = state.getCartId();
+
+      Logger.debug({ userToken, cartToken });
+      loading.value = true;
+
+      if (externalCheckout.enable) {
+        if (userToken && cartToken) {
+          // @TODO: Implements Multiple Store
+          /* if (Object.keys(externalCheckout.stores).length) {
+
+          } */
+          window.location.replace(`${externalCheckout.cmsUrl}${externalCheckout.syncUrlPath}/token/${userToken}/cart/${cartToken}`);
+          return '';
+        }
+
+        window.location.replace(`${externalCheckout.cmsUrl}${externalCheckout.syncUrlPath}/token//cart/${cartToken}`);
+        return '';
+      }
+
+      return params.baseUrl;
+    } catch (err) {
+      error.value = err;
+      Logger.error(err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    initializeCheckout,
+    loading,
+    error,
+  };
+};
+
+export default useExternalCheckout;

packages/theme/composables/useExternalCheckout/useExternalCheckout.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from '@nuxtjs/composition-api';
+import { ComposableFunctionArgs } from '@vue-storefront/core';
+
+export type UseExternalCheckout = {
+  initializeCheckout: (params: ComposableFunctionArgs<{ baseUrl: string }>) => string
+  loading: Ref<boolean>,
+  error: Ref<string>,
+};