@colabcommerce/elements 0.0.4 → 0.9.1

package/src/components/Store/index.jsx

@@ -0,0 +1,44 @@
+import StoreInfo from '@/components/StoreInfo'
+import StoreContact from '@/components/StoreContact'
+import StoreMap from '@/components/StoreMap'
+import StoreProducts from '@/components/StoreProducts'
+import { StoreProvider } from '@/contexts/store'
+import TranslationProvider from '@/contexts/translations'
+
+const Store = ({ storeId, locale = "en", initialData = null }) => {
+  return (
+    <TranslationProvider options={{ lng: locale }}>
+      <StoreProvider id={storeId} initialData={initialData}>
+        <div className="cc">
+          <main className="flex-1">
+            {/* Store Hero Section */}
+            <StoreInfo />
+
+            {/* Store Details Grid */}
+            <section className="py-12 lg:py-16 bg-muted/30">
+              <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="grid lg:grid-cols-3 gap-8">
+                  <div className="lg:col-span-2">
+                    <StoreContact />
+                  </div>
+                  <div>
+                    <StoreMap />
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            {/* Products Section */}
+            <section className="py-12 lg:py-16">
+              <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+                <StoreProducts />
+              </div>
+            </section>
+          </main>
+        </div>
+      </StoreProvider>
+    </TranslationProvider>
+  )
+}
+
+export default Store

