@atomic-solutions/woocommerce-react 0.6.1 → 0.7.0

package/dist/hooks/index.cjs

@@ -42,6 +42,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 */
@@ -139,6 +141,16 @@ var processCategoriesToTree = (data) => {
   });
   return rootCategories?.map(processCategory) ?? [];
 };
+var useProductTags = (params, options) => {
+  const client = useWooCommerceClient();
+  const queryKeys = useWooCommerceQueryKeys();
+  return reactQuery.useQuery({
+    queryKey: queryKeys.products.tags(params),
+    queryFn: () => client.products.tags(params),
+    staleTime: StaleTimes.tags,
+    ...options
+  });
+};
 var useProductCategoryTree = () => {
   const query = useProductCategories();
   const flatData = query.data ?? [];
@@ -463,7 +475,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: {
@@ -753,6 +767,18 @@ function getAllImageUrls(images, size = "full") {
   }
   return images.map((img) => getSizedImageUrl(img.src, size));
 }
+var useProcessedImageUrl = (imageSize, fallbackOverride) => {
+  const config = react.useContext(WooCommerceStoreContext)?.config;
+  const transformer = config?.imageUrlTransformer;
+  const fallbackImageUrl = fallbackOverride ?? config?.fallbackImageUrl;
+  return react.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 = {}) {
@@ -760,8 +786,6 @@ function useProductsFeed(options = {}) {
   const storeContext = react.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,
@@ -773,16 +797,7 @@ function useProductsFeed(options = {}) {
     isRefetching
   } = useInfiniteProducts(params);
   const { treeData: categoryTree = [], findById } = useProductCategoryTree();
-  const getProcessedImageUrl = react.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 = react.useMemo(() => {
     if (!productsData) return [];
     const productList = Array.isArray(productsData) ? productsData : [];
@@ -834,7 +849,6 @@ function useProductView(options) {
   const storeContext = react.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] = react.useState(1);
   const { data: productData, isLoading, error, refetch } = useProduct(productId);
@@ -842,6 +856,7 @@ function useProductView(options) {
   const addToCartMutation = useAddToCart();
   const removeFromCartMutation = useRemoveFromCart();
   const updateCartMutation = useUpdateCartItem();
+  const getProcessedImageUrl = useProcessedImageUrl(imageSize, options.fallbackImageUrl);
   const processImageUrl = react.useCallback(
     (url) => {
       if (!url) return url;
@@ -857,7 +872,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,
@@ -867,7 +881,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(
@@ -897,7 +911,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 = react.useMemo(() => {
     return cartData?.items.find((item) => item.id === productId);
   }, [cartData?.items, productId]);
@@ -980,24 +994,13 @@ function useCartView(options = {}) {
   const storeContext = react.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 = react.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 = react.useMemo(() => {
     if (!cartData?.items) return [];
     const currencyCode = cartData.totals.currency_code;
@@ -1143,8 +1146,6 @@ function useReorderView(items, options = {}) {
   const storeContext = react.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 = react.useMemo(() => [...new Set(items.map((item) => item.productId))], [items]);
   const {
     data: productsPage,
@@ -1155,16 +1156,7 @@ function useReorderView(items, options = {}) {
     { enabled: productIds.length > 0 }
   );
   const { data: cart } = useCart();
-  const getProcessedImageUrl = react.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 = react.useMemo(() => {
     const products = new Map((productsPage?.data ?? []).map((product) => [product.id, product]));
     return items.map((item) => {
@@ -1246,6 +1238,8 @@ function useOrderView(input, options = {}) {
   const storeContext = react.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 = react.useMemo(() => {
     if (!rawOrder) return void 0;
@@ -1256,7 +1250,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 {
@@ -1271,7 +1265,7 @@ function useOrderView(input, options = {}) {
       paymentMethod: rawOrder.payment_method ?? "",
       raw: rawOrder
     };
-  }, [rawOrder, localeTag]);
+  }, [rawOrder, localeTag, getProcessedImageUrl]);
   return {
     order,
     isLoading,
@@ -1294,6 +1288,7 @@ exports.useProcessCheckout = useProcessCheckout;
 exports.useProduct = useProduct;
 exports.useProductCategories = useProductCategories;
 exports.useProductCategoryTree = useProductCategoryTree;
+exports.useProductTags = useProductTags;
 exports.useProductView = useProductView;
 exports.useProducts = useProducts;
 exports.useProductsFeed = useProductsFeed;