diff --git a/.changeset/pretty-pumas-love.md b/.changeset/pretty-pumas-love.md new file mode 100644 index 00000000..5e177259 --- /dev/null +++ b/.changeset/pretty-pumas-love.md @@ -0,0 +1,5 @@ +--- +"@elasticpath/shopper-common": patch +--- + +Added support for non-image file types to product interfaces and response processing. diff --git a/packages/shopper-common/src/products/product.types.ts b/packages/shopper-common/src/products/product.types.ts index c7ed0fd7..6c4692ea 100644 --- a/packages/shopper-common/src/products/product.types.ts +++ b/packages/shopper-common/src/products/product.types.ts @@ -8,7 +8,8 @@ import type { MatrixObjectEntry } from "../shared/types/matrix-object-entry" export interface ProductBase { main_image: File | null - otherImages: File[] + otherImages: File[], + otherFiles?: File[] } export type VariationProduct = BaseProduct | ChildProduct diff --git a/packages/shopper-common/src/products/util/product-image-helpers.ts b/packages/shopper-common/src/products/util/product-image-helpers.ts index ea83ad3b..08465259 100644 --- a/packages/shopper-common/src/products/util/product-image-helpers.ts +++ b/packages/shopper-common/src/products/util/product-image-helpers.ts @@ -10,10 +10,6 @@ export function processImageFiles(files: File[], mainImageId?: string) { "image/svg+xml", ] - if (!mainImageId) { - return files - } - return files.filter( (fileEntry) => fileEntry.id !== mainImageId && diff --git a/packages/shopper-common/src/products/util/shopper-product-helpers.ts b/packages/shopper-common/src/products/util/shopper-product-helpers.ts index df4b7edc..5b315376 100644 --- a/packages/shopper-common/src/products/util/shopper-product-helpers.ts +++ b/packages/shopper-common/src/products/util/shopper-product-helpers.ts @@ -1,22 +1,47 @@ -import type { ShopperCatalogResource, ElasticPath } from "@elasticpath/js-sdk" -import { sortAlphabetically } from "./sort-alphabetically" +import type { + ElasticPath, + File, + ShopperCatalogResource, +} from "@elasticpath/js-sdk" import { ProductResponse } from "@elasticpath/js-sdk" import { BaseProduct, BaseProductResponse, + BundleProduct, BundleProductResponse, ChildProduct, ChildProductResponse, ShopperProduct, SimpleProduct, SimpleProductResponse, - BundleProduct, } from "../" +import { getFilesByIds, getProductById } from "../services/product" import { getProductMainImage, getProductOtherImageUrls, } from "./product-image-helpers" -import { getFilesByIds, getProductById } from "../services/product" +import { sortAlphabetically } from "./sort-alphabetically" + +function processOtherFiles( + files: File[], + imageFiles: File[], + mainImageId?: string, +) { + const imageFileIds = imageFiles.map((file) => file.id) + return files.filter( + (file) => !imageFileIds.includes(file.id) && file.id !== mainImageId, + ) +} + +function processFiles(files: File[] | undefined, mainImage?: File) { + const otherImages = getProductOtherImageUrls(files, mainImage) + const otherFiles = processOtherFiles(files ?? [], otherImages, mainImage?.id) + + return { + otherImages, + otherFiles, + } +} export async function createShopperBundleProduct( productResource: ShopperCatalogResource, @@ -35,14 +60,17 @@ export async function createShopperBundleProduct( client, ) + const processedFiles = processFiles( + productResource.included?.files, + productResource.included?.main_images?.[0], + ) + return { kind: "bundle-product", response: productResource.data, main_image: getProductMainImage(productResource.included?.main_images), - otherImages: getProductOtherImageUrls( - productResource.included?.files, - productResource.included?.main_images?.[0], - ), + otherImages: processedFiles.otherImages, + otherFiles: processedFiles.otherFiles, componentProductResponses: componentProducts, componentProductImages: mainProductComponentImages, } @@ -55,14 +83,16 @@ function isString(x: any): x is string { export function createShopperSimpleProduct( productResource: ShopperCatalogResource, ): SimpleProduct { + const processedFiles = processFiles( + productResource.included?.files, + productResource.included?.main_images?.[0], + ) return { kind: "simple-product", response: productResource.data, main_image: getProductMainImage(productResource.included?.main_images), - otherImages: getProductOtherImageUrls( - productResource.included?.files, - productResource.included?.main_images?.[0], - ), + otherImages: processedFiles.otherImages, + otherFiles: processedFiles.otherFiles, } } @@ -91,6 +121,11 @@ export async function createShopperChildProduct( ) } + const processedFiles = processFiles( + productResources.included?.files, + productResources.included?.main_images?.[0], + ) + return { kind: "child-product", response: productResources.data, @@ -99,10 +134,8 @@ export async function createShopperChildProduct( main_image: getProductMainImage(baseProduct.included?.main_images), }, main_image: getProductMainImage(productResources.included?.main_images), - otherImages: getProductOtherImageUrls( - productResources.included?.files, - productResources.included?.main_images?.[0], - ), + otherImages: processedFiles.otherImages, + otherFiles: processedFiles.otherFiles, variationsMatrix: variation_matrix, variations: variations.sort(sortAlphabetically), } @@ -124,17 +157,20 @@ export function createShopperBaseProduct( ) } - return { - kind: "base-product", - response: productResource.data, - main_image: getProductMainImage(productResource.included?.main_images), - otherImages: getProductOtherImageUrls( - productResource.included?.files, - productResource.included?.main_images?.[0], - ), - variationsMatrix: variation_matrix, - variations: variations.sort(sortAlphabetically), - } + const processedFiles = processFiles( + productResource.included?.files, + productResource.included?.main_images?.[0], + ) + + return { + kind: "base-product", + response: productResource.data, + main_image: getProductMainImage(productResource.included?.main_images), + otherImages: processedFiles.otherImages, + otherFiles: processedFiles.otherFiles, + variationsMatrix: variation_matrix, + variations: variations.sort(sortAlphabetically), + } } export function isBundleProduct(