package/src/components/StoreContact/index.jsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { Phone, Mail, MapPin, Clock, Calendar, Globe, MessageSquare } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import HoursList from "@/components/HoursList"
+import { useStore } from "@/contexts/store"
+
+export function StoreContact() {
+
+  const { store } = useStore()
+
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${store?.name}&destination_place_id=${store?.placeId}`
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-6">
+        <h2 className="text-2xl font-bold mb-6">Contact Information</h2>
+        <div className="space-y-4">
+          <div className="flex items-start gap-4">
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+              <MapPin className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <div className="font-semibold mb-1">Address</div>
+              <div className="text-muted-foreground">
+                {store?.address?.street_line_one} {store?.address?.street_line_two && (`, ${store.address.street_line_two}`)}
+                <br />
+                {store?.address?.city}, {store?.address?.province} {store?.address?.postal_code}
+              </div>
+              <a className="px-0 h-auto mt-2 text-primary hover:underline py-3 " href={directionsUrl} target="_blank" rel="noopener noreferrer">
+                Get Directions →
+              </a>
+            </div>
+          </div>
+
+          {store?.phone_number &&
+            <div className="flex items-start gap-4">
+              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                <Phone className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <div className="font-semibold mb-1">Phone</div>
+                <a href={`tel:${store?.phone_number?.phone_number}`} className="text-primary hover:underline">
+                  {store?.phone_number?.formatted}
+                </a>
+              </div>
+            </div>
+          }
+
+          <div className="flex items-start gap-4">
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+              <Globe className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <div className="font-semibold mb-1">Website</div>
+              <a
+                href={store?.website}
+                className="text-primary hover:underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {store?.website}
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-3 mt-6 pt-6 border-t">
+          <Button className="flex-1 sm:flex-none">
+            <Phone className="w-4 h-4 mr-2" />
+            Call Now
+          </Button>
+          <Button variant="outline" className="flex-1 sm:flex-none bg-transparent">
+            <MessageSquare className="w-4 h-4 mr-2" />
+            Send Message
+          </Button>
+        </div>
+      </Card>
+
+      <Card className="p-6">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <Clock className="w-5 h-5 text-primary" />
+          </div>
+          <h2 className="text-2xl font-bold">Hours of Operation</h2>
+        </div>
+        <div className="space-y-3">
+          <HoursList hours={store?.retailer_location_hours} />
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+export default StoreContact

package/src/components/StoreInfo/index.jsx

@@ -0,0 +1,50 @@
+import { Star, MapPin, Clock, Award, TrendingUp } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { useTranslation } from "react-i18next"
+import { useStore } from "@/contexts/store"
+import useHours from "@/lib/useHours"
+
+export function StoreInfo() {
+
+  const { t } = useTranslation()
+
+  const { store } = useStore()
+
+  const { computed } = useHours({
+    hours: store?.retailer_location_hours,
+    t,
+  })
+
+  return (
+    <section className="bg-gradient-to-b from-primary/5 to-background py-12 lg:py-16">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl">
+          <div className="flex flex-wrap items-center gap-3 mb-4">
+            <Badge variant="secondary" className="text-sm">
+              {t(`default:store.types.${store?.store_type?.toLowerCase()}`)}
+            </Badge>
+          </div>
+
+          <h1 className="text-4xl lg:text-5xl font-bold mb-4 text-balance">{store?.retailer_name}</h1>
+
+          <div className="flex flex-wrap items-center gap-4 mb-6">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <MapPin className="w-4 h-4" />
+              <span className="text-sm">{store?.address?.city}, {store?.address?.province}</span>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Clock className="w-4 h-4" />
+              <span className={`text-sm font-medium ${computed.statusLabel === t('default:open') ? 'text-green-600' : 'text-red-600'}`}>{computed.statusLabel}</span>
+            </div>
+          </div>
+
+          <p className="text-lg text-muted-foreground leading-relaxed mb-6">
+            {t('default:store_romance', { name: store?.retailer_name || 'our store' })}
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default StoreInfo

package/src/components/StoreList/index.jsx

@@ -0,0 +1,59 @@
+import { useState } from "react"
+import { MapPin, Phone, Clock, Navigation, Star } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import StoreListItem from '@/components/StoreListItem'
+import StoreListNoneFound from "@/components/StoreListNoneFound"
+import LoadingPuff from "@/components/ui/LoadingPuff"
+import { distanceBetweenPoints } from '@/lib/utils/measure'
+import { useStoreLocator } from '@/contexts/store-locator'
+
+export function StoreList() {
+
+  const { stores, location, selectedStoreId, setSelectedStoreId, setMessageDialogOpen, setMessageStoreId, searchIsLoading, searchError, baseUrl } = useStoreLocator()
+
+  const handleMessageClick = (storeId) => {
+    setMessageStoreId(storeId)
+    setMessageDialogOpen(true)
+  }
+
+  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]}
+          isSelected={selectedStoreId === store.id}
+          handleSelect={setSelectedStoreId}
+          href={`${baseUrl}/${store.id}`}
+          onMessageClick={handleMessageClick}
+        />
+      ))}
+      {!searchIsLoading && searchError && (
+        <div className="text-red-600 text-center">
+          An error occurred while searching for stores. Please try again.
+        </div>
+      )}
+    </div>
+  )
+}
+export default StoreList

package/src/components/StoreListItem/index.jsx

@@ -0,0 +1,99 @@
+import { MapPin, Phone, Clock, Navigation, MessageSquareText } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { metersToMiles } from "@/lib/utils/measure"
+import CollapsibleStoreHours from "@/components/CollapsibleStoreHours"
+import { useTranslation } from "react-i18next"
+
+const StoreListItem = ({
+  id,
+  name,
+  placeId,
+  addressLineOne,
+  addressLineTwo,
+  city,
+  province,
+  postalCode,
+  country,
+  phone,
+  hours,
+  distance,
+  services = [],
+  isSelected,
+  handleSelect,
+  onMessageClick,
+  href,
+}) => {
+  const { t } = useTranslation()
+
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${name}&destination_place_id=${placeId}`
+
+  return (
+    <div
+      className={`bg-card border rounded-xl p-6 transition-all hover:shadow-lg cursor-pointer ${isSelected ? "ring-2 ring-primary shadow-lg" : ""
+        }`}
+      onClick={() => handleSelect(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-center gap-2">
+              <Phone className="w-4 h-4 text-muted-foreground" />
+              <a href={`tel:${phone?.phone_number}`} className="hover:text-primary transition-colors">
+                {phone?.formatted}
+              </a>
+            </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>
+
+          <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">
+          <a href={directionsUrl} target="_blank" rel="noopener noreferrer" className="flex-1 md:flex-none inline-flex items-center justify-center gap-2 rounded-md bg-primary text-primary-foreground text-sm font-medium h-8 px-4 hover:bg-primary/90 transition-colors">
+            <Navigation className="w-4 h-4" />
+            {t('default:get_directions')}
+          </a>
+          <Button variant="outline" className="flex-1 md:flex-none bg-transparent" size="sm" onClick={(e) => { e.stopPropagation(); onMessageClick(id); }}>
+            <MessageSquareText className="w-4 h-4" />
+            {t('default:message')}
+          </Button>
+          <a href={href} target="_blank" className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 flex-1 md:flex-none bg-transparent" size="sm">
+            {t('default:view_details')}
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StoreListItem

package/src/components/StoreListItem/indexStoreListItem.cy.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import StoreListItem from './index'
+
+describe('<StoreListItem />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<StoreListItem
+      id="test-id"
+      name="Test Store"
+      addressLine1="123 Main St"
+      city="Anytown"
+      province="CA"
+      postalCode="12345"
+      distance="2.5 mi"
+      phone="(123) 456-7890"
+      hours={[
+        { day: 0, open: true, open_time: "09:00", close_time: "17:00" },
+        { day: 1, open: true, open_time: "09:00", close_time: "17:00" },
+        { day: 2, open: true, open_time: "09:00", close_time: "17:00" },
+        { day: 3, open: true, open_time: "09:00", close_time: "17:00" },
+        { day: 4, open: true, open_time: "09:00", close_time: "17:00" },
+        { day: 5, open: false },
+        { day: 6, open: false },
+      ]}
+      isSelected={false}
+      handleSelect={() => { }}
+      onMessageClick={() => { }}
+    />)
+  })
+})

