@cimplify/sdk 0.48.1 → 0.49.0

package/dist/react.js

@@ -6237,6 +6237,8 @@ function SlotPicker({
   schedulingMode = "intraday",
   durationUnit,
   durationValue,
+  hideElapsedSlots = true,
+  minLeadMinutes = 0,
   emptyMessage = "No available slots",
   className,
   classNames
@@ -6250,7 +6252,15 @@ function SlotPicker({
       enabled: slotsProp === void 0 && !!serviceId && !!date
     }
   );
-  const slots = slotsProp ?? fetched;
+  const rawSlots = slotsProp ?? fetched;
+  const slots = React10.useMemo(() => {
+    if (!hideElapsedSlots) return rawSlots;
+    const cutoff = Date.now() + minLeadMinutes * 6e4;
+    return rawSlots.filter((slot) => {
+      const start = Date.parse(slot.start_time);
+      return Number.isNaN(start) || start >= cutoff;
+    });
+  }, [rawSlots, hideElapsedSlots, minLeadMinutes]);
   if (isLoading && slots.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -6376,6 +6386,8 @@ function DateSlotPicker({
   schedulingMode,
   durationUnit,
   durationValue,
+  hideElapsedSlots = true,
+  minLeadMinutes = 0,
   className,
   classNames
 }) {
@@ -6521,7 +6533,9 @@ function DateSlotPicker({
             showPrice,
             schedulingMode,
             durationUnit,
-            durationValue
+            durationValue,
+            hideElapsedSlots,
+            minLeadMinutes
           }
         ) })
       ]
@@ -6966,6 +6980,289 @@ function ProductImageGallery({
     )
   ] });
 }
