Build an AI chat storefront with Rye and Stripe in Next.js

import { useState } from 'react';

export default function ChatInput({
  status,
  onSubmit,
}: {
  status: string;
  onSubmit: (text: string) => void;
}) {
  const [text, setText] = useState('');

  return (
    <form
      className="flex gap-2"
      onSubmit={e => {
        e.preventDefault();
        if (text.trim() === '') return;
        onSubmit(text);
        setText('');
      }}
    >
      <textarea
        className="w-full min-h-[80px] p-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#e6ffb7] focus:border-transparent resize-none"
        placeholder="Type your message..."
        disabled={status !== 'ready'}
        value={text}
        onChange={e => setText(e.target.value)}
        rows={3}
        cols={50}
        onKeyDown={e => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            if (text.trim() === '') return;
            onSubmit(text);
            setText('');
          }
        }}
      />
    </form>
  );
}

import { tool } from 'ai';
import { z } from 'zod';
import * as cheerio from 'cheerio';
import { ShoppingProduct } from '../lib/types';

export function cleanPrice(priceText: string): string {
  if (!priceText) return 'Price not available';

  const cleaned = priceText.replace(/[^\d.,]/g, '').trim();
  if (cleaned) {
    return `$${cleaned}`;
  }
  return 'Price not available';
}

export function extractSearchResults(htmlContent: string, maxResults: number): ShoppingProduct[] {
  const $ = cheerio.load(htmlContent);
  const products: ShoppingProduct[] = [];

  $('[data-component-type="s-search-result"]').slice(0, maxResults).each((_, container) => {
    try {
      const product: ShoppingProduct = {
        name: 'Product name not found',
        price: 'Price not available',
        imageUrl: 'Image not found',
        rating: 'Rating not available',
        url: 'URL not found'
      };

      // Extract product name
      const nameElem = $(container).find('a h2 span').first();
      if (nameElem.length) {
        product.name = nameElem.text().trim();
      }

      // Extract product URL
      const urlElem = $(container).find('a').first();
      if (urlElem.length) {
        const productUrl = urlElem.attr('href');
        if (productUrl) {
          product.url = productUrl.startsWith('/')
            ? `https://www.amazon.com${productUrl}`
            : productUrl;
        }
      }

      // Extract price
      const priceElem = $(container).find('.a-price-whole').first();
      if (priceElem.length) {
        product.price = cleanPrice(priceElem.text());
      }

      // Extract image
      const imgElem = $(container).find('img.s-image').first();
      if (imgElem.length) {
        const imgUrl = imgElem.attr('src');
        if (imgUrl) {
          product.imageUrl = imgUrl;
        }
      }

      // Extract rating
      const ratingElem = $(container).find('.a-icon-alt').first();
      if (ratingElem.length) {
        const ratingText = ratingElem.text();
        const ratingMatch = ratingText.match(/(\d+\.?\d*)/);
        if (ratingMatch) {
          product.rating = `${ratingMatch[1]} out of 5`;
        }
      }

      products.push(product);
    } catch (error) {
      console.error('Error extracting product data:', error);
    }
  });

  return products;
}

