@atomic-solutions/woocommerce-react 0.6.1 → 0.7.0

package/dist/index.d.cts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import react__default from 'react';
 import { WooCommerceClient } from '@atomic-solutions/woocommerce-api-client';
-export { Address, AddressFormMessages, AddressFormValues, BillingAddress, BillingAddressFormValues, Cart, CartHeadersAdapter, CartItem, Checkout, OrderStatus, Product, ProductCategory, ProductImage, ProductParams, StoreApiOrder, addressSchema, checkoutSchema, makeAddressFormSchema, makeBillingAddressFormSchema } from '@atomic-solutions/woocommerce-api-client';
-import { Q as QueryKeys, W as WooCommerceEventHandler, S as StoreLocale, a as StoreValidationResult, R as RateLimitConfig, b as WooCommerceEventType } from './types-Dnq60zh-.cjs';
-export { C as CartCouponAppliedEvent, c as CartCouponRemovedEvent, d as CartCustomerUpdatedEvent, e as CartItemAddedEvent, f as CartItemRemovedEvent, g as CartItemUpdatedEvent, h as CartShippingSelectedEvent, i as CheckoutProcessedEvent, D as DEFAULT_STORE_CONFIG, O as OrderFetchedEvent, j as StoreConfig, k as StoreContextValue, l as StoreFeatures, m as StoreGuardrails, n as StoreTheme, o as WooCommerceEvent, p as createQueryKeys } from './types-Dnq60zh-.cjs';
+export { Address, AddressFormMessages, AddressFormValues, BillingAddress, BillingAddressFormValues, Cart, CartHeadersAdapter, CartItem, Checkout, OrderStatus, Product, ProductCategory, ProductImage, ProductParams, ProductTag, ProductTagsParams, StoreApiOrder, addressSchema, checkoutSchema, makeAddressFormSchema, makeBillingAddressFormSchema } from '@atomic-solutions/woocommerce-api-client';
+import { Q as QueryKeys, W as WooCommerceEventHandler, S as StoreLocale, a as StoreValidationResult, R as RateLimitConfig, b as WooCommerceEventType } from './types-4MW3Y__g.cjs';
+export { C as CartCouponAppliedEvent, c as CartCouponRemovedEvent, d as CartCustomerUpdatedEvent, e as CartItemAddedEvent, f as CartItemRemovedEvent, g as CartItemUpdatedEvent, h as CartShippingSelectedEvent, i as CheckoutProcessedEvent, D as DEFAULT_STORE_CONFIG, O as OrderFetchedEvent, j as StoreConfig, k as StoreContextValue, l as StoreFeatures, m as StoreGuardrails, n as StoreTheme, o as WooCommerceEvent, p as createQueryKeys } from './types-4MW3Y__g.cjs';
 export { WooCommerceStoreContext, WooCommerceStoreProvider, WooCommerceStoreProviderProps } from './provider/index.cjs';
