@colabcommerce/elements 0.9.1 → 0.9.3

package/src/lib/useHours.js

@@ -1,205 +0,0 @@
-import * as React from "react";
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronDown } from "lucide-react";
-import { useTranslation } from "react-i18next";
-
-const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-export default function useHours({
-  hours,
-  openingSoonMinutes = 60,
-  closingSoonMinutes = 60,
-  t,
-}) {
-
-  const computed = React.useMemo(() => {
-    const safeHours = Array.isArray(hours) ? hours : [];
-    const storeTz =
-      safeHours.find((h) => h?.timezone)?.timezone ||
-      Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-    const now = new Date();
-    const storeWeekdayIndex = getWeekdayIndexInTimeZone(now, storeTz); // 0..6
-    const today = safeHours.find((h) => h?.day === storeWeekdayIndex);
-
-    const status = computeStatus({
-      now,
-      today,
-      openingSoonMinutes,
-      closingSoonMinutes,
-      t,
-    });
-
-    // Display Monday..Sunday
-    const displayOrder = [1, 2, 3, 4, 5, 6, 0];
-    const byDay = new Map(safeHours.map((h) => [h.day, h]));
-    const rows = displayOrder.map((dayIdx) => {
-      const h = byDay.get(dayIdx);
-      const label = t(`default:${DAY_LABELS[dayIdx].toLowerCase()}`);
-      const isToday = dayIdx === storeWeekdayIndex;
-
-      let text = t("default:closed");
-      if (h?.open) {
-        const openDate = buildOpenDateForDisplay(h);
-        const closeDate = buildCloseDateForDisplay(h, openDate);
-        if (openDate && closeDate) {
-          text = `${formatTimeLocal(openDate)} - ${formatTimeLocal(closeDate)}`;
-        } else {
-          text = t("default:open");
-        }
-      }
-
-      return { dayIdx, label, text, isToday };
-    });
-
-    return {
-      statusLabel: t(`default:${status.label.toLowerCase().replace(" ", "_")}`), // "Closed" | "Opening Soon" | "Open" | "Closing Soon"
-      statusDetail: status.detail, // "Opens at 9am" | "Closes at 4:30pm" | ""
-      rows,
-    };
-  }, [hours, openingSoonMinutes, closingSoonMinutes, t]);
-
-  return { computed }
-}
-
-/**
- * Toggle label logic based on today's schedule (store timezone for "today",
- * comparisons against the user's current instant).
- *
- * Adds a detail line:
- * - Closed / Opening Soon -> "Opens at X"
- * - Open / Closing Soon -> "Closes at Y"
- */
-function computeStatus({ now, today, openingSoonMinutes, closingSoonMinutes, t }) {
-  if (!today || !today.open) return { label: t('default:closed'), detail: "" };
-
-  const openDate = buildOpenDateForDisplay(today);
-  const closeDate = buildCloseDateForDisplay(today, openDate);
-
-  // If schedule incomplete, still show basic label
-  if (!openDate || !closeDate) return { label: t('default:open'), detail: "" };
-
-  const nowMs = now.getTime();
-  const openMs = openDate.getTime();
-  const closeMs = closeDate.getTime();
-
-  const openingSoonStart = openMs - openingSoonMinutes * 60 * 1000;
-  const closingSoonStart = closeMs - closingSoonMinutes * 60 * 1000;
-
-  const opensDetail = t('default:opens_at', { time: formatTimeLocal(openDate) });
-  const closesDetail = t('default:closes_at', { time: formatTimeLocal(closeDate) });
-
-  if (nowMs < openMs) {
-    if (nowMs >= openingSoonStart) return { label: t('default:opening_soon'), detail: opensDetail };
-    return { label: t('default:closed'), detail: opensDetail };
-  }
-
-  if (nowMs >= openMs && nowMs < closeMs) {
-    if (nowMs >= closingSoonStart) return { label: t('default:closing_soon'), detail: closesDetail };
-    return { label: t('default:open'), detail: closesDetail };
-  }
-
-  return { label: t('default:closed'), detail: opensDetail };
-}
-
-/** Returns weekday index (0=Sun..6=Sat) for a Date, as seen in `timeZone`. */
-function getWeekdayIndexInTimeZone(date, timeZone) {
-  const weekday = new Intl.DateTimeFormat("en-US", { weekday: "short", timeZone }).format(date);
-  switch (weekday) {
-    case "Sun":
-      return 0;
-    case "Mon":
-      return 1;
-    case "Tue":
-      return 2;
-    case "Wed":
-      return 3;
-    case "Thu":
-      return 4;
-    case "Fri":
-      return 5;
-    case "Sat":
-      return 6;
-    default:
-      return new Date(date).getDay();
-  }
-}
-
-/**
- * Build "open" Date (instant) for display in user's local time.
- * Prefer `open_at` because it encodes offset and is DST-correct for that date.
- */
-function buildOpenDateForDisplay(h) {
-  if (!h) return null;
-
-  if (h.open_at) {
-    const d = new Date(h.open_at);
-    return isValidDate(d) ? d : null;
-  }
-
-  if (typeof h.open_at_hour === "number" && typeof h.open_at_minute === "number") {
-    return buildDateFromLocalStoreTime({
-      storeHour: h.open_at_hour,
-      storeMinute: h.open_at_minute,
-      utcOffsetMinute: h.utc_offset_minute,
-    });
-  }
-
-  return null;
-}
-
-/**
- * Build "close" Date (instant). If close <= open, assume next day.
- */
-function buildCloseDateForDisplay(h, openDate) {
-  if (!h) return null;
-
-  if (typeof h.close_at_hour !== "number" || typeof h.close_at_minute !== "number") return null;
-
-  let closeDate = buildDateFromLocalStoreTime({
-    storeHour: h.close_at_hour,
-    storeMinute: h.close_at_minute,
-    utcOffsetMinute: h.utc_offset_minute,
-    anchorDate: openDate || undefined,
-  });
-
-  if (!closeDate || !openDate) return closeDate;
-
-  if (closeDate.getTime() <= openDate.getTime()) {
-    closeDate = new Date(closeDate.getTime() + 24 * 60 * 60 * 1000);
-  }
-
-  return closeDate;
-}
-
-/**
- * Build an instant from a store-local time-of-day plus a fixed UTC offset.
- * storeLocal = UTC + offset => UTC = storeLocal - offset
- */
-function buildDateFromLocalStoreTime({ storeHour, storeMinute, utcOffsetMinute, anchorDate }) {
-  const base = anchorDate ? new Date(anchorDate) : new Date();
-  const y = base.getFullYear();
-  const m = base.getMonth();
-  const d = base.getDate();
-
-  const utcMillis = Date.UTC(y, m, d, storeHour, storeMinute, 0) - utcOffsetMinute * 60 * 1000;
-  const out = new Date(utcMillis);
-
-  return isValidDate(out) ? out : null;
-}
-
-function isValidDate(d) {
-  return d instanceof Date && !Number.isNaN(d.getTime());
-}
-
-/** Format in user's local timezone as "9am" or "4:30pm". */
-function formatTimeLocal(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-  })
-    .format(date)
-    .replace(":00", "")
-    .replace(" AM", "am")
-    .replace(" PM", "pm");
-}