package/src/components/StoreListNoneFound/index.jsx

@@ -0,0 +1,16 @@
+import LeadForm from '@/components/LeadForm'
+
+const StoreListNoneFound = () => {
+  return (
+    <div className="text-center py-1">
+      <div className="pb-5">
+        <p className="text-muted-foreground">No stores found matching your criteria.</p>
+        <p className="text-sm">You can try adjusting your search filters or expanding the search radius.</p>
+      </div>
+      <h4 className="mb-4 text-lg font-semibold">Contact Our Authorized Online Retailer</h4>
+      <LeadForm storeName="our authorized online retailer" />
+    </div>
+  )
+}
+
+export default StoreListNoneFound

package/src/components/StoreLocator/index.jsx

@@ -0,0 +1,43 @@
+/*
+ *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
+ *  All rights reserved.
+ * 
+ *  This is the main Store Locator component which ties together the search, list, map, and details components.
+ *  Usage:
+ *    <StoreLocator organizationId="org_123" locale="en-US" />
+ */
+
+import { StoreLocatorProvider } from '@/contexts/store-locator'
+import { APIProvider } from '@vis.gl/react-google-maps'
+import StoreLocatorMap from '@/components/StoreLocatorMap'
+import StoreLocatorSearch from '@/components/StoreLocatorSearch'
+import StoreLocatorMessageDialog from '@/components/StoreLocatorMessageDialog'
+import TranslationsProvider from '@/contexts/translations'
+import StoreList from '@/components/StoreList'
+
+const StoreLocator = ({ organizationId, locale, baseUrl = '/retailers' }) => {
+  return (
+    <TranslationsProvider options={{ lng: locale }}>
+      <StoreLocatorProvider organizationId={organizationId} locale={locale} baseUrl={baseUrl}>
+        <section className="py-12 lg:py-16 cc">
+          <div className="container mx-auto">
+            <div className="grid lg:grid-cols-2 gap-8">
+              <APIProvider apiKey={'AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M'}>
+                <StoreLocatorMap />
+              </APIProvider>
+              <div className="lg:order-first">
+                <div className="mb-8">
+                  <StoreLocatorSearch />
+                </div>
+                <StoreList />
+              </div>
+            </div>
+          </div>
+        </section>
+        <StoreLocatorMessageDialog />
+      </StoreLocatorProvider>
+    </TranslationsProvider>
+  )
+}
+
+export default StoreLocator

package/src/components/StoreLocatorMap/index.jsx

