refactor(composables)!: use payment provider

packages/composables/src/composables/usePaymentProvider/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import {
   Context,
   Logger,

packages/composables/src/factories/usePaymentProviderFactory.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import { Ref, computed } from '@vue/composition-api';
 import {
   ComposableFunctionArgs,

packages/theme/components/Checkout/VsfPaymentProvider.vue

@@ -26,7 +26,7 @@ import {
   computed,
   defineComponent,
 } from '@nuxtjs/composition-api';
-import { usePaymentProvider } from '@vue-storefront/magento';
+import { usePaymentProvider } from '~/composables';
 
 export default defineComponent({
   name: 'VsfPaymentProvider',
@@ -38,11 +38,12 @@ export default defineComponent({
   emits: ['status'],
 
   setup(props, { emit }) {
-    const { load, state, save } = usePaymentProvider();
+    const state = ref(null);
+    const { load, save } = usePaymentProvider();
     const selectedMethod = ref(null);
 
     onMounted(async () => {
-      await load();
+      state.value = await load();
     });
 
     const paymentMethods = computed(() => (Array.isArray(state.value) ? state.value.map((p) => ({
@@ -52,7 +53,7 @@ export default defineComponent({
 
     const definePaymentMethods = async (paymentMethod) => {
       try {
-        await save({
+        state.value = await save({
           paymentMethod: {
             code: paymentMethod,
           },

packages/theme/composables/index.ts

@@ -21,3 +21,4 @@ export { default as useShipping } from './useShipping';
 export { default as useShippingProvider } from './useShippingProvider';
 export { default as useBilling } from './useBilling';
 export { default as useRelatedProducts } from './useRelatedProducts';
+export { default as usePaymentProvider } from './usePaymentProvider';

packages/theme/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts

@@ -0,0 +1,15 @@
+import { AvailablePaymentMethod } from '~/modules/GraphQL/types';
+
+export const getAvailablePaymentMethodsCommand = {
+  execute: async (context, cartId: string): Promise<AvailablePaymentMethod> => {
+    const { data } = await context
+      .$vsf
+      .$magento
+      .api
+      .getAvailablePaymentMethods({ cartId });
+
+    return data
+      .cart
+      .available_payment_methods;
+  },
+};

packages/theme/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts

@@ -0,0 +1,17 @@
+import { AvailablePaymentMethod } from '~/modules/GraphQL/types';
+import { SetPaymentMethodOnCartInputs } from '../usePaymentProvider';
+
+export const setPaymentMethodOnCartCommand = {
+  execute: async (context, paymentMethodParams: SetPaymentMethodOnCartInputs): Promise<AvailablePaymentMethod> => {
+    const { data } = await context
+      .$vsf
+      .$magento
+      .api
+      .setPaymentMethodOnCart(paymentMethodParams);
+
+    return data
+      .setPaymentMethodOnCart
+      .cart
+      .available_payment_methods;
+  },
+};

packages/theme/composables/usePaymentProvider/index.ts

@@ -0,0 +1,73 @@
+import { Logger } from '@vue-storefront/core';
+import { ref, useContext } from '@nuxtjs/composition-api';
+import { PaymentMethodInput } from '~/modules/GraphQL/types';
+import { ComposableFunctionArgs } from '~/composables/types';
+import { setPaymentMethodOnCartCommand } from '~/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand';
+import { useCart } from '~/composables';
+import { getAvailablePaymentMethodsCommand } from '~/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand';
+import { SetPaymentMethodOnCartInputs } from './usePaymentProvider';
+
+export const usePaymentProvider = () => {
+  const context = useContext();
+  const { cart } = useCart();
+  const loading = ref(false);
+  // eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle
+  const error = ref({
+    load: null,
+    save: null,
+  });
+
+  const save = async (params: ComposableFunctionArgs<{ paymentMethod: PaymentMethodInput }>) => {
+    Logger.debug('usePaymentProvider.save');
+    let result = null;
+
+    try {
+      loading.value = true;
+      const paymentMethodParams: SetPaymentMethodOnCartInputs = {
+        cart_id: cart.value.id,
+        payment_method: {
+          ...params.paymentMethod,
+        },
+      };
+
+      result = await setPaymentMethodOnCartCommand.execute(context, paymentMethodParams);
+      error.value.save = null;
+    } catch (err) {
+      error.value.save = err;
+      Logger.error('usePaymentProvider/save', err);
+    } finally {
+      loading.value = false;
+    }
+
+    Logger.debug('[Result]:', { result });
+    return result;
+  };
+
+  const load = async () => {
+    Logger.debug('usePaymentProvider.load');
+    let result = null;
+
+    try {
+      loading.value = true;
+      result = await getAvailablePaymentMethodsCommand.execute(context, cart.value.id);
+      error.value.load = null;
+    } catch (err) {
+      error.value.load = err;
+      Logger.error('usePaymentProvider/load', err);
+    } finally {
+      loading.value = false;
+    }
+
+    Logger.debug('[Result]:', { result });
+    return result;
+  };
+
+  return {
+    loading,
+    error,
+    load,
+    save,
+  };
+};
+
+export default usePaymentProvider;

packages/theme/composables/usePaymentProvider/usePaymentProvider.d.ts

@@ -0,0 +1,10 @@
+import { PaymentMethodInput, Scalars } from '~/modules/GraphQL/types';
+
+export interface SetPaymentMethodOnCartInput {
+  cart_id: Scalars['String'];
+  payment_method: PaymentMethodInput;
+}
+
+export interface SetPaymentMethodOnCartInputs extends SetPaymentMethodOnCartInput {
+  [k: string]: any;
+}