Merge 59ff5f8 into 3309a19

packages/commercetools/composables/src/getters/cartGetters.ts

@@ -25,6 +25,13 @@ export const getCartItemAttributes = (product: LineItem, filterByAttributeName?:
 
 export const getCartItemSku = (product: LineItem): string => product.variant.sku;
 
+const getCartSubtotalPrice = (cart: Cart, selectSpecialPrices = false): number => {
+  return getCartItems(cart).reduce((total, cartItem) => {
+    const { special, regular } = getCartItemPrice(cartItem);
+    return total + (selectSpecialPrices && special ? special : regular);
+  }, 0);
+};
+
 export const getCartTotals = (cart: Cart): AgnosticTotals => {
   if (!cart) {
     return {
@@ -34,13 +41,10 @@ export const getCartTotals = (cart: Cart): AgnosticTotals => {
     };
   }
 
-  const subtotalPrice = cart.totalPrice.centAmount;
-  const shipping = cart.shippingInfo ? cart.shippingInfo.price.centAmount : 0;
-
   return {
-    total: (shipping + subtotalPrice) / 100,
-    subtotal: subtotalPrice / 100,
-    special: 0
+    total: cart.totalPrice.centAmount / 100,
+    subtotal: getCartSubtotalPrice(cart),
+    special: getCartSubtotalPrice(cart, true)
   };
 };
 

packages/commercetools/composables/src/useShippingProvider/index.ts

@@ -1,8 +1,9 @@
 import { useShippingProviderFactory, UseShippingProviderParams, Context } from '@vue-storefront/core';
 import useCart from '../useCart';
-import { ShippingMethod } from './../types/GraphQL';
+import { ShippingInfo, ShippingMethod } from './../types/GraphQL';
+import { cartActions } from '@vue-storefront/commercetools-api';
 
-const params: UseShippingProviderParams<ShippingMethod> = {
+const params: UseShippingProviderParams<ShippingInfo, ShippingMethod> = {
   provide() {
     return {
       cart: useCart()
@@ -12,8 +13,20 @@ const params: UseShippingProviderParams<ShippingMethod> = {
     if (!context.cart.cart?.value?.shippingInfo) {
       await context.cart.load({ customQuery });
     }
+    return context.cart.cart.value.shippingInfo;
+  },
+  save: async (context: Context, { shippingMethod, customQuery }) => {
+    const cartResponse = await context.$ct.api.updateCart({
+      id: context.cart.cart.value.id,
+      version: context.cart.cart.value.version,
+      actions: [
+        cartActions.setShippingMethodAction(shippingMethod.id)
+      ]
+    }, customQuery);
+    context.cart.setCart(cartResponse.data.cart);
+
     return context.cart.cart.value.shippingInfo;
   }
 };
 
-export default useShippingProviderFactory<ShippingMethod>(params);
+export default useShippingProviderFactory<ShippingInfo, ShippingMethod>(params);

packages/commercetools/theme/components/Checkout/CartPreview.vue

@@ -32,8 +32,8 @@
       />
       <SfProperty
         name="Shipping"
-        v-if="chosenShippingMethod && chosenShippingMethod.zoneRates"
-        :value="$n(getShippingMethodPrice(chosenShippingMethod), 'currency')"
+        v-if="selectedShippingMethod && selectedShippingMethod.zoneRates"
+        :value="$n(getShippingMethodPrice(selectedShippingMethod), 'currency')"
         class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
@@ -76,7 +76,7 @@ import {
   SfCircleIcon
 } from '@storefront-ui/vue';
 import { computed, ref } from '@vue/composition-api';
-import { useCart, cartGetters } from '@vue-storefront/commercetools';
+import { useCart, useShippingProvider, cartGetters } from '@vue-storefront/commercetools';
 import getShippingMethodPrice from '@/helpers/Checkout/getShippingMethodPrice';
 
 export default {
@@ -90,14 +90,13 @@ export default {
     SfInput,
     SfCircleIcon
   },
-  setup() {
+  setup () {
     const { cart, removeItem, updateItemQty, applyCoupon } = useCart();
+    const { response: selectedShippingMethod } = useShippingProvider();
 
     const listIsHidden = ref(false);
     const promoCode = ref('');
     const showPromoCode = ref(false);
-    // TODO: Implement real source of data
-    const chosenShippingMethod = ref(0);
 
     const products = computed(() => cartGetters.getItems(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
@@ -135,7 +134,7 @@ export default {
         }
       ],
 
-      chosenShippingMethod,
+      selectedShippingMethod: computed(() => selectedShippingMethod.value && selectedShippingMethod.value.shippingMethod),
       getShippingMethodPrice
     };
   }

packages/commercetools/theme/components/Checkout/VsfShippingProvider.vue

@@ -9,7 +9,7 @@
       <div v-if="error.loadMethods">
         {{ $t('There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details or later.') }}
       </div>
-      <div v-else-if="error.saveMethod">
+      <div v-else-if="errorShippingProvider.save">
         {{ $t('There was some error while trying to select this shipping method. We are sorry, please try with different shipping method or later.') }}
       </div>
       <div class="form__radio-group">
@@ -18,7 +18,7 @@
             :key="method.id"
             :label="method.name"
             :value="method.id"
-            :selected="selectedShippingMethod.id"
+            :selected="selectedShippingMethod && selectedShippingMethod.shippingMethod && selectedShippingMethod.shippingMethod.id"
             @input="selectShippingMethod(method)"
             name="shippingMethod"
             :description="method.description"
@@ -49,7 +49,7 @@
           class="form__action-button"
           type="button"
           @click.native="$emit('submit')"
-          :disabled="!isShippingMethodStepCompleted || loading"
+          :disabled="!isShippingMethodStepCompleted || loading || loadingShippingProvider.save"
         >
           {{ $t('Continue to billing') }}
         </SfButton>
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { useCart } from '@vue-storefront/commercetools';
+import { useCart, useShippingProvider } from '@vue-storefront/commercetools';
 import {
   SfHeading,
   SfButton,
@@ -68,7 +68,6 @@ import {
 import { ref, reactive, onMounted } from '@vue/composition-api';
 import getShippingMethodPrice from '@/helpers/Checkout/getShippingMethodPrice';
 import { useVSFContext } from '@vue-storefront/core';
-import { cartActions } from '@vue-storefront/commercetools-api';
 
 export default {
   name: 'VsfShippingProvider',
@@ -88,13 +87,12 @@ export default {
     const isShippingMethodStepCompleted = ref(false);
     const loading = ref(false);
     const shippingMethods = ref([]);
-    const selectedShippingMethod = ref({});
     const { $ct } = useVSFContext();
-    const { cart, setCart } = useCart();
+    const { cart } = useCart();
+    const { response: selectedShippingMethod, save, error: errorShippingProvider, loading: loadingShippingProvider } = useShippingProvider();
 
     const error = reactive({
-      loadMethods: null,
-      saveMethod: null
+      loadMethods: null
     });
 
     const callHookWithFallback = async (hookFn, arg = null, fallbackValue = null) => {
@@ -121,45 +119,16 @@ export default {
       }
     };
 
-    const saveMethod = async ({ shippingMethod }) => {
-      try {
-        error.saveMethod = null;
-        loading.value = true;
-        const cartResponse = await $ct.api.updateCart({
-          id: cart.value.id,
-          version: cart.value.version,
-          actions: [
-            cartActions.setShippingMethodAction(shippingMethod.id)
-          ]
-        });
-
-        setCart(cartResponse.data.cart);
-        return cartResponse.data.cart.shippingInfo.shippingMethod;
-      } catch (err) {
-        error.saveMethod = err;
-        await callHookWithFallback(
-          props.onError,
-          {
-            action: 'saveMethod',
-            error: error.saveMethod
-          }
-        );
-      } finally {
-        loading.value = false;
-      }
-    };
-
     const selectShippingMethod = async shippingMethod => {
-      if (loading.value) {
+      if (loadingShippingProvider.value.save) {
         return;
       }
-      const newShippingMethod = await saveMethod({ shippingMethod });
-      if (error.saveMethod) {
-        selectedShippingMethod.value = {};
+      await save({ shippingMethod });
+      if (errorShippingProvider.value.save) {
         isShippingMethodStepCompleted.value = false;
         return;
       }
-      selectedShippingMethod.value = await callHookWithFallback(props.onSelected, { shippingMethod: newShippingMethod }, newShippingMethod);
+      await callHookWithFallback(props.onSelected, { shippingMethod: selectedShippingMethod.value });
       isShippingMethodStepCompleted.value = true;
     };
 
@@ -179,13 +148,17 @@ export default {
     });
 
     return {
-      loading,
       shippingMethods,
       selectedShippingMethod,
       selectShippingMethod,
       getShippingMethodPrice,
       isShippingMethodStepCompleted,
-      error
+
+      loading,
+      loadingShippingProvider,
+
+      error,
+      errorShippingProvider
     };
   }
 };

packages/commercetools/theme/pages/Checkout/Payment.vue

@@ -162,7 +162,7 @@ export default {
     SfLink,
     VsfPaymentProviderMock
   },
-  setup(props, context) {
+  setup(_, context) {
     const paymentReady = ref(false);
     const terms = ref(false);
     const { cart, removeItem, load, setCart } = useCart();

packages/core/core/src/factories/useShippingProviderFactory.ts

@@ -2,19 +2,35 @@ import { UseShippingProvider, Context, FactoryParams, UseShippingProviderErrors,
 import { Ref, computed } from '@vue/composition-api';
 import { sharedRef, Logger, configureFactoryParams } from '../utils';
 
-export interface UseShippingProviderParams<SHIPPING> extends FactoryParams {
+export interface UseShippingProviderParams<SHIPPING, SHIPPING_METHOD> extends FactoryParams {
   load: (context: Context, params: { customQuery?: CustomQuery }) => Promise<SHIPPING>;
+  save: (context: Context, params: { shippingMethod: SHIPPING_METHOD, customQuery?: CustomQuery }) => Promise<SHIPPING>;
 }
 
-export const useShippingProviderFactory = <SHIPPING>(
-  factoryParams: UseShippingProviderParams<SHIPPING>
+export const useShippingProviderFactory = <SHIPPING, SHIPPING_METHOD>(
+  factoryParams: UseShippingProviderParams<SHIPPING, SHIPPING_METHOD>
 ) => {
-  return function useShippingProvider (): UseShippingProvider<SHIPPING> {
+  return function useShippingProvider (): UseShippingProvider<SHIPPING, SHIPPING_METHOD> {
     const loading: Ref<boolean> = sharedRef(false, 'useShippingProvider-loading');
     const response: Ref<SHIPPING> = sharedRef(null, 'useShippingProvider-response');
     const _factoryParams = configureFactoryParams(factoryParams);
     const error: Ref<UseShippingProviderErrors> = sharedRef({}, 'useShippingProvider-error');
 
+    const save = async ({ shippingMethod, customQuery = null }) => {
+      Logger.debug('useShippingProvider.save');
+
+      try {
+        loading.value = true;
+        error.value.save = null;
+        response.value = await _factoryParams.save({ shippingMethod, customQuery });
+      } catch (err) {
+        error.value.save = err;
+        Logger.error('useShippingProvider/save', err);
+      } finally {
+        loading.value = false;
+      }
+    };
+
     const load = async ({ customQuery = null } = {}) => {
       Logger.debug('useShippingProvider.load');
 
@@ -31,10 +47,11 @@ export const useShippingProviderFactory = <SHIPPING>(
     };
 
     return {
-      response: computed(() => response.value),
+      response,
       loading: computed(() => loading.value),
       error: computed(() => error.value),
-      load
+      load,
+      save
     };
   };
 };

packages/core/core/src/types.ts

@@ -303,15 +303,17 @@ export interface UseShippingErrors {
   load?: Error;
   save?: Error;
 }
-export interface UseShippingProvider<SHIPPING_METHOD> {
+export interface UseShippingProvider<SHIPPING_INFO, SHIPPING_METHOD> {
   error: ComputedProperty<UseShippingErrors>;
   loading: ComputedProperty<boolean>;
-  response: ComputedProperty<SHIPPING_METHOD>;
+  response: ComputedProperty<SHIPPING_INFO>;
   load(): Promise<void>;
   load(params: { customQuery?: CustomQuery }): Promise<void>;
+  save(params: { shippingMethod: SHIPPING_METHOD, customQuery?: CustomQuery }): Promise<void>;
 }
 export interface UseShippingProviderErrors {
   load?: Error;
+  save?: Error;
 }
 
 export interface UseBillingErrors {

packages/core/docs/changelog/5598.js

@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'save method for useShippingProvider',
+  link: 'https://github.com/vuestorefront/vue-storefront/pull/5598',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Fifciu',
+  linkToGitHubAccount: 'https://github.com/Fifciu'
+};