@metron-labs/quote-react 0.1.65 → 0.1.66

package/dist/lib/ProductImage.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    description?: string;
+    photoUrl?: string | null;
+    className?: string;
+    width?: number;
+    height?: number;
+};
+export default function ProductImage({ description, photoUrl, className, width, height }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/ProductImage.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { assetUrl } from "./assets";
+import InsulationPlaceholder from "../components/InsulationPlaceholder";
+import ProductPlaceholder from "../components/ProductPlaceholder";
+// Bundled stand-in photos for common materials, matched on the description. Order matters:
+// "loft insulation" must win over the generic insulation drawing below.
+const PHOTOS = [
+    { match: ["building sand"], path: "/schedule-products/building-sand.webp" },
+    { match: ["drywall screw"], path: "/schedule-products/drywall-screws.webp" },
+    { match: ["scrim"], path: "/schedule-products/scrim-tape.webp" },
+    { match: ["loft insulation", "loft roll"], path: "/schedule-products/loft-insulation-roll.webp" },
+    { match: ["wall tie"], path: "/schedule-products/wall-ties.webp" },
+    { match: ["red multi", "multi stock", "brick"], path: "/schedule-products/red-multi-stock-bricks.webp" },
+];
+// The catalogue's own product photo when it has one, then a bundled photo, then a drawing.
+// Decorative wherever it's used, since the product name always sits beside it.
+export default function ProductImage({ description, photoUrl, className, width, height }) {
+    const text = (description || "").toLowerCase();
+    const bundled = PHOTOS.find((entry) => entry.match.some((word) => text.includes(word)));
+    const src = photoUrl || (bundled && assetUrl(bundled.path));
+    if (src)
+        return _jsx("img", { className: className, src: src, alt: "", width: width, height: height });
+    const Placeholder = text.includes("insulation") ? InsulationPlaceholder : ProductPlaceholder;
+    return _jsx(Placeholder, { className: className, width: width, height: height });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metron-labs/quote-react",
-  "version": "0.1.65",
+  "version": "0.1.66",
   "description": "Metron Labs quote and estimating calculator components for React",
   "license": "UNLICENSED",
   "sideEffects": [

package/dist/lib/productImage.d.ts

@@ -1 +0,0 @@
-export declare function productImageSrc(description: string | undefined, productId?: string, pdpPhotoUrl?: string | null): string;

package/dist/lib/productImage.js

@@ -1,75 +0,0 @@
-import { assetUrl } from "./assets";
-function encodeSvg(svg) {
-    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-}
-// Bundled stand-in photos for common materials, matched on the description. Order matters:
-// "loft insulation" must win over the generic insulation drawing below.
-const PHOTOS = [
-    { match: ["building sand"], path: "/schedule-products/building-sand.webp" },
-    { match: ["drywall screw"], path: "/schedule-products/drywall-screws.webp" },
-    { match: ["scrim"], path: "/schedule-products/scrim-tape.webp" },
-    { match: ["loft insulation", "loft roll"], path: "/schedule-products/loft-insulation-roll.webp" },
-    { match: ["wall tie"], path: "/schedule-products/wall-ties.webp" },
-    { match: ["red multi", "multi stock", "brick"], path: "/schedule-products/red-multi-stock-bricks.webp" },
-];
-// Materials Market PDP photos used as a demo fallback when a candidate has no own photo.
-// Keep specific matches above broad ones because several descriptions contain "cement".
-const CATALOGUE_PHOTOS = [
-    { match: ["mortar"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/Blue+Circle+Quality+Assured+Mortar+Mix+-+Photo.jpg" },
-    { match: ["mot type 1"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/MOT+-+Photo+1.jpg" },
-    { match: ["soft sand", "building sand"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/Soft+Building+Sand+-+Photo+1.jpg" },
-    { match: ["cement"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/blue+circle+general+cement+bagged.jpg" },
-    { match: ["brick"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/class+B+engineering+brick+smooth+red+perforated+65mm+-+Photo+1+comp.jpg" },
-    { match: ["dense block", "concrete block"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/100mm+solid+dense+concrete+block+-+Photo+1+-+1920+comp.jpg" },
-    { match: ["metal c stud", "c stud"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/70mm+c+stud+angle.jpg" },
-    { match: ["timber", "carcassing", "sawn", "c24", "c16"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/47mm+x+100mm+sawn+treated+c16+-+Photo+1+1920.jpg" },
-    { match: ["osb"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/18mm+structural+OSB+-+Photo+1+comp.jpg" },
-    { match: ["dpc"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/225mm+damp+proof+course.jpg" },
-    { match: ["soil pipe", "soil bend", "underground", "drainage"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/110mm+Soil+Pipe+Single+Socket+Black+3m+-+High+Res.jpg" },
-    { match: ["nail"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/galvanised+round+wire+nail+vertical.jpg" },
-    { match: ["retaining clip", "retaining clips", "insulation disc", "insulation disks"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/multiple+zinc+insulation+discs.jpg" },
-    { match: ["wall tie"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/Type+4+Wall+Ties+-+Photo.jpg" },
-    { match: ["loft insulation", "loft roll", "insulation roll"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/200mm+knauf+loft+roll+44+unwrapping.jpg" },
-    { match: ["pir insulation", "insulation board", "celotex", "unilin", "indiboard"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/100mm+celotex+sheet+logo.jpg" },
-    { match: ["plasterboard", "wallboard"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/12.5mm+wallboard+tapered+edge+corner.jpg" },
-    { match: ["drywall screw"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/close+up+drywall+course+thread.jpg" },
-    { match: ["scrim", "jointing tape", "paper tape"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/50mm+scrim+tape.jpg" },
-    { match: ["adhesive", "high grab", "evostik", "stixall", "gripfill", "sealant", "ct1"], url: "https://res.cloudinary.com/materials-market/image/upload/c_fill,w_750/assets/product-images-final/Instant+Nails+Solvent+Free+Grab+Adhesive+White+290ml+-+Photo.jpg" },
-];
-// The catalogue's own product photo when it has one, then a bundled photo, then a drawing.
-// ponytail: productId is unused for now; callers already pass it for when bundled images
-// are keyed by product.
-export function productImageSrc(description, productId, pdpPhotoUrl) {
-    if (pdpPhotoUrl)
-        return pdpPhotoUrl;
-    const text = (description || "").toLowerCase();
-    const cataloguePhoto = CATALOGUE_PHOTOS.find((entry) => entry.match.some((word) => text.includes(word)));
-    if (cataloguePhoto)
-        return cataloguePhoto.url;
-    const photo = PHOTOS.find((entry) => entry.match.some((word) => text.includes(word)));
-    if (photo)
-        return assetUrl(photo.path);
-    if (text.includes("insulation")) {
-        return encodeSvg(`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 420">
-        <rect width="640" height="420" fill="#fbf1cf"/>
-        <rect x="88" y="78" width="432" height="264" rx="16" fill="#f0c43f"/>
-        <rect x="120" y="110" width="368" height="200" rx="10" fill="#ffd95e"/>
-        <g stroke="#e2b12e" stroke-width="8" opacity="0.75">
-          <line x1="140" y1="140" x2="468" y2="140"/>
-          <line x1="140" y1="190" x2="468" y2="190"/>
-          <line x1="140" y1="240" x2="468" y2="240"/>
-        </g>
-      </svg>
-    `);
-    }
-    return encodeSvg(`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 420">
-      <rect width="640" height="420" fill="#edf1f5"/>
-      <rect x="132" y="108" width="376" height="204" rx="18" fill="#d5dde6"/>
-      <rect x="168" y="144" width="304" height="24" rx="12" fill="#9aa6b2"/>
-      <rect x="168" y="188" width="250" height="24" rx="12" fill="#aab5c0"/>
-      <rect x="168" y="232" width="220" height="24" rx="12" fill="#aab5c0"/>
-    </svg>
-  `);
-}