@hg-storefront/stop

A collection of React hooks for managing stop/pickup location functionality in the Hemglass storefront.

Installation

This library is part of the Hemglass storefront monorepo and is automatically available when working within the project.

Hooks

useAvailablePickUpTimes

Hook for fetching available pickup times for an order.

import { useAvailablePickUpTimes } from '@hg-storefront/stop'

function PickupTimeSelector({ orderId }: { orderId: string }) {
  const { data, isLoading, error } = useAvailablePickUpTimes({
    orderId,
    refetchOnMount: false
  })

  if (isLoading) return <div>Loading pickup times...</div>
  if (error) return <div>Error loading pickup times</div>

  return (
    <div>
      {data?.map((time) => (
        <div key={time.time}>
          {time.niceDate} - {time.timeSpan}
        </div>
      ))}
    </div>
  )
}

Parameters

• orderId (string | undefined): The ID of the order to fetch pickup times for
• refetchOnMount (boolean, optional): Whether to refetch data on mount (default: false)

Returns

• data: Array of AvailablePickUpTime objects or undefined
• isLoading: Boolean indicating if the query is loading
• error: Error object if the query failed

useSelectedStop

Hook for getting the currently selected stop location from the active order.

import { useSelectedStop } from '@hg-storefront/stop'

function StopDisplay() {
  const { selectedStop, isLoading, error, hasStop } = useSelectedStop()

  if (isLoading) return <div>Loading stop information...</div>
  if (error) return <div>Error loading stop information</div>
  if (!hasStop) return <div>No stop selected</div>

  return (
    <div>
      <h3>Selected Stop</h3>
      <p>{selectedStop?.depotName}</p>
      <p>{selectedStop?.streetName} {selectedStop?.streetNumber}</p>
      <p>{selectedStop?.city} {selectedStop?.zipCode}</p>
    </div>
  )
}

Returns

• selectedStop: StopLocation object or null
• isLoading: Boolean indicating if the order is loading
• error: Error object if loading failed
• hasStop: Boolean indicating if a stop is selected

useUpdateStopOnOrder

Hook for updating the stop location on an order.

import { useUpdateStopOnOrder } from '@hg-storefront/stop'
import { StopLocation } from '@hg-storefront/types'

function StopSelector({ orderId }: { orderId: string }) {
  const { mutate: updateStop, isPending, error } = useUpdateStopOnOrder(orderId)

  const handleStopSelect = (stop: StopLocation) => {
    updateStop(stop, {
      onSuccess: () => {
        console.log('Stop updated successfully')
      },
      onError: (error) => {
        console.error('Failed to update stop:', error)
      }
    })
  }

  return (
    <div>
      <button 
        onClick={() => handleStopSelect(sampleStop)}
        disabled={isPending}
      >
        {isPending ? 'Updating...' : 'Select Stop'}
      </button>
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}

Parameters

• orderId (string | undefined): The ID of the order to update

Returns

• mutate: Function to update the stop location
• isPending: Boolean indicating if the mutation is in progress
• error: Error object if the mutation failed

Types

StopLocation

interface StopLocation {
  distance: number
  stopHash: string
  latitude: number
  longitude: number
  streetName: string
  streetNumber: string
  city: string
  zipCode: string
  depotId: string
  depotName: string
  nextDate: string
  routeName: string
}

AvailablePickUpTime

interface AvailablePickUpTime {
  time: string
  timeSpan: string
  niceDate: string
}

Usage Examples

Complete Stop Selection Flow

import { 
  useAvailablePickUpTimes, 
  useSelectedStop, 
  useUpdateStopOnOrder 
} from '@hg-storefront/stop'
import { StopLocation } from '@hg-storefront/types'

function StopSelectionFlow({ orderId }: { orderId: string }) {
  const { selectedStop, hasStop } = useSelectedStop()
  const { data: pickupTimes } = useAvailablePickUpTimes({ orderId })
  const { mutate: updateStop, isPending } = useUpdateStopOnOrder(orderId)

  const handleStopSelect = (stop: StopLocation) => {
    updateStop(stop)
  }

  return (
    <div>
      {hasStop ? (
        <div>
          <h3>Current Stop</h3>
          <p>{selectedStop?.depotName}</p>
          <button onClick={() => handleStopSelect(newStop)}>
            Change Stop
          </button>
        </div>
      ) : (
        <div>
          <h3>Select a Stop</h3>
          {/* Stop selection UI */}
        </div>
      )}

      {pickupTimes && (
        <div>
          <h3>Available Pickup Times</h3>
          {pickupTimes.map((time) => (
            <div key={time.time}>
              {time.niceDate} - {time.timeSpan}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Dependencies

This library depends on:

• @haus-storefront-react/core - For SDK and query functionality
• @haus-storefront-react/hooks - For order management hooks
• @hg-storefront/types - For type definitions

Development

To build this library:

nx build stop

To lint this library:

nx lint stop