-
+
+
+ {{ shippingAddress.countryName }}
+
+
@@ -28,12 +32,13 @@
diff --git a/packages/theme/components/Checkout/VsfPaymentProvider.vue b/packages/theme/modules/checkout/components/VsfPaymentProvider.vue
similarity index 100%
rename from packages/theme/components/Checkout/VsfPaymentProvider.vue
rename to packages/theme/modules/checkout/components/VsfPaymentProvider.vue
diff --git a/packages/theme/components/Checkout/VsfShippingProvider.vue b/packages/theme/modules/checkout/components/VsfShippingProvider.vue
similarity index 100%
rename from packages/theme/components/Checkout/VsfShippingProvider.vue
rename to packages/theme/modules/checkout/components/VsfShippingProvider.vue
diff --git a/packages/theme/modules/checkout/components/styles/userAddresses.scss b/packages/theme/modules/checkout/components/styles/userAddresses.scss
new file mode 100644
index 000000000..12ee42a7a
--- /dev/null
+++ b/packages/theme/modules/checkout/components/styles/userAddresses.scss
@@ -0,0 +1,27 @@
+.address {
+ margin-bottom: var(--spacer-base);
+ @include for-desktop {
+ margin-right: var(--spacer-sm);
+ display: flex;
+ width: calc(50% - var(--spacer-sm));
+ flex-direction: column;
+ }
+}
+
+.addresses {
+ margin-bottom: var(--spacer-xl);
+ @include for-desktop {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: var(--spacer-sm)
+ }
+}
+
+.setAsDefault {
+ margin-bottom: var(--spacer-xl);
+}
+
+.sf-divider,
+.form__action-button--margin-bottom {
+ margin-bottom: var(--spacer-xl);
+}
diff --git a/packages/theme/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts b/packages/theme/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts
index 526125891..f536fc19f 100644
--- a/packages/theme/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts
+++ b/packages/theme/modules/checkout/composables/useBilling/commands/saveBillingAddressCommand.ts
@@ -2,7 +2,7 @@ import { Logger } from '~/helpers/logger';
import { BillingCartAddress, Maybe, SetBillingAddressOnCartInput } from '~/modules/GraphQL/types';
export const saveBillingAddressCommand = {
- execute: async (context, cartId, billingDetails): Promise
> => {
+ execute: async (context, cartId, billingDetails, customQuery): Promise> => {
const {
apartment,
neighborhood,
@@ -29,6 +29,7 @@ export const saveBillingAddressCommand = {
const { data } = await context.$vsf.$magento.api.setBillingAddressOnCart(
setBillingAddressOnCartInput,
+ customQuery,
);
Logger.debug('[Result]:', { data });
diff --git a/packages/theme/modules/checkout/composables/useBilling/index.ts b/packages/theme/modules/checkout/composables/useBilling/index.ts
index fd6985138..a1d8a0e04 100644
--- a/packages/theme/modules/checkout/composables/useBilling/index.ts
+++ b/packages/theme/modules/checkout/composables/useBilling/index.ts
@@ -50,13 +50,13 @@ export function useBilling(): UseBillingInterface {
return billingInfo;
};
- const save = async ({ billingDetails }: UseBillingSaveParams): Promise> => {
+ const save = async ({ billingDetails, customQuery = null }: UseBillingSaveParams): Promise> => {
Logger.debug('useBilling.save');
let billingInfo = null;
try {
loading.value = true;
- billingInfo = await saveBillingAddressCommand.execute(context, cart.value.id, billingDetails);
+ billingInfo = await saveBillingAddressCommand.execute(context, cart.value.id, billingDetails, customQuery);
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
/**
diff --git a/packages/theme/modules/checkout/composables/useBilling/useBilling.ts b/packages/theme/modules/checkout/composables/useBilling/useBilling.ts
index 2fed2597a..d17253b31 100644
--- a/packages/theme/modules/checkout/composables/useBilling/useBilling.ts
+++ b/packages/theme/modules/checkout/composables/useBilling/useBilling.ts
@@ -44,9 +44,9 @@ export type UseBillingLoadParams = ComposableFunctionArgs<{}>;
/**
* The params object accepted by the `save` method in the {@link useBilling|useBilling()} composable
*/
-export interface UseBillingSaveParams {
+export type UseBillingSaveParams = ComposableFunctionArgs<{
billingDetails: BillingDetails;
-}
+}>;
/**
* Data and methods returned from the {@link useBilling|useBilling()} composable
diff --git a/packages/theme/modules/checkout/composables/useCart/commands/addItemCommand.ts b/packages/theme/modules/checkout/composables/useCart/commands/addItemCommand.ts
index 9c693288f..92e0c1d41 100644
--- a/packages/theme/modules/checkout/composables/useCart/commands/addItemCommand.ts
+++ b/packages/theme/modules/checkout/composables/useCart/commands/addItemCommand.ts
@@ -1,12 +1,10 @@
import { VsfContext } from '~/composables/context';
import { Logger } from '~/helpers/logger';
import {
- AddConfigurableProductsToCartInput,
- AddDownloadableProductsToCartInput,
- AddVirtualProductsToCartInput,
Cart,
CartItemInput,
} from '~/modules/GraphQL/types';
+import { CustomQuery } from '~/types/core';
/** Params object used to add items to a cart */
export declare type AddProductsToCartInput = {
@@ -21,6 +19,8 @@ export const addItemCommand = {
product,
quantity,
currentCart,
+ productConfiguration,
+ customQuery,
},
) => {
Logger.debug('[Magento]: Add item to cart', {
@@ -30,7 +30,7 @@ export const addItemCommand = {
});
const apiState = context.$magento.config.state;
- const currentCartId = apiState.getCartId();
+ const cartId = apiState.getCartId();
if (!product) {
return;
@@ -39,7 +39,7 @@ export const addItemCommand = {
switch (product.__typename) {
case 'SimpleProduct':
const simpleCartInput: AddProductsToCartInput = {
- cartId: currentCartId,
+ cartId,
cartItems: [
{
quantity,
@@ -48,9 +48,13 @@ export const addItemCommand = {
],
};
- const simpleProduct = await context.$magento.api.addProductsToCart(simpleCartInput);
+ const simpleProduct = await context.$magento.api.addProductsToCart(simpleCartInput, customQuery as CustomQuery);
- Logger.debug('[Result]:', { data: simpleProduct });
+ Logger.debug('[Result]:', { data: simpleProduct.data });
+
+ if (simpleProduct.data.addProductsToCart.user_errors.length > 0) {
+ throw new Error(String(simpleProduct.data.addProductsToCart.user_errors[0].message));
+ }
// eslint-disable-next-line consistent-return
return simpleProduct
@@ -58,29 +62,29 @@ export const addItemCommand = {
.addProductsToCart
.cart as unknown as Cart;
case 'ConfigurableProduct':
- const cartItems = [
- {
- parent_sku: product.sku,
- data: {
+ const selectedOptions = Object.values(productConfiguration as object);
+
+ const configurableCartInput: AddProductsToCartInput = {
+ cartId,
+ cartItems: [
+ {
quantity,
- sku: product.configurable_product_options_selection?.variant?.sku || '',
+ sku: product.sku,
+ selected_options: selectedOptions,
},
- },
- ];
-
- const configurableCartInput: AddConfigurableProductsToCartInput = {
- cart_id: currentCartId,
- cart_items: cartItems,
+ ],
};
- const configurableProduct = await context.$magento.api.addConfigurableProductsToCart(configurableCartInput);
+ const configurableProduct = await context.$magento.api.addProductsToCart(configurableCartInput, customQuery as CustomQuery);
+ Logger.debug('[Result]:', { data: configurableProduct.data });
- Logger.debug('[Result]:', { data: configurableProduct });
+ if (configurableProduct.data.addProductsToCart.user_errors.length > 0) {
+ throw new Error(String(configurableProduct.data.addProductsToCart.user_errors[0].message));
+ }
// eslint-disable-next-line consistent-return
- return configurableProduct
- .data
- .addConfigurableProductsToCart
+ return configurableProduct.data
+ .addProductsToCart
.cart as unknown as Cart;
case 'BundleProduct':
const createEnteredOptions = () =>
@@ -91,7 +95,7 @@ export const addItemCommand = {
}));
const bundleCartInput: AddProductsToCartInput = {
- cartId: currentCartId,
+ cartId,
cartItems: [
{
quantity,
@@ -101,60 +105,65 @@ export const addItemCommand = {
],
};
- const bundleProduct = await context.$magento.api.addProductsToCart(bundleCartInput);
+ const bundleProduct = await context.$magento.api.addProductsToCart(bundleCartInput, customQuery as CustomQuery);
Logger.debug('[Result]:', { data: bundleProduct });
+ if (bundleProduct.data.addProductsToCart.user_errors.length > 0) {
+ throw new Error(String(bundleProduct.data.addProductsToCart.user_errors[0].message));
+ }
+
// eslint-disable-next-line consistent-return
return bundleProduct
.data
.addProductsToCart
.cart as unknown as Cart;
case 'DownloadableProduct':
- const downloadableCartItems = [
- {
- data: {
+ const downloadableCartInput: AddProductsToCartInput = {
+ cartId,
+ cartItems: [
+ {
quantity,
sku: product.sku,
},
- downloadable_product_links: product.downloadable_product_links.map((dpl) => ({ link_id: dpl.id })),
- },
- ];
-
- const downloadableCartInput: AddDownloadableProductsToCartInput = {
- cart_id: currentCartId,
- cart_items: downloadableCartItems,
+ ],
};
- const downloadableProduct = await context.$magento.api.addDownloadableProductsToCart(downloadableCartInput);
+ const downloadableProduct = await context.$magento.api.addProductsToCart(downloadableCartInput, customQuery as CustomQuery);
Logger.debug('[Result DownloadableProduct]:', { data: downloadableProduct });
+ if (downloadableProduct.data.addProductsToCart.user_errors.length > 0) {
+ throw new Error(String(downloadableProduct.data.addProductsToCart.user_errors[0].message));
+ }
+
// eslint-disable-next-line consistent-return
return downloadableProduct
.data
- .addDownloadableProductsToCart
+ .addProductsToCart
.cart as unknown as Cart;
case 'VirtualProduct':
- const virtualCartInput: AddVirtualProductsToCartInput = {
- cart_id: currentCartId,
- cart_items: [
+ const virtualCartInput: AddProductsToCartInput = {
+ cartId,
+ cartItems: [
{
- data: {
- quantity,
- sku: product.sku,
- },
+ quantity,
+ sku: product.sku,
},
],
};
- const virtualProduct = await context.$magento.api.addVirtualProductsToCart(virtualCartInput);
+ const virtualProduct = await context.$magento.api.addProductsToCart(virtualCartInput, customQuery as CustomQuery);
Logger.debug('[Result VirtualProduct]:', { data: virtualProduct });
+ if (downloadableProduct.data.addProductsToCart.user_errors.length > 0) {
+ throw new Error(String(downloadableProduct.data.addProductsToCart.user_errors[0].message));
+ }
+
// eslint-disable-next-line consistent-return
return virtualProduct
.data
- .addVirtualProductsToCart
+ .addProductsToCart
.cart as unknown as Cart;
default:
// eslint-disable-next-line no-underscore-dangle
diff --git a/packages/theme/modules/checkout/composables/useCart/commands/clearCartCommand.ts b/packages/theme/modules/checkout/composables/useCart/commands/clearCartCommand.ts
deleted file mode 100644
index 5360c27bf..000000000
--- a/packages/theme/modules/checkout/composables/useCart/commands/clearCartCommand.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { VsfContext } from '~/composables/context';
-
-export const clearCartCommand = {
- execute: (context: VsfContext) => {
- context.$magento.config.state.setCartId(null);
- },
-};
diff --git a/packages/theme/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts b/packages/theme/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts
index cb56872fa..2a02c90fa 100644
--- a/packages/theme/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts
+++ b/packages/theme/modules/checkout/composables/useCart/commands/loadTotalQtyCommand.ts
@@ -1,13 +1,14 @@
import { Logger } from '~/helpers/logger';
import { VsfContext } from '~/composables/context';
+import { ComposableFunctionArgs } from '~/composables';
export const loadTotalQtyCommand = {
- execute: async (context: VsfContext) => {
+ execute: async (context: VsfContext, params?: ComposableFunctionArgs<{}>) => {
Logger.debug('[Magento]: Load cart total qty');
const apiState = context.$magento.config.state;
if (apiState.getCartId()) {
- const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
+ const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId(), params?.customQuery ?? null);
return data?.cart?.total_quantity ?? 0;
}
diff --git a/packages/theme/modules/checkout/composables/useCart/commands/removeItemCommand.ts b/packages/theme/modules/checkout/composables/useCart/commands/removeItemCommand.ts
index 380117635..5f56694b3 100644
--- a/packages/theme/modules/checkout/composables/useCart/commands/removeItemCommand.ts
+++ b/packages/theme/modules/checkout/composables/useCart/commands/removeItemCommand.ts
@@ -1,11 +1,12 @@
import { Logger } from '~/helpers/logger';
import { Cart, RemoveItemFromCartInput } from '~/modules/GraphQL/types';
import { VsfContext } from '~/composables/context';
+import { CustomQuery } from '~/types/core';
export const removeItemCommand = {
execute: async (
context: VsfContext,
- { currentCart, product },
+ { currentCart, product, customQuery },
) => {
Logger.debug('[Magento]: Remove item from cart', {
product,
@@ -23,7 +24,7 @@ export const removeItemCommand = {
cart_item_uid: item.uid,
};
- const { data } = await context.$magento.api.removeItemFromCart(removeItemParams);
+ const { data } = await context.$magento.api.removeItemFromCart(removeItemParams, customQuery as CustomQuery);
Logger.debug('[Result]:', { data });
diff --git a/packages/theme/modules/checkout/composables/useCart/index.ts b/packages/theme/modules/checkout/composables/useCart/index.ts
index e7c16ee6c..c573572ec 100644
--- a/packages/theme/modules/checkout/composables/useCart/index.ts
+++ b/packages/theme/modules/checkout/composables/useCart/index.ts
@@ -3,7 +3,6 @@ import {
} from '@nuxtjs/composition-api';
import { addItemCommand } from '~/modules/checkout/composables/useCart/commands/addItemCommand';
import { applyCouponCommand } from '~/modules/checkout/composables/useCart/commands/applyCouponCommand';
-import { clearCartCommand } from '~/modules/checkout/composables/useCart/commands/clearCartCommand';
import { loadCartCommand } from '~/modules/checkout/composables/useCart/commands/loadCartCommand';
import { loadTotalQtyCommand } from '~/modules/checkout/composables/useCart/commands/loadTotalQtyCommand';
import { removeCouponCommand } from '~/modules/checkout/composables/useCart/commands/removeCouponCommand';
@@ -13,8 +12,9 @@ import { Logger } from '~/helpers/logger';
import { Cart, CartItemInterface, ProductInterface } from '~/modules/GraphQL/types';
import { useCartStore } from '~/modules/checkout/stores/cart';
import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
-import { UseCartErrors, UseCartInterface } from './useCart';
import { Product } from '~/modules/catalog/product/types';
+import { ComposableFunctionArgs } from '~/composables';
+import { UseCartErrors, UseCartInterface } from './useCart';
/**
* Allows loading and manipulating cart of the current user.
@@ -90,7 +90,7 @@ PRODUCT
try {
loading.value = true;
- clearCartCommand.execute(context);
+ context.$magento.config.state.removeCartId();
const loadedCart = await loadCartCommand.execute(context, { customQuery });
cartStore.$patch((state) => {
@@ -104,12 +104,12 @@ PRODUCT
}
};
- const loadTotalQty = async (): Promise => {
+ const loadTotalQty = async (params?: ComposableFunctionArgs<{}>): Promise => {
Logger.debug('useCart.loadTotalQty');
try {
loading.value = true;
- const totalQuantity = await loadTotalQtyCommand.execute(context);
+ const totalQuantity = await loadTotalQtyCommand.execute(context, params);
cartStore.$patch((state) => {
state.cart.total_quantity = totalQuantity;
@@ -122,7 +122,9 @@ PRODUCT
}
};
- const addItem = async ({ product, quantity }): Promise => {
+ const addItem = async ({
+ product, quantity, productConfiguration, customQuery,
+ }): Promise => {
Logger.debug('useCart.addItem', { product, quantity });
try {
@@ -136,7 +138,10 @@ PRODUCT
currentCart: cart.value,
product,
quantity,
+ productConfiguration,
+ customQuery,
});
+
error.value.addItem = null;
cartStore.$patch((state) => {
state.cart = updatedCart;
@@ -155,7 +160,7 @@ PRODUCT
}
};
- const removeItem = async ({ product }) => {
+ const removeItem = async ({ product, customQuery }) => {
Logger.debug('useCart.removeItem', { product });
try {
@@ -163,6 +168,7 @@ PRODUCT
const updatedCart = await removeItemCommand.execute(context, {
currentCart: cart.value,
product,
+ customQuery,
});
error.value.removeItem = null;
diff --git a/packages/theme/modules/checkout/composables/useCart/useCart.ts b/packages/theme/modules/checkout/composables/useCart/useCart.ts
index 96073ff91..8cd34e645 100644
--- a/packages/theme/modules/checkout/composables/useCart/useCart.ts
+++ b/packages/theme/modules/checkout/composables/useCart/useCart.ts
@@ -8,6 +8,7 @@ import { Product } from '~/modules/catalog/product/types';
export type UseCartAddItemParams = ComposableFunctionArgs<{
product: PRODUCT;
quantity: number;
+ productConfiguration?: { [key: string]: string };
}>;
/**
diff --git a/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts b/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts
index 30f32b24b..a2ffa5882 100644
--- a/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts
+++ b/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getCustomerShippingMethodsCommand.ts
@@ -1,9 +1,12 @@
import { AvailableShippingMethod } from '~/modules/GraphQL/types';
import { VsfContext } from '~/composables/context';
+import { ComposableFunctionArgs } from '~/composables';
export const getCustomerShippingMethodsCommand = {
- execute: async (context: VsfContext): Promise => {
- const { data: { customerCart: { shipping_addresses: shippingAddresses } } } = await context.$magento.api.getAvailableCustomerShippingMethods();
+ execute: async (context: VsfContext, params: ComposableFunctionArgs<{}>): Promise => {
+ const {
+ data: { customerCart: { shipping_addresses: shippingAddresses } },
+ } = await context.$magento.api.getAvailableCustomerShippingMethods(params?.customQuery ?? null);
return shippingAddresses[0]?.available_shipping_methods ?? [];
},
};
diff --git a/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts b/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts
index 531158c38..2212e2b2b 100644
--- a/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts
+++ b/packages/theme/modules/checkout/composables/useGetShippingMethods/commands/getGuestShippingMethodsCommand.ts
@@ -4,7 +4,7 @@ import { AvailableShippingMethod } from '~/modules/GraphQL/types';
export const getGuestShippingMethodsCommand = {
execute: async (context: Context['app'], params: ComposableFunctionArgs<{ cartId: string }>): Promise => {
- const { data } = await context.$vsf.$magento.api.getAvailableShippingMethods({ cartId: params.cartId });
+ const { data } = await context.$vsf.$magento.api.getAvailableShippingMethods({ cartId: params.cartId }, params?.customQuery ?? null);
const hasAddresses = data.cart.shipping_addresses.length > 0;
return hasAddresses ? data?.cart?.shipping_addresses[0]?.available_shipping_methods : [];
diff --git a/packages/theme/modules/checkout/composables/useGetShippingMethods/index.ts b/packages/theme/modules/checkout/composables/useGetShippingMethods/index.ts
index aa6799183..545900c54 100644
--- a/packages/theme/modules/checkout/composables/useGetShippingMethods/index.ts
+++ b/packages/theme/modules/checkout/composables/useGetShippingMethods/index.ts
@@ -30,7 +30,7 @@ export function useGetShippingMethods(): UseGetShippingMethodsInterface => {
- const { data } = await context.app.$vsf.$magento.api.placeOrder({ cart_id: cartId });
+ execute: async (context: UseContextReturn, cartId: string, params?: ComposableFunctionArgs<{}>): Promise => {
+ const { data } = await context.app.$vsf.$magento.api.placeOrder({ cart_id: cartId }, params?.customQuery ?? null);
return data?.placeOrder ?? null;
},
diff --git a/packages/theme/modules/checkout/composables/useMakeOrder/index.ts b/packages/theme/modules/checkout/composables/useMakeOrder/index.ts
index 687cc0596..3ec8b7acf 100644
--- a/packages/theme/modules/checkout/composables/useMakeOrder/index.ts
+++ b/packages/theme/modules/checkout/composables/useMakeOrder/index.ts
@@ -4,6 +4,7 @@ import { placeOrderCommand } from '~/modules/checkout/composables/useMakeOrder/c
import useCart from '~/modules/checkout/composables/useCart';
import type { PlaceOrderOutput } from '~/modules/GraphQL/types';
import type { UseMakeOrderErrors, UseMakeOrderInterface } from './useMakeOrder';
+import { ComposableFunctionArgs } from '~/composables';
/**
* Allows making an order from a cart.
@@ -16,12 +17,12 @@ export function useMakeOrder(): UseMakeOrderInterface {
const { cart } = useCart();
const context = useContext();
- const make = async (): Promise => {
+ const make = async (params?: ComposableFunctionArgs<{}>): Promise => {
Logger.debug('useMakeOrder.make');
let placedOrder = null;
try {
loading.value = true;
- placedOrder = await placeOrderCommand.execute(context, cart.value.id);
+ placedOrder = await placeOrderCommand.execute(context, cart.value.id, params?.customQuery ?? null);
error.value.make = null;
} catch (err) {
error.value.make = err;
diff --git a/packages/theme/modules/checkout/composables/useMakeOrder/useMakeOrder.ts b/packages/theme/modules/checkout/composables/useMakeOrder/useMakeOrder.ts
index 32ff0ddd0..b2812fc79 100644
--- a/packages/theme/modules/checkout/composables/useMakeOrder/useMakeOrder.ts
+++ b/packages/theme/modules/checkout/composables/useMakeOrder/useMakeOrder.ts
@@ -1,5 +1,6 @@
import type { Ref } from '@nuxtjs/composition-api';
import type { PlaceOrderOutput } from '~/modules/GraphQL/types';
+import { ComposableFunctionArgs } from '~/composables';
/**
* The {@link useMakeOrder} error object. The properties values' are the errors
@@ -15,7 +16,7 @@ export interface UseMakeOrderErrors {
*/
export interface UseMakeOrderInterface {
/** Makes an order with current cart. */
- make(): Promise;
+ make(params?: ComposableFunctionArgs<{}>): Promise;
/**
* Contains errors from any of the composable methods.
diff --git a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts
index db6714b37..fb46c4718 100644
--- a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts
+++ b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts
@@ -1,9 +1,9 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
import type { AvailablePaymentMethod } from '~/modules/GraphQL/types';
export const getAvailablePaymentMethodsCommand = {
- execute: async (context: UseContextReturn, cartId: string): Promise => {
- const { data } = await context.app.$vsf.$magento.api.getAvailablePaymentMethods({ cartId });
+ execute: async (context: UseContextReturn, cartId: string, customQuery?: CustomQuery): Promise => {
+ const { data } = await context.app.$vsf.$magento.api.getAvailablePaymentMethods({ cartId }, customQuery);
return data?.cart?.available_payment_methods ?? [];
},
diff --git a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts
index 09fa90323..b3c0e45ec 100644
--- a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts
+++ b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts
@@ -4,7 +4,7 @@ import type { PaymentMethodParams } from '../usePaymentProvider';
export const setPaymentMethodOnCartCommand = {
execute: async (context: UseContextReturn, params: PaymentMethodParams): Promise => {
- const { data } = await context.app.$vsf.$magento.api.setPaymentMethodOnCart(params);
+ const { data } = await context.app.$vsf.$magento.api.setPaymentMethodOnCart(params, params?.customQuery ?? null);
return data?.setPaymentMethodOnCart?.cart.available_payment_methods ?? [];
},
diff --git a/packages/theme/modules/checkout/composables/usePaymentProvider/index.ts b/packages/theme/modules/checkout/composables/usePaymentProvider/index.ts
index f554dc82a..1e5a18478 100644
--- a/packages/theme/modules/checkout/composables/usePaymentProvider/index.ts
+++ b/packages/theme/modules/checkout/composables/usePaymentProvider/index.ts
@@ -10,6 +10,7 @@ import type {
UsePaymentProviderSaveParams,
PaymentMethodParams,
} from './usePaymentProvider';
+import { CustomQuery } from '~/types/core';
/**
* Allows loading the available payment
@@ -37,6 +38,7 @@ export function usePaymentProvider(): UsePaymentProviderInterface {
payment_method: {
...params.paymentMethod,
},
+ customQuery: params.customQuery,
};
result = await setPaymentMethodOnCartCommand.execute(context, paymentMethodParams);
@@ -52,13 +54,13 @@ export function usePaymentProvider(): UsePaymentProviderInterface {
return result;
};
- const load = async () => {
+ const load = async (customQuery?: CustomQuery) => {
Logger.debug('usePaymentProvider.load');
let result = null;
try {
loading.value = true;
- result = await getAvailablePaymentMethodsCommand.execute(context, cart.value.id);
+ result = await getAvailablePaymentMethodsCommand.execute(context, cart.value.id, customQuery);
error.value.load = null;
} catch (err) {
error.value.load = err;
diff --git a/packages/theme/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts b/packages/theme/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts
index 6dd972098..1987a8f12 100644
--- a/packages/theme/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts
+++ b/packages/theme/modules/checkout/composables/usePaymentProvider/usePaymentProvider.ts
@@ -1,11 +1,12 @@
import type { Ref } from '@nuxtjs/composition-api';
import type { ComposableFunctionArgs } from '~/composables/types';
import type { AvailablePaymentMethod, PaymentMethodInput } from '~/modules/GraphQL/types';
+import { CustomQuery } from '~/types/core';
-export interface PaymentMethodParams {
+export type PaymentMethodParams = ComposableFunctionArgs<{
cart_id: string;
payment_method: PaymentMethodInput;
-}
+}>;
/**
* The {@link usePaymentProvider} error object. The properties values' are the
@@ -39,7 +40,7 @@ export interface UsePaymentProviderInterface {
error: Readonly>;
/** Loads the available payment methods for current cart. */
- load(): Promise;
+ load(customQuery?: CustomQuery): Promise;
/**
* Saves the payment method for current cart. It returns the updated available
diff --git a/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts b/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts
index c4c652707..471b539e7 100644
--- a/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts
+++ b/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts
@@ -1,9 +1,9 @@
-import { UseContextReturn } from '~/types/core';
+import { CustomQuery, UseContextReturn } from '~/types/core';
import type { SetShippingMethodsOnCartInput, Cart } from '~/modules/GraphQL/types';
export const setShippingMethodsOnCartCommand = {
- execute: async (context: UseContextReturn, shippingMethodParams: SetShippingMethodsOnCartInput): Promise => {
- const { data } = await context.app.$vsf.$magento.api.setShippingMethodsOnCart(shippingMethodParams);
+ execute: async (context: UseContextReturn, shippingMethodParams: SetShippingMethodsOnCartInput, customQuery: CustomQuery): Promise => {
+ const { data } = await context.app.$vsf.$magento.api.setShippingMethodsOnCart(shippingMethodParams, customQuery);
// TODO: Find out why 'Cart' doesn't match the type of the response data.
return (data?.setShippingMethodsOnCart?.cart as unknown as Cart) ?? null;
diff --git a/packages/theme/modules/checkout/composables/useShippingProvider/index.ts b/packages/theme/modules/checkout/composables/useShippingProvider/index.ts
index 628113a00..80e79323e 100644
--- a/packages/theme/modules/checkout/composables/useShippingProvider/index.ts
+++ b/packages/theme/modules/checkout/composables/useShippingProvider/index.ts
@@ -26,7 +26,7 @@ export function useShippingProvider(): UseShippingProviderInterface {
const { cart, setCart, load: loadCart } = useCart();
const context = useContext();
- const save = async ({ shippingMethod }: UseShippingProviderSaveParams) => {
+ const save = async ({ shippingMethod, customQuery = null }: UseShippingProviderSaveParams) => {
Logger.debug('useShippingProvider.save');
let result = null;
try {
@@ -37,7 +37,7 @@ export function useShippingProvider(): UseShippingProviderInterface {
shipping_methods: [shippingMethod],
};
- const cartData = await setShippingMethodsOnCartCommand.execute(context, shippingMethodParams);
+ const cartData = await setShippingMethodsOnCartCommand.execute(context, shippingMethodParams, customQuery);
Logger.debug('[Result]:', { cartData });
setCart(cartData);
diff --git a/packages/theme/modules/checkout/getters/cartGetters.ts b/packages/theme/modules/checkout/getters/cartGetters.ts
index 0b0302736..8819800d9 100644
--- a/packages/theme/modules/checkout/getters/cartGetters.ts
+++ b/packages/theme/modules/checkout/getters/cartGetters.ts
@@ -5,12 +5,12 @@ import type { Price } from '~/modules/catalog/types';
import type { ProductAttribute, Product } from '~/modules/catalog/product/types';
import { PaymentMethodInterface } from '~/modules/checkout/types';
import {
- CartItemInterface,
Cart,
Discount,
ProductInterface,
SelectedShippingMethod,
ConfigurableCartItem,
+ CartItemInterface,
} from '~/modules/GraphQL/types';
import { CartGetters as CartGettersBase, CartDiscount, Coupon } from '~/getters/types';
import { getName, getSlug as getSlugGetter, getProductThumbnailImage } from '~/modules/catalog/product/getters/productGetters';
diff --git a/packages/theme/modules/checkout/pages/Checkout.vue b/packages/theme/modules/checkout/pages/Checkout.vue
index 5b14e5baf..4c2000d50 100644
--- a/packages/theme/modules/checkout/pages/Checkout.vue
+++ b/packages/theme/modules/checkout/pages/Checkout.vue
@@ -44,7 +44,7 @@ import {
} from '@nuxtjs/composition-api';
import cartGetters from '~/modules/checkout/getters/cartGetters';
import useCart from '~/modules/checkout/composables/useCart';
-import CartPreview from '~/components/Checkout/CartPreview.vue';
+import CartPreview from '~/modules/checkout/components/CartPreview.vue';
export default defineComponent({
name: 'CheckoutPage',
diff --git a/packages/theme/modules/checkout/pages/Checkout/Billing.vue b/packages/theme/modules/checkout/pages/Checkout/Billing.vue
index 98d362670..01352270b 100644
--- a/packages/theme/modules/checkout/pages/Checkout/Billing.vue
+++ b/packages/theme/modules/checkout/pages/Checkout/Billing.vue
@@ -13,7 +13,7 @@
:label="$t('My billing and shipping address are the same')"
name="copyShippingAddress"
class="form__element"
- @change="handleCheckSameAddress"
+ @change="handleCheckSameAddress($event)"
/>
+ >
+
+ {{ shippingDetailsCountryName }}
+
+
@@ -34,12 +38,13 @@
v-if="!sameAsShipping && isAuthenticated && hasSavedBillingAddress"
v-model="setAsDefault"
v-e2e="'billing-addresses'"
- :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
+ :current-address-id="currentAddressId"
:billing-addresses="addresses"
- @setCurrentAddress="handleSetCurrentAddress"
+ :countries="countries"
+ @setCurrentAddress="handleSetCurrentAddress($event)"
/>
+