From 2fd671e53f0344ea0ad4c8e5cfb229538e6fa95e Mon Sep 17 00:00:00 2001 From: Chloe Date: Fri, 10 Mar 2023 10:46:05 +0700 Subject: [PATCH] fix typescript Signed-off-by: Chloe --- .../bigcommerce/src/checkout/use-checkout.tsx | 16 +---- packages/commerce/src/types/checkout.ts | 14 +++++ .../src/checkout/use-checkout.tsx | 16 +---- .../src/api/endpoints/checkout/index.ts | 2 +- .../src/checkout/use-checkout.tsx | 21 ++++--- .../src/customer/address/use-update-item.tsx | 6 +- packages/opencommerce/src/types/checkout.ts | 18 ------ .../src/types/customer/address.ts | 1 - packages/saleor/src/checkout/use-checkout.tsx | 16 +---- packages/sfcc/src/checkout/use-checkout.tsx | 18 +----- .../shopify/src/checkout/use-checkout.tsx | 18 +----- packages/spree/src/checkout/use-checkout.tsx | 21 +------ packages/swell/src/checkout/use-checkout.tsx | 18 +----- .../vendure/src/checkout/use-checkout.tsx | 18 +----- .../CheckoutSidebarView.tsx | 15 +++-- .../ShippingMethodView/ShippingMethodView.tsx | 63 +++++++------------ 16 files changed, 78 insertions(+), 203 deletions(-) delete mode 100644 packages/opencommerce/src/types/checkout.ts diff --git a/packages/bigcommerce/src/checkout/use-checkout.tsx b/packages/bigcommerce/src/checkout/use-checkout.tsx index cab52bb60..fbca6ed80 100644 --- a/packages/bigcommerce/src/checkout/use-checkout.tsx +++ b/packages/bigcommerce/src/checkout/use-checkout.tsx @@ -1,14 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { UseCheckout } from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/commerce/src/types/checkout.ts b/packages/commerce/src/types/checkout.ts index 326af252e..cc4c57a20 100644 --- a/packages/commerce/src/types/checkout.ts +++ b/packages/commerce/src/types/checkout.ts @@ -28,6 +28,20 @@ export interface Checkout { * List of items in the checkout. */ lineItems?: LineItem[] + + /** + * List of available shipping methods + */ + shippingMethods?: { + id: string + fee: string + name: string + }[] + + /** + * The unique identifier of the shipping method that the customer has selected. + */ + selectedShippingMethodId?: string } export interface CheckoutBody { diff --git a/packages/kibocommerce/src/checkout/use-checkout.tsx b/packages/kibocommerce/src/checkout/use-checkout.tsx index cab52bb60..fbca6ed80 100644 --- a/packages/kibocommerce/src/checkout/use-checkout.tsx +++ b/packages/kibocommerce/src/checkout/use-checkout.tsx @@ -1,14 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { UseCheckout } from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/opencommerce/src/api/endpoints/checkout/index.ts b/packages/opencommerce/src/api/endpoints/checkout/index.ts index 9807b93d3..0faf4eb90 100644 --- a/packages/opencommerce/src/api/endpoints/checkout/index.ts +++ b/packages/opencommerce/src/api/endpoints/checkout/index.ts @@ -1,10 +1,10 @@ import { GetAPISchema, createEndpoint } from '@vercel/commerce/api' import checkoutEndpoint from '@vercel/commerce/api/endpoints/checkout' -import type { CheckoutSchema } from '../../../types/checkout' import type { OpenCommerceAPI } from '../..' import submitCheckout from './submit-checkout' import getCheckout from './get-checkout' +import { CheckoutSchema } from '@vercel/commerce/types/checkout' export type CheckoutAPI = GetAPISchema diff --git a/packages/opencommerce/src/checkout/use-checkout.tsx b/packages/opencommerce/src/checkout/use-checkout.tsx index 6cf1c8ed7..760c3d803 100644 --- a/packages/opencommerce/src/checkout/use-checkout.tsx +++ b/packages/opencommerce/src/checkout/use-checkout.tsx @@ -7,11 +7,11 @@ import useCheckout, { import useSubmitCheckout from './use-submit-checkout' import { useCheckoutContext } from '@components/checkout/context' import { AddressFields } from '../types/customer/address' -import { GetCheckoutHook } from '../types/checkout' import { FulfillmentGroup } from '../types/cart' import { API_URL, OPENCOMMERCE_ANONYMOUS_CART_TOKEN_COOKIE } from '../const' import getAnonymousCartQuery from '../api/queries/get-anonymous-cart' import { normalizeCheckout } from '../utils/normalize' +import { GetCheckoutHook } from '@vercel/commerce/types/checkout' export default useCheckout as UseCheckout @@ -40,23 +40,26 @@ export const handler: SWRHook = { (group) => group.type === 'shipping' ) - const hasShippingMethods = - !!shippingTypeFulfillment?.availableFulfillmentOptions?.length - const shippingGroup = checkout.fulfillmentGroups.find( (group: FulfillmentGroup) => group?.type === 'shipping' ) - const totalDisplayAmount = + const shippingAmount = checkout.summary.fulfillmentTotal?.displayAmount || '0' return { hasPayment: true, - hasShippingMethods, - shippingGroup, + selectedShippingMethodId: + shippingGroup?.selectedFulfillmentOption?.fulfillmentMethod?._id, + shippingMethods: shippingGroup?.availableFulfillmentOptions + ?.filter((opt) => !!opt.fulfillmentMethod) + .map(({ fulfillmentMethod, price }) => ({ + name: fulfillmentMethod!.displayName, + id: fulfillmentMethod!._id, + fee: price.displayAmount, + })), hasShipping: false, addressId: 'addressId', - totalDisplayAmount, } } @@ -85,7 +88,7 @@ export const handler: SWRHook = { data: { ...response.data, hasShipping: hasEnteredAddress, - hasSelectedShippingMethod: !!shippingMethodId, + selectedShippingMethodId: shippingMethodId, }, submit: () => submit, isEmpty: response.data.lineItems?.length ?? 0, diff --git a/packages/opencommerce/src/customer/address/use-update-item.tsx b/packages/opencommerce/src/customer/address/use-update-item.tsx index 91ed494a3..38e487e55 100644 --- a/packages/opencommerce/src/customer/address/use-update-item.tsx +++ b/packages/opencommerce/src/customer/address/use-update-item.tsx @@ -28,7 +28,6 @@ export const handler: MutationHook = { input: { cartId, cartToken, - fulfillmentGroupId: item.fulfillmentGroupId, fulfillmentMethodId: item.shippingMethodId, }, }, @@ -44,15 +43,12 @@ export const handler: MutationHook = { return useCallback( async function updateItem(input) { const { id, ...rest } = input - const fulfillmentGroupId = - checkoutData?.shippingGroup?._id || 'groupId' await fetch({ - input: { item: { ...rest, fulfillmentGroupId }, itemId: id }, + input: { item: { ...rest }, itemId: id }, }) setAddressFields({ ...addressFields, shippingMethodId: rest.shippingMethodId, - fulfillmentGroupId, }) return null }, diff --git a/packages/opencommerce/src/types/checkout.ts b/packages/opencommerce/src/types/checkout.ts deleted file mode 100644 index d95d8cce4..000000000 --- a/packages/opencommerce/src/types/checkout.ts +++ /dev/null @@ -1,18 +0,0 @@ -export * from '@vercel/commerce/types/checkout' - -import { - GetCheckoutHook as CoreGetCheckoutHook, - Checkout, -} from '@vercel/commerce/types/checkout' -import { FulfillmentGroup } from './cart' - -export type GetCheckoutHook = Omit & { - data: - | (Checkout & { - hasShippingMethods?: boolean - hasSelectedShippingMethod?: boolean - totalDisplayAmount?: string - shippingGroup?: FulfillmentGroup - }) - | null -} diff --git a/packages/opencommerce/src/types/customer/address.ts b/packages/opencommerce/src/types/customer/address.ts index 7db1316a5..04bc6e964 100644 --- a/packages/opencommerce/src/types/customer/address.ts +++ b/packages/opencommerce/src/types/customer/address.ts @@ -4,7 +4,6 @@ export * from '@vercel/commerce/types/customer/address' export type AddressFields = Core.AddressFields & { shippingMethodId?: string - fulfillmentGroupId?: string } export type UpdateAddressItemHook = Omit< diff --git a/packages/saleor/src/checkout/use-checkout.tsx b/packages/saleor/src/checkout/use-checkout.tsx index cab52bb60..fbca6ed80 100644 --- a/packages/saleor/src/checkout/use-checkout.tsx +++ b/packages/saleor/src/checkout/use-checkout.tsx @@ -1,14 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { UseCheckout } from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/sfcc/src/checkout/use-checkout.tsx b/packages/sfcc/src/checkout/use-checkout.tsx index 76997be73..fbca6ed80 100644 --- a/packages/sfcc/src/checkout/use-checkout.tsx +++ b/packages/sfcc/src/checkout/use-checkout.tsx @@ -1,16 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { - UseCheckout, -} from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/shopify/src/checkout/use-checkout.tsx b/packages/shopify/src/checkout/use-checkout.tsx index 76997be73..fbca6ed80 100644 --- a/packages/shopify/src/checkout/use-checkout.tsx +++ b/packages/shopify/src/checkout/use-checkout.tsx @@ -1,16 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { - UseCheckout, -} from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/spree/src/checkout/use-checkout.tsx b/packages/spree/src/checkout/use-checkout.tsx index bd8e3ac75..fbca6ed80 100644 --- a/packages/spree/src/checkout/use-checkout.tsx +++ b/packages/spree/src/checkout/use-checkout.tsx @@ -1,19 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { - UseCheckout, -} from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - // Provide fetchOptions for SWR cache key - fetchOptions: { - // TODO: Revise url and query - url: 'checkout', - query: 'show', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/swell/src/checkout/use-checkout.tsx b/packages/swell/src/checkout/use-checkout.tsx index 76997be73..fbca6ed80 100644 --- a/packages/swell/src/checkout/use-checkout.tsx +++ b/packages/swell/src/checkout/use-checkout.tsx @@ -1,16 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { - UseCheckout, -} from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/packages/vendure/src/checkout/use-checkout.tsx b/packages/vendure/src/checkout/use-checkout.tsx index 76997be73..fbca6ed80 100644 --- a/packages/vendure/src/checkout/use-checkout.tsx +++ b/packages/vendure/src/checkout/use-checkout.tsx @@ -1,16 +1,2 @@ -import { SWRHook } from '@vercel/commerce/utils/types' -import useCheckout, { - UseCheckout, -} from '@vercel/commerce/checkout/use-checkout' - -export default useCheckout as UseCheckout - -export const handler: SWRHook = { - fetchOptions: { - query: '', - }, - async fetcher({ input, options, fetch }) {}, - useHook: - ({ useData }) => - async (input) => ({}), -} +export * from '@vercel/commerce/checkout/use-checkout' +export { default } from '@vercel/commerce/checkout/use-checkout' diff --git a/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx index a15d104e3..f4181e1c5 100644 --- a/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ b/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -74,12 +74,12 @@ const CheckoutSidebarView: FC = () => { onClick={() => setSidebarView('SHIPPING_VIEW')} /> - {checkoutData?.hasShippingMethods && ( + {checkoutData?.shippingMethods?.length ? ( setSidebarView('SHIPPING_METHOD_VIEW')} /> - )} + ) : null}
    {cartData!.lineItems.map((item: any) => ( @@ -106,10 +106,15 @@ const CheckoutSidebarView: FC = () => { Taxes Calculated at checkout - {checkoutData?.hasSelectedShippingMethod ? ( + {checkoutData?.selectedShippingMethodId ? (
  • Shipping - {checkoutData?.totalDisplayAmount} + + {checkoutData?.shippingMethods?.find( + (method) => + method.id === checkoutData.selectedShippingMethodId + )?.fee ?? 0} +
    • ) : (
  • diff --git a/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx b/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx index 147cec51a..c4f3e14a4 100644 --- a/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx +++ b/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx @@ -6,16 +6,6 @@ import { Button } from '@components/ui' import useCheckout from '@framework/checkout/use-checkout' import { useCheckoutContext } from '../context' -type FulfillmentOption = { - fulfillmentMethod?: { - _id: string - displayName: string - } - price: { - displayAmount: string - } -} - const ShippingMethod = () => { const { setSidebarView } = useUI() @@ -31,13 +21,15 @@ const ShippingMethod = () => { await updateShippingMethod({ id: cart!.id, ...addressFields, - ...(event.target.shippingMethod.value ? {shippingMethodId: event.target.shippingMethod.value} : {}) + ...(event.target.shippingMethod.value + ? { shippingMethodId: event.target.shippingMethod.value } + : {}), }) setSidebarView('CHECKOUT_VIEW') } - return checkoutData?.shippingGroup ? ( + return checkoutData?.shippingMethods ? (
    setSidebarView('CHECKOUT_VIEW')}>
    @@ -45,33 +37,26 @@ const ShippingMethod = () => { Shipping Methods
    - {checkoutData.shippingGroup.availableFulfillmentOptions?.map( - (option: FulfillmentOption) => ( -
    -
    - - - {option?.fulfillmentMethod?.displayName || - 'Shipping Method'} - -
    - {option?.price.displayAmount} -
    - ) - )} + {checkoutData.shippingMethods.map((option) => ( +
    +
    + + {option.name} +
    + {option.fee} +
    + ))}