-export { A as AppliedCoupon, C as CartTotals, I as ImageSize, P as PLACEHOLDER_IMAGE_URL, a as PaymentMethod, b as ProcessedCartItem, c as ProcessedCategory, d as ProcessedOrderDetails, e as ProcessedOrderLineItem, f as ProcessedProduct, g as ProcessedProductDetails, h as ProductCartState, i as ProductCategoryTreeNode, R as ReorderInputItem, j as ReorderItemView, k as ReorderUnavailableReason, S as ShippingRate, l as StockDisplayConfig, m as StockStatus, U as UnavailableReason, n as UseCartViewOptions, o as UseCartViewReturn, p as UseOrderViewOptions, q as UseOrderViewReturn, r as UseProductViewOptions, s as UseProductViewReturn, t as UseProductsFeedOptions, u as UseProductsFeedReturn, v as UseReorderViewOptions, w as UseReorderViewReturn, x as canAddToCart, y as getAllImageUrls, z as getImageUrl, B as getImageUrlOrPlaceholder, D as getMaxAddToCartQuantity, E as getOrderStatusLabel, F as getPrimaryImage, G as getSizedImageUrl, H as getStockSeverity, J as getStockStatusText, K as isLowStock, L as isPurchasable, M as preloadImage, N as preloadImages, O as unavailableReason, Q as useAddManyToCart, T as useAddToCart, V as useApplyCoupon, W as useCart, X as useCartView, Y as useCheckout, Z as useInfiniteProducts, _ as useOrder, $ as useOrderView, a0 as useProcessCheckout, a1 as useProduct, a2 as useProductCategories, a3 as useProductCategoryTree, a4 as useProductView, a5 as useProducts, a6 as useProductsFeed, a7 as useRemoveCoupon, a8 as useRemoveFromCart, a9 as useReorderView, aa as useSelectShippingRate, ab as useStore, ac as useStoreFeatures, ad as useStoreLocale, ae as useStoreTheme, af as useUpdateCartItem, ag as useUpdateCustomer, ah as useWooCommerceClient, ai as useWooCommerceQueryKeys } from './index-DEvJWFSF.cjs';
+export { A as AppliedCoupon, C as CartTotals, I as ImageSize, P as PLACEHOLDER_IMAGE_URL, a as PaymentMethod, b as ProcessedCartItem, c as ProcessedCategory, d as ProcessedOrderDetails, e as ProcessedOrderLineItem, f as ProcessedProduct, g as ProcessedProductDetails, h as ProductCartState, i as ProductCategoryTreeNode, R as ReorderInputItem, j as ReorderItemView, k as ReorderUnavailableReason, S as ShippingRate, l as StockDisplayConfig, m as StockStatus, U as UnavailableReason, n as UseCartViewOptions, o as UseCartViewReturn, p as UseOrderViewOptions, q as UseOrderViewReturn, r as UseProductViewOptions, s as UseProductViewReturn, t as UseProductsFeedOptions, u as UseProductsFeedReturn, v as UseReorderViewOptions, w as UseReorderViewReturn, x as canAddToCart, y as getAllImageUrls, z as getImageUrl, B as getImageUrlOrPlaceholder, D as getMaxAddToCartQuantity, E as getOrderStatusLabel, F as getPrimaryImage, G as getSizedImageUrl, H as getStockSeverity, J as getStockStatusText, K as isLowStock, L as isPurchasable, M as preloadImage, N as preloadImages, O as unavailableReason, Q as useAddManyToCart, T as useAddToCart, V as useApplyCoupon, W as useCart, X as useCartView, Y as useCheckout, Z as useInfiniteProducts, _ as useOrder, $ as useOrderView, a0 as useProcessCheckout, a1 as useProduct, a2 as useProductCategories, a3 as useProductCategoryTree, a4 as useProductTags, a5 as useProductView, a6 as useProducts, a7 as useProductsFeed, a8 as useRemoveCoupon, a9 as useRemoveFromCart, aa as useReorderView, ab as useSelectShippingRate, ac as useStore, ad as useStoreFeatures, ae as useStoreLocale, af as useStoreTheme, ag as useUpdateCartItem, ah as useUpdateCustomer, ai as useWooCommerceClient, aj as useWooCommerceQueryKeys } from './index-UkshfFwm.cjs';
 import 'react/jsx-runtime';
 import '@tanstack/react-query';
 

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import react__default from 'react';
 import { WooCommerceClient } from '@atomic-solutions/woocommerce-api-client';
