From 8d6cf7d1badd198d52b4b4673c8fb6338d5cc54d Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Tue, 8 Feb 2022 09:26:37 +0100
Subject: [PATCH] refactor(composables): moved the useExternalCheckout
 composable to theme

---
 .../composables/useExternalCheckout/index.ts  |  5 ++
 .../factories/useExternalCheckoutFactory.ts   |  5 ++
 packages/theme/components/CartSidebar.vue     |  8 +--
 packages/theme/composables/index.ts           |  1 +
 .../composables/useExternalCheckout/index.ts  | 53 +++++++++++++++++++
 .../useExternalCheckout.d.ts                  |  8 +++
 6 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 packages/theme/composables/useExternalCheckout/index.ts
 create mode 100644 packages/theme/composables/useExternalCheckout/useExternalCheckout.d.ts

diff --git a/packages/composables/src/composables/useExternalCheckout/index.ts b/packages/composables/src/composables/useExternalCheckout/index.ts
index f96c4b6b8..976597d05 100644
--- a/packages/composables/src/composables/useExternalCheckout/index.ts
+++ b/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 {
diff --git a/packages/composables/src/factories/useExternalCheckoutFactory.ts b/packages/composables/src/factories/useExternalCheckoutFactory.ts
index e1c753daa..8b0d1d4a8 100644
--- a/packages/composables/src/factories/useExternalCheckoutFactory.ts
+++ b/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>,
 ) => {
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 8c28dbe61..62fb6a411 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/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 }) => {
diff --git a/packages/theme/composables/index.ts b/packages/theme/composables/index.ts
index 1159f2548..ce993940e 100644
--- a/packages/theme/composables/index.ts
+++ b/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';
diff --git a/packages/theme/composables/useExternalCheckout/index.ts b/packages/theme/composables/useExternalCheckout/index.ts
new file mode 100644
index 000000000..fd2ef3df3
--- /dev/null
+++ b/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;
diff --git a/packages/theme/composables/useExternalCheckout/useExternalCheckout.d.ts b/packages/theme/composables/useExternalCheckout/useExternalCheckout.d.ts
new file mode 100644
index 000000000..7118e0c9d
--- /dev/null
+++ b/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>,
+};