feat: #56 (theme) adjust payment process

vuestorefront-community · Aug 22, 2021 · 843ae7d · 843ae7d
1 parent e4b4744
commit 843ae7d
Show file tree

Hide file tree

Showing 6 changed files with 301 additions and 21 deletions.
diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts
@@ -10,6 +10,7 @@ export { default as removeCartCoupon } from './removeCartCoupon';
 export { default as getMe } from './getMe';
 export { default as updateAddressDetails } from './updateAddressDetails';
 export { default as getShippingMethods } from './getShippingMethods';
+export { default as getPaymentMethods } from './getPaymentMethods';
 export { default as setShippingMethod } from './setShippingMethod';
 export { default as setPaymentMethod } from './setPaymentMethod';
 export { default as transitionOrderToState } from './transitionOrderToState';

diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/composables/src/getters/cartGetters.ts
@@ -14,7 +14,7 @@ interface ExtendedCartGetters extends CartGetters<Order, OrderLine> {
 }
 
 const getItems = (cart: Order): OrderLine[] => {
-  if (!cart.lines) return [];
+  if (!cart?.lines) return [];
 
   return cart?.lines;
 };

diff --git a/packages/theme/components/Checkout/VsfPaymentProvider.vue b/packages/theme/components/Checkout/VsfPaymentProvider.vue
@@ -43,8 +43,9 @@ import {
   SfButton,
   SfRadio
 } from '@storefront-ui/vue';
-import { ref } from '@vue/composition-api';
+import { ref, onMounted } from '@vue/composition-api';
 import { usePaymentProviderMock } from '@/composables/usePaymentProviderMock';
+import { useVSFContext } from '@vue-storefront/core';
 
 export default {
   name: 'VsfPaymentProvider',
@@ -53,22 +54,24 @@ export default {
     SfButton,
     SfRadio
   },
-  setup () {
+  setup (_, { emit }) {
     const { status } = usePaymentProviderMock();
     const selectedPaymentMethod = ref({});
-    const paymentMethods = ref([
-      {
-        id: 'mocked-id',
-        name: 'Cash on delivery',
-        description: ''
-      }
-    ]);
+    const { $vendure } = useVSFContext();
+    const paymentMethods = ref([]);
 
-    const selectPaymentMethod = paymentMethod => {
+    const selectPaymentMethod = async (paymentMethod) => {
       selectedPaymentMethod.value = paymentMethod;
+      emit('paymentMethodSelected', paymentMethod);
       status.value = true;
     };
 
+    onMounted(async () => {
+      const response = await $vendure.api.getPaymentMethods();
+
+      paymentMethods.value = response?.data?.eligiblePaymentMethods;
+    });
+
     return {
       paymentMethods,
       selectedPaymentMethod,

diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
@@ -63,7 +63,7 @@
           class="sf-property--full-width sf-property--large summary__property-total"
         />
 
-        <VsfPaymentProvider @status="isPaymentReady = true"/>
+        <VsfPaymentProvider @paymentMethodSelected="updatePaymentMethod"/>
 
         <SfCheckbox v-e2e="'terms'" v-model="terms" name="terms" class="summary__terms">
           <template #label>
@@ -83,7 +83,7 @@
           </SfButton>
           <SfButton
             v-e2e="'make-an-order'"
-            :disabled="loading || !isPaymentReady || !terms"
+            :disabled="!paymentMethod || !terms"
             class="summary__action-button"
             @click="processOrder"
           >
@@ -111,7 +111,8 @@ import {
 } from '@storefront-ui/vue';
 import { onSSR } from '@vue-storefront/core';
 import { ref, computed } from '@vue/composition-api';
-import { useMakeOrder, useCart, cartGetters, orderGetters } from '@vue-storefront/vendure';
+import { useMakeOrder, useCart, cartGetters } from '@vue-storefront/vendure';
+import { useVSFContext } from '@vue-storefront/core';
 
 export default {
   name: 'ReviewOrder',
@@ -131,31 +132,45 @@ export default {
   },
   setup(props, context) {
     const { cart, load, setCart } = useCart();
-    const { order, make, loading } = useMakeOrder();
+    const { $vendure } = useVSFContext();
+    const { loading } = useMakeOrder();
 
-    const isPaymentReady = ref(false);
     const terms = ref(false);
+    const paymentMethod = ref(null);
 
     onSSR(async () => {
       await load();
     });
 
+    const updatePaymentMethod = method => {
+      paymentMethod.value = method;
+    }
+
     const processOrder = async () => {
-      await make();
-      const thankYouPath = { name: 'thank-you', query: { order: orderGetters.getId(order.value) }};
+      const response = await $vendure.api.setPaymentMethod({
+        method: paymentMethod?.value?.code,
+        metadata: {
+          // Here goes metadata from the payment provider. For security reasons it should be handled on the server!
+        }
+      })
+
+      const orderId = response?.data?.addPaymentToOrder?.id;
+
+      const thankYouPath = { name: 'thank-you', query: { order: orderId }};
       context.root.$router.push(context.root.localePath(thankYouPath));
       setCart(null);
     };
 
     return {
-      isPaymentReady,
       terms,
       loading,
       products: computed(() => cartGetters.getItems(cart.value)),
       totals: computed(() => cartGetters.getTotals(cart.value)),
       tableHeaders: ['Description', 'Quantity', 'Amount'],
       cartGetters,
-      processOrder
+      processOrder,
+      updatePaymentMethod,
+      paymentMethod
     };
   }
 };

diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
@@ -263,7 +263,6 @@ export default {
 
     const displayBillingButton = async () => {
       shouldDisplayButton.value = true;
-      emit('shippingMethodSelected');
     };
 
     onSSR(async () => {