-export { Address, AddressFormMessages, AddressFormValues, BillingAddress, BillingAddressFormValues, Cart, CartHeadersAdapter, CartItem, Checkout, OrderStatus, Product, ProductCategory, ProductImage, ProductParams, StoreApiOrder, addressSchema, checkoutSchema, makeAddressFormSchema, makeBillingAddressFormSchema } from '@atomic-solutions/woocommerce-api-client';
-import { Q as QueryKeys, W as WooCommerceEventHandler, S as StoreLocale, a as StoreValidationResult, R as RateLimitConfig, b as WooCommerceEventType } from './types-Dnq60zh-.js';
-export { C as CartCouponAppliedEvent, c as CartCouponRemovedEvent, d as CartCustomerUpdatedEvent, e as CartItemAddedEvent, f as CartItemRemovedEvent, g as CartItemUpdatedEvent, h as CartShippingSelectedEvent, i as CheckoutProcessedEvent, D as DEFAULT_STORE_CONFIG, O as OrderFetchedEvent, j as StoreConfig, k as StoreContextValue, l as StoreFeatures, m as StoreGuardrails, n as StoreTheme, o as WooCommerceEvent, p as createQueryKeys } from './types-Dnq60zh-.js';
+export { Address, AddressFormMessages, AddressFormValues, BillingAddress, BillingAddressFormValues, Cart, CartHeadersAdapter, CartItem, Checkout, OrderStatus, Product, ProductCategory, ProductImage, ProductParams, ProductTag, ProductTagsParams, StoreApiOrder, addressSchema, checkoutSchema, makeAddressFormSchema, makeBillingAddressFormSchema } from '@atomic-solutions/woocommerce-api-client';
+import { Q as QueryKeys, W as WooCommerceEventHandler, S as StoreLocale, a as StoreValidationResult, R as RateLimitConfig, b as WooCommerceEventType } from './types-4MW3Y__g.js';
+export { C as CartCouponAppliedEvent, c as CartCouponRemovedEvent, d as CartCustomerUpdatedEvent, e as CartItemAddedEvent, f as CartItemRemovedEvent, g as CartItemUpdatedEvent, h as CartShippingSelectedEvent, i as CheckoutProcessedEvent, D as DEFAULT_STORE_CONFIG, O as OrderFetchedEvent, j as StoreConfig, k as StoreContextValue, l as StoreFeatures, m as StoreGuardrails, n as StoreTheme, o as WooCommerceEvent, p as createQueryKeys } from './types-4MW3Y__g.js';
 export { WooCommerceStoreContext, WooCommerceStoreProvider, WooCommerceStoreProviderProps } from './provider/index.js';
-export { A as AppliedCoupon, C as CartTotals, I as ImageSize, P as PLACEHOLDER_IMAGE_URL, a as PaymentMethod, b as ProcessedCartItem, c as ProcessedCategory, d as ProcessedOrderDetails, e as ProcessedOrderLineItem, f as ProcessedProduct, g as ProcessedProductDetails, h as ProductCartState, i as ProductCategoryTreeNode, R as ReorderInputItem, j as ReorderItemView, k as ReorderUnavailableReason, S as ShippingRate, l as StockDisplayConfig, m as StockStatus, U as UnavailableReason, n as UseCartViewOptions, o as UseCartViewReturn, p as UseOrderViewOptions, q as UseOrderViewReturn, r as UseProductViewOptions, s as UseProductViewReturn, t as UseProductsFeedOptions, u as UseProductsFeedReturn, v as UseReorderViewOptions, w as UseReorderViewReturn, x as canAddToCart, y as getAllImageUrls, z as getImageUrl, B as getImageUrlOrPlaceholder, D as getMaxAddToCartQuantity, E as getOrderStatusLabel, F as getPrimaryImage, G as getSizedImageUrl, H as getStockSeverity, J as getStockStatusText, K as isLowStock, L as isPurchasable, M as preloadImage, N as preloadImages, O as unavailableReason, Q as useAddManyToCart, T as useAddToCart, V as useApplyCoupon, W as useCart, X as useCartView, Y as useCheckout, Z as useInfiniteProducts, _ as useOrder, $ as useOrderView, a0 as useProcessCheckout, a1 as useProduct, a2 as useProductCategories, a3 as useProductCategoryTree, a4 as useProductView, a5 as useProducts, a6 as useProductsFeed, a7 as useRemoveCoupon, a8 as useRemoveFromCart, a9 as useReorderView, aa as useSelectShippingRate, ab as useStore, ac as useStoreFeatures, ad as useStoreLocale, ae as useStoreTheme, af as useUpdateCartItem, ag as useUpdateCustomer, ah as useWooCommerceClient, ai as useWooCommerceQueryKeys } from './index-Dmlapl9c.js';
+export { A as AppliedCoupon, C as CartTotals, I as ImageSize, P as PLACEHOLDER_IMAGE_URL, a as PaymentMethod, b as ProcessedCartItem, c as ProcessedCategory, d as ProcessedOrderDetails, e as ProcessedOrderLineItem, f as ProcessedProduct, g as ProcessedProductDetails, h as ProductCartState, i as ProductCategoryTreeNode, R as ReorderInputItem, j as ReorderItemView, k as ReorderUnavailableReason, S as ShippingRate, l as StockDisplayConfig, m as StockStatus, U as UnavailableReason, n as UseCartViewOptions, o as UseCartViewReturn, p as UseOrderViewOptions, q as UseOrderViewReturn, r as UseProductViewOptions, s as UseProductViewReturn, t as UseProductsFeedOptions, u as UseProductsFeedReturn, v as UseReorderViewOptions, w as UseReorderViewReturn, x as canAddToCart, y as getAllImageUrls, z as getImageUrl, B as getImageUrlOrPlaceholder, D as getMaxAddToCartQuantity, E as getOrderStatusLabel, F as getPrimaryImage, G as getSizedImageUrl, H as getStockSeverity, J as getStockStatusText, K as isLowStock, L as isPurchasable, M as preloadImage, N as preloadImages, O as unavailableReason, Q as useAddManyToCart, T as useAddToCart, V as useApplyCoupon, W as useCart, X as useCartView, Y as useCheckout, Z as useInfiniteProducts, _ as useOrder, $ as useOrderView, a0 as useProcessCheckout, a1 as useProduct, a2 as useProductCategories, a3 as useProductCategoryTree, a4 as useProductTags, a5 as useProductView, a6 as useProducts, a7 as useProductsFeed, a8 as useRemoveCoupon, a9 as useRemoveFromCart, aa as useReorderView, ab as useSelectShippingRate, ac as useStore, ad as useStoreFeatures, ae as useStoreLocale, af as useStoreTheme, ag as useUpdateCartItem, ah as useUpdateCustomer, ai as useWooCommerceClient, aj as useWooCommerceQueryKeys } from './index-BmWcF7aq.js';
 import 'react/jsx-runtime';
 import '@tanstack/react-query';
 