export async function fetchAmazonPage(url: string): Promise<string> {
  const headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
    'Accept-Language': 'en-US,en;q=0.5',
    'Accept-Encoding': 'gzip, deflate',
    'Connection': 'keep-alive',
    'Upgrade-Insecure-Requests': '1',
  };

  const response = await fetch(url, { headers });
  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status} - ${response.statusText}`);
  }
  return response.text();
}

export const searchAmazonProductsTool = tool({
  description: 'Search for products on Amazon and return structured product information including images, titles, prices, and URLs for display in a product catalog',
  inputSchema: z.object({
    query: z.string().describe('The search query for Amazon products (e.g., "wireless headphones", "laptop", "coffee maker")'),
    maxResults: z.number().min(1).max(10).default(3).describe('Maximum number of products to return (1-10, default: 3)')
  }),
  async *execute({ query, maxResults = 5 }) {
    yield { state: 'loading' as const };

    try {
      // Construct search URL
      const searchUrl = `https://www.amazon.com/s?k=${encodeURIComponent(query)}`;

      // Fetch search results page
      const htmlContent = await fetchAmazonPage(searchUrl);

      // Extract search results
      const products = extractSearchResults(htmlContent, maxResults);

      if (products.length === 0) {
        yield {
          state: 'ready' as const,
          products: [],
          message: `No products found for "${query}"`
        };
        return;
      }

      yield {
        state: 'ready' as const,
        products,
        query,
        totalResults: products.length
      };

    } catch (error) {
      throw new Error(`Error searching Amazon products: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.amazon.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '**.ssl-images-amazon.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'm.media-amazon.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

import { Buyer, CheckoutIntent } from "./types";

export interface RyeClientConfig {
  apiKey: string;
  baseUrl: string;
}

export interface CreateCheckoutIntentRequest {
  buyer: Buyer;
  quantity: number;
  productUrl: string;
}

export interface ConfirmCheckoutIntentRequest {
  paymentMethod?: {
    type: string;
    stripeToken: string;
  };
}

export class RyeClient {
  private apiKey: string;
  private baseUrl: string;

  constructor(config: RyeClientConfig) {
    this.apiKey = config.apiKey;
    this.baseUrl = config.baseUrl;
  }

  private async makeRequest<T>(
    endpoint: string,
    options: RequestInit = {}
  ): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;

    const defaultHeaders = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`,
    };

    const config: RequestInit = {
      ...options,
      headers: {
        ...defaultHeaders,
        ...options.headers,
      },
    };

    try {
      const response = await fetch(url, config);

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`Rye API Error (${response.status}): ${errorText}`);
      }

      return await response.json();
    } catch (error) {
      if (error instanceof Error) {
        throw error;
      }
      throw new Error(`Network error: ${error}`);
    }
  }

  /**
  * Create a new checkout intent
  */
  async createCheckoutIntent(request: CreateCheckoutIntentRequest): Promise<CheckoutIntent> {
    return this.makeRequest<CheckoutIntent>('/api/v1/checkout-intents', {
      method: 'POST',
      body: JSON.stringify(request),
    });
  }

  /**
  * Get a checkout intent by ID
  */
  async getCheckoutIntent(id: string): Promise<CheckoutIntent> {
    return this.makeRequest<CheckoutIntent>(`/api/v1/checkout-intents/${id}`, {
      method: 'GET',
    });
  }

  /**
  * Confirm a checkout intent
  */
  async confirmCheckoutIntent(
    id: string,
    request: ConfirmCheckoutIntentRequest
  ): Promise<CheckoutIntent> {
    return this.makeRequest<CheckoutIntent>(`/api/v1/checkout-intents/${id}/confirm`, {
      method: 'POST',
      body: JSON.stringify(request),
    });
  }
}

// Export a default instance factory function for convenience
export function createRyeClient(config: RyeClientConfig): RyeClient {
  return new RyeClient(config);
}

import { NextRequest, NextResponse } from 'next/server';
import { createRyeClient, type CreateCheckoutIntentRequest } from '@/lib/rye';

export async function POST(request: NextRequest) {
  try {
    const body: CreateCheckoutIntentRequest = await request.json();

    // Validate required fields
    if (!body.buyer || !body.productUrl || !body.quantity) {
      return NextResponse.json(
        { error: 'Missing required fields: buyer, productUrl, and quantity are required' },
        { status: 400 }
      );
    }

    // Validate buyer information
    const { buyer } = body;
    const requiredBuyerFields = [
      'firstName', 'lastName', 'email', 'phone',
      'address1', 'city', 'province', 'country', 'postalCode'
    ];

    for (const field of requiredBuyerFields) {
      if (!buyer[field as keyof typeof buyer]) {
        return NextResponse.json(
          { error: `Missing required buyer field: ${field}` },
          { status: 400 }
        );
      }
    }

    // Initialize Rye client
    const ryeClient = createRyeClient({
      apiKey: process.env.RYE_API_KEY!,
      baseUrl: process.env.RYE_API_BASE!
    });

    // Create Checkout Intent
    const checkoutIntent = await ryeClient.createCheckoutIntent(body);

    return NextResponse.json({
      success: true,
      checkoutIntent,
    });

  } catch (error) {
    console.error('Error creating Checkout Intent:', error);

    return NextResponse.json(
      {
        error: 'Failed to create Checkout Intent',
        details: error instanceof Error ? error.message : 'Unknown error'
      },
      { status: 500 }
    );
  }
}

