@hg-storefront/order-feedback

React hooks and SDK plugin configuration for the order feedback flow in Hemglass storefront.

What This Package Adds

When OrderFeedbackPlugin is enabled, the storefront SDK gets these methods:

• orderFeedbackEligibility(orderId) -> checks if feedback is currently allowed for an order
• setOrderFeedbackRating({ orderId, rating }) -> saves rating step (1-5)
• submitOrderFeedback({ orderId, rating, comment }) -> submits final feedback

The API can return success or typed business errors such as:

• OrderNotEligibleForFeedbackError
• InvalidOrderFeedbackRatingError
• OrderFeedbackMissingRatingError
• OrderFeedbackCommentRequiredError
• OrderFeedbackCommentTooLongError

Setup

Add OrderFeedbackPlugin to the pluginConfigs array in your provider configuration:

import { OrderFeedbackPlugin } from '@hg-storefront/order-feedback'

export const providerConfig = {
  options: {
    pluginConfigs: [OrderFeedbackPlugin],
  },
}

How The Flow Works

1. Check eligibility with useOrderFeedbackEligibility(orderId)
2. User selects rating -> call setRating({ orderId, rating })
3. User submits comment + rating -> call submitFeedback({ orderId, rating, comment })
4. Handle success/error result from each call

useOrderFeedbackEligibility is configured to stay live:

• staleTime: 0
• gcTime: 0
• refetch on mount, window focus, and reconnect
• rating/submit mutations do not automatically invalidate or refetch the eligibility query

Hook API

useOrderFeedbackEligibility(orderId, enabled?)

Returns React Query query state, for example:

• data: boolean | OrderFeedbackErrorResult
• isLoading
• error
• refetch

useSetOrderFeedbackRating()

Returns:

• setRating(input) - async action function
• error
• isLoading

useSubmitOrderFeedback()

Returns:

• submitFeedback(input) - async action function
• error
• isLoading

Types And Input Shape

type SetOrderFeedbackRatingInput = {
  orderId: string
  rating: number
}

type SubmitOrderFeedbackInput = {
  orderId: string
  rating: number
  comment?: string | null
}

Usage Example

import {
  useOrderFeedbackEligibility,
  useSetOrderFeedbackRating,
  useSubmitOrderFeedback,
} from '@hg-storefront/order-feedback'

function OrderFeedback({ orderId }: { orderId: string }) {
  const { data: eligibility } = useOrderFeedbackEligibility(orderId)
  const { setRating, isLoading: isRatingLoading } = useSetOrderFeedbackRating()
  const { submitFeedback, isLoading: isSubmitLoading } = useSubmitOrderFeedback()

  const onRate = async (rating: number) => {
    await setRating({ orderId, rating })
  }

  const onSubmit = async (rating: number, comment?: string) => {
    await submitFeedback({
      orderId,
      rating,
      comment: comment ?? null,
    })
  }

  return (
    <div>
      <div>Eligibility: {typeof eligibility === 'boolean' ? String(eligibility) : 'error'}</div>
      <button onClick={() => onRate(5)} disabled={isRatingLoading}>
        Rate 5
      </button>
      <button onClick={() => onSubmit(5, 'Super!')} disabled={isSubmitLoading}>
        Submit feedback
      </button>
    </div>
  )
}