package/dist/index.js

@@ -477,6 +477,8 @@ var StaleTimes = {
   product: STALE_TIME_SHORT,
   /** Product categories - always fresh */
   categories: STALE_TIME_NONE,
+  /** Product tags - names rarely change, 1 hour */
+  tags: STALE_TIME_LONG,
   /** Orders - always fresh */
   orders: STALE_TIME_NONE,
   /** Default for infinite queries - 1 hour */
@@ -574,6 +576,16 @@ var processCategoriesToTree = (data) => {
   });
   return rootCategories?.map(processCategory) ?? [];
 };
+var useProductTags = (params, options) => {
+  const client = useWooCommerceClient();
+  const queryKeys = useWooCommerceQueryKeys();
+  return useQuery({
+    queryKey: queryKeys.products.tags(params),
+    queryFn: () => client.products.tags(params),
+    staleTime: StaleTimes.tags,
+    ...options
+  });
+};
 var useProductCategoryTree = () => {
   const query = useProductCategories();
   const flatData = query.data ?? [];
@@ -894,7 +906,9 @@ var createQueryKeys = (prefix = ["woocommerce"]) => ({
     list: (params) => [...prefix, "products", "list", params],
     details: () => [...prefix, "products", "detail"],
     detail: (id) => [...prefix, "products", "detail", id],
-    categories: () => [...prefix, "products", "categories"]
+    categories: () => [...prefix, "products", "categories"],
+    // Params are in the key, so each set of tag ids is cached apart.
+    tags: (params) => [...prefix, "products", "tags", params]
   },
   // Cart
   cart: {
@@ -978,64 +992,6 @@ function useStoreTheme(options = {}) {
   };
 }
 
-// src/utils/image.ts
-var SIZE_SUFFIXES = {
-  thumbnail: "-150x150",
-  medium: "-300x300",
-  large: "-1024x1024",
-  full: ""
-};
-function getPrimaryImage(images) {
-  if (!images || images.length === 0) {
-    return void 0;
-  }
-  return images[0];
-}
-function getImageUrl(images, size = "full", fallback) {
-  const primary = getPrimaryImage(images);
-  if (!primary) {
-    return fallback;
-  }
-  return getSizedImageUrl(primary.src, size);
-}
-function getSizedImageUrl(url, size = "full") {
-  if (!url || size === "full") {
-    return url;
-  }
-  const hasSize = Object.values(SIZE_SUFFIXES).some((suffix2) => suffix2 && url.includes(suffix2));
-  if (hasSize) {
-    let result = url;
-    Object.values(SIZE_SUFFIXES).forEach((suffix2) => {
-      if (suffix2) {
-        result = result.replace(suffix2, SIZE_SUFFIXES[size]);
-      }
-    });
-    return result;
-  }
-  const suffix = SIZE_SUFFIXES[size];
-  const lastDot = url.lastIndexOf(".");
-  if (lastDot === -1) {
-    return url;
-  }
-  return `${url.slice(0, lastDot)}${suffix}${url.slice(lastDot)}`;
-}
-function getAllImageUrls(images, size = "full") {
-  if (!images || images.length === 0) {
-    return [];
-  }
-  return images.map((img) => getSizedImageUrl(img.src, size));
-}
-var PLACEHOLDER_IMAGE_URL = "https://via.placeholder.com/300x300.png?text=No+Image";
-function getImageUrlOrPlaceholder(images, size = "medium") {
-  return getImageUrl(images, size, PLACEHOLDER_IMAGE_URL) ?? PLACEHOLDER_IMAGE_URL;
-}
-async function preloadImage(_url) {
-  return Promise.resolve();
-}
-async function preloadImages(urls) {
-  await Promise.all(urls.map(preloadImage));
-}
-
 // src/utils/price.ts
 var DEFAULT_LOCALE = {
   localeTag: "en-US",
@@ -1181,14 +1137,84 @@ function parseWooCommercePrice(priceString) {
   return parseFloat(cleaned.replace(/,/g, ""));
 }
 
+// src/utils/image.ts
+var SIZE_SUFFIXES = {
+  thumbnail: "-150x150",
+  medium: "-300x300",
+  large: "-1024x1024",
+  full: ""
+};
+function getPrimaryImage(images) {
+  if (!images || images.length === 0) {
+    return void 0;
+  }
+  return images[0];
+}
+function getImageUrl(images, size = "full", fallback) {
+  const primary = getPrimaryImage(images);
+  if (!primary) {
+    return fallback;
+  }
+  return getSizedImageUrl(primary.src, size);
+}
+function getSizedImageUrl(url, size = "full") {
+  if (!url || size === "full") {
+    return url;
+  }
+  const hasSize = Object.values(SIZE_SUFFIXES).some((suffix2) => suffix2 && url.includes(suffix2));
+  if (hasSize) {
+    let result = url;
+    Object.values(SIZE_SUFFIXES).forEach((suffix2) => {
+      if (suffix2) {
+        result = result.replace(suffix2, SIZE_SUFFIXES[size]);
+      }
+    });
+    return result;
+  }
+  const suffix = SIZE_SUFFIXES[size];
+  const lastDot = url.lastIndexOf(".");
+  if (lastDot === -1) {
+    return url;
+  }
+  return `${url.slice(0, lastDot)}${suffix}${url.slice(lastDot)}`;
+}
+function getAllImageUrls(images, size = "full") {
+  if (!images || images.length === 0) {
+    return [];
+  }
+  return images.map((img) => getSizedImageUrl(img.src, size));
+}
+var PLACEHOLDER_IMAGE_URL = "https://via.placeholder.com/300x300.png?text=No+Image";
+function getImageUrlOrPlaceholder(images, size = "medium") {
+  return getImageUrl(images, size, PLACEHOLDER_IMAGE_URL) ?? PLACEHOLDER_IMAGE_URL;
+}
+async function preloadImage(_url) {
+  return Promise.resolve();
+}
+async function preloadImages(urls) {
+  await Promise.all(urls.map(preloadImage));
+}
+
+// src/hooks/useProcessedImageUrl.ts
+var useProcessedImageUrl = (imageSize, fallbackOverride) => {
+  const config = useContext(WooCommerceStoreContext)?.config;
+  const transformer = config?.imageUrlTransformer;
+  const fallbackImageUrl = fallbackOverride ?? config?.fallbackImageUrl;
+  return useCallback(
+    (images) => {
+      const baseUrl = getImageUrl(images, imageSize, fallbackImageUrl);
+      return baseUrl && transformer ? transformer(baseUrl, imageSize) : baseUrl;
+    },
+    [imageSize, fallbackImageUrl, transformer]
+  );
+};
+
 // src/hooks/useProductsFeed.ts
 function useProductsFeed(options = {}) {
   const { params, imageSize = "medium" } = options;
   const storeContext = useContext(WooCommerceStoreContext);
   const storeConfig = storeContext?.config;
   const localeTag = options.localeTag ?? storeConfig?.locale?.localeTag ?? DEFAULT_STORE_CONFIG.locale.localeTag;
-  const fallbackImageUrl = options.fallbackImageUrl ?? storeConfig?.fallbackImageUrl;
-  const imageUrlTransformer = storeConfig?.imageUrlTransformer;
   const {
     data: productsData,
     isLoading,
@@ -1200,16 +1226,7 @@ function useProductsFeed(options = {}) {
     isRefetching
   } = useInfiniteProducts(params);
   const { treeData: categoryTree = [], findById } = useProductCategoryTree();
-  const getProcessedImageUrl = useCallback(
-    (images) => {
-      const baseUrl = getImageUrl(images, imageSize, fallbackImageUrl);
-      if (baseUrl && imageUrlTransformer) {
-        return imageUrlTransformer(baseUrl, imageSize);
-      }
-      return baseUrl;
-    },
-    [imageSize, fallbackImageUrl, imageUrlTransformer]
-  );
+  const getProcessedImageUrl = useProcessedImageUrl(imageSize, options.fallbackImageUrl);
   const products = useMemo(() => {
     if (!productsData) return [];
     const productList = Array.isArray(productsData) ? productsData : [];
@@ -1347,7 +1364,6 @@ function useProductView(options) {
   const storeContext = useContext(WooCommerceStoreContext);
   const storeConfig = storeContext?.config;
   const localeTag = options.localeTag ?? storeConfig?.locale?.localeTag ?? DEFAULT_STORE_CONFIG.locale.localeTag;
-  const fallbackImageUrl = options.fallbackImageUrl ?? storeConfig?.fallbackImageUrl;
   const imageUrlTransformer = storeConfig?.imageUrlTransformer;
   const [draftQuantity, setDraftQuantity] = useState(1);
   const { data: productData, isLoading, error, refetch } = useProduct(productId);
@@ -1355,6 +1371,7 @@ function useProductView(options) {
   const addToCartMutation = useAddToCart();
   const removeFromCartMutation = useRemoveFromCart();
   const updateCartMutation = useUpdateCartItem();
+  const getProcessedImageUrl = useProcessedImageUrl(imageSize, options.fallbackImageUrl);
   const processImageUrl = useCallback(
     (url) => {
       if (!url) return url;
@@ -1370,7 +1387,6 @@ function useProductView(options) {
     const currencyCode = productData.prices?.currency_code;
     const stockStatus = productData.is_on_backorder ? "onbackorder" : productData.is_in_stock ? "instock" : "outofstock";
     const lowStockRemaining = productData.low_stock_remaining;
-    const baseImageUrl = getImageUrl(productData.images, imageSize, fallbackImageUrl);
     const baseImageUrls = getAllImageUrls(productData.images, imageSize);
     return {
       id: productData.id,
@@ -1380,7 +1396,7 @@ function useProductView(options) {
       description: productData.description,
       shortDescription: productData.short_description,
       sku: productData.sku,
-      imageUrl: processImageUrl(baseImageUrl),
+      imageUrl: getProcessedImageUrl(productData.images),
       imageUrls: baseImageUrls.map((url) => processImageUrl(url) ?? url),
       price: formatStoreApiPriceIntl(productData.prices?.price, currencyCode, localeTag),
       regularPrice: formatStoreApiPriceIntl(
@@ -1410,7 +1426,7 @@ function useProductView(options) {
       minQuantity: productData.add_to_cart?.minimum ?? 1,
       raw: productData
     };
-  }, [productData, localeTag, fallbackImageUrl, imageSize, lowStockThreshold, processImageUrl]);
+  }, [productData, localeTag, imageSize, lowStockThreshold, getProcessedImageUrl, processImageUrl]);
   const cartItem = useMemo(() => {
     return cartData?.items.find((item) => item.id === productId);
   }, [cartData?.items, productId]);
@@ -1493,24 +1509,13 @@ function useCartView(options = {}) {
   const storeContext = useContext(WooCommerceStoreContext);
   const storeConfig = storeContext?.config;
   const localeTag = options.localeTag ?? storeConfig?.locale?.localeTag ?? DEFAULT_STORE_CONFIG.locale.localeTag;
-  const fallbackImageUrl = options.fallbackImageUrl ?? storeConfig?.fallbackImageUrl;
-  const imageUrlTransformer = storeConfig?.imageUrlTransformer;
   const { data: cartData, isLoading, error, refetch } = useCart();
   const updateItemMutation = useUpdateCartItem();
   const removeItemMutation = useRemoveFromCart();
   const applyCouponMutation = useApplyCoupon();
   const removeCouponMutation = useRemoveCoupon();
   const selectShippingMutation = useSelectShippingRate();
-  const getProcessedImageUrl = useCallback(
-    (images) => {
-      const baseUrl = getImageUrl(images, imageSize, fallbackImageUrl);
-      if (baseUrl && imageUrlTransformer) {
-        return imageUrlTransformer(baseUrl, imageSize);
-      }
-      return baseUrl;
-    },
-    [imageSize, fallbackImageUrl, imageUrlTransformer]
-  );
+  const getProcessedImageUrl = useProcessedImageUrl(imageSize, options.fallbackImageUrl);
   const items = useMemo(() => {
     if (!cartData?.items) return [];
     const currencyCode = cartData.totals.currency_code;
@@ -1656,8 +1661,6 @@ function useReorderView(items, options = {}) {
   const storeContext = useContext(WooCommerceStoreContext);
   const storeConfig = storeContext?.config;
   const localeTag = options.localeTag ?? storeConfig?.locale?.localeTag ?? DEFAULT_STORE_CONFIG.locale.localeTag;
-  const fallbackImageUrl = options.fallbackImageUrl ?? storeConfig?.fallbackImageUrl;
-  const imageUrlTransformer = storeConfig?.imageUrlTransformer;
   const productIds = useMemo(() => [...new Set(items.map((item) => item.productId))], [items]);
   const {
     data: productsPage,
@@ -1668,16 +1671,7 @@ function useReorderView(items, options = {}) {
     { enabled: productIds.length > 0 }
   );
   const { data: cart } = useCart();
-  const getProcessedImageUrl = useCallback(
-    (images) => {
-      const baseUrl = getImageUrl(images, imageSize, fallbackImageUrl);
-      if (baseUrl && imageUrlTransformer) {
-        return imageUrlTransformer(baseUrl, imageSize);
-      }
-      return baseUrl;
-    },
-    [imageSize, fallbackImageUrl, imageUrlTransformer]
-  );
+  const getProcessedImageUrl = useProcessedImageUrl(imageSize, options.fallbackImageUrl);
   const views = useMemo(() => {
     const products = new Map((productsPage?.data ?? []).map((product) => [product.id, product]));
     return items.map((item) => {
@@ -1759,6 +1753,8 @@ function useOrderView(input, options = {}) {
   const storeContext = useContext(WooCommerceStoreContext);
   const storeConfig = storeContext?.config;
   const localeTag = options.localeTag ?? storeConfig?.locale?.localeTag ?? DEFAULT_STORE_CONFIG.locale.localeTag;
+  const { imageSize = "thumbnail" } = options;
+  const getProcessedImageUrl = useProcessedImageUrl(imageSize, options.fallbackImageUrl);
   const { data: rawOrder, isLoading, error } = useOrder(input);
   const order = useMemo(() => {
     if (!rawOrder) return void 0;
@@ -1769,7 +1765,7 @@ function useOrderView(input, options = {}) {
       quantity: item.quantity,
       price: formatStoreApiPriceIntl(item.prices.price, currencyCode, localeTag),
       total: formatStoreApiPriceIntl(item.totals.line_total, currencyCode, localeTag),
-      imageUrl: item.images?.[0]?.src
+      imageUrl: getProcessedImageUrl(item.images)
     }));
     const status = rawOrder.status;
     return {
@@ -1784,7 +1780,7 @@ function useOrderView(input, options = {}) {
       paymentMethod: rawOrder.payment_method ?? "",
       raw: rawOrder
     };
-  }, [rawOrder, localeTag]);
+  }, [rawOrder, localeTag, getProcessedImageUrl]);
   return {
     order,
     isLoading,
@@ -1859,6 +1855,6 @@ function createAnalyticsHandler(provider) {
   };
 }
 
-export { DEFAULT_STORE_CONFIG, PLACEHOLDER_IMAGE_URL, RateLimiter, WooCommerceContext, WooCommerceProvider, WooCommerceStoreContext, WooCommerceStoreProvider, calculateDiscount, canAddToCart, composeHandlers, configureGlobalRateLimiter, createAnalyticsHandler, createQueryKeys, formatDiscountBadge, formatPrice, formatPriceRange, formatStoreApiPrice, formatStoreApiPriceIntl, getAllImageUrls, getBaseUrl, getCurrencySymbol, getGlobalRateLimiter, getImageUrl, getImageUrlOrPlaceholder, getMaxAddToCartQuantity, getOrderStatusLabel, getPrimaryImage, getSizedImageUrl, getStockSeverity, getStockStatusText, isLowStock, isPurchasable, isValidStoreUrlFormat, normalizeStoreUrl, parseWooCommercePrice, preloadImage, preloadImages, resetGlobalRateLimiter, unavailableReason, useAddManyToCart, useAddToCart, useApplyCoupon, useCart, useCartView, useCheckout, useInfiniteProducts, useOrder, useOrderView, useProcessCheckout, useProduct, useProductCategories, useProductCategoryTree, useProductView, useProducts, useProductsFeed, useRemoveCoupon, useRemoveFromCart, useReorderView, useSelectShippingRate, useStore, useStoreFeatures, useStoreLocale, useStoreTheme, useUpdateCartItem, useUpdateCustomer, useWooCommerceClient, useWooCommerceQueryKeys, validateWooCommerceStore };
+export { DEFAULT_STORE_CONFIG, PLACEHOLDER_IMAGE_URL, RateLimiter, WooCommerceContext, WooCommerceProvider, WooCommerceStoreContext, WooCommerceStoreProvider, calculateDiscount, canAddToCart, composeHandlers, configureGlobalRateLimiter, createAnalyticsHandler, createQueryKeys, formatDiscountBadge, formatPrice, formatPriceRange, formatStoreApiPrice, formatStoreApiPriceIntl, getAllImageUrls, getBaseUrl, getCurrencySymbol, getGlobalRateLimiter, getImageUrl, getImageUrlOrPlaceholder, getMaxAddToCartQuantity, getOrderStatusLabel, getPrimaryImage, getSizedImageUrl, getStockSeverity, getStockStatusText, isLowStock, isPurchasable, isValidStoreUrlFormat, normalizeStoreUrl, parseWooCommercePrice, preloadImage, preloadImages, resetGlobalRateLimiter, unavailableReason, useAddManyToCart, useAddToCart, useApplyCoupon, useCart, useCartView, useCheckout, useInfiniteProducts, useOrder, useOrderView, useProcessCheckout, useProduct, useProductCategories, useProductCategoryTree, useProductTags, useProductView, useProducts, useProductsFeed, useRemoveCoupon, useRemoveFromCart, useReorderView, useSelectShippingRate, useStore, useStoreFeatures, useStoreLocale, useStoreTheme, useUpdateCartItem, useUpdateCustomer, useWooCommerceClient, useWooCommerceQueryKeys, validateWooCommerceStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map