Your First Extension

Create a checkout extension that displays estimated delivery dates 
based on the customer's shipping address. Show a banner with:
- An icon for visual appeal
- The delivery date range (5-7 business days)
- Different messaging for US vs international addresses
- Professional styling that matches Shopify's checkout

import {
  Banner,
  useShippingAddress,
  useApi,
} from '@shopify/ui-extensions-react/checkout';

export default function DeliveryEstimate() {
  const address = useShippingAddress();
  const { i18n } = useApi();
  
  // Calculate delivery window
  const getDeliveryEstimate = () => {
    if (!address?.countryCode) {
      return null;
    }
    
    const isDomestic = address.countryCode === 'US';
    const days = isDomestic ? '5-7' : '10-14';
    const deliveryDate = new Date();
    deliveryDate.setDate(deliveryDate.getDate() + (isDomestic ? 7 : 14));
    
    return {
      days,
      date: i18n.formatDate(deliveryDate, { dateStyle: 'long' })
    };
  };
  
  const estimate = getDeliveryEstimate();
  
  if (!estimate) return null;
  
  return (
    <Banner title="Estimated Delivery">
      Your order will arrive in {estimate.days} business days 
      (by {estimate.date})
    </Banner>
  );
}

- import { Banner } from '@shopify/ui-extensions-react';
+ import { Banner } from '@shopify/ui-extensions-react/checkout';

🚀 Deploying delivery-estimate to Shopify...
🔗 Linking to Shopify app...
📦 Installing dependencies...
✅ Extension deployed successfully!
📦 Version: 2024.10.30.1
🔗 View in Partner Dashboard

const [timeLeft, setTimeLeft] = useState('');

useEffect(() => {
  const timer = setInterval(() => {
    const cutoff = new Date();
    cutoff.setHours(15, 0, 0, 0); // 3 PM cutoff
    
    const diff = cutoff - new Date();
    if (diff > 0) {
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      setTimeLeft(`${hours}h ${minutes}m`);
    }
  }, 1000);
  
  return () => clearInterval(timer);
}, []);

import { useShippingLine } from '@shopify/ui-extensions-react/checkout';

const shippingLine = useShippingLine();
const isExpedited = shippingLine?.code.includes('express');

return (
  <Banner>
    {isExpedited 
      ? 'Express delivery: 2-3 business days'
      : 'Standard delivery: 5-7 business days'
    }
  </Banner>
);