npm package: @hg-storefront/stop
Description: A collection of React hooks for managing stop/pickup location functionality in the Hemglass storefront.
Latest version: 0.0.30

# @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.

```tsx
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.

```tsx
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.

```tsx
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`

```tsx
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`

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

## Usage Examples

### Complete Stop Selection Flow

```tsx
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:

```bash
nx build stop
```

To lint this library:

```bash
nx lint stop
```