+var ASPECT_STYLES2 = {
+  square: { aspectRatio: "1/1" },
+  "4/3": { aspectRatio: "4/3" },
+  "16/9": { aspectRatio: "16/9" },
+  "16/10": { aspectRatio: "16/10" },
+  "3/4": { aspectRatio: "3/4" }
+};
+function StoreVideo({
+  src,
+  poster,
+  alt,
+  aspectRatio = "16/9",
+  controls = false,
+  autoplay = true,
+  loop = true,
+  muted = true,
+  lazy = true,
+  className
+}) {
+  const ref = React10.useRef(null);
+  const [inView, setInView] = React10.useState(!lazy);
+  React10.useEffect(() => {
+    if (!lazy || inView) return;
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === "undefined") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px" }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [lazy, inView]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-cimplify-store-video": true,
+      className,
+      style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES2[aspectRatio] },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          ref,
+          src: inView ? src : void 0,
+          poster,
+          autoPlay: autoplay,
+          loop,
+          muted,
+          playsInline: true,
+          controls,
+          preload: lazy ? "metadata" : "auto",
+          "aria-label": alt,
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
+          children: poster ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: poster,
+              alt: alt ?? "",
+              style: { width: "100%", height: "100%", objectFit: "cover" }
+            }
+          ) : null
+        }
+      )
+    }
+  );
+}
+var ASPECT_STYLES3 = {
+  square: { aspectRatio: "1/1" },
+  "4/3": { aspectRatio: "4/3" },
+  "16/9": { aspectRatio: "16/9" },
+  "3/4": { aspectRatio: "3/4" }
+};
+var MODEL_VIEWER_CDN = "https://unpkg.com/@google/model-viewer@4.0.0/dist/model-viewer.min.js";
+var modelViewerLoadPromise = null;
+function ensureModelViewer() {
+  if (typeof window === "undefined") return Promise.resolve();
+  if (modelViewerLoadPromise) return modelViewerLoadPromise;
+  if (window.customElements?.get("model-viewer")) {
+    modelViewerLoadPromise = Promise.resolve();
+    return modelViewerLoadPromise;
+  }
+  modelViewerLoadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.type = "module";
+    script.src = MODEL_VIEWER_CDN;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load model-viewer"));
+    document.head.appendChild(script);
+  });
+  return modelViewerLoadPromise;
+}
+function ProductModel3D({
+  src,
+  iosSrc,
+  poster,
+  alt,
+  aspectRatio = "square",
+  ar = true,
+  autoRotate = true,
+  cameraControls = true,
+  className
+}) {
+  const [ready, setReady] = React10.useState(false);
+  React10.useEffect(() => {
+    let cancelled = false;
+    ensureModelViewer().then(
+      () => {
+        if (!cancelled) setReady(true);
+      },
+      () => {
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-cimplify-product-model-3d": true,
+      className,
+      style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES3[aspectRatio] },
+      children: ready ? React10__default.default.createElement("model-viewer", {
+        src,
+        "ios-src": iosSrc,
+        alt,
+        poster,
+        ar: ar || void 0,
+        "ar-modes": ar ? "webxr scene-viewer quick-look" : void 0,
+        "camera-controls": cameraControls || void 0,
+        "auto-rotate": autoRotate || void 0,
+        "shadow-intensity": "1",
+        style: { width: "100%", height: "100%", backgroundColor: "transparent" }
+      }) : poster ? React10__default.default.createElement("img", {
+        src: poster,
+        alt: alt ?? "",
+        "data-cimplify-product-model-3d-loading": true,
+        style: { width: "100%", height: "100%", objectFit: "cover" }
+      }) : React10__default.default.createElement("div", {
+        "data-cimplify-product-model-3d-loading": true,
+        style: { width: "100%", height: "100%", backgroundColor: "var(--muted, #f3f4f6)" }
+      })
+    }
+  );
+}
+var ASPECT_STYLES4 = {
+  square: { aspectRatio: "1/1" },
+  "4/3": { aspectRatio: "4/3" },
+  "16/10": { aspectRatio: "16/10" },
+  "3/4": { aspectRatio: "3/4" }
+};
+function thumbnailFor(item) {
+  if (item.type === "image") return item.src;
+  return item.poster ?? null;
+}
+function thumbIcon(item) {
+  if (item.type === "video") return "\u25B6";
+  if (item.type === "model") return "\u25C6";
+  return null;
+}
+function MediaGallery({
+  items,
+  productName,
+  aspectRatio = "4/3",
+  className
+}) {
+  const validItems = React10.useMemo(
+    () => items.filter((i) => typeof i.src === "string" && i.src.trim().length > 0),
+    [items]
+  );
+  const [selected, setSelected] = React10.useState(0);
+  React10.useEffect(() => {
+    setSelected(0);
+  }, [validItems.length, productName]);
+  if (validItems.length === 0) return null;
+  const active = validItems[selected] ?? validItems[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-media-gallery": true, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-media-gallery-main": true,
+        style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES4[aspectRatio] },
+        children: active.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: active.src,
+            alt: active.alt ?? productName,
+            style: { width: "100%", height: "100%", objectFit: "cover" },
+            "data-cimplify-media-gallery-active": true
+          }
+        ) : active.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+          StoreVideo,
+          {
+            src: active.src,
+            poster: active.poster,
+            alt: active.alt ?? productName,
+            aspectRatio: "square",
+            lazy: false
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          ProductModel3D,
+          {
+            src: active.src,
+            iosSrc: active.iosSrc,
+            poster: active.poster,
+            alt: active.alt ?? productName,
+            aspectRatio: "square"
+          }
+        )
+      }
+    ),
+    validItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      radioGroup.RadioGroup,
+      {
+        "aria-label": `${productName} media thumbnails`,
+        value: String(selected),
+        onValueChange: (v) => setSelected(Number(v)),
+        "data-cimplify-media-gallery-thumbnails": true,
+        style: { display: "flex", gap: "0.5rem", marginTop: "0.75rem" },
+        children: validItems.map((item, index) => {
+          const thumb = thumbnailFor(item);
+          const icon = thumbIcon(item);
+          const isSelected = selected === index;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            radio.Radio.Root,
+            {
+              value: String(index),
+              "data-cimplify-media-gallery-thumb": true,
+              "data-selected": isSelected || void 0,
+              "data-type": item.type,
+              style: {
+                position: "relative",
+                width: "4rem",
+                height: "4rem",
+                overflow: "hidden",
+                padding: 0,
+                border: "none",
+                cursor: "pointer",
+                backgroundColor: "var(--muted, #f3f4f6)"
+              },
+              children: [
+                thumb ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: thumb,
+                    alt: "",
+                    style: { width: "100%", height: "100%", objectFit: "cover" }
+                  }
+                ) : null,
+                icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "white",
+                      fontSize: "0.875rem",
+                      textShadow: "0 1px 2px rgba(0,0,0,0.6)",
+                      pointerEvents: "none"
+                    },
+                    children: icon
+                  }
+                ) : null
+              ]
+            },
+            `${item.src}-${index}`
+          );
+        })
+      }
+    )
+  ] });
+}
 function CartLineItemRow({
   item,
   onRemove,
@@ -8372,7 +8669,7 @@ var CardVariant = /* @__PURE__ */ ((CardVariant2) => {
   CardVariant2["Subscription"] = "subscription";
   return CardVariant2;
 })(CardVariant || {});
-var ASPECT_STYLES2 = {
+var ASPECT_STYLES5 = {
   square: { aspectRatio: "1/1" },
   "4/3": { aspectRatio: "4/3" },
   "16/10": { aspectRatio: "16/10" },
@@ -8481,7 +8778,7 @@ function ProductCard({
         {
           "data-cimplify-product-card-image-container": true,
           className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
-          style: ASPECT_STYLES2[aspectRatio],
+          style: ASPECT_STYLES5[aspectRatio],
           children: renderImage ? renderImage({ src: imageUrl, alt: product.name, className: classNames?.image }) : /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
@@ -13675,6 +13972,7 @@ exports.FoodProductLayout = FoodProductLayout;
 exports.InventoryBadge = InventoryBadge;
 exports.LeaseServiceCard = LeaseServiceCard;
 exports.LocationPicker = LocationPicker;
+exports.MediaGallery = MediaGallery;
 exports.MetadataStringList = MetadataStringList;
 exports.OrderDetailPage = OrderDetailPage;
 exports.OrderHistory = OrderHistory;
@@ -13687,6 +13985,7 @@ exports.ProductCard = ProductCard;
 exports.ProductCustomizer = ProductCustomizer;
 exports.ProductGrid = ProductGrid;
 exports.ProductImageGallery = ProductImageGallery;
+exports.ProductModel3D = ProductModel3D;
 exports.ProductPage = ProductPage;
 exports.ProductSheet = ProductSheet;
 exports.ProductTemplate = ProductTemplate;
@@ -13711,6 +14010,7 @@ exports.SoldOutOverlay = SoldOutOverlay;
 exports.StaffPicker = StaffPicker;
 exports.StandardServiceCard = StandardServiceCard;
 exports.StoreNav = StoreNav;
+exports.StoreVideo = StoreVideo;
 exports.SubscriptionCard = SubscriptionCard;
 exports.TagPills = TagPills;
 exports.TimePicker = TimePicker;