diff --git a/packages/bigcommerce/src/checkout/use-submit-checkout.tsx b/packages/bigcommerce/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/bigcommerce/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/bigcommerce/src/customer/address/use-update-item.tsx b/packages/bigcommerce/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/bigcommerce/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/commerce/src/types/site.ts b/packages/commerce/src/types/site.ts index 7223c99d4..971539232 100644 --- a/packages/commerce/src/types/site.ts +++ b/packages/commerce/src/types/site.ts @@ -12,11 +12,13 @@ export type Navigation = any export type SiteTypes = { category: Category brand: Brand + navigation?: Navigation } export type GetSiteInfoOperation = { data: { categories: T['category'][] brands: T['brand'][] + navigation?: T['navigation'][] } } diff --git a/packages/commercejs/src/customer/address/use-update-item.tsx b/packages/commercejs/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/commercejs/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/kibocommerce/src/checkout/use-submit-checkout.tsx b/packages/kibocommerce/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/kibocommerce/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/kibocommerce/src/customer/address/use-update-item.tsx b/packages/kibocommerce/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/kibocommerce/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/opencommerce/src/api/endpoints/customer/address/update-item.ts b/packages/opencommerce/src/api/endpoints/customer/address/update-item.ts index c0f028ee2..f34088f0f 100644 --- a/packages/opencommerce/src/api/endpoints/customer/address/update-item.ts +++ b/packages/opencommerce/src/api/endpoints/customer/address/update-item.ts @@ -15,14 +15,14 @@ const updateItem: CustomerAddressEndpoint['handlers']['updateItem'] = async ({ }) } - if (item.shippingMethod) { + if (item.shippingMethodId) { await fetch(selectFulfillmentOptions, { variables: { input: { cartId, cartToken: cookies[anonymousCartTokenCookie], - fulfillmentGroupId: item.shippingMethod.fulfillmentGroupId, - fulfillmentMethodId: item.shippingMethod.id, + fulfillmentGroupId: item.fulfillmentGroupId, + fulfillmentMethodId: item.shippingMethodId, }, }, }) diff --git a/packages/opencommerce/src/checkout/use-checkout.tsx b/packages/opencommerce/src/checkout/use-checkout.tsx index 1986db79e..721f2e72b 100644 --- a/packages/opencommerce/src/checkout/use-checkout.tsx +++ b/packages/opencommerce/src/checkout/use-checkout.tsx @@ -9,6 +9,7 @@ import useSubmitCheckout from './use-submit-checkout' import { useCheckoutContext } from '@components/checkout/context' import { AddressFields } from '../types/customer/address' import { useCart } from '../cart' +import { FulfillmentGroup } from '../types/cart' export default useCheckout as UseCheckout @@ -30,13 +31,20 @@ export const handler: SWRHook = { const { addressFields } = useCheckoutContext() - const { shippingMethod, ...restAddressFields } = + const { shippingMethodId, ...restAddressFields } = addressFields as AddressFields const hasEnteredAddress = Object.values(restAddressFields).some( (fieldValue) => !!fieldValue ) + const totalAmount = + cart?.checkout?.summary.fulfillmentTotal?.displayAmount + + const shippingGroup = cart?.checkout?.fulfillmentGroups.find( + (group: FulfillmentGroup) => group?.type === 'shipping' + ) + const response = useMemo( () => ({ data: { @@ -44,10 +52,18 @@ export const handler: SWRHook = { hasPayment: true, hasShipping: hasEnteredAddress, hasShippingMethods, - hasSelectedShippingMethod: !!shippingMethod?.id, + hasSelectedShippingMethod: !!shippingMethodId, + totalAmount, + shippingGroup, }, }), - [hasEnteredAddress, hasShippingMethods, shippingMethod] + [ + hasEnteredAddress, + hasShippingMethods, + shippingMethodId, + totalAmount, + shippingGroup, + ] ) return useMemo( diff --git a/packages/opencommerce/src/customer/address/use-update-item.tsx b/packages/opencommerce/src/customer/address/use-update-item.tsx index 28886a0ec..bc59c6506 100644 --- a/packages/opencommerce/src/customer/address/use-update-item.tsx +++ b/packages/opencommerce/src/customer/address/use-update-item.tsx @@ -6,6 +6,7 @@ import useUpdateItem, { } from '@vercel/commerce/customer/address/use-update-item' import { useCheckoutContext } from '@components/checkout/context' import { CustomerAddressTypes } from '../../types/customer/address' +import { useCart } from '../../cart' export default useUpdateItem as UseUpdateItem @@ -24,14 +25,21 @@ export const handler: MutationHook> = { }, useHook: ({ fetch }) => function useHook() { + const { data: cart } = useCart() + const { setAddressFields, addressFields } = useCheckoutContext() return useCallback( async function updateItem(input) { const { id, ...rest } = input - await fetch({ input: { item: rest, itemId: id } }) + const fulfillmentGroupId = + cart?.checkout?.fulfillmentGroups[0]._id || 'groupId' + await fetch({ + input: { item: { ...rest, fulfillmentGroupId }, itemId: id }, + }) setAddressFields({ ...addressFields, - shippingMethod: rest.shippingMethod, + shippingMethodId: rest.shippingMethodId, + fulfillmentGroupId, }) return undefined }, diff --git a/packages/opencommerce/src/types/customer/address.ts b/packages/opencommerce/src/types/customer/address.ts index 481cfa432..42407399f 100644 --- a/packages/opencommerce/src/types/customer/address.ts +++ b/packages/opencommerce/src/types/customer/address.ts @@ -3,10 +3,8 @@ import * as Core from '@vercel/commerce/types/customer/address' export * from '@vercel/commerce/types/customer/address' export type AddressFields = Core.AddressFields & { - shippingMethod?: { - id: string - fulfillmentGroupId: string - } + shippingMethodId?: string + fulfillmentGroupId?: string } export type CustomerAddressTypes = Core.CustomerAddressTypes & { diff --git a/packages/saleor/src/checkout/use-submit-checkout.tsx b/packages/saleor/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/saleor/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/saleor/src/customer/address/use-update-item.tsx b/packages/saleor/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/saleor/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/sfcc/src/checkout/use-submit-checkout.tsx b/packages/sfcc/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/sfcc/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/sfcc/src/customer/address/use-update-item.tsx b/packages/sfcc/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/sfcc/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/shopify/src/checkout/use-submit-checkout.tsx b/packages/shopify/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/shopify/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/shopify/src/customer/address/use-update-item.tsx b/packages/shopify/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/shopify/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/spree/src/checkout/use-submit-checkout.tsx b/packages/spree/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/spree/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/spree/src/customer/address/use-update-item.tsx b/packages/spree/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/spree/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/swell/src/checkout/use-submit-checkout.tsx b/packages/swell/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/swell/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/swell/src/customer/address/use-update-item.tsx b/packages/swell/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/swell/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/vendure/src/checkout/use-submit-checkout.tsx b/packages/vendure/src/checkout/use-submit-checkout.tsx new file mode 100644 index 000000000..a00b87960 --- /dev/null +++ b/packages/vendure/src/checkout/use-submit-checkout.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useSubmitCheckout, { + UseSubmitCheckout, +} from '@vercel/commerce/checkout/use-submit-checkout' + +export default useSubmitCheckout as UseSubmitCheckout + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/packages/vendure/src/customer/address/use-update-item.tsx b/packages/vendure/src/customer/address/use-update-item.tsx new file mode 100644 index 000000000..b9aba9629 --- /dev/null +++ b/packages/vendure/src/customer/address/use-update-item.tsx @@ -0,0 +1,17 @@ +import { MutationHook } from '@vercel/commerce/utils/types' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/customer/address/use-update-item' + +export default useUpdateItem as UseUpdateItem + +export const handler: MutationHook = { + fetchOptions: { + query: '', + }, + async fetcher({ input, options, fetch }) {}, + useHook: + ({ fetch }) => + () => + async () => ({}), +} diff --git a/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx index 898a65c4f..43966523d 100644 --- a/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ b/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -113,9 +113,7 @@ const CheckoutSidebarView: FC = () => { {checkoutData?.hasSelectedShippingMethod ? (
  • Shipping - - {cartData?.checkout?.summary.fulfillmentTotal?.displayAmount} - + {checkoutData?.totalAmount}
  • ) : (
  • diff --git a/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx b/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx index bdc441cef..0d2a4a3b3 100644 --- a/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx +++ b/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx @@ -3,14 +3,9 @@ import useUpdateUpdateAddress from '@framework/customer/address/use-update-item' import SidebarLayout from '@components/common/SidebarLayout' import { useUI } from '@components/ui/context' import { Button } from '@components/ui' +import useCheckout from '@framework/checkout/use-checkout' import { useCheckoutContext } from '../context' -type FulfillmentGroup = { - type: string - _id: string - availableFulfillmentOptions: FulfillmentOption[] | null -} - type FulfillmentOption = { fulfillmentMethod?: { _id: string @@ -28,9 +23,7 @@ const ShippingMethod = () => { const { addressFields } = useCheckoutContext() const updateShippingMethod = useUpdateUpdateAddress() - const shippingGroup = cart?.checkout?.fulfillmentGroups.find( - (group: FulfillmentGroup) => group?.type === 'shipping' - ) + const { data: checkoutData } = useCheckout() const handleSubmit = async (event: React.ChangeEvent) => { event.preventDefault() @@ -38,17 +31,13 @@ const ShippingMethod = () => { await updateShippingMethod({ id: cart!.id, ...addressFields, - shippingMethod: { - fulfillmentGroupId: - cart!.checkout?.fulfillmentGroups[0]?._id ?? 'groupId', - id: event.target.shippingMethod.value, - }, + shippingMethodId: event.target.shippingMethod.value, }) setSidebarView('CHECKOUT_VIEW') } - return shippingGroup ? ( + return checkoutData.shippingGroup ? (
    setSidebarView('CHECKOUT_VIEW')}>
    @@ -56,7 +45,7 @@ const ShippingMethod = () => { Shipping Methods
    - {shippingGroup.availableFulfillmentOptions?.map( + {checkoutData.shippingGroup.availableFulfillmentOptions?.map( (option: FulfillmentOption) => (
    { type="radio" value={option?.fulfillmentMethod?._id} defaultChecked={ - shippingGroup.selectedFulfillmentOption + checkoutData.shippingGroup.selectedFulfillmentOption ?.fulfillmentMethod?._id === option?.fulfillmentMethod?._id } diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx index 585549bc6..f20f57f5b 100644 --- a/site/components/product/ProductSidebar/ProductSidebar.tsx +++ b/site/components/product/ProductSidebar/ProductSidebar.tsx @@ -33,8 +33,11 @@ const ProductSidebar: FC = ({ product, className }) => { await addItem({ productId: String(product.id), variantId: String(variant ? variant.id : product.variants[0]?.id), - variant: variant ?? product.variants[0], - currencyCode: String(product.price.currencyCode), + // Open Commerce provider only + ...({ + variant: variant ?? product.variants[0], + currencyCode: String(product.price.currencyCode), + } as any), }) openSidebar() setLoading(false)