import { NextRequest, NextResponse } from 'next/server';
import { createRyeClient } from '@/lib/rye';

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const checkoutIntentId = searchParams.get('checkoutIntentId');

    // Validate required fields
    if (!checkoutIntentId) {
      return NextResponse.json(
        { error: 'Missing required parameter: checkoutIntentId' },
        { status: 400 }
      );
    }

    // Initialize Rye client
    const ryeClient = createRyeClient({
      apiKey: process.env.RYE_API_KEY!,
      baseUrl: process.env.RYE_API_BASE!
    });

    // Get Checkout Intent
    const checkoutIntent = await ryeClient.getCheckoutIntent(checkoutIntentId);

    return NextResponse.json({
      success: true,
      checkoutIntent,
    });

  } catch (error) {
    console.error('Error fetching Checkout Intent:', error);

    return NextResponse.json(
      {
        error: 'Failed to fetch Checkout Intent',
        details: error instanceof Error ? error.message : 'Unknown error'
      },
      { status: 500 }
    );
  }
}

  'use client';

  import { useState } from 'react';
  import { ShoppingProduct, Buyer } from '../lib/types';
  import Image from 'next/image';

  interface CheckoutModalProps {
    isOpen: boolean;
    onClose: () => void;
    onOrderComplete: (product: ShoppingProduct, checkoutIntent: any) => void;
    product: ShoppingProduct;
  }

  function CheckoutForm({ product, onClose, onOrderComplete }: { product: ShoppingProduct; onClose: () => void; onOrderComplete: (product: ShoppingProduct, checkoutIntent: CheckoutIntent) => void }) {
    const [step, setStep] = useState<'buyer-info' | 'loading-offer' | 'payment'>('buyer-info');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [checkoutIntent, setCheckoutIntent] = useState<any | null>(null);

    const [buyerInfo, setBuyerInfo] = useState<Buyer>({
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
      address1: '',
      address2: '',
      city: '',
      province: '',
      country: 'US',
      postalCode: '',
    });

    const handleBuyerInfoSubmit = async (e: React.FormEvent) => {
      e.preventDefault();
      setLoading(true);
      setError(null);

      try {
        // Create Checkout Intent with buyer info
        const response = await fetch('/api/checkout/create-intent', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            buyer: buyerInfo,
            quantity: 1,
            productUrl: product.url,
          }),
        });

        if (!response.ok) {
          throw new Error('Failed to create Checkout Intent');
        }

        const { checkoutIntent } = await response.json();
        setCheckoutIntent(checkoutIntent);

        // Poll until we have the full offer data (awaiting_confirmation state)
        if (checkoutIntent.state !== 'awaiting_confirmation') {
          setStep('loading-offer');
          pollForOfferData(checkoutIntent.id);
        } else {
          setStep('payment');
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An error occurred');
      } finally {
        setLoading(false);
      }
    };

    const handlePaymentSubmit = async (e: React.FormEvent) => {
      // TODO once we are creating the Checkout Intent and handling the buyer info step.
    };

    const pollForOfferData = async (checkoutIntentId: string) => {
      try {
        const response = await fetch(`/api/checkout/get-intent?checkoutIntentId=${checkoutIntentId}`);
        const { checkoutIntent: updatedIntent } = await response.json();

        if (updatedIntent.state === 'awaiting_confirmation' && updatedIntent.offer) {
          setCheckoutIntent(updatedIntent);
          setStep('payment');
        } else {
          // Continue polling every 2 seconds
          setTimeout(() => pollForOfferData(checkoutIntentId), 2000);
        }
      } catch (err) {
        setError('Failed to get pricing information. Please try again.');
        setLoading(false);
      }
    };

    const handleInputChange = (field: keyof Buyer, value: string) => {
      setBuyerInfo(prev => ({ ...prev, [field]: value }));
    };

    return (
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Product Information - Left Side */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold mb-4">Product Details</h3>

          <div className="bg-gray-50 p-6">
            {product.imageUrl && product.imageUrl !== 'Image not found' && (
              <div className="mb-4">
                <Image
                  src={product.imageUrl}
                  alt={product.name}
                  className='object-contain mx-auto w-full max-w-[100px]'
                  width={100}
                  height={100}
                />
              </div>
            )}

            <div className="space-y-2">
              <h4 className="font-medium text-gray-800 text-lg">{product.name}</h4>
              {step === 'buyer-info' && (
                <>
                  <p className="text-2xl font-bold text-green-600">{product.price}</p>
                  {product.rating && product.rating !== 'Rating not available' && (
                    <p className="text-sm text-yellow-600 flex items-center gap-1">
                      <span>⭐</span>
                      <span>{product.rating}</span>
                    </p>
                  )}
                </>
              )}
              {(step === 'loading-offer' || step === 'payment') && checkoutIntent && (
                <p className="text-sm text-gray-600">Quantity: {checkoutIntent.quantity}</p>
              )}
            </div>
          </div>

          {(step === 'loading-offer' || step === 'payment') && checkoutIntent && (
            <div className="space-y-4">
              {/* Cost Breakdown */}
              {step === 'payment' && checkoutIntent.offer ? (
                <div className="bg-white border border-gray-200 p-4">
                  <h4 className="font-medium text-gray-800 mb-3">Order Summary</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Subtotal</span>
                      <span className="text-gray-800">
                        ${(checkoutIntent.offer.cost.subtotal.amountSubunits / 100).toFixed(2)}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Shipping</span>
                      <span className="text-gray-800">
                        ${(checkoutIntent.offer.shipping.availableOptions.find((opt: any) =>
                          opt.id === checkoutIntent.offer.shipping.selectedOptionId
                        )?.cost.amountSubunits / 100 || 0).toFixed(2)}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Tax</span>
                      <span className="text-gray-800">
                        ${(checkoutIntent.offer.cost.tax.amountSubunits / 100).toFixed(2)}
                      </span>
                    </div>
                    <div className="border-t pt-2 mt-2">
                      <div className="flex justify-between font-semibold text-base">
                        <span className="text-gray-800">Total</span>
                        <span className="text-green-600">
                          ${(checkoutIntent.offer.cost.total.amountSubunits / 100).toFixed(2)}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="bg-white border border-gray-200 p-4">
                  <h4 className="font-medium text-gray-800 mb-3">Order Summary</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Subtotal</span>
                      <span className="text-gray-400">Calculating...</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Shipping</span>
                      <span className="text-gray-400">Calculating...</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Tax</span>
                      <span className="text-gray-400">Calculating...</span>
                    </div>
                    <div className="border-t pt-2 mt-2">
                      <div className="flex justify-between font-semibold text-base">
                        <span className="text-gray-800">Total</span>
                        <span className="text-gray-400">Calculating...</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Form - Right Side */}
        <div className="space-y-4">
          {step === 'buyer-info' ? (
            <form onSubmit={handleBuyerInfoSubmit} className="space-y-4">
              <h3 className="text-lg font-semibold mb-4">Buyer Information</h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  First Name *
                </label>
                <input
                  type="text"
                  required
                  value={buyerInfo.firstName}
                  onChange={(e) => handleInputChange('firstName', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Last Name *
                </label>
                <input
                  type="text"
                  required
                  value={buyerInfo.lastName}
                  onChange={(e) => handleInputChange('lastName', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Email *
              </label>
              <input
                type="email"
                required
                value={buyerInfo.email}
                onChange={(e) => handleInputChange('email', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Phone *
              </label>
              <input
                type="tel"
                required
                value={buyerInfo.phone}
                onChange={(e) => handleInputChange('phone', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Address Line 1 *
              </label>
              <input
                type="text"
                required
                value={buyerInfo.address1}
                onChange={(e) => handleInputChange('address1', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Address Line 2
              </label>
              <input
                type="text"
                value={buyerInfo.address2}
                onChange={(e) => handleInputChange('address2', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  City *
                </label>
                <input
                  type="text"
                  required
                  value={buyerInfo.city}
                  onChange={(e) => handleInputChange('city', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  State/Province *
                </label>
                <input
                  type="text"
                  required
                  value={buyerInfo.province}
                  onChange={(e) => handleInputChange('province', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Country *
                </label>
                <select
                  required
                  value={buyerInfo.country}
                  onChange={(e) => handleInputChange('country', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="US">United States</option>
                  <option value="CA">Canada</option>
                  <option value="GB">United Kingdom</option>
                  <option value="AU">Australia</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Postal Code *
                </label>
                <input
                  type="text"
                  required
                  value={buyerInfo.postalCode}
                  onChange={(e) => handleInputChange('postalCode', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>

            {error && (
              <div className="text-red-600 text-sm">{error}</div>
            )}

              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 px-4 py-2 text-gray-700 bg-gray-200 hover:bg-gray-300 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={loading}
                  className="flex-1 px-4 py-2 bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 transition-colors"
                >
                  {loading ? 'Processing...' : 'Continue to Payment'}
                </button>
              </div>
            </form>
          ) : step === 'loading-offer' ? (
            <div className="space-y-6">
              <h3 className="text-lg font-semibold">Getting Pricing Information</h3>
              <div className="flex flex-col items-center justify-center py-8 space-y-4">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
                <p className="text-gray-600 text-center">
                  Calculating shipping, taxes, and total cost...
                </p>
                <p className="text-sm text-gray-500 text-center">
                  This usually takes a few seconds
                </p>
              </div>
            </div>
          ) : (
            {/* TODO: Add payment form with a Stripe.js CardElement */}
          )}
        </div>
      </div>
    );
  }

  export default function CheckoutModal({ isOpen, onClose, product, onOrderComplete }: CheckoutModalProps) {
    if (!isOpen) return null;

    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div className="bg-white max-w-6xl w-full max-h-[90vh] overflow-y-auto">
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold text-gray-800">Purchase Product</h2>
              <button
                onClick={onClose}
                className="text-gray-500 hover:text-gray-700 text-2xl"
              >
                ×
              </button>
            </div>

            <CheckoutForm product={product} onClose={onClose} onOrderComplete={onOrderComplete} />
          </div>
        </div>
      </div>
    );
  }