package/src/lib/usePlacesAutocomplete.js

@@ -1,288 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-
-/**
- * @typedef {{ lat: number, lng: number }} LatLng
- */
-
-/**
- * @typedef {{
- *  placeId: string,
- *  description: string,
- *  mainText?: string,
- *  secondaryText?: string,
- *  types?: string[],
- *  distanceMeters?: number,
- *  location?: { lat: number, lng: number } | null,
- *  city?: string | null,
- *  region?: string | null,        // State / Province
- *  country?: string | null,       // e.g. "US" (shortText) or "United States" (longText) depending on preference
- *  postalCode?: string | null
- * }} AutocompleteResult
- */
-
-function pickComponent(components, wantedTypes) {
-  // returns the first component that matches ANY of the wanted types
-  if (!Array.isArray(components)) return null;
-  for (const c of components) {
-    const t = Array.isArray(c?.types) ? c.types : [];
-    if (wantedTypes.some((wt) => t.includes(wt))) return c;
-  }
-  return null;
-}
-
-function parseAddressComponents(addressComponents) {
-  // Places (New) AddressComponent has: longText, shortText, types :contentReference[oaicite:2]{index=2}
-  const cityComp =
-    pickComponent(addressComponents, ["locality"]) ||
-    pickComponent(addressComponents, ["postal_town"]) ||
-    pickComponent(addressComponents, ["administrative_area_level_2"]); // fallback
-
-  const regionComp = pickComponent(addressComponents, [
-    "administrative_area_level_1",
-  ]);
-
-  const countryComp = pickComponent(addressComponents, ["country"]);
-
-  const postalComp = pickComponent(addressComponents, ["postal_code"]);
-
-  return {
-    city: cityComp?.longText ?? null,
-    // region: use shortText for "CA", "BC" etc; fall back to longText if missing
-    region: regionComp?.shortText ?? regionComp?.longText ?? null,
-    // country: use shortText ("US") if available; otherwise longText
-    country: countryComp?.shortText ?? countryComp?.longText ?? null,
-    postalCode: postalComp?.longText ?? postalComp?.shortText ?? null,
-  };
-}
-
-/**
- * Google Places Autocomplete (v1) + Place Details enrichment (location + addressComponents)
- *
- * @param {Object} params
- * @param {string} params.query
- * @param {string} params.apiKey
- * @param {LatLng|null} [params.center=null]
- * @param {number} [params.radiusMeters=500]
- * @param {number} [params.debounceTime=300]
- * @param {string} [params.type] - single primary type filter (e.g. "(cities)" or "postal_code")
- * @param {string[]} [params.types] - if provided, only the first entry is used
- * @param {number} [params.maxResults=8] - number of suggestions to enrich (details calls)
- * @param {number} [params.minLength=2]
- *
- * @returns {{ results: AutocompleteResult[], isLoading: boolean, error: Error | null }}
- */
-export function usePlacesAutocomplete({
-  query,
-  apiKey,
-  center = null,
-  radiusMeters = 500,
-  debounceTime = 300,
-  type,
-  types,
-  maxResults = 8,
-  minLength = 2,
-} = {}) {
-  const [results, setResults] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  const abortRef = useRef({ autocomplete: null, details: null });
-  const debounceTimerRef = useRef(null);
-  const requestSeqRef = useRef(0);
-
-  // Cache placeId -> enriched payload to reduce repeated detail calls
-  const cacheRef = useRef(new Map());
-
-  const input = useMemo(() => (query ?? "").trim(), [query]);
-
-  useEffect(() => {
-    if (!input || input.length < minLength) {
-      abortRef.current.autocomplete?.abort?.();
-      abortRef.current.details?.abort?.();
-      setResults([]);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    if (!apiKey) {
-      setError(new Error("Google Places API key is required"));
-      setResults([]);
-      setIsLoading(false);
-      return;
-    }
-
-    setError(null);
-    clearTimeout(debounceTimerRef.current);
-
-    const mySeq = ++requestSeqRef.current;
-
-    debounceTimerRef.current = setTimeout(async () => {
-      abortRef.current.autocomplete?.abort?.();
-      abortRef.current.details?.abort?.();
-
-      const acController = new AbortController();
-      const detailsController = new AbortController();
-      abortRef.current.autocomplete = acController;
-      abortRef.current.details = detailsController;
-
-      setIsLoading(true);
-
-      try {
-        // 1) Autocomplete (New) POST
-        const body = { input };
-
-        if (
-          center &&
-          Number.isFinite(center.lat) &&
-          Number.isFinite(center.lng)
-        ) {
-          body.locationBias = {
-            circle: {
-              center: { latitude: center.lat, longitude: center.lng },
-              radius: radiusMeters,
-            },
-          };
-        }
-
-        // Include up to 5 types if provided; otherwise use single type if provided
-        if (Array.isArray(types) && types.length) {
-          // Places API (New) uses `includedPrimaryTypes` (max 5)
-          body.includedPrimaryTypes = types.slice(0, 5);
-        }
-
-        const acRes = await fetch(
-          "https://places.googleapis.com/v1/places:autocomplete",
-          {
-            method: "POST",
-            signal: acController.signal,
-            headers: {
-              "Content-Type": "application/json",
-              "X-Goog-Api-Key": apiKey,
-            },
-            body: JSON.stringify(body),
-          }
-        );
-
-        if (!acRes.ok) {
-          const text = await acRes.text();
-          throw new Error(`Autocomplete error ${acRes.status}: ${text}`);
-        }
-
-        const acJson = await acRes.json();
-        const suggestions = Array.isArray(acJson?.suggestions)
-          ? acJson.suggestions
-          : [];
-
-        const placePredictions = suggestions
-          .map((s) => s?.placePrediction)
-          .filter(Boolean);
-
-        const base = placePredictions.map((p) => {
-          const mainText = p?.structuredFormat?.mainText?.text;
-          const secondaryText = p?.structuredFormat?.secondaryText?.text;
-          const description =
-            p?.text?.text || [mainText, secondaryText].filter(Boolean).join(", ");
-
-          return {
-            placeId: p.placeId,
-            description,
-            mainText,
-            secondaryText,
-            types: p.types,
-            distanceMeters: p.distanceMeters,
-            location: null,
-            city: null,
-            region: null,
-            country: null,
-            postalCode: null,
-          };
-        });
-
-        if (requestSeqRef.current !== mySeq) return;
-
-        // 2) Enrich each item with Place Details: location + addressComponents
-        // Field masks are required/best practice and supported via `fields` param or X-Goog-FieldMask header. :contentReference[oaicite:3]{index=3}
-        const toEnrich = base.slice(0, Math.max(0, maxResults));
-
-        const enriched = await Promise.all(
-          toEnrich.map(async (r) => {
-            const cached = cacheRef.current.get(r.placeId);
-            if (cached) return { ...r, ...cached };
-
-            const url = `https://places.googleapis.com/v1/places/${encodeURIComponent(
-              r.placeId
-            )}?fields=location,addressComponents`;
-
-            const detRes = await fetch(url, {
-              method: "GET",
-              signal: detailsController.signal,
-              headers: {
-                "X-Goog-Api-Key": apiKey,
-                "X-Goog-FieldMask": "location,addressComponents",
-              },
-            });
-
-            if (!detRes.ok) return r;
-
-            const detJson = await detRes.json();
-
-            const loc = detJson?.location;
-            const location =
-              loc &&
-                Number.isFinite(loc.latitude) &&
-                Number.isFinite(loc.longitude)
-                ? { lat: loc.latitude, lng: loc.longitude }
-                : null;
-
-            const parsed = parseAddressComponents(detJson?.addressComponents);
-
-            const patch = {
-              location,
-              city: parsed.city,
-              region: parsed.region,
-              country: parsed.country,
-              postalCode: parsed.postalCode,
-            };
-
-            cacheRef.current.set(r.placeId, patch);
-            return { ...r, ...patch };
-          })
-        );
-
-        const enrichedById = new Map(enriched.map((e) => [e.placeId, e]));
-        const finalResults = base.map((r) => enrichedById.get(r.placeId) || r);
-
-        if (requestSeqRef.current !== mySeq) return;
-        setResults(finalResults);
-      } catch (e) {
-        if (e?.name === "AbortError") return;
-        if (requestSeqRef.current !== mySeq) return;
-
-        setError(e instanceof Error ? e : new Error("Unknown error"));
-        setResults([]);
-      } finally {
-        if (requestSeqRef.current === mySeq) setIsLoading(false);
-      }
-    }, debounceTime);
-
-    return () => {
-      clearTimeout(debounceTimerRef.current);
-      abortRef.current.autocomplete?.abort?.();
-      abortRef.current.details?.abort?.();
-    };
-  }, [
-    input,
-    apiKey,
-    center?.lat,
-    center?.lng,
-    radiusMeters,
-    debounceTime,
-    minLength,
-    maxResults,
-  ]);
-
-  return { results, isLoading, error };
-}
-
-export default usePlacesAutocomplete;

package/src/lib/useProductAvailability.js

@@ -1,38 +0,0 @@
-const useProductAvailability = (storeProducts, requestedProducts, filterBy = ['sku']) => {
-  const availability = {}
-
-  requestedProducts.map((reqProd) => {
-    const storeProd = storeProducts.find(sp => filterBy.some(key => sp[key] === reqProd[key]))
-    if (storeProd) {
-      availability[reqProd.sku] = {
-        stocked: storeProd.stocked,
-        available: storeProd.available,
-      }
-    } else {
-      availability[reqProd.sku] = {
-        stocked: false,
-        available: false,
-      }
-    }
-  })
-
-  const allStocked = Object.values(availability).every(avail => avail.stocked)
-  const allAvailable = Object.values(availability).every(avail => avail.available)
-  const noneStocked = Object.values(availability).every(avail => !avail.stocked)
-  const noneAvailable = Object.values(availability).every(avail => !avail.available)
-
-  // Availability summaries: allStocked, allAvailable, mixed, none
-  // Return one availabilitySummary key along with availability details
-  let availabilitySummary = 'mixed'
-  if (allStocked) {
-    availabilitySummary = 'allStocked'
-  } else if (allAvailable) {
-    availabilitySummary = 'allAvailable'
-  } else if (noneStocked && noneAvailable) {
-    availabilitySummary = 'none'
-  }
-
-  return { availability, allAvailable, allStocked, noneStocked, noneAvailable, availabilitySummary }
-}
-
-export default useProductAvailability

package/src/lib/useRudderAnalytics.js

@@ -1,50 +0,0 @@
-/*
- *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
- *  All rights reserved.
- * 
- *  This hook provides a simple interface for Rudderstack analytics tracking
- *  exposing the browser APIs for tracking events, page views, and identifying users.
- * 
- *  Usage:
- *    const { track, page, identify } = useRudderStackAnalytics();
- */
-
-import { useEffect, useState } from 'react';
-import { RudderAnalytics } from '@rudderstack/analytics-js';
-
-const useRudderStackAnalytics = () => {
-  const [analytics, setAnalytics] = useState()
-
-  useEffect(() => {
-    if (!analytics) {
-      const analyticsInstance = new RudderAnalytics();
-      analyticsInstance.load(import.meta.env.RS_WRITE_KEY, import.meta.env.RS_DATA_PLANE_URL);
-
-      analyticsInstance.ready(() => {
-        console.log('We are all set!!!');
-      });
-
-      setAnalytics(analyticsInstance);
-    }
-  }, [analytics]);
-
-  return {
-    track: (eventName, properties) => {
-      if (analytics) {
-        analytics.track(eventName, properties);
-      };
-    },
-    page: (category, name, properties) => {
-      if (analytics) {
-        analytics.page(category, name, properties);
-      };
-    },
-    identify: (userId, traits) => {
-      if (analytics) {
-        analytics.identify(userId, traits);
-      };
-    },
-  };
-};
-
-export default useRudderStackAnalytics

package/src/lib/useSearchResults.js

@@ -1,102 +0,0 @@
-/*
- *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
- *  All rights reserved.
- * 
- * This hook provides store location results based upon a lat/lng location, page, pageSize, as well
- * as an arrays of
- * availableCollectionIds
- * stockedCollectionIds
- * availableProductSkus
- * stockedProductSkus
- * availableExternalProductIds
- * stockedExternalProductIds
- * Usage:
- *   const { stores, meta } = useSearchResults({ 
- *                        location, stockedCollectionIds, availableCollectionIds, stockedProductSkus, availableProductSkus, stockedExternalProductIds, availableExternalProductIds, page, pageSize });
- */
-
-import { useEffect, useState } from 'react'
-
-export default function useSearchResults({
-  organizationId,
-  location,
-  availableCollectionIds = [],
-  stockedCollectionIds = [],
-  availableProductSkus = [],
-  stockedProductSkus = [],
-  availableExternalProductIds = [],
-  stockedExternalProductIds = [],
-  radius = '25mi',
-  page = 1,
-  pageSize = 10,
-}) {
-
-  const [stores, setStores] = useState([])
-  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 5 })
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState(null)
-
-  useEffect(() => {
-    async function fetchStores() {
-      if (!location) {
-        setStores([])
-        setMeta({ total: 0, page: 1, pageSize: 5 })
-        setIsLoading(false)
-        setError(null)
-        return
-      }
-
-      setIsLoading(true)
-      setError(null)
-
-      const params = new URLSearchParams()
-      params.append('latitude', location.latitude)
-      params.append('longitude', location.longitude)
-      params.append('per_page', pageSize)
-      params.append('radius', radius)
-
-      availableCollectionIds.forEach(id => params.append('availableCollectionIds', id))
-      stockedCollectionIds.forEach(id => params.append('stockedCollectionIds', id))
-      availableProductSkus.forEach(sku => params.append('availableProductSkus', sku))
-      stockedProductSkus.forEach(sku => params.append('stockedProductSkus', sku))
-      availableExternalProductIds.forEach(id => params.append('availableExternalProductIds', id))
-      stockedExternalProductIds.forEach(id => params.append('stockedExternalProductIds', id))
-
-      const response = await fetch(`https://api.colabcommerce.com/widget_api/store_locator?${params.toString()}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Cc-Id': organizationId
-        },
-      })
-      const data = await response.json()
-
-      if (!response.ok) {
-        setStores([])
-        setMeta({ total: 0, page: 1, pageSize: 5 })
-        setIsLoading(false)
-        setError(new Error(data.message || 'Failed to fetch store locations'))
-        return
-      }
-      setStores(data.results || [])
-      setMeta(data.meta || { total: 0, page: 1, pageSize: 10 })
-      setIsLoading(false)
-      setError(null)
-    }
-
-    fetchStores()
-  }, [
-    location,
-    availableCollectionIds,
-    stockedCollectionIds,
-    availableProductSkus,
-    stockedProductSkus,
-    availableExternalProductIds,
-    stockedExternalProductIds,
-    radius,
-    page,
-    pageSize,
-  ])
-
-  return { stores, meta, isLoading, error }
-}