@colabcommerce/elements 0.9.1 → 0.9.3

package/src/components/QuoteForm/index.jsx

@@ -1,82 +0,0 @@
-import { useState } from "react"
-import { QuoteFormProvider, useQuoteForm } from "@/contexts/quote-form"
-import QuoteFormSearch from "@/components/QuoteFormSearch"
-import QuoteMap from "@/components/QuoteMap"
-import QuoteFormStoreList from "@/components/QuoteFormStoreList"
-import TranslationsProvider from "@/contexts/translations"
-import QuoteLeadForm from "@/components/QuoteLeadForm"
-import { APIProvider } from "@vis.gl/react-google-maps"
-import Panel from "@/components/ui/Panel"
-import { Button } from "@/components/ui/Button"
-import cn from "@/lib/utils/cn"
-
-const QuoteFormPanels = ({ organizationId, products, locale, onClose, onSuccess }) => {
-
-  const { stepIndex: panelIndex, setStepIndex } = useQuoteForm()
-
-  const handleClose = () => {
-    onClose && onClose()
-  }
-
-  const handleSuccess = (emittedValues) => {
-    setStepIndex(2)
-    onSuccess && onSuccess(emittedValues)
-  }
-
-  return (
-    <div className="relative overflow-hidden h-[100%] py-1">
-      <div className="h-[100%] relative">
-        <Panel active={panelIndex === 0} className={cn(
-          "data-[state=open]:opacity-100 data-[state=open]:translate-x-0",
-          "data-[state=closed]:opacity-0 data-[state=closed]:-translate-x-6"
-        )}>
-          <div className="relative px-1 h-screen overflow-y-scroll">
-            <QuoteFormSearch />
-            <div className="pb-8">
-              <APIProvider apiKey={'AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M'}>
-                <QuoteMap />
-              </APIProvider>
-            </div>
-            <QuoteFormStoreList />
-          </div>
-        </Panel>
-        <Panel active={panelIndex === 1} className={cn(
-          "data-[state=open]:opacity-100 data-[state=open]:translate-x-0",
-          "data-[state=closed]:opacity-0 data-[state=closed]:-translate-x-6",
-          "flex items-center"
-        )}>
-          <div className="px-1">
-            <QuoteLeadForm onClose={() => setStepIndex(0)} onSuccess={handleSuccess} />
-          </div>
-        </Panel>
-        <Panel active={panelIndex === 2} className={cn(
-          "data-[state=open]:opacity-100 data-[state=open]:translate-x-0",
-          "data-[state=closed]:opacity-0 data-[state=closed]:-translate-x-6",
-          "flex items-center"
-        )}>
-          <div className="px-1">
-            <div className="text-center py-20 px-4">
-              <h2 className="text-2xl font-semibold mb-4">Thank you!</h2>
-              <p className="mb-8">Your quote request has been submitted successfully. We will get back to you shortly.</p>
-              <Button onClick={handleClose}>Close</Button>
-            </div>
-          </div>
-        </Panel>
-      </div>
-    </div>
-  )
-}
-
-const QuoteForm = ({ organizationId, products, locale, onClose, onSuccess }) => {
-  return (
-    <TranslationsProvider options={{ lng: locale }}>
-      <QuoteFormProvider organizationId={organizationId} products={products} locale={locale}>
-        <div className="cc" style={{ height: '100%' }}>
-          <QuoteFormPanels organizationId={organizationId} products={products} locale={locale} onClose={onClose} onSuccess={onSuccess} />
-        </div>
-      </QuoteFormProvider>
-    </TranslationsProvider>
-  )
-}
-
-export default QuoteForm

package/src/components/QuoteFormSearch/index.jsx

