From d381dd195a56a7b4012a99d13687eac239ffadfd Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 22 Aug 2021 16:57:11 +0200 Subject: [PATCH 01/13] feat: #56 (api) setPaymentMethod --- .../__tests__/api/setPaymentMethod.spec.ts | 26 +++++++++++++++++++ packages/api-client/src/api/index.ts | 1 + .../addPaymentToOrderMutation.ts | 14 ++++++++++ .../src/api/setPaymentMethod/index.ts | 24 +++++++++++++++++ packages/api-client/src/types/API.ts | 4 ++- 5 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 packages/api-client/__tests__/api/setPaymentMethod.spec.ts create mode 100644 packages/api-client/src/api/setPaymentMethod/addPaymentToOrderMutation.ts create mode 100644 packages/api-client/src/api/setPaymentMethod/index.ts diff --git a/packages/api-client/__tests__/api/setPaymentMethod.spec.ts b/packages/api-client/__tests__/api/setPaymentMethod.spec.ts new file mode 100644 index 00000000..c7145ec2 --- /dev/null +++ b/packages/api-client/__tests__/api/setPaymentMethod.spec.ts @@ -0,0 +1,26 @@ +import setPaymentMethod from '../../src/api/setPaymentMethod'; +import addPaymentToOrderMutation from '../../src/api/setPaymentMethod/addPaymentToOrderMutation'; +import { Context } from '../../src/types'; + +describe('[vendure-api-client] setPaymentMethod', () => { + it('sets payment method for certain order', async () => { + const givenVariables = { metadata: { id: '1' }, method: 'test' }; + + const context = { + config: {}, + client: { + mutate: ({ variables, mutation }) => { + expect(variables).toEqual({ input: givenVariables }); + expect(mutation).toEqual(addPaymentToOrderMutation); + + return { data: 'set payment method response' }; + } + }, + extendQuery: (customQuery, args) => args + } as unknown as Context; + + const { data } = await setPaymentMethod(context, { metadata: { id: '1' }, method: 'test' }); + + expect(data).toBe('set payment method response'); + }); +}); diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts index e49acfee..a35f45d6 100644 --- a/packages/api-client/src/api/index.ts +++ b/packages/api-client/src/api/index.ts @@ -11,3 +11,4 @@ export { default as getMe } from './getMe'; export { default as updateAddressDetails } from './updateAddressDetails'; export { default as getShippingMethods } from './getShippingMethods'; export { default as setShippingMethod } from './setShippingMethod'; +export { default as setPaymentMethod } from './setPaymentMethod'; diff --git a/packages/api-client/src/api/setPaymentMethod/addPaymentToOrderMutation.ts b/packages/api-client/src/api/setPaymentMethod/addPaymentToOrderMutation.ts new file mode 100644 index 00000000..331016d7 --- /dev/null +++ b/packages/api-client/src/api/setPaymentMethod/addPaymentToOrderMutation.ts @@ -0,0 +1,14 @@ +import gql from 'graphql-tag'; +import { CartFragment, ErrorResultFragment } from '../../fragments'; + +export default gql` + ${CartFragment} + ${ErrorResultFragment} + + mutation addPaymentToOrder($input: PaymentInput!) { + addPaymentToOrder(input: $input) { + ...Cart + ...ErrorResult + } + } +`; diff --git a/packages/api-client/src/api/setPaymentMethod/index.ts b/packages/api-client/src/api/setPaymentMethod/index.ts new file mode 100644 index 00000000..21d2266f --- /dev/null +++ b/packages/api-client/src/api/setPaymentMethod/index.ts @@ -0,0 +1,24 @@ +import addPaymentToOrderMutation from './addPaymentToOrderMutation'; +import { CustomQuery } from '@vue-storefront/core'; +import gql from 'graphql-tag'; +import { Context, PaymentInput, SetShippingMethodResponse } from '../../types'; + +const setPaymentMethod = async (context: Context, params: PaymentInput, customQuery?: CustomQuery): Promise => { + const setPaymentMethodVariables = { + input: params + }; + + const { addPaymentToOrder } = context.extendQuery( + customQuery, { addPaymentToOrder: { query: addPaymentToOrderMutation, variables: setPaymentMethodVariables } } + ); + + const request = await context.client.mutate({ + mutation: gql`${addPaymentToOrder.query}`, + variables: addPaymentToOrder.variables, + fetchPolicy: 'no-cache' + }) as SetShippingMethodResponse; + + return request; +}; + +export default setPaymentMethod; diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts index 8dee78a2..cdaa4fb7 100644 --- a/packages/api-client/src/types/API.ts +++ b/packages/api-client/src/types/API.ts @@ -1,7 +1,7 @@ import { CustomQuery } from '@vue-storefront/core'; import { ApolloQueryResult } from 'apollo-client'; import { FetchResult } from 'apollo-link'; -import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, Customer, Order, Product, RemoveOrderItemsResult, SearchResponse, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; +import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, Customer, Order, PaymentInput, Product, RemoveOrderItemsResult, SearchResponse, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; import { AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; export type QueryResponse = ApolloQueryResult>; @@ -21,6 +21,7 @@ export type ApplyCouponCodeResponse = MutationResponse<'applyCouponCode', ApplyC export type RemoveCouponCodeResponse = MutationResponse<'removeCouponCode', Order>; export type UpdateAddressDetailsResponse = MutationResponse<'setOrderShippingAddress' | 'setOrderBillingAddress', ActiveOrderResult>; export type SetShippingMethodResponse = MutationResponse<'setOrderShippingMethod', Order>; +export type SetPaymentMethodResponse = MutationResponse<'setPaymentShippingMethod', Order>; export interface VendureApiMethods { getProduct(params: ProductParams, customQuery?: CustomQuery): Promise; @@ -36,4 +37,5 @@ export interface VendureApiMethods { removeCouponCode(params: CartCouponParams, customQuery?: CustomQuery): Promise; updateAddressDetails(params: UpdateAddressDetailsParams, customQuery?: CustomQuery): Promise; setShippingMethod(params: SetShippingMethodParams, customQuery?: CustomQuery): Promise; + setPaymentMethod(params: PaymentInput, customQuery?: CustomQuery): Promise; } From 97eecc4feb5e6e430074cf9609582a763830f3c6 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 22 Aug 2021 17:18:18 +0200 Subject: [PATCH 02/13] feat: #56 (api) transitionOrderToState --- .../api/transitionOrderToState.spec.ts | 26 +++++++++++++++++++ .../src/api/transitionOrderToState/index.ts | 24 +++++++++++++++++ .../transitionOrderToStateMutation.ts | 14 ++++++++++ packages/api-client/src/types/API.ts | 4 ++- packages/api-client/src/types/types.ts | 4 +++ 5 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 packages/api-client/__tests__/api/transitionOrderToState.spec.ts create mode 100644 packages/api-client/src/api/transitionOrderToState/index.ts create mode 100644 packages/api-client/src/api/transitionOrderToState/transitionOrderToStateMutation.ts diff --git a/packages/api-client/__tests__/api/transitionOrderToState.spec.ts b/packages/api-client/__tests__/api/transitionOrderToState.spec.ts new file mode 100644 index 00000000..7b7cbdb3 --- /dev/null +++ b/packages/api-client/__tests__/api/transitionOrderToState.spec.ts @@ -0,0 +1,26 @@ +import transitionOrderToState from '../../src/api/transitionOrderToState'; +import transitionOrderToStateMutation from '../../src/api/transitionOrderToState/transitionOrderToStateMutation'; +import { Context } from '../../src/types'; + +describe('[vendure-api-client] transitionOrderToState', () => { + it('sets payment method for certain order', async () => { + const givenVariables = { state: 'test' }; + + const context = { + config: {}, + client: { + mutate: ({ variables, mutation }) => { + expect(variables).toEqual(givenVariables); + expect(mutation).toEqual(transitionOrderToStateMutation); + + return { data: 'transition order to state response' }; + } + }, + extendQuery: (customQuery, args) => args + } as unknown as Context; + + const { data } = await transitionOrderToState(context, { state: 'test' }); + + expect(data).toBe('transition order to state response'); + }); +}); diff --git a/packages/api-client/src/api/transitionOrderToState/index.ts b/packages/api-client/src/api/transitionOrderToState/index.ts new file mode 100644 index 00000000..3da8fd60 --- /dev/null +++ b/packages/api-client/src/api/transitionOrderToState/index.ts @@ -0,0 +1,24 @@ +import transitionOrderToStateMutation from './transitionOrderToStateMutation'; +import { CustomQuery } from '@vue-storefront/core'; +import gql from 'graphql-tag'; +import { Context, TransitionOrderToState, TransitionOrderToStateParams } from '../../types'; + +const transitionOrderToState = async (context: Context, params: TransitionOrderToStateParams, customQuery?: CustomQuery): Promise => { + const transitionOrderToStateVariables = { + ...params + }; + + const { transitionOrderToState } = context.extendQuery( + customQuery, { transitionOrderToState: { query: transitionOrderToStateMutation, variables: transitionOrderToStateVariables } } + ); + + const request = await context.client.mutate({ + mutation: gql`${transitionOrderToState.query}`, + variables: transitionOrderToState.variables, + fetchPolicy: 'no-cache' + }) as TransitionOrderToState; + + return request; +}; + +export default transitionOrderToState; diff --git a/packages/api-client/src/api/transitionOrderToState/transitionOrderToStateMutation.ts b/packages/api-client/src/api/transitionOrderToState/transitionOrderToStateMutation.ts new file mode 100644 index 00000000..4a776da7 --- /dev/null +++ b/packages/api-client/src/api/transitionOrderToState/transitionOrderToStateMutation.ts @@ -0,0 +1,14 @@ +import gql from 'graphql-tag'; +import { CartFragment, ErrorResultFragment } from '../../fragments'; + +export default gql` + ${CartFragment} + ${ErrorResultFragment} + + mutation transitionOrderToState($state: String!) { + transitionOrderToState(state: $state) { + ...Cart + ...ErrorResult + } + } +`; diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts index cdaa4fb7..f8178a6e 100644 --- a/packages/api-client/src/types/API.ts +++ b/packages/api-client/src/types/API.ts @@ -2,7 +2,7 @@ import { CustomQuery } from '@vue-storefront/core'; import { ApolloQueryResult } from 'apollo-client'; import { FetchResult } from 'apollo-link'; import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, Customer, Order, PaymentInput, Product, RemoveOrderItemsResult, SearchResponse, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; -import { AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; +import { AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, TransitionOrderToStateParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; export type QueryResponse = ApolloQueryResult>; export type MutationResponse = FetchResult>; @@ -22,6 +22,7 @@ export type RemoveCouponCodeResponse = MutationResponse<'removeCouponCode', Orde export type UpdateAddressDetailsResponse = MutationResponse<'setOrderShippingAddress' | 'setOrderBillingAddress', ActiveOrderResult>; export type SetShippingMethodResponse = MutationResponse<'setOrderShippingMethod', Order>; export type SetPaymentMethodResponse = MutationResponse<'setPaymentShippingMethod', Order>; +export type TransitionOrderToState = MutationResponse<'transitionOrderToState', Order>; export interface VendureApiMethods { getProduct(params: ProductParams, customQuery?: CustomQuery): Promise; @@ -38,4 +39,5 @@ export interface VendureApiMethods { updateAddressDetails(params: UpdateAddressDetailsParams, customQuery?: CustomQuery): Promise; setShippingMethod(params: SetShippingMethodParams, customQuery?: CustomQuery): Promise; setPaymentMethod(params: PaymentInput, customQuery?: CustomQuery): Promise; + transitionOrderToState(params: TransitionOrderToStateParams, customQuery?: CustomQuery): Promise; } diff --git a/packages/api-client/src/types/types.ts b/packages/api-client/src/types/types.ts index 5a08e770..2534457f 100644 --- a/packages/api-client/src/types/types.ts +++ b/packages/api-client/src/types/types.ts @@ -85,3 +85,7 @@ export type UpdateAddressDetailsParams = { export type SetShippingMethodParams = { shippingMethodId: string; } + +export type TransitionOrderToStateParams = { + state: string; +} From f9d76f8074643bf0dd1337e1327f9a45f09b78bc Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 22 Aug 2021 17:31:33 +0200 Subject: [PATCH 03/13] feat: #56 (api) transitionOrderToState fix --- packages/api-client/src/api/index.ts | 1 + packages/composables/src/composables/useBilling/index.ts | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts index a35f45d6..68b000cb 100644 --- a/packages/api-client/src/api/index.ts +++ b/packages/api-client/src/api/index.ts @@ -12,3 +12,4 @@ export { default as updateAddressDetails } from './updateAddressDetails'; export { default as getShippingMethods } from './getShippingMethods'; export { default as setShippingMethod } from './setShippingMethod'; export { default as setPaymentMethod } from './setPaymentMethod'; +export { default as transitionOrderToState } from './transitionOrderToState'; diff --git a/packages/composables/src/composables/useBilling/index.ts b/packages/composables/src/composables/useBilling/index.ts index d30eede9..3aa9c5f6 100644 --- a/packages/composables/src/composables/useBilling/index.ts +++ b/packages/composables/src/composables/useBilling/index.ts @@ -29,7 +29,13 @@ const params: UseBillingParams = { // 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); - return (response?.data?.setOrderBillingAddress as Order)?.billingAddress; + const newOrder = (response?.data?.setOrderBillingAddress as Order)?.billingAddress + + if (newOrder) { + await context.$vendure.api.transitionOrderToState({ state: 'ArrangingPayment' }); + } + + return newOrder; } }; From d9d683762400997763264151fec3004bd30732e3 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 22 Aug 2021 17:49:30 +0200 Subject: [PATCH 04/13] feat: #56 (api) setOrderForCustomer --- .../__tests__/api/setCustomerForOrder.spec.ts | 26 +++++++++++++++++++ packages/api-client/src/api/index.ts | 1 + .../src/api/setCustomerForOrder/index.ts | 24 +++++++++++++++++ .../setCustomerForOrderMutation.ts | 14 ++++++++++ packages/api-client/src/types/API.ts | 4 ++- 5 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 packages/api-client/__tests__/api/setCustomerForOrder.spec.ts create mode 100644 packages/api-client/src/api/setCustomerForOrder/index.ts create mode 100644 packages/api-client/src/api/setCustomerForOrder/setCustomerForOrderMutation.ts diff --git a/packages/api-client/__tests__/api/setCustomerForOrder.spec.ts b/packages/api-client/__tests__/api/setCustomerForOrder.spec.ts new file mode 100644 index 00000000..63840d8e --- /dev/null +++ b/packages/api-client/__tests__/api/setCustomerForOrder.spec.ts @@ -0,0 +1,26 @@ +import setCustomerForOrder from '../../src/api/setCustomerForOrder'; +import setCustomerForOrderMutation from '../../src/api/setCustomerForOrder/setCustomerForOrderMutation'; +import { Context } from '../../src/types'; + +describe('[vendure-api-client] setCustomerForOrder', () => { + it('sets customer for certain order', async () => { + const givenVariables = { firstName: 'test', lastName: 'test', emailAddress: 'test@test.com' }; + + const context = { + config: {}, + client: { + mutate: ({ variables, mutation }) => { + expect(variables).toEqual({ input: givenVariables }); + expect(mutation).toEqual(setCustomerForOrderMutation); + + return { data: 'set customer for order response' }; + } + }, + extendQuery: (customQuery, args) => args + } as unknown as Context; + + const { data } = await setCustomerForOrder(context, givenVariables); + + expect(data).toBe('set customer for order response'); + }); +}); diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts index 68b000cb..88daa794 100644 --- a/packages/api-client/src/api/index.ts +++ b/packages/api-client/src/api/index.ts @@ -13,3 +13,4 @@ export { default as getShippingMethods } from './getShippingMethods'; export { default as setShippingMethod } from './setShippingMethod'; export { default as setPaymentMethod } from './setPaymentMethod'; export { default as transitionOrderToState } from './transitionOrderToState'; +export { default as setCustomerForOrder } from './setCustomerForOrder'; diff --git a/packages/api-client/src/api/setCustomerForOrder/index.ts b/packages/api-client/src/api/setCustomerForOrder/index.ts new file mode 100644 index 00000000..a0f770d0 --- /dev/null +++ b/packages/api-client/src/api/setCustomerForOrder/index.ts @@ -0,0 +1,24 @@ +import setCustomerForOrderMutation from './setCustomerForOrderMutation'; +import { CustomQuery } from '@vue-storefront/core'; +import gql from 'graphql-tag'; +import { Context, CreateCustomerInput, SetCustomerForOrderResponse } from '../../types'; + +const setCustomerForOrder = async (context: Context, params: CreateCustomerInput, customQuery?: CustomQuery): Promise => { + const setCustomerForOrderVariables = { + input: params + }; + + const { setCustomerForOrder } = context.extendQuery( + customQuery, { setCustomerForOrder: { query: setCustomerForOrderMutation, variables: setCustomerForOrderVariables } } + ); + + const request = await context.client.mutate({ + mutation: gql`${setCustomerForOrder.query}`, + variables: setCustomerForOrder.variables, + fetchPolicy: 'no-cache' + }) as SetCustomerForOrderResponse; + + return request; +}; + +export default setCustomerForOrder; diff --git a/packages/api-client/src/api/setCustomerForOrder/setCustomerForOrderMutation.ts b/packages/api-client/src/api/setCustomerForOrder/setCustomerForOrderMutation.ts new file mode 100644 index 00000000..dc2a4337 --- /dev/null +++ b/packages/api-client/src/api/setCustomerForOrder/setCustomerForOrderMutation.ts @@ -0,0 +1,14 @@ +import gql from 'graphql-tag'; +import { CartFragment, ErrorResultFragment } from '../../fragments'; + +export default gql` + ${CartFragment} + ${ErrorResultFragment} + + mutation setCustomerForOrder($input: CreateCustomerInput!) { + setCustomerForOrder(input: $input) { + ...Cart + ...ErrorResult + } + } +`; diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts index f8178a6e..97e64e82 100644 --- a/packages/api-client/src/types/API.ts +++ b/packages/api-client/src/types/API.ts @@ -1,7 +1,7 @@ import { CustomQuery } from '@vue-storefront/core'; import { ApolloQueryResult } from 'apollo-client'; import { FetchResult } from 'apollo-link'; -import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, Customer, Order, PaymentInput, Product, RemoveOrderItemsResult, SearchResponse, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; +import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, CreateCustomerInput, Customer, Order, PaymentInput, Product, RemoveOrderItemsResult, SearchResponse, SetCustomerForOrderResult, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; import { AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, TransitionOrderToStateParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; export type QueryResponse = ApolloQueryResult>; @@ -23,6 +23,7 @@ export type UpdateAddressDetailsResponse = MutationResponse<'setOrderShippingAdd export type SetShippingMethodResponse = MutationResponse<'setOrderShippingMethod', Order>; export type SetPaymentMethodResponse = MutationResponse<'setPaymentShippingMethod', Order>; export type TransitionOrderToState = MutationResponse<'transitionOrderToState', Order>; +export type SetCustomerForOrderResponse = MutationResponse<'setCustomerForOrder', SetCustomerForOrderResult>; export interface VendureApiMethods { getProduct(params: ProductParams, customQuery?: CustomQuery): Promise; @@ -40,4 +41,5 @@ export interface VendureApiMethods { setShippingMethod(params: SetShippingMethodParams, customQuery?: CustomQuery): Promise; setPaymentMethod(params: PaymentInput, customQuery?: CustomQuery): Promise; transitionOrderToState(params: TransitionOrderToStateParams, customQuery?: CustomQuery): Promise; + setCustomerForOrder(params: CreateCustomerInput, customQuery?: CustomQuery): Promise; } From e4b474481a3ba5982faae33b2b22785dde2993ca Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 22 Aug 2021 17:57:45 +0200 Subject: [PATCH 05/13] feat: #56 (api) getPaymentMethods --- .../__tests__/api/getPaymentMethods.spec.ts | 26 +++++++++++++++++++ .../eligiblePaymentMethodsQuery.ts | 14 ++++++++++ .../src/api/getPaymentMethods/index.ts | 22 ++++++++++++++++ packages/api-client/src/types/API.ts | 4 ++- 4 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 packages/api-client/__tests__/api/getPaymentMethods.spec.ts create mode 100644 packages/api-client/src/api/getPaymentMethods/eligiblePaymentMethodsQuery.ts create mode 100644 packages/api-client/src/api/getPaymentMethods/index.ts diff --git a/packages/api-client/__tests__/api/getPaymentMethods.spec.ts b/packages/api-client/__tests__/api/getPaymentMethods.spec.ts new file mode 100644 index 00000000..7c93a478 --- /dev/null +++ b/packages/api-client/__tests__/api/getPaymentMethods.spec.ts @@ -0,0 +1,26 @@ +import getPaymentMethods from '../../src/api/getPaymentMethods'; +import eligiblePaymentMethodsQuery from '../../src/api/getPaymentMethods/eligiblePaymentMethodsQuery'; +import { Context } from '../../src/types'; + +describe('[vendure-api-client] getPaymentMethods', () => { + it('returns shipping methods', async () => { + const givenVariables = {}; + + const context = { + config: {}, + client: { + query: ({ variables, query }) => { + expect(variables).toEqual(givenVariables); + expect(query).toEqual(eligiblePaymentMethodsQuery); + + return { data: 'get payment methods response' }; + } + }, + extendQuery: (customQuery, args) => args + } as unknown as Context; + + const { data } = await getPaymentMethods(context); + + expect(data).toBe('get payment methods response'); + }); +}); diff --git a/packages/api-client/src/api/getPaymentMethods/eligiblePaymentMethodsQuery.ts b/packages/api-client/src/api/getPaymentMethods/eligiblePaymentMethodsQuery.ts new file mode 100644 index 00000000..1928abd6 --- /dev/null +++ b/packages/api-client/src/api/getPaymentMethods/eligiblePaymentMethodsQuery.ts @@ -0,0 +1,14 @@ +import gql from 'graphql-tag'; + +export default gql` + query eligiblePaymentMethods { + eligiblePaymentMethods { + id + code + name + description + isEligible + eligibilityMessage + } + } +`; diff --git a/packages/api-client/src/api/getPaymentMethods/index.ts b/packages/api-client/src/api/getPaymentMethods/index.ts new file mode 100644 index 00000000..62c62a81 --- /dev/null +++ b/packages/api-client/src/api/getPaymentMethods/index.ts @@ -0,0 +1,22 @@ +import gql from 'graphql-tag'; +import eligiblePaymentMethodsQuery from './eligiblePaymentMethodsQuery'; +import { CustomQuery } from '@vue-storefront/core'; +import { Context, RequestDataStructure, PaymentMethodQuote, GetPaymentMethodsResponse } from '../../types'; + +const getPaymentMethods = async (context: Context, customQuery?: CustomQuery): Promise => { + const getPaymentMethodsVariables = {}; + + const { eligiblePaymentMethods } = context.extendQuery( + customQuery, { eligiblePaymentMethods: { query: eligiblePaymentMethodsQuery, variables: getPaymentMethodsVariables } } + ); + + const request = await context.client.query>({ + query: gql`${eligiblePaymentMethods.query}`, + variables: eligiblePaymentMethods.variables, + fetchPolicy: 'no-cache' + }); + return request; + +}; + +export default getPaymentMethods; diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts index 97e64e82..82126e49 100644 --- a/packages/api-client/src/types/API.ts +++ b/packages/api-client/src/types/API.ts @@ -1,7 +1,7 @@ import { CustomQuery } from '@vue-storefront/core'; import { ApolloQueryResult } from 'apollo-client'; import { FetchResult } from 'apollo-link'; -import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, CreateCustomerInput, Customer, Order, PaymentInput, Product, RemoveOrderItemsResult, SearchResponse, SetCustomerForOrderResult, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; +import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, CreateCustomerInput, Customer, Order, PaymentInput, PaymentMethodQuote, Product, RemoveOrderItemsResult, SearchResponse, SetCustomerForOrderResult, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; import { AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, TransitionOrderToStateParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; export type QueryResponse = ApolloQueryResult>; @@ -14,6 +14,7 @@ export type GetFacetResponse = QueryResponse<'search', SearchResponse>; export type GetCartResponse = QueryResponse<'activeOrder', Order>; export type GetMeResponse = QueryResponse<'activeCustomer', Customer>; export type GetShippingMethodsResponse = QueryResponse<'eligibleShippingMethods', ShippingMethodQuote[]>; +export type GetPaymentMethodsResponse = QueryResponse<'eligiblePaymentMethods', PaymentMethodQuote[]>; export type AddToCartResponse = MutationResponse<'addItemToOrder', UpdateOrderItemsResult>; export type RemoveFromCartResponse = MutationResponse<'removeOrderLine', RemoveOrderItemsResult>; export type UpdateCartQuantityResponse = MutationResponse<'adjustOrderLine', UpdateOrderItemsResult>; @@ -32,6 +33,7 @@ export interface VendureApiMethods { getCart(customQuery?: CustomQuery): Promise; getsMe(customQuery?: CustomQuery): Promise; getShippingMethods(customQuery?: CustomQuery): Promise; + getPaymentMethods(customQuery?: CustomQuery): Promise; addToCart(params: AddToCartParams, customQuery?: CustomQuery): Promise; removeFromCart(params: RemoveFromCartParams, customQuery?: CustomQuery): Promise; updateCartQuantity(params: UpdateCartParams, customQuery?: CustomQuery): Promise; From 843ae7d5fa96eee9ad4b229382687330e3294471 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 22 Aug 2021 18:55:02 +0200 Subject: [PATCH 06/13] feat: #56 (theme) adjust payment process --- packages/api-client/src/api/index.ts | 1 + .../composables/src/getters/cartGetters.ts | 2 +- .../Checkout/VsfPaymentProvider.vue | 23 +- packages/theme/pages/Checkout/Payment.vue | 33 ++- packages/theme/pages/Checkout/Shipping.vue | 1 - packages/theme/pages/Checkout/ThankYou.vue | 262 ++++++++++++++++++ 6 files changed, 301 insertions(+), 21 deletions(-) create mode 100644 packages/theme/pages/Checkout/ThankYou.vue diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts index 88daa794..65422925 100644 --- 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 index f65cfc13..efcec718 100644 --- a/packages/composables/src/getters/cartGetters.ts +++ b/packages/composables/src/getters/cartGetters.ts @@ -14,7 +14,7 @@ interface ExtendedCartGetters extends CartGetters { } 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 index a12b7048..604d9788 100644 --- 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 index 4dd9816a..b45dbd20 100644 --- 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" /> - + - + routes.unshift(route)); + } + }, build: { babel: { plugins: [ diff --git a/packages/theme/pages/Checkout.vue b/packages/theme/pages/Checkout.vue index 378c1b21..26d88de3 100644 --- a/packages/theme/pages/Checkout.vue +++ b/packages/theme/pages/Checkout.vue @@ -36,6 +36,7 @@ import CartPreview from '~/components/Checkout/CartPreview'; import { computed } from '@vue/composition-api'; const STEPS = { + customer: 'Customer', shipping: 'Shipping', billing: 'Billing', payment: 'Payment' diff --git a/packages/theme/pages/Checkout/Customer.vue b/packages/theme/pages/Checkout/Customer.vue new file mode 100644 index 00000000..826de9b0 --- /dev/null +++ b/packages/theme/pages/Checkout/Customer.vue @@ -0,0 +1,240 @@ + + + + + diff --git a/packages/theme/routes.js b/packages/theme/routes.js new file mode 100644 index 00000000..0d7e8923 --- /dev/null +++ b/packages/theme/routes.js @@ -0,0 +1,11 @@ +const path = require('path'); + +export function getRoutes(themeDir = __dirname) { + return [ + { + path: 'checkout/customer', + name: 'customer', + component: path.resolve(themeDir, 'pages/Checkout/Customer.vue') + } + ]; +} From 09fc67e65d0caabfbc525022b3ca14ed1bbcdb78 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Tue, 24 Aug 2021 08:52:34 +0200 Subject: [PATCH 08/13] feat: #56 (*) fix transition to order --- .../src/api/updateAddressDetails/index.ts | 13 ++++++++++--- packages/api-client/src/fragments/cart.ts | 5 +++++ packages/api-client/src/helpers/checkout.ts | 6 ++++++ packages/api-client/src/helpers/constants.ts | 1 + packages/api-client/src/helpers/index.ts | 2 ++ .../src/composables/useBilling/index.ts | 8 +------- packages/theme/pages/Checkout/Customer.vue | 15 ++------------- 7 files changed, 27 insertions(+), 23 deletions(-) create mode 100644 packages/api-client/src/helpers/checkout.ts create mode 100644 packages/api-client/src/helpers/index.ts diff --git a/packages/api-client/src/api/updateAddressDetails/index.ts b/packages/api-client/src/api/updateAddressDetails/index.ts index f3d982e1..0a001a3d 100644 --- 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 => { 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 index feccb96e..ec6db578 100644 --- 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 new file mode 100644 index 00000000..c53b9160 --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/packages/api-client/src/helpers/constants.ts b/packages/api-client/src/helpers/constants.ts index 2b1a0d00..7344a06c 100644 --- 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 new file mode 100644 index 00000000..84639338 --- /dev/null +++ b/packages/api-client/src/helpers/index.ts @@ -0,0 +1,2 @@ +export * from './constants'; +export * from './checkout'; \ No newline at end of file diff --git a/packages/composables/src/composables/useBilling/index.ts b/packages/composables/src/composables/useBilling/index.ts index 3aa9c5f6..d30eede9 100644 --- a/packages/composables/src/composables/useBilling/index.ts +++ b/packages/composables/src/composables/useBilling/index.ts @@ -29,13 +29,7 @@ const params: UseBillingParams = { // 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 index 826de9b0..e28dc926 100644 --- a/packages/theme/pages/Checkout/Customer.vue +++ b/packages/theme/pages/Checkout/Customer.vue @@ -15,7 +15,7 @@ slim > - From b91d2ef899c92c2612f0bcdedf3befc9437e7702 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Tue, 24 Aug 2021 08:54:52 +0200 Subject: [PATCH 09/13] feat: #56 (lint) lint files --- packages/api-client/src/api/updateAddressDetails/index.ts | 2 +- packages/api-client/src/helpers/checkout.ts | 8 ++++---- packages/api-client/src/helpers/index.ts | 2 +- packages/theme/pages/Checkout/Payment.vue | 4 ++-- packages/theme/pages/Checkout/Shipping.vue | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/api-client/src/api/updateAddressDetails/index.ts b/packages/api-client/src/api/updateAddressDetails/index.ts index 0a001a3d..a2154e15 100644 --- a/packages/api-client/src/api/updateAddressDetails/index.ts +++ b/packages/api-client/src/api/updateAddressDetails/index.ts @@ -25,7 +25,7 @@ const updateAddressDetails = async (context: Context, params: UpdateAddressDetai }) as UpdateAddressDetailsResponse; if (isBilling && isCustomerDataFilled(request?.data?.setOrderBillingAddress as Order)) { - await transitionOrderToState(context, { state: ARRANGING_PAYMENT_STATE }) + await transitionOrderToState(context, { state: ARRANGING_PAYMENT_STATE }); } return request; diff --git a/packages/api-client/src/helpers/checkout.ts b/packages/api-client/src/helpers/checkout.ts index c53b9160..059c35ed 100644 --- a/packages/api-client/src/helpers/checkout.ts +++ b/packages/api-client/src/helpers/checkout.ts @@ -1,6 +1,6 @@ -import { Order } from "../types"; +import { Order } from '../types'; export const isCustomerDataFilled = (order: Order): boolean => { - if (!order) return; - return Boolean(order?.customer?.emailAddress && order?.billingAddress?.streetLine1 && order?.shippingAddress?.streetLine1); -} \ No newline at end of file + if (!order) return; + return Boolean(order?.customer?.emailAddress && order?.billingAddress?.streetLine1 && order?.shippingAddress?.streetLine1); +}; diff --git a/packages/api-client/src/helpers/index.ts b/packages/api-client/src/helpers/index.ts index 84639338..940c5673 100644 --- a/packages/api-client/src/helpers/index.ts +++ b/packages/api-client/src/helpers/index.ts @@ -1,2 +1,2 @@ export * from './constants'; -export * from './checkout'; \ No newline at end of file +export * from './checkout'; diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue index b45dbd20..c7a886ec 100644 --- a/packages/theme/pages/Checkout/Payment.vue +++ b/packages/theme/pages/Checkout/Payment.vue @@ -144,7 +144,7 @@ export default { const updatePaymentMethod = method => { paymentMethod.value = method; - } + }; const processOrder = async () => { const response = await $vendure.api.setPaymentMethod({ @@ -152,7 +152,7 @@ export default { metadata: { // Here goes metadata from the payment provider. For security reasons it should be handled on the server! } - }) + }); const orderId = response?.data?.addPaymentToOrder?.id; diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue index d390d19a..cdee3bd1 100644 --- a/packages/theme/pages/Checkout/Shipping.vue +++ b/packages/theme/pages/Checkout/Shipping.vue @@ -237,7 +237,7 @@ export default { ValidationObserver, VsfShippingProvider: () => import('~/components/Checkout/VsfShippingProvider') }, - setup (_, { emit }) { + setup () { const isFormSubmitted = ref(false); const { load, save, loading } = useShipping(); const { loading: loadingShippingProvider } = useShippingProvider(); From db6ea7726e08aa967d81746392f7b80525a2f687 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Wed, 25 Aug 2021 08:36:46 +0200 Subject: [PATCH 10/13] feat: #57 (theme) add routes override --- packages/theme/nuxt.config.js | 3 +- packages/theme/routes.js | 58 +++++++++++++++++++++++++++++++---- 2 files changed, 54 insertions(+), 7 deletions(-) diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js index 779cb059..1876ac36 100644 --- a/packages/theme/nuxt.config.js +++ b/packages/theme/nuxt.config.js @@ -67,7 +67,8 @@ export default { apiClient: '@vue-storefront/vendure-api', composables: '@vue-storefront/vendure' } - } + }, + routes: false } ], // @core-development-only-end diff --git a/packages/theme/routes.js b/packages/theme/routes.js index 0d7e8923..379e0282 100644 --- a/packages/theme/routes.js +++ b/packages/theme/routes.js @@ -1,11 +1,57 @@ const path = require('path'); export function getRoutes(themeDir = __dirname) { - return [ - { - path: 'checkout/customer', - name: 'customer', - component: path.resolve(themeDir, 'pages/Checkout/Customer.vue') - } + return [{ + name: 'home', + path: '/', + component: path.resolve(themeDir, 'pages/Home.vue') + }, + { + name: 'product', + path: '/p/:id/:slug/', + component: path.resolve(themeDir, 'pages/Product.vue') + }, + { + name: 'category', + path: '/c/:slug_1/:slug_2?/:slug_3?/:slug_4?/:slug_5?', + component: path.resolve(themeDir, 'pages/Category.vue') + }, + { + name: 'my-account', + path: '/my-account/:pageName?', + component: path.resolve(themeDir, 'pages/MyAccount.vue') + }, + { + name: 'checkout', + path: '/checkout', + component: path.resolve(themeDir, 'pages/Checkout.vue'), + children: [ + { + path: 'customer', + name: 'customer', + component: path.resolve(themeDir, 'pages/Checkout/Customer.vue') + }, + { + path: 'shipping', + name: 'shipping', + component: path.resolve(themeDir, 'pages/Checkout/Shipping.vue') + }, + { + path: 'billing', + name: 'billing', + component: path.resolve(themeDir, 'pages/Checkout/Billing.vue') + }, + { + path: 'payment', + name: 'payment', + component: path.resolve(themeDir, 'pages/Checkout/Payment.vue') + }, + { + path: 'thank-you', + name: 'thank-you', + component: path.resolve(themeDir, 'pages/Checkout/ThankYou.vue') + } + ] + } ]; } From b6eebede01f641bd66ba364d7cb9711e98e96708 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Wed, 25 Aug 2021 09:39:26 +0200 Subject: [PATCH 11/13] feat: #56 (*) move metadata to api client --- packages/api-client/src/api/setPaymentMethod/index.ts | 11 ++++++++--- packages/api-client/src/types/API.ts | 6 +++--- packages/api-client/src/types/types.ts | 8 ++++++-- packages/theme/pages/Checkout/Payment.vue | 3 --- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/api-client/src/api/setPaymentMethod/index.ts b/packages/api-client/src/api/setPaymentMethod/index.ts index 21d2266f..0968832f 100644 --- a/packages/api-client/src/api/setPaymentMethod/index.ts +++ b/packages/api-client/src/api/setPaymentMethod/index.ts @@ -1,11 +1,16 @@ import addPaymentToOrderMutation from './addPaymentToOrderMutation'; import { CustomQuery } from '@vue-storefront/core'; import gql from 'graphql-tag'; -import { Context, PaymentInput, SetShippingMethodResponse } from '../../types'; +import { AddPaymentToOrderParams, Context, PaymentInput, SetShippingMethodResponse } from '../../types'; -const setPaymentMethod = async (context: Context, params: PaymentInput, customQuery?: CustomQuery): Promise => { +const setPaymentMethod = async (context: Context, params: AddPaymentToOrderParams, customQuery?: CustomQuery): Promise => { const setPaymentMethodVariables = { - input: params + input: { + method: params.method, + metadata: { + // Here you would pass data from an external Payment Provided after successful payment process like payment id. + } + } as PaymentInput, }; const { addPaymentToOrder } = context.extendQuery( diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts index 82126e49..928c33f1 100644 --- a/packages/api-client/src/types/API.ts +++ b/packages/api-client/src/types/API.ts @@ -1,8 +1,8 @@ import { CustomQuery } from '@vue-storefront/core'; import { ApolloQueryResult } from 'apollo-client'; import { FetchResult } from 'apollo-link'; -import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, CreateCustomerInput, Customer, Order, PaymentInput, PaymentMethodQuote, Product, RemoveOrderItemsResult, SearchResponse, SetCustomerForOrderResult, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; -import { AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, TransitionOrderToStateParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; +import { ActiveOrderResult, ApplyCouponCodeResult, CollectionList, CreateCustomerInput, Customer, Order, PaymentMethodQuote, Product, RemoveOrderItemsResult, SearchResponse, SetCustomerForOrderResult, ShippingMethodQuote, UpdateOrderItemsResult } from './GraphQL'; +import { AddPaymentToOrderParams, AddToCartParams, CartCouponParams, CollectionParams, ProductParams, RemoveFromCartParams, SearchParams, SetShippingMethodParams, TransitionOrderToStateParams, UpdateAddressDetailsParams, UpdateCartParams } from './types'; export type QueryResponse = ApolloQueryResult>; export type MutationResponse = FetchResult>; @@ -41,7 +41,7 @@ export interface VendureApiMethods { removeCouponCode(params: CartCouponParams, customQuery?: CustomQuery): Promise; updateAddressDetails(params: UpdateAddressDetailsParams, customQuery?: CustomQuery): Promise; setShippingMethod(params: SetShippingMethodParams, customQuery?: CustomQuery): Promise; - setPaymentMethod(params: PaymentInput, customQuery?: CustomQuery): Promise; + setPaymentMethod(params: AddPaymentToOrderParams, customQuery?: CustomQuery): Promise; transitionOrderToState(params: TransitionOrderToStateParams, customQuery?: CustomQuery): Promise; setCustomerForOrder(params: CreateCustomerInput, customQuery?: CustomQuery): Promise; } diff --git a/packages/api-client/src/types/types.ts b/packages/api-client/src/types/types.ts index 2534457f..d56faa87 100644 --- a/packages/api-client/src/types/types.ts +++ b/packages/api-client/src/types/types.ts @@ -84,8 +84,12 @@ export type UpdateAddressDetailsParams = { export type SetShippingMethodParams = { shippingMethodId: string; -} +}; export type TransitionOrderToStateParams = { state: string; -} +}; + +export type AddPaymentToOrderParams = { + method: string; +}; diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue index c7a886ec..2748bba3 100644 --- a/packages/theme/pages/Checkout/Payment.vue +++ b/packages/theme/pages/Checkout/Payment.vue @@ -149,9 +149,6 @@ export default { const processOrder = async () => { 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; From ee9931eb3e66a528809fbc027d85910b6f9f654e Mon Sep 17 00:00:00 2001 From: Baroshem Date: Wed, 25 Aug 2021 09:56:52 +0200 Subject: [PATCH 12/13] feat: #56 (api) use const for fetchPolicy --- packages/api-client/src/api/getPaymentMethods/index.ts | 3 ++- packages/api-client/src/api/setCustomerForOrder/index.ts | 3 ++- packages/api-client/src/api/setPaymentMethod/index.ts | 5 +++-- packages/api-client/src/api/transitionOrderToState/index.ts | 3 ++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/api-client/src/api/getPaymentMethods/index.ts b/packages/api-client/src/api/getPaymentMethods/index.ts index 62c62a81..d5d13f13 100644 --- a/packages/api-client/src/api/getPaymentMethods/index.ts +++ b/packages/api-client/src/api/getPaymentMethods/index.ts @@ -2,6 +2,7 @@ import gql from 'graphql-tag'; import eligiblePaymentMethodsQuery from './eligiblePaymentMethodsQuery'; import { CustomQuery } from '@vue-storefront/core'; import { Context, RequestDataStructure, PaymentMethodQuote, GetPaymentMethodsResponse } from '../../types'; +import { NO_CACHE_FETCH_POLICY } from '../../helpers'; const getPaymentMethods = async (context: Context, customQuery?: CustomQuery): Promise => { const getPaymentMethodsVariables = {}; @@ -13,7 +14,7 @@ const getPaymentMethods = async (context: Context, customQuery?: CustomQuery): P const request = await context.client.query>({ query: gql`${eligiblePaymentMethods.query}`, variables: eligiblePaymentMethods.variables, - fetchPolicy: 'no-cache' + fetchPolicy: NO_CACHE_FETCH_POLICY }); return request; diff --git a/packages/api-client/src/api/setCustomerForOrder/index.ts b/packages/api-client/src/api/setCustomerForOrder/index.ts index a0f770d0..c1efe161 100644 --- a/packages/api-client/src/api/setCustomerForOrder/index.ts +++ b/packages/api-client/src/api/setCustomerForOrder/index.ts @@ -2,6 +2,7 @@ import setCustomerForOrderMutation from './setCustomerForOrderMutation'; import { CustomQuery } from '@vue-storefront/core'; import gql from 'graphql-tag'; import { Context, CreateCustomerInput, SetCustomerForOrderResponse } from '../../types'; +import { NO_CACHE_FETCH_POLICY } from '../../helpers'; const setCustomerForOrder = async (context: Context, params: CreateCustomerInput, customQuery?: CustomQuery): Promise => { const setCustomerForOrderVariables = { @@ -15,7 +16,7 @@ const setCustomerForOrder = async (context: Context, params: CreateCustomerInput const request = await context.client.mutate({ mutation: gql`${setCustomerForOrder.query}`, variables: setCustomerForOrder.variables, - fetchPolicy: 'no-cache' + fetchPolicy: NO_CACHE_FETCH_POLICY }) as SetCustomerForOrderResponse; return request; diff --git a/packages/api-client/src/api/setPaymentMethod/index.ts b/packages/api-client/src/api/setPaymentMethod/index.ts index 0968832f..d7e7d1a0 100644 --- a/packages/api-client/src/api/setPaymentMethod/index.ts +++ b/packages/api-client/src/api/setPaymentMethod/index.ts @@ -2,6 +2,7 @@ import addPaymentToOrderMutation from './addPaymentToOrderMutation'; import { CustomQuery } from '@vue-storefront/core'; import gql from 'graphql-tag'; import { AddPaymentToOrderParams, Context, PaymentInput, SetShippingMethodResponse } from '../../types'; +import { NO_CACHE_FETCH_POLICY } from '../../helpers'; const setPaymentMethod = async (context: Context, params: AddPaymentToOrderParams, customQuery?: CustomQuery): Promise => { const setPaymentMethodVariables = { @@ -10,7 +11,7 @@ const setPaymentMethod = async (context: Context, params: AddPaymentToOrderParam metadata: { // Here you would pass data from an external Payment Provided after successful payment process like payment id. } - } as PaymentInput, + } as PaymentInput }; const { addPaymentToOrder } = context.extendQuery( @@ -20,7 +21,7 @@ const setPaymentMethod = async (context: Context, params: AddPaymentToOrderParam const request = await context.client.mutate({ mutation: gql`${addPaymentToOrder.query}`, variables: addPaymentToOrder.variables, - fetchPolicy: 'no-cache' + fetchPolicy: NO_CACHE_FETCH_POLICY }) as SetShippingMethodResponse; return request; diff --git a/packages/api-client/src/api/transitionOrderToState/index.ts b/packages/api-client/src/api/transitionOrderToState/index.ts index 3da8fd60..994b3182 100644 --- a/packages/api-client/src/api/transitionOrderToState/index.ts +++ b/packages/api-client/src/api/transitionOrderToState/index.ts @@ -2,6 +2,7 @@ import transitionOrderToStateMutation from './transitionOrderToStateMutation'; import { CustomQuery } from '@vue-storefront/core'; import gql from 'graphql-tag'; import { Context, TransitionOrderToState, TransitionOrderToStateParams } from '../../types'; +import { NO_CACHE_FETCH_POLICY } from '../../helpers'; const transitionOrderToState = async (context: Context, params: TransitionOrderToStateParams, customQuery?: CustomQuery): Promise => { const transitionOrderToStateVariables = { @@ -15,7 +16,7 @@ const transitionOrderToState = async (context: Context, params: TransitionOrderT const request = await context.client.mutate({ mutation: gql`${transitionOrderToState.query}`, variables: transitionOrderToState.variables, - fetchPolicy: 'no-cache' + fetchPolicy: NO_CACHE_FETCH_POLICY }) as TransitionOrderToState; return request; From 11df77ae06581f741d5f49967dd3ad935a21e543 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Wed, 25 Aug 2021 17:38:25 +0200 Subject: [PATCH 13/13] feat: #56 (api) fix tests --- .../api-client/__tests__/api/setPaymentMethod.spec.ts | 8 +++++--- packages/theme/pages/Checkout/Payment.vue | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/api-client/__tests__/api/setPaymentMethod.spec.ts b/packages/api-client/__tests__/api/setPaymentMethod.spec.ts index c7145ec2..60ad084d 100644 --- a/packages/api-client/__tests__/api/setPaymentMethod.spec.ts +++ b/packages/api-client/__tests__/api/setPaymentMethod.spec.ts @@ -4,7 +4,7 @@ import { Context } from '../../src/types'; describe('[vendure-api-client] setPaymentMethod', () => { it('sets payment method for certain order', async () => { - const givenVariables = { metadata: { id: '1' }, method: 'test' }; + const givenVariables = { metadata: {}, method: 'test' }; const context = { config: {}, @@ -19,8 +19,10 @@ describe('[vendure-api-client] setPaymentMethod', () => { extendQuery: (customQuery, args) => args } as unknown as Context; - const { data } = await setPaymentMethod(context, { metadata: { id: '1' }, method: 'test' }); + const { data } = await setPaymentMethod(context, { method: 'test' }); - expect(data).toBe('set payment method response'); + const expectedSetPaymentResponse = 'set payment method response'; + + expect(data).toBe(expectedSetPaymentResponse); }); }); diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue index 2748bba3..be87bbd3 100644 --- a/packages/theme/pages/Checkout/Payment.vue +++ b/packages/theme/pages/Checkout/Payment.vue @@ -148,7 +148,7 @@ export default { const processOrder = async () => { const response = await $vendure.api.setPaymentMethod({ - method: paymentMethod?.value?.code, + method: paymentMethod?.value?.code }); const orderId = response?.data?.addPaymentToOrder?.id;