@@ -0,0 +1,93 @@
+// 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 } from 'react'
+import { MapPin } from 'lucide-react'
+import { Map, useMap, AdvancedMarker } from '@vis.gl/react-google-maps'
+import StoreLocatorMapMarker from '@/components/StoreLocatorMapMarker'
+import { useStoreLocator } from '@/contexts/store-locator'
+
+const StoreLocatorMap = () => {
+
+  const { location, stores, selectedStoreId, setSelectedStoreId } = useStoreLocator()
+
+  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 || !selectedStoreId) return;
+    const selectedStore = stores.find(store => store.id === selectedStoreId)
+    if (selectedStore && selectedStore.address) {
+      map.panTo({ lat: selectedStore.address.latitude * 1, lng: selectedStore.address.longitude * 1 })
+    }
+  }, [selectedStoreId, stores, map]);
+
+  const handleMarkerClick = (storeId) => {
+    setSelectedStoreId(storeId)
+  }
+
+  return (
+    <div className="relative">
+      <div className="bg-muted rounded-xl overflow-hidden border shadow-md h-[600px] lg:sticky lg:top-24">
+        {/* 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: '600px' }}
+              defaultCenter={{ lat: 22.54992, lng: 0 }}
+              defaultZoom={3}
+              gestureHandling='greedy'
+              disableDefaultUI
+              mapId="b1e4f5f5f8c7e2d9"
+            >
+              {stores.map((store) => (
+                <StoreLocatorMapMarker key={store.id} store={store} isSelected={selectedStoreId === store.id} onClick={handleMarkerClick} />
+              ))}
+            </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 StoreLocatorMap

package/src/components/StoreLocatorMapMarker/index.jsx

@@ -0,0 +1,55 @@
+import { useState, useCallback } from 'react'
+import { MapPin, Navigation } from 'lucide-react'
+import { AdvancedMarker, InfoWindow, useAdvancedMarkerRef } from '@vis.gl/react-google-maps'
+import { Button } from "@/components/ui/button"
+import { info } from 'autoprefixer'
+
+const StoreLocatorMapMarker = ({ store, isSelected, onClick }) => {
+
+  const [infoWindowShown, setInfoWindowShown] = useState(false)
+  const [markerRef, marker] = useAdvancedMarkerRef()
+
+  const handleMarkerClick = useCallback(() => {
+    onClick && onClick(store.id)
+  }, [store.id, onClick])
+
+  const handleClose = useCallback(() => setInfoWindowShown(false), [])
+
+  const showInfoWindow = isSelected
+
+  return (
+    <AdvancedMarker
+      position={{
+        lat: store.address?.latitude * 1,
+        lng: store.address?.longitude * 1,
+      }}
+      ref={markerRef}
+      title={store.name}
+      onClick={handleMarkerClick}
+    >
+      <MapPin className={`w-8 h-8 hover:cursor-pointer ${isSelected ? 'text-primary fill-white z-10' : 'z-1 fill-white text-muted-foreground'}`} size={32} />
+      {showInfoWindow && (
+        <InfoWindow anchor={marker} headerContent={<h3 className="font-bold text-sm align-center text-left mb-2">{store.retailer_name}</h3>} onClose={handleClose}>
+          <p className="text-sm text-left text-muted-foreground">
+            {store.address?.street_line_one}
+            {store.address?.street_line_two ? `, ${store.address?.street_line_two}` : ''}
+          </p>
+          <p className="text-sm text-left text-muted-foreground mb-4">
+            {store.address?.city}, {store.address?.province} {store.address?.postal_code}
+          </p>
+          <div className="flex flex-row gap-2 mb-1">
+            <Button className="flex-1 md:flex-row" size="sm">
+              <Navigation className="w-4 h-4" />
+              Directions
+            </Button>
+            <Button variant="outline" className="flex-1 md:flex-none bg-transparent" size="sm">
+              View Details
+            </Button>
+          </div>
+        </InfoWindow>
+      )}
+    </AdvancedMarker>
+  )
+}
+
+export default StoreLocatorMapMarker

package/src/components/StoreLocatorMessageDialog/index.jsx

@@ -0,0 +1,20 @@
+import MessageDialog from "@/components/MessageDialog"
+import { useStoreLocator } from "@/contexts/store-locator"
+
+const StoreLocatorMessageDialog = () => {
+
+  const { messageDialogOpen, setMessageDialogOpen, messageStoreId, setMessageStoreId, stores } = useStoreLocator()
+
+  const store = stores.find(store => store.id === messageStoreId)
+  const storeName = store ? store.retailer_name : null
+
+  const handleClose = () => {
+    setMessageDialogOpen(false)
+    setMessageStoreId(null)
+  }
+  return (
+    <MessageDialog isOpen={messageDialogOpen} onClose={handleClose} storeName={storeName} />
+  )
+}
+
+export default StoreLocatorMessageDialog