From 7c7caaf9734000cf0c049004c0668b95c34fe220 Mon Sep 17 00:00:00 2001 From: Fifciuu Date: Wed, 10 Mar 2021 14:24:11 +0100 Subject: [PATCH 01/35] copy of original branch --- packages/core/docs/.vuepress/config.js | 10 +- .../commercetools/composables/use-billing.md | 82 +++++ .../composables/use-make-order.md | 103 ++++++ .../composables/use-shipping-provider.md | 100 ++++++ .../commercetools/composables/use-shipping.md | 89 +++++ .../core/docs/commercetools/feature-list.md | 11 +- packages/core/docs/enterprise/feature-list.md | 15 +- packages/core/docs/guide/checkout.md | 324 ++++++++++++++++++ packages/core/docs/guide/composables.md | 31 +- .../core/docs/integrate/integration-guide.md | 2 +- 10 files changed, 736 insertions(+), 31 deletions(-) create mode 100644 packages/core/docs/commercetools/composables/use-billing.md create mode 100644 packages/core/docs/commercetools/composables/use-make-order.md create mode 100644 packages/core/docs/commercetools/composables/use-shipping-provider.md create mode 100644 packages/core/docs/commercetools/composables/use-shipping.md create mode 100644 packages/core/docs/guide/checkout.md diff --git a/packages/core/docs/.vuepress/config.js b/packages/core/docs/.vuepress/config.js index f3dd707265b..98915ecb874 100644 --- a/packages/core/docs/.vuepress/config.js +++ b/packages/core/docs/.vuepress/config.js @@ -68,7 +68,11 @@ module.exports = { ['/commercetools/composables/use-facet', 'useFacet'], ['/commercetools/composables/use-cart', 'useCart'], ['/commercetools/composables/use-wishlist', 'useWishlist'], - ['/commercetools/composables/use-category', 'useCategory'] + ['/commercetools/composables/use-category', 'useCategory'], + ['/commercetools/composables/use-shipping', 'useShipping'], + ['/commercetools/composables/use-shipping-provider', 'useShippingProvider'], + ['/commercetools/composables/use-billing', 'useBilling'], + ['/commercetools/composables/use-make-order', 'useMakeOrder'] ] }, { @@ -166,7 +170,9 @@ module.exports = { ['/guide/configuration', 'Configuration'], ['/guide/composables', 'Composables'], ['/guide/authentication', 'Authentication'], - ['/guide/user-profile', 'User profile'] + ['/guide/user-profile', 'User profile'], + ['/guide/authentication', 'Authentication'], + ['/guide/checkout', 'Checkout'] ] }, { diff --git a/packages/core/docs/commercetools/composables/use-billing.md b/packages/core/docs/commercetools/composables/use-billing.md new file mode 100644 index 00000000000..13745a78121 --- /dev/null +++ b/packages/core/docs/commercetools/composables/use-billing.md @@ -0,0 +1,82 @@ +# `useBilling` + +## Features + +`useBilling` composable can be use to: + +* Loading billing address for the current cart. +* Saving billing address for the current cart. + +## API + +- `load` - function for fetching billing address. When invoked, it requests data from the API and populates `billing` property. This method accepts a single optional `params` object. The `params` has the following option: + + - `customQuery?: CustomQuery` + +- `save` - function for saving billing address. This method accepts a single `saveParams` object. The `saveParams` has the following options: + + - `billingDetails: Address` + + - `customQuery?: CustomQuery` + +```ts +type Address = { + __typename?: "Address"; + id?: Maybe; + title?: Maybe; + salutation?: Maybe; + firstName?: Maybe; + lastName?: Maybe; + streetName?: Maybe; + streetNumber?: Maybe; + additionalStreetInfo?: Maybe; + postalCode?: Maybe; + city?: Maybe; + region?: Maybe; + state?: Maybe; + country: Scalars["Country"]; + company?: Maybe; + department?: Maybe; + building?: Maybe; + apartment?: Maybe; + pOBox?: Maybe; + contactInfo: AddressContactInfo; + phone?: Maybe; + email?: Maybe; + additionalAddressInfo?: Maybe; + externalId?: Maybe; + key?: Maybe; +}; +type CustomQuery = Record +``` +- `billing: Address` - a main data object that contains a billing address. +- `loading: boolean` - a reactive object containing information about loading state of your `load` or `save` method. +- `error: UseBillingErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason. +```ts +interface UseBillingErrors { + load?: Error; + save?: Error; +} +``` + +## Getters + +We do not provide getters for checkout and its parts. + +## Example + +```js +import { useBilling } from '@vue-storefront/commercetools'; +import { onSSR } from '@vue-storefront/core' +export default { + setup () { + const { load, billing } = useBilling(); + onSSR(async () => { + await load(); + }); + return { + billing + }; + } +} +``` diff --git a/packages/core/docs/commercetools/composables/use-make-order.md b/packages/core/docs/commercetools/composables/use-make-order.md new file mode 100644 index 00000000000..6d2688469f7 --- /dev/null +++ b/packages/core/docs/commercetools/composables/use-make-order.md @@ -0,0 +1,103 @@ +# `useMakeOrder` + +## Features + +`useMakeOrder` composable is responsible for making an order + +## API + +- `make` - function for making an order. This method accepts a single optional `params` object. The `params` has the following option: + + - `customQuery?: CustomQuery` + +```ts +type CustomQuery = Record +``` +- `order: Order` - a main data object that contains a made order. +```ts +type Order = Versioned & { + __typename?: "Order"; + customerId?: Maybe; + customer?: Maybe; + customerEmail?: Maybe; + anonymousId?: Maybe; + lineItems: Array; + customLineItems: Array; + totalPrice: Money; + taxedPrice?: Maybe; + shippingAddress?: Maybe
; + billingAddress?: Maybe
; + inventoryMode: InventoryMode; + taxMode: TaxMode; + taxRoundingMode: RoundingMode; + taxCalculationMode: TaxCalculationMode; + customerGroup?: Maybe; + customerGroupRef?: Maybe; + country?: Maybe; + shippingInfo?: Maybe; + discountCodes: Array; + refusedGifts: Array; + refusedGiftsRefs: Array; + paymentInfo?: Maybe; + locale?: Maybe; + shippingRateInput?: Maybe; + origin: CartOrigin; + storeRef?: Maybe; + store?: Maybe; + itemShippingAddresses: Array
; + completedAt?: Maybe; + orderNumber?: Maybe; + orderState: OrderState; + stateRef?: Maybe; + state?: Maybe; + shipmentState?: Maybe; + paymentState?: Maybe; + syncInfo: Array; + returnInfo: Array; + lastMessageSequenceNumber: Scalars["Long"]; + cartRef?: Maybe; + cart?: Maybe; + /** This field contains non-typed data. Consider using `customFields` as a typed alternative. */ + customFieldsRaw?: Maybe>; + /** This field would contain type data */ + customFields?: Maybe; + custom?: Maybe; + id: Scalars["String"]; + version: Scalars["Long"]; + createdAt: Scalars["DateTime"]; + lastModifiedAt: Scalars["DateTime"]; + createdBy?: Maybe; + lastModifiedBy?: Maybe; + /** Custom fields are returned as a list instead of an object structure. */ + customFieldList?: Maybe>; +}; +``` + +- `loading: boolean` - a reactive object containing information about loading state of your `make` method. + +- `error: UseMakeOrderErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason. + +```ts +interface UseMakeOrderErrors { + make?: Error; +} +``` + +## Getters + +We do not provide getters for checkout and its parts. + +## Example + +```js +import { useMakeOrder } from '@vue-storefront/commercetools'; +export default { + setup () { + const { make, order } = useMakeOrder(); + return { + make, + order + }; + } +} +``` \ No newline at end of file diff --git a/packages/core/docs/commercetools/composables/use-shipping-provider.md b/packages/core/docs/commercetools/composables/use-shipping-provider.md new file mode 100644 index 00000000000..baace939179 --- /dev/null +++ b/packages/core/docs/commercetools/composables/use-shipping-provider.md @@ -0,0 +1,100 @@ +# `useShippingProvider` + +## Features + +`useShippingProvider` composable can be use to: + +* Loading shipping methods for the current cart. +* Selecting shipping method for the current cart. + +## API + +- `load` - function for fetching shipping method. When invoked, it requests data from the API and populates `response` key inside `state` property. This method accepts a single optional `params` object. The `params` has the following option: + + - `customQuery?: CustomQuery` + +- `save` - function for selecting shipping method. This method accepts a single `saveParams` object. The `saveParams` has the following options: + + - `shippingMethod: ShippingMethod` + + - `customQuery?: CustomQuery` + +```ts +type ShippingMethod = Versioned & { + __typename?: "ShippingMethod"; + id: Scalars["String"]; + version: Scalars["Long"]; + name: Scalars["String"]; + description?: Maybe; + zoneRates: Array; + isDefault: Scalars["Boolean"]; + predicate?: Maybe; + createdAt: Scalars["DateTime"]; + lastModifiedAt: Scalars["DateTime"]; + key?: Maybe; + lastModifiedBy?: Maybe; + createdBy?: Maybe; + taxCategoryRef?: Maybe; + taxCategory?: Maybe; +}; + +type CustomQuery = Record +``` +- `state: ShippingProviderState` - a main data object that contains a shipping method +```ts +interface ShippingProviderState { + response: ShippingInfo +} + +type ShippingInfo = { + __typename?: "ShippingInfo"; + shippingMethodName: Scalars["String"]; + price: Money; + shippingRate: ShippingRate; + taxRate?: Maybe; + taxCategory?: Maybe; + deliveries: Array; + discountedPrice?: Maybe; + taxedPrice?: Maybe; + shippingMethodState: ShippingMethodState; + shippingMethod?: Maybe; + shippingMethodRef?: Maybe; +}; +``` + +- `loading: boolean` - a reactive object containing information about loading state of your `load` or `save` method. + +- `error: UseShippingProviderErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason. + +```ts +interface UseShippingProviderErrors { + load?: Error; + save?: Error; +} +``` + +## Getters + +We do not provide getters for checkout and its parts. + +## Example + +```js +import { useShippingProvider } from '@vue-storefront/commercetools'; +import { onSSR } from '@vue-storefront/core'; +import { computed } from '@vue/composition-api'; + +export default { + setup () { + const { load, state } = useShippingProvider(); + + onSSR(async () => { + await load(); + }); + + return { + selectedShippingMethod: computed(() => state.value && state.value.response) + }; + } +} +``` diff --git a/packages/core/docs/commercetools/composables/use-shipping.md b/packages/core/docs/commercetools/composables/use-shipping.md new file mode 100644 index 00000000000..2df91497e2e --- /dev/null +++ b/packages/core/docs/commercetools/composables/use-shipping.md @@ -0,0 +1,89 @@ +# `useShipping` + +## Features + +`useShipping` composable can be use to: + +* Loading shipping address for the current cart. +* Saving shipping address for the current cart. + +## API + +- `load` - function for fetching shipping address. When invoked, it requests data from the API and populates `shipping` property. This method accepts a single optional `params` object. The `params` has the following option: + + - `customQuery?: CustomQuery` + +- `save` - function for saving shipping address. This method accepts a single `saveParams` object. The `saveParams` has the following options: + + - `shippingDetails: Address` + + - `customQuery?: CustomQuery` + +```ts +type Address = { + __typename?: "Address"; + id?: Maybe; + title?: Maybe; + salutation?: Maybe; + firstName?: Maybe; + lastName?: Maybe; + streetName?: Maybe; + streetNumber?: Maybe; + additionalStreetInfo?: Maybe; + postalCode?: Maybe; + city?: Maybe; + region?: Maybe; + state?: Maybe; + country: Scalars["Country"]; + company?: Maybe; + department?: Maybe; + building?: Maybe; + apartment?: Maybe; + pOBox?: Maybe; + contactInfo: AddressContactInfo; + phone?: Maybe; + email?: Maybe; + additionalAddressInfo?: Maybe; + externalId?: Maybe; + key?: Maybe; +}; + +type CustomQuery = Record +``` +- `shipping: Address` - a main data object that contains a shipping address. + +- `loading: boolean` - a reactive object containing information about loading state of your `load` or `save` method. + +- `error: UseShippingErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason. + +```ts +interface UseShippingErrors { + load?: Error; + save?: Error; +} +``` + +## Getters + +We do not provide getters for checkout and its parts. + +## Example + +```js +import { useShipping } from '@vue-storefront/commercetools'; +import { onSSR } from '@vue-storefront/core'; + +export default { + setup () { + const { load, shipping } = useShipping(); + + onSSR(async () => { + await load(); + }); + + return { + shipping + }; + } +} +``` diff --git a/packages/core/docs/commercetools/feature-list.md b/packages/core/docs/commercetools/feature-list.md index d233aa0a872..c8073d95100 100644 --- a/packages/core/docs/commercetools/feature-list.md +++ b/packages/core/docs/commercetools/feature-list.md @@ -85,17 +85,14 @@ - Remove product from wishlist ## Checkout -- Personal Details - - Fill in name - - Fill in surname - - Fill in email - - Create a new account from provided data by setting up a password - - Use saved personal details (logged in) - - Open log in modal (not logged in) - Shipping - Choose from saved shipping addresses (logged in) - Add new shipping address (logged in) - Change default shipping address (logged in) +- Billing + - Choose from saved billing addresses (logged in) + - Add new billing address (logged in) + - Change default billing address (logged in) - Payment - Review - Order summary diff --git a/packages/core/docs/enterprise/feature-list.md b/packages/core/docs/enterprise/feature-list.md index 19688c863bf..9bfa3d88896 100644 --- a/packages/core/docs/enterprise/feature-list.md +++ b/packages/core/docs/enterprise/feature-list.md @@ -177,13 +177,6 @@ Vue Storefront is the only truly Open Source eCommerce frontend framework with a - Order types - Logged in - Guest -- Personal Details - - Fill in name - - Fill in surname - - Fill in email - - Create a new account from provided data by setting up a password - - Use saved personal details (logged in) - - Open log in modal (not logged in) - Shipping - Choose from saved shipping addresses (logged in) - Add new shipping address (logged in) @@ -192,6 +185,14 @@ Vue Storefront is the only truly Open Source eCommerce frontend framework with a - Fill in First and Last Name - Fill in Street name and apartment number - Fill in City and Zip Code +- Billing + - Choose from saved billing addresses (logged in) + - Add new billing address (logged in) + - Change default billing address (logged in) + - Provide Billing Details + - Fill in First and Last Name + - Fill in Street name and apartment number + - Fill in City and Zip Code - Payment - Choose Payment Method - Coupons diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md new file mode 100644 index 00000000000..a60eadaf89d --- /dev/null +++ b/packages/core/docs/guide/checkout.md @@ -0,0 +1,324 @@ +# Checkout +Checkout is a process of providing shipping and billing addresses and selecting shipping and payment methods needed to place an order and pay for it. + +## Collecting and saving shipping details +Shipping details are information about the recipient's address needed to ship the order. + +We can load shipping details by calling the `load` method in `useShipping` composable and use the `shipping` property to access it. +```js{8,16} +import { useShipping } from '{INTEGRATION}'; +import { onSSR } from '@vue-storefront/core'; + +export default { + setup () { + const { + load, + shipping + } = useShipping(); + + onSSR(async () => { + await load(); + }); + + return { + shipping + }; + } +} +``` +`shipping` property returns `null` if the `load` function was not invoked or nothing is saved. + +We can use `save` method to save shipping details so they're available next time we `load` them. +```vue{2,15,24} + + + +``` + +## Selecting a shipping method +`VsfShippingProvider` is a component that aggregates one or more shipping methods from a single provider like FedEx or DHL. This component is usually the only thing that we need to integrate a particular vendor into our project and is always delivered as a third-party integration. + +The component is responsible for: +- Loading and displaying available shipping methods. +- Loading selected shipping method. +- Selecting and configuring shipping method. + +All we have to do is import and put in the view. +```vue + +``` + +`VsfShippingProvider` emits `submit` event when shipping method is selected, configured and user clicks submit button. + +### Extending `VsfShippingProvider` and reacting to it's events +We can pass asynchronous functions to the `VsfShippingProvider` component to hook into different events within its lifecycle, override initial function parameters or react to specific events like method selection. We will call these methods "hooks". + +Because every shipping provider is different, not all of them are present in every integration. Always refer to the documentation of a specific provider to learn which hooks are available. + +- **beforeLoad** `(config => config)` - Called before loading shipping methods. +- **afterLoad** `(shippingMethodsResponse => shippingMethodsResponse.shippingMethods)` - Called after loading shipping methods. +- **beforeSelect** `(shippingMethod => shippingMethod)` - Called before selecting shipping method. +- **afterSelect** `(selectedShippingMethod => void)` - Called after selecting shipping method. +- **beforeSelectedDetailsChange** `(details => details)` - Called before modifying currently picked shipping method, e.g. selecting parcel locker on the map. +- **afterSelectedDetailsChange** `(details => void)` - Called after modifying currently picked shipping method. +- **onError** `(({ action, error }) => void)` - Called when some operation throws an error. + +```vue + +``` +## Collecting and saving billing details +Billing details are information about the payer's address used by store owners to prepare invoices and payment providers to evaluate the probability of fraud payment. + +We can load billing details by calling the `load` method in `useBilling` composable and use the `billing` property to access it. +```js{8,16} +import { useBilling } from '{INTEGRATION}'; +import { onSSR } from '@vue-storefront/core'; + +export default { + setup () { + const { + load, + billing + } = useBilling(); + + onSSR(async () => { + await load(); + }); + + return { + billing + }; + } +} +``` +`billing` property returns `null` if the `load` function was not invoked or nothing is saved. + +We can use `save` method to save billing details. +```vue{2,15,24} + + + +``` + +## Making an order +After user provided every information required by our eComerce, we are ready to *make an order*. To do that, we have to call a `make` method from the `useMakeOrder` composable. +```js +import { useMakeOrder } from '{INTEGRATION}'; + +export default { + setup () { + const { make } = useMakeOrder(); + + return { + make + } + } +} +``` + +When the order is created, we can redirect the user to the page thanking them for making an order and refresh the cart. +```js +import { useMakeOrder, useCart } from '{INTEGRATION}'; + +export default { + setup (_, context) { + const { make, order } = useMakeOrder(); + const { setCart } = useCart(); + + const processOrder = async () => { + await make(); + context.root.$router.push(`/checkout/thank-you?order=${order.value.id}`); + setCart(null); + } + } +} +``` + +## Payment providers +A `VsfPaymentProvider` is a component that provides one or more payment methods. One such component integrates one 3rd party provider of payments like Checkout.com or Adyen. This component is usually the only thing that we need to integrate a particular vendor into our project and is always delivered as a third-party integration. + +The component is responsible for: +- Loading and displaying available payment methods. +- Loading selected payment method. +- Picking and configuring payment method. + +The first thing we have to do is import and put in the view. +```vue + + + +``` + +The next step is making a payment. Each package with a payment provider might use a slightly different approach, but below we described are two most common. + +### SDK takes the full control +If payment provider's SDK handles the whole payment and we can only provide own callbacks for certain events. We want to make an order in `beforePay` async hook. +```vue + + + +``` + +### SDK allows to externalize pay method +If payment provider's SDK handles process of configuring payment but allows us to decide when to finalize then: +- VsfPaymentProvider emits `status` event. Use this information to enable/disable `Place order` button. +- Composable shares a `pay` method. + +```vue + + + +``` + +### Extending `VsfPaymentProvider` and reacting to it's events +We can pass asynchronous functions to the `VsfPaymentProvider` component to hook into different events within its lifecycle, override initial function parameters or react to specific events like method selection. We will call these methods "hooks". + +Because every payment provider is different, not all of them are present in every integration. Always refer to the documentation of a specific provider to learn which hooks are available. + +- **beforeLoad** `(config => config)` - Called before loading payment methods. +- **afterLoad** `(shippingMethodsResponse => shippingMethodsResponse.shippingMethods)` - Called after loading payment methods. +- **beforeSelect** `(shippingMethod => shippingMethod)` - Called before selecting payment method. +- **afterSelect** `(selectedShippingMethod => void)` - Called after selecting payment method. +- **beforePay** `(paymentDetails => paymentDetails)` - Called before pay. +- **afterPay** `(paymentResponse => void)` - Called after pay. +- **beforeSelectedDetailsChange** `(details => details)` - Called before modifying currently picked payment method, e.g. changing credit card's details. +- **afterSelectedDetailsChange** `(details => void)` - Called after modifying currently picked payment method, e.g. changing credit card's details. +- **onError** `(({ action, error }) => void)` - Called when some operation throws an error. + +```vue + +``` + +### Why some integrations have a mocked VsfPaymentProvider? +There are eCommerce backends which do not provide any payment methods out-of-the-box, e.g. commercetools. For these, we provide mock component that has exactly same interface as a real integration so you can easily swap it with a payment integration of your choice. You can find available payment integrations [here](/v2/integrations/) diff --git a/packages/core/docs/guide/composables.md b/packages/core/docs/guide/composables.md index fbc7252a8c2..6bd6c0ea857 100644 --- a/packages/core/docs/guide/composables.md +++ b/packages/core/docs/guide/composables.md @@ -267,38 +267,41 @@ Vue Storefront integrations are exposing the following composables: #### Product Catalog -- `useProduct` for managing a single product with variants (or a list) -- `useCategory` for managing category lists (but not category products) -- `useFacet` for complex catalog search with filtering -- `useReview` for product reviews +- `useProduct` - Managing a single product with variants (or a list). +- `useCategory` - Managing category lists (but not category products). +- `useFacet` - Complex catalog search with filtering. +- `useReview` - Product reviews. #### User Profile and Authorization -- `useUser` for managing user sessions, credentials and registration -- `useUserShipping` for managing shipping addresses -- `useUserBilling` for managing billing addresses -- `useUserOrder` for managing past and active user orders +- `useUser` - Managing user sessions, credentials and registration. +- `useUserShipping` - Managing shipping addresses. +- `useUserBilling` - Managing billing addresses. +- `useUserOrder` - Managing past and active user orders. #### Shopping Cart -- `useCart` for loading the cart, adding/removing products and discounts +- `useCart` - Loading the cart, adding/removing products and discounts. #### Wishlist/Favourite -- `useWishlist` for loading the wishlist, adding/removing products +- `useWishlist` - Loading the wishlist, adding/removing products. #### CMS Content -- `useContent` for fetching the CMS content. It is usually used in combination with ``component +- `useContent` - Fetching the CMS content. It is usually used in combination with ``component. #### Checkout -- `useCheckout` for saving the shipping and billing address for a current order, choosing a shipping method, making payments, and placing the order +- `useShipping` - Saving the shipping address for a current order. +- `useShippingProvider` - Choosing a shipping method for a current order. +- `useBilling` - Saving the billing address for a current order. +- `usePaymentProvider` - Choosing a payment method for a current order. +- `useMakeOrder` - Placing the order. #### Other -- `useVSFContext` for accessing the integration API methods and client instances - +- `useVSFContext` - Accessing the integration API methods and client instances. In a real-world application, these composables will most likely use different backend services under the hood yet still leverage the same frontend API. For instance within the same application `useProduct` and `useCategory` could use `commercetools`, `useCart` some ERP system, `useFacet` - Algolia etc. ## Error handling diff --git a/packages/core/docs/integrate/integration-guide.md b/packages/core/docs/integrate/integration-guide.md index f428965c475..a57f9dd36ba 100644 --- a/packages/core/docs/integrate/integration-guide.md +++ b/packages/core/docs/integrate/integration-guide.md @@ -69,7 +69,7 @@ Vue Storefront will require **at least** the following features from your eComme **Checkout** - get shipping methods -- get payment methods +- get payment methods (depends on integration) - place order **i18n** From e6e8a523effa6129d4c4bcbbbb5588d442d6d695 Mon Sep 17 00:00:00 2001 From: Fifciuu Date: Thu, 11 Mar 2021 12:20:40 +0100 Subject: [PATCH 02/35] doc update --- packages/core/docs/guide/checkout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md index a60eadaf89d..d5d7ed82253 100644 --- a/packages/core/docs/guide/checkout.md +++ b/packages/core/docs/guide/checkout.md @@ -304,7 +304,7 @@ Because every payment provider is different, not all of them are present in ever - **afterPay** `(paymentResponse => void)` - Called after pay. - **beforeSelectedDetailsChange** `(details => details)` - Called before modifying currently picked payment method, e.g. changing credit card's details. - **afterSelectedDetailsChange** `(details => void)` - Called after modifying currently picked payment method, e.g. changing credit card's details. -- **onError** `(({ action, error }) => void)` - Called when some operation throws an error. +- **onError** `(({ action, error }) => void)` - Called when some operation throws an error. ```vue Date: Mon, 15 Mar 2021 14:15:07 +0100 Subject: [PATCH 03/35] Update packages/core/docs/commercetools/composables/use-billing.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/commercetools/composables/use-billing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/commercetools/composables/use-billing.md b/packages/core/docs/commercetools/composables/use-billing.md index 13745a78121..a6333b42e4d 100644 --- a/packages/core/docs/commercetools/composables/use-billing.md +++ b/packages/core/docs/commercetools/composables/use-billing.md @@ -2,7 +2,7 @@ ## Features -`useBilling` composable can be use to: +`useBilling` composable can be used for: * Loading billing address for the current cart. * Saving billing address for the current cart. From b9d0af73be73abd5761a8faaff21fc4f5ea5d73f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:15:14 +0100 Subject: [PATCH 04/35] Update packages/core/docs/commercetools/composables/use-shipping-provider.md Co-authored-by: Natalia Tepluhina --- .../docs/commercetools/composables/use-shipping-provider.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/commercetools/composables/use-shipping-provider.md b/packages/core/docs/commercetools/composables/use-shipping-provider.md index baace939179..821813ea22e 100644 --- a/packages/core/docs/commercetools/composables/use-shipping-provider.md +++ b/packages/core/docs/commercetools/composables/use-shipping-provider.md @@ -2,7 +2,7 @@ ## Features -`useShippingProvider` composable can be use to: +`useShippingProvider` composable can be used for: * Loading shipping methods for the current cart. * Selecting shipping method for the current cart. From e20cdbe89a5bf42b70d9c4e1e8225c1008d08095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:15:49 +0100 Subject: [PATCH 05/35] Update packages/core/docs/commercetools/composables/use-shipping-provider.md Co-authored-by: Natalia Tepluhina --- .../docs/commercetools/composables/use-shipping-provider.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/commercetools/composables/use-shipping-provider.md b/packages/core/docs/commercetools/composables/use-shipping-provider.md index 821813ea22e..849ad4f2c15 100644 --- a/packages/core/docs/commercetools/composables/use-shipping-provider.md +++ b/packages/core/docs/commercetools/composables/use-shipping-provider.md @@ -9,7 +9,7 @@ ## API -- `load` - function for fetching shipping method. When invoked, it requests data from the API and populates `response` key inside `state` property. This method accepts a single optional `params` object. The `params` has the following option: +- `load` - function for fetching shipping method. When invoked, it requests data from the API and populates the `response` key inside the `state` property. This method accepts a single optional `params` object. The `params` has the following option: - `customQuery?: CustomQuery` From dd1e228c35371a778ae2dfcc608f07fe9d575473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:15:57 +0100 Subject: [PATCH 06/35] Update packages/core/docs/commercetools/composables/use-shipping.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/commercetools/composables/use-shipping.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/commercetools/composables/use-shipping.md b/packages/core/docs/commercetools/composables/use-shipping.md index 2df91497e2e..85e917039b1 100644 --- a/packages/core/docs/commercetools/composables/use-shipping.md +++ b/packages/core/docs/commercetools/composables/use-shipping.md @@ -2,7 +2,7 @@ ## Features -`useShipping` composable can be use to: +`useShipping` composable can be used for: * Loading shipping address for the current cart. * Saving shipping address for the current cart. From 531bee73703ec92256477a2fde96043bfb14f8c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:16:36 +0100 Subject: [PATCH 07/35] Update packages/core/docs/guide/checkout.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/guide/checkout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md index d5d7ed82253..8c6af86543f 100644 --- a/packages/core/docs/guide/checkout.md +++ b/packages/core/docs/guide/checkout.md @@ -4,7 +4,7 @@ Checkout is a process of providing shipping and billing addresses and selecting ## Collecting and saving shipping details Shipping details are information about the recipient's address needed to ship the order. -We can load shipping details by calling the `load` method in `useShipping` composable and use the `shipping` property to access it. +We can load shipping details by calling the `load` method in `useShipping` composable and accessing the `shipping` property after loading is done. ```js{8,16} import { useShipping } from '{INTEGRATION}'; import { onSSR } from '@vue-storefront/core'; From 3b15e8741bb35d17e6807b73705a573afe38764a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:17:17 +0100 Subject: [PATCH 08/35] Update packages/core/docs/guide/checkout.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/guide/checkout.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md index 8c6af86543f..7bd7874381b 100644 --- a/packages/core/docs/guide/checkout.md +++ b/packages/core/docs/guide/checkout.md @@ -1,4 +1,5 @@ # Checkout + Checkout is a process of providing shipping and billing addresses and selecting shipping and payment methods needed to place an order and pay for it. ## Collecting and saving shipping details From 73ea13765e70bbded4ee85013e0511c2c896dff8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:18:12 +0100 Subject: [PATCH 09/35] Update packages/core/docs/guide/checkout.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/guide/checkout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md index 7bd7874381b..b15f3976900 100644 --- a/packages/core/docs/guide/checkout.md +++ b/packages/core/docs/guide/checkout.md @@ -222,7 +222,7 @@ export default { ``` -The next step is making a payment. Each package with a payment provider might use a slightly different approach, but below we described are two most common. +The next step is making a payment. Each package with a payment provider might use a slightly different approach, but below we described the two most common. ### SDK takes the full control If payment provider's SDK handles the whole payment and we can only provide own callbacks for certain events. We want to make an order in `beforePay` async hook. From a922e7697e54e43762ceee12d75239b9c7442bc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:18:35 +0100 Subject: [PATCH 10/35] Update packages/core/docs/guide/checkout.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/guide/checkout.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md index b15f3976900..51b7e0477eb 100644 --- a/packages/core/docs/guide/checkout.md +++ b/packages/core/docs/guide/checkout.md @@ -3,7 +3,8 @@ Checkout is a process of providing shipping and billing addresses and selecting shipping and payment methods needed to place an order and pay for it. ## Collecting and saving shipping details -Shipping details are information about the recipient's address needed to ship the order. + +Shipping details are information about the recipient's address required to ship the order. We can load shipping details by calling the `load` method in `useShipping` composable and accessing the `shipping` property after loading is done. ```js{8,16} From 571ec95a116960c01f4c2dfc68bcea4b2dd5f367 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20J=C4=99drasik?= Date: Mon, 15 Mar 2021 14:19:47 +0100 Subject: [PATCH 11/35] Update packages/core/docs/guide/checkout.md Co-authored-by: Natalia Tepluhina --- packages/core/docs/guide/checkout.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/docs/guide/checkout.md b/packages/core/docs/guide/checkout.md index 51b7e0477eb..f198b58eacf 100644 --- a/packages/core/docs/guide/checkout.md +++ b/packages/core/docs/guide/checkout.md @@ -31,6 +31,7 @@ export default { `shipping` property returns `null` if the `load` function was not invoked or nothing is saved. We can use `save` method to save shipping details so they're available next time we `load` them. + ```vue{2,15,24}