@@ -1,276 +0,0 @@
-"use client"
-
-import { useEffect, useId, useMemo, useRef, useState } from "react"
-import { Search, MapPin, Sliders } from "lucide-react"
-import * as Popover from "@radix-ui/react-popover"
-import * as ScrollArea from "@radix-ui/react-scroll-area"
-
-import { Button } from "@/components/ui/Button"
-import { useQuoteForm } from "@/contexts/quote-form"
-import { usePlacesAutocomplete } from "@/lib/usePlacesAutocomplete"
-import Input from "@/components/ui/Input"
-import { useTranslation } from "react-i18next"
-
-function getItemLabel(item) {
-  // Support a few common shapes:
-  // - Google Places autocomplete style: { placePrediction: { text: { text } } }
-  // - Simple: { label }, { description }, { text }
-  return (
-    item?.label ??
-    item?.description ??
-    item?.text ??
-    item?.placePrediction?.text?.text ??
-    item?.placePrediction?.structuredFormat?.mainText?.text ??
-    ""
-  )
-}
-
-function getItemSecondary(item) {
-  return (
-    item?.secondary ??
-    item?.secondary_text ??
-    item?.placePrediction?.structuredFormat?.secondaryText?.text ??
-    item?.placePrediction?.structuredFormat?.secondaryText ??
-    ""
-  )
-}
-
-function getItemId(item, fallback) {
-  return (
-    item?.id ??
-    item?.place_id ??
-    item?.placePrediction?.placeId ??
-    fallback
-  )
-}
-
-export function QuoteFormSearch() {
-
-  const { t } = useTranslation()
-  const [searchQuery, setSearchQuery] = useState("")
-  const [showFilters, setShowFilters] = useState(false)
-
-  // Radix dropdown state
-  const [open, setOpen] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
-
-  const { location, searchRadius, setSearchRadius, setSearchLocation, setUseLocationType, geoLocation } = useQuoteForm()
-
-  const { results, isLoading, error } = usePlacesAutocomplete({
-    query: searchQuery,
-    apiKey: "AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M",
-    center: { lat: 37.7937, lng: -122.3965 },
-    radiusMeters: 10000,
-    types: ["locality", "postal_code"],
-  })
-
-  const items = useMemo(() => Array.isArray(results) ? results : [], [results])
-
-  const inputRef = useRef(null)
-  const listId = useId()
-  const activeId = activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : undefined
-
-  // When results change while open, reset the highlighted row
-  useEffect(() => {
-    if (!open) return
-    if (isLoading) return
-    setActiveIndex(items.length ? 0 : -1)
-  }, [open, isLoading, items.length])
-
-  const commitSelection = (item) => {
-    const label = getItemLabel(item)
-    if (!label) return
-
-    setSearchQuery(label)
-    setOpen(false)
-
-    // Keep focus like Google
-    requestAnimationFrame(() => inputRef.current?.focus())
-
-    const locationObject = {
-      "latitude": item.location?.lat ?? null,
-      "longitude": item.location?.lng ?? null,
-      "accuracy": null,
-      "altitude": 0,
-      "altitudeAccuracy": null,
-      "heading": null,
-      "speed": null,
-      "city": item.city ?? null,
-      "region": item.region ?? null,
-      "country": item.country ?? null,
-      "postal": item.postalCode ?? null,
-      "timezone": null,
-      "ip": null,
-      "type": "search",
-      "raw": item
-    }
-
-    setSearchLocation(locationObject)
-    setUseLocationType('search')
-
-    // If your store locator has a method to actually run the search / set coords,
-    // this is where you’d call it, e.g.:
-    // setSelectedPlace(item)
-    // runSearch({ placeId: ..., radius: searchRadius })
-  }
-
-  const onKeyDown = (e) => {
-    // open dropdown with arrows
-    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-      setOpen(true)
-      return
-    }
-    if (!open) return
-
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault()
-        setActiveIndex((i) => Math.min(i + 1, items.length - 1))
-        break
-      }
-      case "ArrowUp": {
-        e.preventDefault()
-        setActiveIndex((i) => Math.max(i - 1, 0))
-        break
-      }
-      case "Enter": {
-        if (activeIndex >= 0 && items[activeIndex]) {
-          e.preventDefault()
-          commitSelection(items[activeIndex])
-        }
-        break
-      }
-      case "Escape": {
-        e.preventDefault()
-        setOpen(false)
-        break
-      }
-      default:
-        break
-    }
-  }
-
-  const handleUseCurrentLocation = () => {
-    setUseLocationType('geolocation')
-    setOpen(false)
-    setSearchQuery("")
-  }
-
-  const showEmpty =
-    open &&
-    !isLoading &&
-    !error &&
-    searchQuery.trim().length > 0 &&
-    items.length === 0
-
-  return (
-    <div className="max-w-3xl mx-auto">
-      <div className="rounded-xl p-6">
-        <div className="flex flex-row gap-4">
-          <Popover.Root open={open} onOpenChange={setOpen}>
-            <Popover.Anchor asChild>
-              <div className="flex-1 relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <Input
-                  ref={inputRef}
-                  type="text"
-                  placeholder={location?.city ? t('default:location_search_placeholder_w_location', { location: location.city }) : t('default:location_search_placeholder')}
-                  value={searchQuery}
-                  onChange={(e) => {
-                    setSearchQuery(e.target.value)
-                    setOpen(true)
-                  }}
-                  onFocus={() => setOpen(true)}
-                  onKeyDown={onKeyDown}
-                  className="pl-10 h-12"
-                  role="combobox"
-                  aria-autocomplete="list"
-                  aria-expanded={open}
-                  aria-controls={listId}
-                  aria-activedescendant={activeId}
-                />
-              </div>
-            </Popover.Anchor>
-
-            <Popover.Content
-              sideOffset={6}
-              align="start"
-              onOpenAutoFocus={(e) => e.preventDefault()} // keep focus in input
-              className="w-[var(--radix-popover-trigger-width)] max-w-[560px] rounded-xl border rounded bg-background shadow-lg overflow-hidden"
-            >
-              <ScrollArea.Root className="max-h-80">
-                <ScrollArea.Viewport>
-                  <div id={listId} role="listbox" className="p-2">
-                    {error ? (
-                      <div className="px-3 py-2 text-sm rounded-md border border-destructive/30 bg-destructive/10 text-destructive">
-                        {String(error)}
-                      </div>
-                    ) : null}
-
-                    {isLoading ? (
-                      <div className="px-3 py-2 text-sm text-muted-foreground">
-                        {t('default:loading')}
-                      </div>
-                    ) : null}
-
-                    {showEmpty ? (
-                      <div className="px-3 py-2 text-sm text-muted-foreground">
-                        {t('default:no_results')}
-                      </div>
-                    ) : null}
-
-                    {!isLoading && !error && items.map((item, idx) => {
-                      const active = idx === activeIndex
-                      const label = getItemLabel(item)
-                      const secondary = getItemSecondary(item)
-                      const id = getItemId(item, `${idx}`)
-
-                      if (!label) return null
-
-                      return (
-                        <div
-                          key={id}
-                          id={`${listId}-opt-${idx}`}
-                          role="option"
-                          aria-selected={active}
-                          onMouseEnter={() => setActiveIndex(idx)}
-                          onMouseDown={(e) => e.preventDefault()} // keep focus
-                          onClick={() => commitSelection(item)}
-                          className={[
-                            "cursor-pointer rounded-lg px-3 py-2",
-                            active ? "bg-muted" : "hover:bg-muted/60",
-                          ].join(" ")}
-                        >
-                          <div className="text-sm text-left font-medium leading-tight">
-                            {label}
-                          </div>
-                          {secondary ? (
-                            <div className="text-xs text-left text-muted-foreground mt-1 leading-tight">
-                              {secondary}
-                            </div>
-                          ) : null}
-                        </div>
-                      )
-                    })}
-                  </div>
-                </ScrollArea.Viewport>
-
-                <ScrollArea.Scrollbar orientation="vertical" className="flex select-none touch-none p-0.5 bg-transparent">
-                  <ScrollArea.Thumb className="flex-1 bg-border rounded-full" />
-                </ScrollArea.Scrollbar>
-              </ScrollArea.Root>
-            </Popover.Content>
-          </Popover.Root>
-        </div>
-        <div className="mt-2 flex items-center justify-center gap-2 text-sm text-muted-foreground">
-          <MapPin className="w-4 h-4" />
-          <button className="text-primary hover:underline font-medium" type="button" onClick={handleUseCurrentLocation}>
-            {t('default:use_my_location')}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default QuoteFormSearch

package/src/components/QuoteFormStoreList/index.jsx

@@ -1,65 +0,0 @@
-import { useState } from "react"
-import { MapPin, Phone, Clock, Navigation, Star } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import StoreListItem from '@/components/QuoteFormStoreListItem'
-import StoreListNoneFound from "@/components/StoreListNoneFound"
-import LoadingPuff from "@/components/ui/LoadingPuff"
-import { distanceBetweenPoints } from '@/lib/utils/measure'
-import { useQuoteForm } from '@/contexts/quote-form'
-
-export function QuoteFormStoreList() {
-
-  const { stores,
-    location,
-    products,
-    setStepIndex,
-    selectedStoreId, setSelectedStoreId, setMessageDialogOpen, setMessageStoreId, searchIsLoading, searchError, baseUrl, focusedStoreId, setFocusedStoreId } = useQuoteForm()
-
-  const handleSelect = (storeId) => {
-    setSelectedStoreId(storeId)
-    setStepIndex(1)
-  }
-
-  return (
-    <div className="space-y-4">
-      {!searchIsLoading && !searchError && stores.length === 0 && (
-        <StoreListNoneFound />
-      )}
-      {searchIsLoading && (
-        <div className="flex items-center justify-center h-48">
-          <LoadingPuff />
-        </div>
-      )}
-      {!searchIsLoading && !searchError && stores.map((store) => (
-        <StoreListItem
-          key={store.id}
-          id={store.id}
-          name={store.retailer_name}
-          placeId={store.place_id}
-          addressLineOne={store.address?.street_line_one}
-          addressLineTwo={store.address?.street_line_two}
-          city={store.address?.city}
-          province={store.address?.province}
-          postalCode={store.address?.postal_code}
-          country={store.address?.country}
-          distance={distanceBetweenPoints(location.latitude, location.longitude, store.address?.latitude, store.address?.longitude)}
-          phone={store.phone_number}
-          hours={store.retailer_location_hours}
-          services={[store.store_type]}
-          isFocused={focusedStoreId === store.id}
-          handleFocus={setFocusedStoreId}
-          href={`${baseUrl}/${store.id}`}
-          handleSelect={handleSelect}
-          locationProducts={store.retailer_location_products}
-          requestedProducts={products}
-        />
-      ))}
-      {!searchIsLoading && searchError && (
-        <div className="text-red-600 text-center">
-          An error occurred while searching for stores. Please try again.
-        </div>
-      )}
-    </div>
-  )
-}
-export default QuoteFormStoreList

package/src/components/QuoteFormStoreListItem/index.jsx

@@ -1,134 +0,0 @@
-import { MapPin, Phone, Clock, Check, CheckCheck, CircleAlert, ChevronDown, Info } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { metersToMiles } from "@/lib/utils/measure"
-import CollapsibleStoreHours from "@/components/CollapsibleStoreHours"
-import { useTranslation } from "react-i18next"
-import useProductAvailability from "@/lib/useProductAvailability";
-
-const StoreListItem = ({
-  id,
-  name,
-  placeId,
-  addressLineOne,
-  addressLineTwo,
-  city,
-  province,
-  postalCode,
-  country,
-  phone,
-  hours,
-  distance,
-  services = [],
-  isFocused,
-  handleFocus,
-  handleSelect,
-  requestedProducts = [],
-  locationProducts = [],
-}) => {
-  const { t } = useTranslation()
-
-  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${name}&destination_place_id=${placeId}`
-
-  const { availability, allAvailable, allStocked, noneStocked, noneAvailable, availabilitySummary } = useProductAvailability(locationProducts, requestedProducts)
-
-  const handleStoreSelected = (e) => {
-    e.stopPropagation()
-    handleSelect(id)
-  }
-
-  return (
-    <div
-      className={`bg-card border rounded-xl p-6 transition-all hover:shadow-lg cursor-pointer ${isFocused ? "ring-2 ring-primary shadow-lg" : ""
-        }`}
-      onClick={() => handleFocus(id)}
-    >
-      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
-        <div className="flex-1">
-          <div className="flex items-start justify-between gap-4 mb-3">
-            <div>
-              <h3 className="font-bold text-lg text-left mb-1">{name}</h3>
-            </div>
-          </div>
-
-          <div className="space-y-2 text-sm">
-            <div className="flex items-start gap-2">
-              <MapPin className="w-4 h-4 text-muted-foreground mt-0.5 shrink-0" />
-              <div>
-                <p className="font-medium text-left">{addressLineOne}</p>
-                <p className="text-muted-foreground text-left">{city}, {province} {postalCode}</p>
-                <p className="text-primary font-medium mt-1 text-left">{t('default:distance_away', { distance: metersToMiles(distance).toFixed(1), distanceUnit: 'miles' })}</p>
-              </div>
-            </div>
-
-            <div className="flex items-top gap-2">
-              <div className="mt-2.5">
-                <Clock className="w-4 h-4 text-muted-foreground" />
-              </div>
-              <span className="text-muted-foreground"><CollapsibleStoreHours hours={hours} /></span>
-            </div>
-          </div>
-
-          {availabilitySummary === 'allStocked' &&
-            <div className="flex items-center shrink mt-3 px-3 py-1 bg-green-50 text-green-600 text-xs font-medium rounded-full">
-              <CheckCheck className="w-4 h-4 text-green-600 me-1" />
-              All Items Stocked
-            </div>
-          }
-
-          {availabilitySummary === 'allAvailable' &&
-            <div
-              className="flex items-center shrink mt-3 px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full"
-            >
-              <Info className="w-4 me-1 h-4 text-orange-600" />
-              Available by Special Order
-            </div>
-          }
-
-          {availabilitySummary === 'mixed' &&
-            <div >
-              <div className="flex items-center gap-2 mt-4 text-sm">
-                <span className="font-bold w-28 text-wrap">Braxton</span>
-                <span
-                  className="flex items-center px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full"
-                >
-                  <Info className="w-4 me-1 h-4 text-orange-600" />
-                  Special Order
-                </span>
-              </div>
-              <div className="flex items-center gap-2 mt-4 text-sm">
-                <span className="font-bold w-28 text-wrap">Juno</span>
-                <span
-                  className="flex items-center px-3 py-1 bg-green-50 text-green-600 text-xs font-medium rounded-full"
-                >
-                  <CheckCheck className="w-4 me-1 h-4 text-green-600" />
-                  Stocked
-                </span>
-              </div>
-            </div>
-          }
-
-          <div className="flex flex-wrap gap-2 mt-4">
-            {services.map((service) => (
-              <span
-                key={service}
-                className="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
-              >
-                {service}
-              </span>
-            ))}
-          </div>
-        </div>
-
-        <div className="flex md:flex-col gap-2">
-          <Button onClick={handleStoreSelected} variant="default" className="whitespace-nowrap">
-            {t('default:select_store')}
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default StoreListItem

package/src/components/QuoteLeadForm/index.jsx

@@ -1,16 +0,0 @@
-import LeadForm from '@/components/LeadForm'
-import { useQuoteForm } from '@/contexts/quote-form'
-
-const QuoteLeadForm = ({ onClose, onSuccess }) => {
-
-  const { organizationId, location, selectedStoreId, products } = useQuoteForm()
-
-  const handleSuccess = (formValues, lead) => {
-    onSuccess && onSuccess({ formValues, lead })
-  }
-  return (
-    <LeadForm onClose={onClose} products={products} activityType="LeadActivity::QuoteRequest" onSuccess={handleSuccess} location={location} organizationId={organizationId} selectedLocationId={selectedStoreId} />
-  )
-}
-
-export default QuoteLeadForm

package/src/components/QuoteMap/index.jsx

@@ -1,96 +0,0 @@
-// The import part of the map is that you need to let the map managed its own center
-// and zoom state internally. Using external state management (like React state) can lead to
-// performance issues and a suboptimal user experience.
-import { useEffect, useState, useRef } from 'react'
-import { Map, useMap } from '@vis.gl/react-google-maps'
-import QuoteMapMarker from '@/components/QuoteMapMarker'
-import { useQuoteForm } from '@/contexts/quote-form'
-
-const QuoteMap = () => {
-
-  const { location, stores, focusedStoreId, setFocusedStoreId, setSelectedStoreId, setStepIndex } = useQuoteForm()
-  const map = useMap()
-
-  const zoomIn = () => {
-    if (!map) return;
-    const currentZoom = map.getZoom();
-    map.setZoom(currentZoom + 1);
-  }
-
-  const zoomOut = () => {
-    if (!map) return;
-    const currentZoom = map.getZoom();
-    map.setZoom(currentZoom - 1);
-  }
-
-  useEffect(() => {
-    if (!map) return;
-    if (location?.latitude && location?.longitude) {
-      map.panTo({ lat: location.latitude, lng: location.longitude })
-      map.setZoom(9)
-    }
-  }, [location, map]);
-
-  useEffect(() => {
-    if (!map || !focusedStoreId) return;
-    const focusedStore = stores.find(store => store.id === focusedStoreId)
-    if (focusedStore && focusedStore.address) {
-      map.panTo({ lat: focusedStore.address.latitude * 1, lng: focusedStore.address.longitude * 1 })
-    }
-  }, [focusedStoreId, stores, map]);
-
-  const handleMarkerClick = (storeId) => {
-    setFocusedStoreId(storeId)
-  }
-
-  const handleMarkerSelect = (storeId) => {
-    setSelectedStoreId(storeId)
-    setStepIndex(1)
-  }
-
-  return (
-    <div className="relative">
-      <div className="bg-muted rounded-xl overflow-hidden border shadow-md h-[300px]">
-        {/* Map placeholder - Replace with actual map integration (Google Maps, Mapbox, etc.) */}
-        <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/5 to-muted">
-          <div className="text-center w-full">
-
-            <Map
-              style={{ width: '100%', height: '300px' }}
-              defaultCenter={{ lat: 22.54992, lng: 0 }}
-              defaultZoom={3}
-              gestureHandling='greedy'
-              disableDefaultUI
-              mapId="b1e4f5f5f8c7e2d9"
-            >
-              {stores.map((store) => (
-                <QuoteMapMarker key={store.id} store={store} isSelected={focusedStoreId === store.id} onClick={handleMarkerClick} onSelect={handleMarkerSelect} />
-              ))}
-            </Map>
-          </div>
-        </div>
-
-        {/* Map controls overlay */}
-        <div className="absolute top-4 right-4 flex flex-col gap-2">
-          <button className="bg-card border shadow-md rounded-lg p-2 hover:bg-accent transition-colors" onClick={zoomIn}>
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-            </svg>
-          </button>
-          <button className="bg-card border shadow-md rounded-lg p-2 hover:bg-accent transition-colors" onClick={zoomOut}>
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Results count badge */}
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-card border shadow-lg rounded-full px-4 py-2 text-sm font-medium">
-          <span className="text-primary">{stores.length}</span> stores found
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default QuoteMap