{
  "name": "delivery-estimate",
  "title": "DeliveryEstimate",
  "description": "Delivery fee + ETA preview at the cart/checkout edge, sourced from /delivery/fee with location.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn"
  ],
  "files": [
    {
      "path": "delivery-estimate.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport type { DeliveryFeeResponse } from \"../delivery\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DeliveryEstimateClassNames {\n  root?: string;\n  fee?: string;\n  currency?: string;\n  notServiceable?: string;\n  loading?: string;\n  error?: string;\n}\n\nexport interface DeliveryEstimateProps {\n  /** Drop-off latitude. */\n  latitude: number;\n  /** Drop-off longitude. */\n  longitude: number;\n  /** Country code for regional fee lookup. */\n  country?: string;\n  /** Called when the delivery fee is successfully calculated. */\n  onFeeCalculated?: (fee: DeliveryFeeResponse) => void;\n  className?: string;\n  classNames?: DeliveryEstimateClassNames;\n}\n\n/**\n * DeliveryEstimate — displays a pre-checkout delivery fee estimate.\n *\n * Fetches the delivery fee from `client.delivery.getFee` when coordinates change.\n * Shows fee amount with currency, a \"not serviceable\" message, or loading state.\n */\nexport function DeliveryEstimate({\n  latitude,\n  longitude,\n  country,\n  onFeeCalculated,\n  className,\n  classNames,\n}: DeliveryEstimateProps): React.ReactElement | null {\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n\n  const [result, setResult] = useState<DeliveryFeeResponse | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<CimplifyError | null>(null);\n  const requestIdRef = useRef(0);\n\n  useEffect(() => {\n    if (!client) return;\n\n    const nextRequestId = ++requestIdRef.current;\n    setIsLoading(true);\n    setError(null);\n\n    void (async () => {\n      const res = await client.delivery.getFee(latitude, longitude, country);\n\n      if (nextRequestId !== requestIdRef.current) return;\n\n      if (!res.ok) {\n        setError(res.error);\n        setResult(null);\n        setIsLoading(false);\n        return;\n      }\n\n      setResult(res.value);\n      setError(null);\n      setIsLoading(false);\n      onFeeCalculated?.(res.value);\n    })();\n  }, [client, latitude, longitude, country]); // eslint-disable-line react-hooks/exhaustive-deps -- onFeeCalculated is a callback prop, not a reactive dependency\n\n  if (!client) {\n    return null;\n  }\n\n  if (isLoading) {\n    return (\n      <div\n        data-cimplify-delivery-estimate\n        data-serviceable=\"false\"\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (error) {\n    return (\n      <div\n        data-cimplify-delivery-estimate\n        data-serviceable=\"false\"\n        className={cn(className, classNames?.root, classNames?.error)}\n      >\n        <span>{error.message}</span>\n      </div>\n    );\n  }\n\n  if (!result || !result.serviceable) {\n    return (\n      <div\n        data-cimplify-delivery-estimate\n        data-serviceable=\"false\"\n        className={cn(className, classNames?.root, classNames?.notServiceable)}\n      >\n        <span>Not serviceable</span>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-cimplify-delivery-estimate\n      data-serviceable=\"true\"\n      className={cn(className, classNames?.root)}\n    >\n      {result.fee != null && (\n        <span data-cimplify-delivery-fee className={classNames?.fee}>\n          <Price amount={result.fee} />\n        </span>\n      )}\n      {result.currency && (\n        <span data-cimplify-delivery-currency className={classNames?.currency}>\n          {result.currency}\n        </span>\n      )}\n    </div>\n  );\n}\n"
    }
  ]
}