fix: Minicart product image size

components/minicart/CartItem.tsx

@@ -2,6 +2,7 @@ import Image from "$live/std/ui/components/Image.tsx";
 
 import QuantitySelector from "../ui/QuantitySelector.tsx";
 import { useCart } from "../../sdk/cart/useCart.ts";
+import resizeImage from "../../sdk/cart/resizeImage.ts";
 import Button from "../ui/Button.tsx";
 
 interface Props {
@@ -33,7 +34,7 @@ function CartItem({ index }: Props) {
     <li class="flex gap-2 py-6">
       <div class="overflow-hidden rounded-md border border-gray-200">
         <Image
-          src={imageUrl}
+          src={resizeImage(imageUrl)}
           alt={skuName}
           width={100}
           height={100}

sdk/cart/resizeImage.ts

@@ -0,0 +1,39 @@
+/**
+ * VTEX resizeImage function
+ *
+ * The item image returned in the orderForm is 55x55px by default, which results
+ * in a pixelated thumb in the cart.
+ *
+ * This resizeImage function should increase the image to 100px width and auto height.
+ *
+ * TODO: Make width value customizable.
+ */
+
+const baseUrlRegex = new RegExp(/.+ids\/(\d+)(?:-(\d+)-(\d+)|)\//);
+const sizeRegex = new RegExp(/-(\d+)-(\d+)/);
+
+const cleanImageUrl = (imageUrl: string) => {
+  let resizedImageUrl = imageUrl;
+  const result = baseUrlRegex.exec(imageUrl);
+  if (result && result.length > 0) {
+    if (
+      result.length === 4 &&
+      result[2] !== undefined &&
+      result[3] !== undefined
+    ) {
+      resizedImageUrl = result[0].replace(sizeRegex, "");
+    } else {
+      resizedImageUrl = result[0];
+    }
+  }
+  return resizedImageUrl;
+};
+
+const changeImageUrlSize = (imageUrl: string) => {
+  const resizedImageUrl = imageUrl.slice(0, -1); // Remove last "/"
+  return `${resizedImageUrl}-100-auto`;
+};
+
+export default function resizeImage(imageUrl: string) {
+  return changeImageUrlSize(cleanImageUrl(imageUrl));
+}