diff --git a/.changeset/heavy-hotels-lie.md b/.changeset/heavy-hotels-lie.md new file mode 100644 index 0000000000..2323f83403 --- /dev/null +++ b/.changeset/heavy-hotels-lie.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-makeswift": patch +--- + +Fix sort order of `additionalProducts` prop in `ProductsCarousel` Makeswift component. diff --git a/core/lib/makeswift/utils/use-bc-product-to-vibes-product/use-bc-product-to-vibes-product.ts b/core/lib/makeswift/utils/use-bc-product-to-vibes-product/use-bc-product-to-vibes-product.ts index f6feb81b4d..d5c52ab39e 100644 --- a/core/lib/makeswift/utils/use-bc-product-to-vibes-product/use-bc-product-to-vibes-product.ts +++ b/core/lib/makeswift/utils/use-bc-product-to-vibes-product/use-bc-product-to-vibes-product.ts @@ -32,6 +32,8 @@ export const BcProductSchema = z.object({ export type BcProductSchema = z.infer; +export type { Product }; + export function useBcProductToVibesProduct(): (product: BcProductSchema) => Product { const format = useFormatter(); diff --git a/core/lib/makeswift/utils/use-products.ts b/core/lib/makeswift/utils/use-products.ts index c717289276..7b16bc24bb 100644 --- a/core/lib/makeswift/utils/use-products.ts +++ b/core/lib/makeswift/utils/use-products.ts @@ -5,6 +5,7 @@ import { z } from 'zod'; import { BcProductSchema, + Product, useBcProductToVibesProduct, } from './use-bc-product-to-vibes-product/use-bc-product-to-vibes-product'; @@ -23,7 +24,10 @@ interface Props { additionalProductIds: string[]; } -export function useProducts({ collection, collectionLimit = 20, additionalProductIds }: Props) { +export function useProducts({ collection, collectionLimit = 20, additionalProductIds }: Props): { + products: Product[] | null; + isLoading: boolean; +} { const bcProductToVibesProduct = useBcProductToVibesProduct(); const locale = useLocale(); @@ -43,13 +47,17 @@ export function useProducts({ collection, collectionLimit = 20, additionalProduc additionalProductIds.length ? additionalProductsUrl : null, fetcher, ); + const additionalProducts = useMemo( + () => + additionalProductIds + .map((id) => additionalData?.products.find((product) => product.entityId.toString() === id)) + .filter((product) => product != null), + [additionalData, additionalProductIds], + ); const combinedProducts = useMemo( - () => [ - ...(collectionData?.products.slice(0, collectionLimit) ?? []), - ...(additionalData?.products ?? []), - ], - [collectionData, additionalData, collectionLimit], + () => [...(collectionData?.products.slice(0, collectionLimit) ?? []), ...additionalProducts], + [collectionData, additionalProducts, collectionLimit], ); const isLoading = isCollectionLoading || isAdditionalLoading;