@shopify/shop-minis-react 0.0.24 → 0.0.26

package/dist/components/commerce/product-link.js

@@ -202,27 +202,23 @@ function ut({ product: o }) {
   const { navigateToProduct: e } = j(), { saveProduct: r, unsaveProduct: i } = O(), {
     id: a,
     title: s,
-    featuredImage: p,
+    featuredImage: u,
     reviewAnalytics: P,
-    price: l,
-    compareAtPrice: d,
+    price: m,
+    compareAtPrice: p,
     isFavorited: z,
     selectedVariant: f,
     defaultVariantId: h,
     shop: g
-  } = o, [x, C] = w.useState(z), y = P?.averageRating, N = P?.reviewCount;
-  l?.currencyCode;
-  const v = l?.amount ? b(l?.amount, l?.currencyCode) : void 0, I = p?.url, T = p?.altText || s, k = d?.amount ? b(d?.amount, d?.currencyCode) : void 0;
-  d?.currencyCode;
-  const L = k && k !== v, R = w.useCallback(() => {
+  } = o, [x, C] = w.useState(z), y = P?.averageRating, N = P?.reviewCount, v = m?.amount ? b(m?.amount, m?.currencyCode) : void 0, I = u?.url, T = u?.altText || s, k = p?.amount ? b(p?.amount, p?.currencyCode) : void 0, L = k && k !== v, R = w.useCallback(() => {
     e({
       productId: a
     });
   }, [e, a]), S = w.useCallback(async () => {
-    const u = x;
-    C(!u);
+    const l = x;
+    C(!l);
     try {
-      u ? await i({
+      l ? await i({
         productId: a,
         shopId: g.id,
         productVariantId: f?.id || h
@@ -232,7 +228,7 @@ function ut({ product: o }) {
         productVariantId: f?.id || h
       });
     } catch {
-      C(u);
+      C(l);
     }
   }, [
     x,
@@ -261,16 +257,16 @@ function ut({ product: o }) {
         /* @__PURE__ */ c(J, { layout: "horizontal", children: [
           /* @__PURE__ */ t(K, { children: s }),
           N && y && /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
-            Array.from({ length: 5 }, (u, m) => /* @__PURE__ */ t(
+            Array.from({ length: 5 }, (l, d) => /* @__PURE__ */ t(
               U,
               {
-                fill: m < Math.floor(y) ? "currentColor" : "none",
+                fill: d < Math.floor(y) ? "currentColor" : "none",
                 className: n(
                   "h-3 w-3",
-                  m < Math.floor(y) ? "text-primary" : "text-gray-300"
+                  d < Math.floor(y) ? "text-primary" : "text-gray-300"
                 )
               },
-              m
+              d
             )),
             /* @__PURE__ */ c("span", { className: "text-xs text-gray-600 ml-1", children: [
               "(",

package/dist/components/commerce/product-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-link.js","sources":["../../../src/components/commerce/product-link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Product} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {FavoriteButton} from '../atoms/favorite-button'\nimport {Touchable} from '../atoms/touchable'\nimport {Card, CardContent, CardAction} from '../ui/card'\n\nconst productLinkVariants = cva('', {\n  variants: {\n    layout: {\n      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',\n      vertical: 'flex-col',\n    },\n    discount: {\n      none: '',\n      small: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    discount: 'none',\n  },\n})\n\n// Primitive components (building blocks)\nexport interface ProductLinkRootProps\n  extends React.ComponentProps<typeof Card>,\n    VariantProps<typeof productLinkVariants> {\n  layout?: 'horizontal' | 'vertical'\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductLinkRoot({\n  className,\n  layout,\n  discount,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductLinkRootProps) {\n  const Comp = asChild ? SlotPrimitive.Root : Card\n\n  return (\n    <Touchable\n      onClick={onPress}\n      whileTap={{opacity: 0.7}}\n      transition={{\n        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n      }}\n    >\n      <Comp\n        className={cn(\n          productLinkVariants({layout, discount}),\n          'border-0 bg-white rounded-xl shadow-lg shadow-black/10',\n          className\n        )}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nfunction ProductLinkImage({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> & {layout?: 'horizontal' | 'vertical'}) {\n  return (\n    <div\n      data-slot=\"product-link-image\"\n      className={cn(\n        'overflow-hidden rounded-md bg-muted',\n        layout === 'horizontal'\n          ? 'h-16 w-16 flex-shrink-0'\n          : 'aspect-square w-full',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkInfo({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<typeof CardContent> & {\n  layout?: 'horizontal' | 'vertical'\n}) {\n  return (\n    <CardContent\n      className={cn(\n        layout === 'horizontal'\n          ? 'flex-1 min-w-0 space-y-1 px-0 py-0'\n          : 'space-y-2',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"product-link-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction ProductLinkPrice({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-price\"\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkCurrentPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-current-price\"\n      className={cn('text-sm font-semibold text-gray-900', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkOriginalPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-original-price\"\n      className={cn('text-sm text-gray-500 line-through', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkDiscountPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-discount-price\"\n      className={cn('text-sm font-semibold text-red-600', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-rating\"\n      className={cn(\n        'flex items-center gap-1 text-xs text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkActions({\n  className,\n  onPress,\n  filled = false,\n  ...props\n}: React.ComponentProps<typeof CardAction> & {\n  onPress?: () => void\n  filled?: boolean\n}) {\n  return (\n    <CardAction\n      className={cn('flex-shrink-0 self-center px-0 py-0', className)}\n      {...props}\n    >\n      <Touchable\n        stopPropagation\n        onClick={onPress}\n        whileTap={{opacity: 0.7, scale: 0.95}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n          scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        <FavoriteButton filled={filled} onClick={onPress} />\n      </Touchable>\n    </CardAction>\n  )\n}\n\nexport interface ProductLinkProps {\n  product: Product\n}\n\n// Composed ProductLink component\nfunction ProductLink({product}: ProductLinkProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    reviewAnalytics,\n    price,\n    compareAtPrice,\n    isFavorited,\n    selectedVariant,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const averageRating = reviewAnalytics?.averageRating\n  const reviewCount = reviewAnalytics?.reviewCount\n  const currencyCode = price?.currencyCode\n  const amount = price?.amount\n    ? formatMoney(price?.amount, price?.currencyCode)\n    : undefined\n  const imageUrl = featuredImage?.url\n  const imageAltText = featuredImage?.altText || title\n  const compareAtPriceAmount = compareAtPrice?.amount\n    ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)\n    : undefined\n  const compareAtPriceCurrencyCode = compareAtPrice?.currencyCode\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const handlePress = React.useCallback(() => {\n    navigateToProduct({\n      productId: id,\n    })\n  }, [navigateToProduct, id])\n\n  const handleActionPress = React.useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    id,\n    shop.id,\n    selectedVariant?.id,\n    defaultVariantId,\n    saveProduct,\n    unsaveProduct,\n  ])\n\n  return (\n    <ProductLinkRoot\n      layout=\"horizontal\"\n      discount={hasDiscount ? 'small' : 'none'}\n      onPress={handlePress}\n    >\n      <ProductLinkImage layout=\"horizontal\">\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt={imageAltText}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs\">\n            No Image\n          </div>\n        )}\n      </ProductLinkImage>\n\n      <ProductLinkInfo layout=\"horizontal\">\n        <ProductLinkTitle>{title}</ProductLinkTitle>\n\n        {reviewCount && averageRating && (\n          <ProductLinkRating>\n            <div className=\"flex items-center gap-1\">\n              {Array.from({length: 5}, (_, i) => (\n                <Star\n                  key={i}\n                  fill={\n                    i < Math.floor(averageRating!) ? 'currentColor' : 'none'\n                  }\n                  className={cn(\n                    'h-3 w-3',\n                    i < Math.floor(averageRating!)\n                      ? 'text-primary'\n                      : 'text-gray-300'\n                  )}\n                />\n              ))}\n              <span className=\"text-xs text-gray-600 ml-1\">\n                ({reviewCount})\n              </span>\n            </div>\n          </ProductLinkRating>\n        )}\n\n        <ProductLinkPrice>\n          {hasDiscount ? (\n            <>\n              <ProductLinkDiscountPrice>{amount}</ProductLinkDiscountPrice>\n              <ProductLinkOriginalPrice>\n                {compareAtPriceAmount}\n              </ProductLinkOriginalPrice>\n            </>\n          ) : (\n            <ProductLinkCurrentPrice>{amount}</ProductLinkCurrentPrice>\n          )}\n        </ProductLinkPrice>\n      </ProductLinkInfo>\n\n      <ProductLinkActions\n        filled={isFavoritedLocal}\n        onPress={handleActionPress}\n      />\n    </ProductLinkRoot>\n  )\n}\n\nexport {ProductLink}\n"],"names":["productLinkVariants","cva","ProductLinkRoot","className","layout","discount","asChild","onPress","props","jsx","Touchable","SlotPrimitive.Root","Card","cn","ProductLinkImage","ProductLinkInfo","CardContent","ProductLinkTitle","children","ProductLinkPrice","ProductLinkCurrentPrice","ProductLinkOriginalPrice","ProductLinkDiscountPrice","ProductLinkRating","ProductLinkActions","filled","CardAction","FavoriteButton","ProductLink","product","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","reviewAnalytics","price","compareAtPrice","isFavorited","selectedVariant","defaultVariantId","shop","isFavoritedLocal","setIsFavoritedLocal","React","averageRating","reviewCount","amount","formatMoney","imageUrl","imageAltText","compareAtPriceAmount","hasDiscount","handlePress","handleActionPress","previousState","jsxs","_","i","Star","Fragment"],"mappings":"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"}
+{"version":3,"file":"product-link.js","sources":["../../../src/components/commerce/product-link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Product} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {FavoriteButton} from '../atoms/favorite-button'\nimport {Touchable} from '../atoms/touchable'\nimport {Card, CardContent, CardAction} from '../ui/card'\n\nconst productLinkVariants = cva('', {\n  variants: {\n    layout: {\n      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',\n      vertical: 'flex-col',\n    },\n    discount: {\n      none: '',\n      small: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    discount: 'none',\n  },\n})\n\n// Primitive components (building blocks)\nexport interface ProductLinkRootProps\n  extends React.ComponentProps<typeof Card>,\n    VariantProps<typeof productLinkVariants> {\n  layout?: 'horizontal' | 'vertical'\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductLinkRoot({\n  className,\n  layout,\n  discount,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductLinkRootProps) {\n  const Comp = asChild ? SlotPrimitive.Root : Card\n\n  return (\n    <Touchable\n      onClick={onPress}\n      whileTap={{opacity: 0.7}}\n      transition={{\n        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n      }}\n    >\n      <Comp\n        className={cn(\n          productLinkVariants({layout, discount}),\n          'border-0 bg-white rounded-xl shadow-lg shadow-black/10',\n          className\n        )}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nfunction ProductLinkImage({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> & {layout?: 'horizontal' | 'vertical'}) {\n  return (\n    <div\n      data-slot=\"product-link-image\"\n      className={cn(\n        'overflow-hidden rounded-md bg-muted',\n        layout === 'horizontal'\n          ? 'h-16 w-16 flex-shrink-0'\n          : 'aspect-square w-full',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkInfo({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<typeof CardContent> & {\n  layout?: 'horizontal' | 'vertical'\n}) {\n  return (\n    <CardContent\n      className={cn(\n        layout === 'horizontal'\n          ? 'flex-1 min-w-0 space-y-1 px-0 py-0'\n          : 'space-y-2',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"product-link-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction ProductLinkPrice({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-price\"\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkCurrentPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-current-price\"\n      className={cn('text-sm font-semibold text-gray-900', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkOriginalPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-original-price\"\n      className={cn('text-sm text-gray-500 line-through', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkDiscountPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-discount-price\"\n      className={cn('text-sm font-semibold text-red-600', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-rating\"\n      className={cn(\n        'flex items-center gap-1 text-xs text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkActions({\n  className,\n  onPress,\n  filled = false,\n  ...props\n}: React.ComponentProps<typeof CardAction> & {\n  onPress?: () => void\n  filled?: boolean\n}) {\n  return (\n    <CardAction\n      className={cn('flex-shrink-0 self-center px-0 py-0', className)}\n      {...props}\n    >\n      <Touchable\n        stopPropagation\n        onClick={onPress}\n        whileTap={{opacity: 0.7, scale: 0.95}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n          scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        <FavoriteButton filled={filled} onClick={onPress} />\n      </Touchable>\n    </CardAction>\n  )\n}\n\nexport interface ProductLinkProps {\n  product: Product\n}\n\n// Composed ProductLink component\nfunction ProductLink({product}: ProductLinkProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    reviewAnalytics,\n    price,\n    compareAtPrice,\n    isFavorited,\n    selectedVariant,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const averageRating = reviewAnalytics?.averageRating\n  const reviewCount = reviewAnalytics?.reviewCount\n  const amount = price?.amount\n    ? formatMoney(price?.amount, price?.currencyCode)\n    : undefined\n  const imageUrl = featuredImage?.url\n  const imageAltText = featuredImage?.altText || title\n  const compareAtPriceAmount = compareAtPrice?.amount\n    ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)\n    : undefined\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const handlePress = React.useCallback(() => {\n    navigateToProduct({\n      productId: id,\n    })\n  }, [navigateToProduct, id])\n\n  const handleActionPress = React.useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    id,\n    shop.id,\n    selectedVariant?.id,\n    defaultVariantId,\n    saveProduct,\n    unsaveProduct,\n  ])\n\n  return (\n    <ProductLinkRoot\n      layout=\"horizontal\"\n      discount={hasDiscount ? 'small' : 'none'}\n      onPress={handlePress}\n    >\n      <ProductLinkImage layout=\"horizontal\">\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt={imageAltText}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs\">\n            No Image\n          </div>\n        )}\n      </ProductLinkImage>\n\n      <ProductLinkInfo layout=\"horizontal\">\n        <ProductLinkTitle>{title}</ProductLinkTitle>\n\n        {reviewCount && averageRating && (\n          <ProductLinkRating>\n            <div className=\"flex items-center gap-1\">\n              {Array.from({length: 5}, (_, i) => (\n                <Star\n                  key={i}\n                  fill={\n                    i < Math.floor(averageRating!) ? 'currentColor' : 'none'\n                  }\n                  className={cn(\n                    'h-3 w-3',\n                    i < Math.floor(averageRating!)\n                      ? 'text-primary'\n                      : 'text-gray-300'\n                  )}\n                />\n              ))}\n              <span className=\"text-xs text-gray-600 ml-1\">\n                ({reviewCount})\n              </span>\n            </div>\n          </ProductLinkRating>\n        )}\n\n        <ProductLinkPrice>\n          {hasDiscount ? (\n            <>\n              <ProductLinkDiscountPrice>{amount}</ProductLinkDiscountPrice>\n              <ProductLinkOriginalPrice>\n                {compareAtPriceAmount}\n              </ProductLinkOriginalPrice>\n            </>\n          ) : (\n            <ProductLinkCurrentPrice>{amount}</ProductLinkCurrentPrice>\n          )}\n        </ProductLinkPrice>\n      </ProductLinkInfo>\n\n      <ProductLinkActions\n        filled={isFavoritedLocal}\n        onPress={handleActionPress}\n      />\n    </ProductLinkRoot>\n  )\n}\n\nexport {ProductLink}\n"],"names":["productLinkVariants","cva","ProductLinkRoot","className","layout","discount","asChild","onPress","props","jsx","Touchable","SlotPrimitive.Root","Card","cn","ProductLinkImage","ProductLinkInfo","CardContent","ProductLinkTitle","children","ProductLinkPrice","ProductLinkCurrentPrice","ProductLinkOriginalPrice","ProductLinkDiscountPrice","ProductLinkRating","ProductLinkActions","filled","CardAction","FavoriteButton","ProductLink","product","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","reviewAnalytics","price","compareAtPrice","isFavorited","selectedVariant","defaultVariantId","shop","isFavoritedLocal","setIsFavoritedLocal","React","averageRating","reviewCount","amount","formatMoney","imageUrl","imageAltText","compareAtPriceAmount","hasDiscount","handlePress","handleActionPress","previousState","jsxs","_","i","Star","Fragment"],"mappings":"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"}

package/dist/components/content/content-monitor.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Touchable as t } from "../atoms/touchable.js";
+function i({
+  // publicId,
+  children: o
+}) {
+  return /* @__PURE__ */ r(
+    t,
+    {
+      children: o
+    }
+  );
+}
+export {
+  i as ContentMonitor
+};
+//# sourceMappingURL=content-monitor.js.map

package/dist/components/content/content-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-monitor.js","sources":["../../../src/components/content/content-monitor.tsx"],"sourcesContent":["// import {useShopActions} from '../../internal/useShopActions'\nimport {Touchable} from '../atoms/touchable'\n\nexport function ContentMonitor({\n  // publicId,\n  children,\n}: {\n  publicId: string\n  children: React.ReactNode\n}) {\n  // const {showFeedbackSheet} = useShopActions()\n\n  return (\n    <Touchable\n    // TODO: Add long press support to Touchable\n    // onLongPress={() => {\n    //   showFeedbackSheet({publicId})\n    // }}\n    >\n      {children}\n    </Touchable>\n  )\n}\n"],"names":["ContentMonitor","children","jsx","Touchable"],"mappings":";;AAGO,SAASA,EAAe;AAAA;AAAA,EAE7B,UAAAC;AACF,GAGG;AAIC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAME,UAAAF;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/content/content-wrapper.js

@@ -0,0 +1,17 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useContent as p } from "../../hooks/content/useContent.js";
+import { ContentMonitor as m } from "./content-monitor.js";
+function d({
+  publicId: r,
+  externalId: e,
+  children: o
+}) {
+  const { content: i, loading: t } = p({
+    identifiers: [{ publicId: r, externalId: e }]
+  }), n = i?.[0];
+  return t || !n ? o({ loading: t }) : /* @__PURE__ */ c(m, { publicId: n.publicId, children: o({ content: n, loading: t }) });
+}
+export {
+  d as ContentWrapper
+};
+//# sourceMappingURL=content-wrapper.js.map

package/dist/components/content/content-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/content/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  publicId?: string\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAmCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,EAAW,CAAA;AAAA,EAAA,CACrC,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}

package/dist/hooks/content/useContent.js

@@ -0,0 +1,24 @@
+import { useMemo as m } from "react";
+import { useShopActions as u } from "../../internal/useShopActions.js";
+import { useShopActionsDataFetching as a } from "../../internal/useShopActionsDataFetching.js";
+const l = (o) => {
+  const { getContent: e } = u(), { identifiers: n, skip: s = !1, ...r } = o, { data: t, ...i } = a(
+    e,
+    {
+      identifiers: n,
+      ...r
+    },
+    {
+      skip: s,
+      hook: "useContent"
+    }
+  ), c = m(() => t ?? null, [t]);
+  return {
+    ...i,
+    content: c
+  };
+};
+export {
+  l as useContent
+};
+//# sourceMappingURL=useContent.js.map

package/dist/hooks/content/useContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContent.js","sources":["../../../src/hooks/content/useContent.ts"],"sourcesContent":["import {useMemo} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'\nimport {\n  Content,\n  ContentIdentifierInput,\n  DataHookOptionsBase,\n  DataHookReturnsBase,\n} from '../../types'\n\nexport interface UseContentParams extends DataHookOptionsBase {\n  /**\n   * The identifiers of the content to fetch.\n   */\n  identifiers: ContentIdentifierInput | ContentIdentifierInput[]\n}\n\ninterface UseContentReturns extends DataHookReturnsBase {\n  /**\n   * The content returned from the query.\n   */\n  content: Content[] | null\n}\n\nexport const useContent = (params: UseContentParams): UseContentReturns => {\n  const {getContent} = useShopActions()\n  const {identifiers, skip = false, ...restParams} = params\n\n  const {data, ...rest} = useShopActionsDataFetching(\n    getContent,\n    {\n      identifiers,\n      ...restParams,\n    },\n    {\n      skip,\n      hook: 'useContent',\n    }\n  )\n\n  const content = useMemo(() => {\n    return data ?? null\n  }, [data])\n\n  return {\n    ...rest,\n    content,\n  }\n}\n"],"names":["useContent","params","getContent","useShopActions","identifiers","skip","restParams","data","rest","useShopActionsDataFetching","content","useMemo"],"mappings":";;;AAyBa,MAAAA,IAAa,CAACC,MAAgD;AACnE,QAAA,EAAC,YAAAC,EAAU,IAAIC,EAAe,GAC9B,EAAC,aAAAC,GAAa,MAAAC,IAAO,IAAO,GAAGC,EAAc,IAAAL,GAE7C,EAAC,MAAAM,GAAM,GAAGC,EAAA,IAAQC;AAAA,IACtBP;AAAA,IACA;AAAA,MACE,aAAAE;AAAA,MACA,GAAGE;AAAA,IACL;AAAA,IACA;AAAA,MACE,MAAAD;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV,GAEMK,IAAUC,EAAQ,MACfJ,KAAQ,MACd,CAACA,CAAI,CAAC;AAEF,SAAA;AAAA,IACL,GAAGC;AAAA,IACH,SAAAE;AAAA,EACF;AACF;"}

package/dist/hooks/content/useCreateImageContent.js

@@ -0,0 +1,40 @@
+import { useState as u, useCallback as g } from "react";
+import { useHandleAction as f } from "../../internal/useHandleAction.js";
+import { useShopActions as d } from "../../internal/useShopActions.js";
+import { useImageUpload as w } from "../storage/useImageUpload.js";
+import { fileToDataUri as I } from "../../utils/imageToDataUri.js";
+const E = () => {
+  const { createContent: t } = d(), { uploadImage: a } = w(), [i, o] = u(!1), n = g(
+    async (m) => {
+      o(!0);
+      const { image: e, contentTitle: s, visibility: l } = m;
+      if (!e.type)
+        throw new Error("Unable to determine file type");
+      if (!e.type.startsWith("image/"))
+        throw new Error("Invalid file type: must be an image");
+      const [c] = await a([
+        {
+          mimeType: e.type,
+          uri: await I(e)
+        }
+      ]), r = c.imageUrl;
+      if (!r)
+        throw new Error("Image upload failed");
+      const p = await t({
+        title: s,
+        imageUrl: r,
+        visibility: l
+      });
+      return o(!1), p;
+    },
+    [t, a]
+  );
+  return {
+    createImageContent: f(n),
+    loading: i
+  };
+};
+export {
+  E as useCreateImageContent
+};
+//# sourceMappingURL=useCreateImageContent.js.map

package/dist/hooks/content/useCreateImageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateImageContent.js","sources":["../../../src/hooks/content/useCreateImageContent.ts"],"sourcesContent":["import {useCallback, useState} from 'react'\n\nimport {\n  ContentVisibility,\n  Content,\n  ContentCreateUserErrors,\n} from '@shopify/shop-minis-platform'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\nimport {fileToDataUri} from '../../utils'\nimport {useImageUpload} from '../storage/useImageUpload'\n\ninterface CreateImageContentParams {\n  image: File\n  contentTitle: string\n  visibility?: ContentVisibility[] | null\n}\n\ninterface UseCreateImageContentReturns {\n  /**\n   * Upload an image and create content.\n   */\n  createImageContent: (\n    params: CreateImageContentParams\n  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>\n  /**\n   * Whether the content is being created.\n   */\n  loading: boolean\n}\n\nexport const useCreateImageContent = (): UseCreateImageContentReturns => {\n  const {createContent} = useShopActions()\n  const {uploadImage} = useImageUpload()\n  const [loading, setLoading] = useState(false)\n\n  const createImageContent = useCallback(\n    async (params: CreateImageContentParams) => {\n      setLoading(true)\n\n      const {image, contentTitle, visibility} = params\n\n      if (!image.type) {\n        throw new Error('Unable to determine file type')\n      }\n      if (!image.type.startsWith('image/')) {\n        throw new Error('Invalid file type: must be an image')\n      }\n\n      const [uploadImageResult] = await uploadImage([\n        {\n          mimeType: image.type,\n          uri: await fileToDataUri(image),\n        },\n      ])\n      const uploadImageUrl = uploadImageResult.imageUrl\n\n      if (!uploadImageUrl) {\n        throw new Error('Image upload failed')\n      }\n\n      const createContentResult = await createContent({\n        title: contentTitle,\n        imageUrl: uploadImageUrl,\n        visibility,\n      })\n\n      setLoading(false)\n\n      return createContentResult\n    },\n    [createContent, uploadImage]\n  )\n\n  return {\n    createImageContent: useHandleAction(createImageContent),\n    loading,\n  }\n}\n"],"names":["useCreateImageContent","createContent","useShopActions","uploadImage","useImageUpload","loading","setLoading","useState","createImageContent","useCallback","params","image","contentTitle","visibility","uploadImageResult","fileToDataUri","uploadImageUrl","createContentResult","useHandleAction"],"mappings":";;;;;AAgCO,MAAMA,IAAwB,MAAoC;AACjE,QAAA,EAAC,eAAAC,EAAa,IAAIC,EAAe,GACjC,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAC/B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAqBC;AAAA,IACzB,OAAOC,MAAqC;AAC1C,MAAAJ,EAAW,EAAI;AAEf,YAAM,EAAC,OAAAK,GAAO,cAAAC,GAAc,YAAAC,EAAc,IAAAH;AAEtC,UAAA,CAACC,EAAM;AACH,cAAA,IAAI,MAAM,+BAA+B;AAEjD,UAAI,CAACA,EAAM,KAAK,WAAW,QAAQ;AAC3B,cAAA,IAAI,MAAM,qCAAqC;AAGvD,YAAM,CAACG,CAAiB,IAAI,MAAMX,EAAY;AAAA,QAC5C;AAAA,UACE,UAAUQ,EAAM;AAAA,UAChB,KAAK,MAAMI,EAAcJ,CAAK;AAAA,QAAA;AAAA,MAChC,CACD,GACKK,IAAiBF,EAAkB;AAEzC,UAAI,CAACE;AACG,cAAA,IAAI,MAAM,qBAAqB;AAGjC,YAAAC,IAAsB,MAAMhB,EAAc;AAAA,QAC9C,OAAOW;AAAA,QACP,UAAUI;AAAA,QACV,YAAAH;AAAA,MAAA,CACD;AAED,aAAAP,EAAW,EAAK,GAETW;AAAA,IACT;AAAA,IACA,CAAChB,GAAeE,CAAW;AAAA,EAC7B;AAEO,SAAA;AAAA,IACL,oBAAoBe,EAAgBV,CAAkB;AAAA,IACtD,SAAAH;AAAA,EACF;AACF;"}

package/dist/hooks/storage/useImageUpload.js

@@ -1,62 +1,71 @@
-import { useCallback as p } from "react";
+import { useCallback as m } from "react";
 import { useShopActions as u } from "../../internal/useShopActions.js";
-const m = async (t, a) => {
-  const i = new FormData();
-  a.parameters.forEach(({ name: r, value: l }) => {
-    i.append(r, l);
-  }), i.append("file", new Blob([t.uri], { type: t.mimeType }));
-  const o = await fetch(a.url, {
+const d = async (e) => {
+  const r = await (await fetch(e.uri)).blob();
+  return {
+    ...e,
+    fileSize: e.fileSize ?? r.size,
+    fileBlob: r
+  };
+}, f = async (e, o) => {
+  const r = new FormData();
+  o.parameters.forEach(({ name: l, value: t }) => {
+    r.append(l, t);
+  }), r.append("file", e.fileBlob);
+  const a = await fetch(o.url, {
     method: "POST",
-    body: i
+    body: r
   });
-  return o.ok ? {} : (console.error("Failed to upload image", {
-    response: await o.text()
+  return a.ok ? {} : (console.error("Failed to upload image", {
+    response: await a.text()
   }), { error: "Failed to upload image" });
-}, w = () => {
-  const { createImageUploadLink: t, completeImageUpload: a } = u();
+}, h = () => {
+  const { createImageUploadLink: e, completeImageUpload: o } = u();
   return {
-    uploadImage: p(
-      async (o) => {
-        if (o.length > 1)
+    uploadImage: m(
+      async (a) => {
+        if (a.length > 1)
           throw new Error("Multiple image upload is not supported yet");
-        const r = await t({
-          input: o.map((e) => ({
-            mimeType: e.mimeType,
-            fileSize: e.fileSize
-          }))
+        const l = a[0], t = await d(l), s = await e({
+          input: [
+            {
+              mimeType: t.mimeType,
+              fileSize: t.fileSize
+            }
+          ]
         });
-        if (!r.ok)
-          throw new Error(r.error.message);
-        const { error: l } = await m(
-          o[0],
-          r?.data?.targets?.[0]
+        if (!s.ok)
+          throw new Error(s.error.message);
+        const { error: p } = await f(
+          t,
+          s?.data?.targets?.[0]
         );
-        if (l)
-          throw new Error(l);
-        let n = 0;
-        for (; n < 30; ) {
-          const e = await a({
-            resourceUrls: r?.data?.targets?.map((s) => s.resourceUrl) || []
+        if (p)
+          throw new Error(p);
+        let c = 0;
+        for (; c < 30; ) {
+          const i = await o({
+            resourceUrls: s?.data?.targets?.map((n) => n.resourceUrl) || []
           });
-          if (!e.ok)
-            throw new Error(e.error.message);
-          if (e.data?.files?.[0]?.fileStatus === "READY")
+          if (!i.ok)
+            throw new Error(i.error.message);
+          if (i.data?.files?.[0]?.fileStatus === "READY")
             return [
               {
-                id: e.data.files[0].id,
-                imageUrl: e.data.files[0].image?.url,
-                resourceUrl: r?.data?.targets?.[0]?.resourceUrl
+                id: i.data.files[0].id,
+                imageUrl: i.data.files[0].image?.url,
+                resourceUrl: s?.data?.targets?.[0]?.resourceUrl
               }
             ];
-          await new Promise((s) => setTimeout(s, 1e3)), n++;
+          await new Promise((n) => setTimeout(n, 1e3)), c++;
         }
         throw new Error("Image upload completion timed out");
       },
-      [t, a]
+      [e, o]
     )
   };
 };
 export {
-  w as useImageUpload
+  h as useImageUpload
 };
 //# sourceMappingURL=useImageUpload.js.map

package/dist/hooks/storage/useImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams,\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n  // Append the actual file data last\n  formData.append('file', new Blob([image.uri], {type: image.mimeType}))\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const links = await createImageUploadLink({\n        input: params.map(image => ({\n          mimeType: image.mimeType,\n          fileSize: image.fileSize,\n        })),\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      // TODO: Upload multiple files to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        params[0],\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        // TODO: Add support for multiple files\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["uploadFileToGCS","image","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","links","uploadError","count","result","resolve"],"mappings":";;AA2CA,MAAMA,IAAkB,OACtBC,GACAC,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEDF,EAAS,OAAO,QAAQ,IAAI,KAAK,CAACF,EAAM,GAAG,GAAG,EAAC,MAAMA,EAAM,SAAS,CAAA,CAAC;AAErE,QAAMK,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA8D7D,SAAA;AAAA,IACL,aA7DkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAOI,EAAO,IAAI,CAAUX,OAAA;AAAA,YAC1B,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,UAAA,EAChB;AAAA,QAAA,CACH;AAEG,YAAA,CAACY,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAKrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMd;AAAA,UACjCY,EAAO,CAAC;AAAA,UACRC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAItC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}
+{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize?: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: UploadImageParams) => {\n  const response = await fetch(image.uri)\n  const blob = await response.blob()\n\n  return {\n    ...image,\n    fileSize: image.fileSize ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams & {fileSize: number; fileBlob: Blob},\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n\n  formData.append('file', image.fileBlob)\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const imageParams = params[0]\n      const processedImageParams = await processFileData(imageParams)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["processFileData","image","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","imageParams","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;AA6CA,MAAMA,IAAkB,OAAOC,MAA6B;AAEpD,QAAAC,IAAO,OADI,MAAM,MAAMD,EAAM,GAAG,GACV,KAAK;AAE1B,SAAA;AAAA,IACL,GAAGA;AAAA,IACH,UAAUA,EAAM,YAAYC,EAAK;AAAA,IACjC,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OACtBF,GACAG,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEQF,EAAA,OAAO,QAAQJ,EAAM,QAAQ;AAEtC,QAAMO,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AAiE7D,SAAA;AAAA,IACL,aAhEkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAcD,EAAO,CAAC,GACtBE,IAAuB,MAAMhB,EAAgBe,CAAW,GAExDE,IAAQ,MAAMP,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUM,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAIrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMf;AAAA,UACjCa;AAAA,UACAC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMT,EAAoB;AAAA,YACvC,cACEM,GAAO,MAAM,SAAS,IAAI,CAAUb,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACgB,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAGtC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACT,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}