feat: #56 (*) fix transition to order

vuestorefront-community · Aug 24, 2021 · 09fc67e · 09fc67e
1 parent 495c3cd
commit 09fc67e
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 23 deletions.
diff --git a/packages/api-client/src/api/updateAddressDetails/index.ts b/packages/api-client/src/api/updateAddressDetails/index.ts
@@ -2,14 +2,17 @@ import setOrderBillingAddressMutation from './setOrderBillingAddressMutation';
 import setOrderShippingAddressMutation from './setOrderShippingAddressMutation';
 import { CustomQuery } from '@vue-storefront/core';
 import gql from 'graphql-tag';
-import { Context, UpdateAddressDetailsParams, UpdateAddressDetailsResponse } from '../../types';
-import { BILLING_TYPE } from '../../helpers/constants';
+import { Context, Order, UpdateAddressDetailsParams, UpdateAddressDetailsResponse } from '../../types';
+import { ARRANGING_PAYMENT_STATE, BILLING_TYPE } from '../../helpers';
+import { isCustomerDataFilled } from '../../helpers';
+import transitionOrderToState from '../transitionOrderToState';
 
 const updateAddressDetails = async (context: Context, params: UpdateAddressDetailsParams, customQuery?: CustomQuery): Promise<UpdateAddressDetailsResponse> => {
   const { type, input } = params;
   const updateAddressDetailsVariables = { input };
+  const isBilling = type === BILLING_TYPE;
 
-  const updateAddressDetailsQuery = type === BILLING_TYPE ? setOrderBillingAddressMutation : setOrderShippingAddressMutation;
+  const updateAddressDetailsQuery = isBilling ? setOrderBillingAddressMutation : setOrderShippingAddressMutation;
 
   const { updateAddressDetails } = context.extendQuery(
     customQuery, { updateAddressDetails: { query: updateAddressDetailsQuery, variables: updateAddressDetailsVariables } }
@@ -21,6 +24,10 @@ const updateAddressDetails = async (context: Context, params: UpdateAddressDetai
     fetchPolicy: 'no-cache'
   }) as UpdateAddressDetailsResponse;
 
+  if (isBilling && isCustomerDataFilled(request?.data?.setOrderBillingAddress as Order)) {
+    await transitionOrderToState(context, { state: ARRANGING_PAYMENT_STATE })
+  }
+
   return request;
 };
 

diff --git a/packages/api-client/src/fragments/cart.ts b/packages/api-client/src/fragments/cart.ts
@@ -35,6 +35,11 @@ export const CartFragment = `
         code
         state
         active
+        customer {
+            firstName
+            lastName
+            emailAddress
+        }
         lines {
             id
             featuredAsset {

diff --git a/packages/api-client/src/helpers/checkout.ts b/packages/api-client/src/helpers/checkout.ts
@@ -0,0 +1,6 @@
+import { Order } from "../types";
+
+export const isCustomerDataFilled = (order: Order): boolean => {
+    if (!order) return;
+    return Boolean(order?.customer?.emailAddress && order?.billingAddress?.streetLine1 && order?.shippingAddress?.streetLine1);
+}
diff --git a/packages/api-client/src/helpers/constants.ts b/packages/api-client/src/helpers/constants.ts
@@ -1,2 +1,3 @@
 export const VENDURE_AUTH_TOKEN_NAME = 'vendure-auth-token';
 export const BILLING_TYPE = 'billing';
+export const ARRANGING_PAYMENT_STATE = 'ArrangingPayment';
diff --git a/packages/api-client/src/helpers/index.ts b/packages/api-client/src/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './checkout';
diff --git a/packages/composables/src/composables/useBilling/index.ts b/packages/composables/src/composables/useBilling/index.ts
@@ -29,13 +29,7 @@ const params: UseBillingParams<OrderAddress, AddParams> = {
     // OrderAddress has one property optional which is required in CreateAddressInput.
     const response = await context.$vendure.api.updateAddressDetails({ input: billingDetails as CreateAddressInput, type: BILLING_TYPE }, customQuery);
 
-    const newOrder = (response?.data?.setOrderBillingAddress as Order)?.billingAddress
-
-    if (newOrder) {
-      await context.$vendure.api.transitionOrderToState({ state: 'ArrangingPayment' });
-    }
-
-    return newOrder;
+    return (response?.data?.setOrderBillingAddress as Order)?.billingAddress;
   }
 };
 

diff --git a/packages/theme/pages/Checkout/Customer.vue b/packages/theme/pages/Checkout/Customer.vue
@@ -15,7 +15,7 @@
           slim
         >
           <SfInput
-            v-e2e="'shipping-firstName'"
+            v-e2e="'customer-firstName'"
             v-model="form.firstName"
             label="First name"
             name="firstName"
@@ -32,7 +32,7 @@
           slim
         >
           <SfInput
-            v-e2e="'shipping-lastName'"
+            v-e2e="'customer-lastName'"
             v-model="form.lastName"
             label="Last name"
             name="lastName"
@@ -73,17 +73,6 @@
           </SfButton>
         </div>
       </div>
-      <!-- <div class="form__action">
-        <SfButton
-          v-e2e="'continue-to-shipping'"
-          class="form__action-button"
-          type="button"
-          @click=""
-          :disabled="!(form.firstName && form.lastName && form.emailAddress)"
-        >
-          {{ $t('Continue to shipping') }}
-        </SfButton>
-        </div> -->
     </form>
   </ValidationObserver>
 </template>