# DeliveryEstimate

> Shows estimated delivery date with optional countdown timer. Reduces shipping uncertainty.

Canonical URL: https://fa7e86e3d553:3005/islands/commerce/delivery-estimate

> Shows estimated delivery date. If cutoffHour set and current time is before cutoff, shows 'Order within Xh Ym' countdown. Reduces shipping uncertainty (top cart abandonment reason).

## Preview

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| estimatedDays | number | No | 4 | Number of business days for delivery (e.g., 3-5 days) |
| cutoffHour | number | No | 14 | Hour of day (24h format) for same-day dispatch cutoff |
| showCountdown | boolean | No | true | Whether to show "Order within Xh Ym" countdown before cutoff |
| freeShippingThreshold | number | No | - | Order value (in cents) for free shipping eligibility |
| variant | enum | No | "inline" | Display style: "inline", "card", or "banner" |

## Embed Example

```html
<lx-island name="DeliveryEstimate">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Usage Patterns

**Standard placement (near BuyBox, inline variant):**

```html
<lx-island name="DeliveryEstimate">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Inline variant (minimal, beside price):**

```html
<lx-island name="DeliveryEstimate">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Card variant (boxed, prominent):**

```html
<lx-island name="DeliveryEstimate">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Banner variant (full-width, top of page):**

```html
<lx-island name="DeliveryEstimate">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| delivery:countdown | Internal | Updates countdown every minute until cutoff |

## Tips

- Place near [BuyBox](/islands/commerce/buy-box) or beside price to reduce shipping anxiety (top cart abandonment reason)
- `cutoffHour` in 24h format (e.g., 14 = 2pm) — shows "Order within 2h 34m" countdown before cutoff
- `showCountdown:true` creates urgency (best for same-day or next-day dispatch)
- `estimatedDays` is business days (e.g., 3 = "Arrives by [date 3 business days from now]")
- `variant:"inline"` — single line text, minimal (e.g., "Free delivery by Jun 29")
- `variant:"card"` — boxed card with icon, delivery date, and countdown (most common)
- `variant:"banner"` — full-width banner at top (use for site-wide free shipping promos)
- `freeShippingThreshold` in cents (e.g., 5000 = $50 or ₹50) — shows "Add $X more for free shipping"
- Auto-calculates delivery date based on `estimatedDays` + current date (skips weekends if business days)
- If current time is past `cutoffHour`, shows next-day dispatch countdown
- Countdown refreshes every minute (client-side, no server polling)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `date` | Date text |
| `icon` | Icon element |
| `root` | Outermost container |
| `text` | Primary text content |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [BuyBox](/islands/commerce/buy-box) — Place DeliveryEstimate directly below or beside BuyBox
- [CartDrawer](/islands/cart/cart-drawer) — Can show mini DeliveryEstimate in drawer summary
- [StickyBar](/islands/commerce/sticky-bar) — Can embed compact delivery estimate in sticky CTA