Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Owner Notification System is a web application designed to streamline the checkout process by notifying the project owner of new customer orders. It utilizes a frontend submission function to gather user data and send it to a backend API for email notification. This application focuses on providing a clean and efficient user experience while ensuring accurate order tracking.

## CORE FEATURES
1. **Checkout Form**: A user-friendly form allowing customers to enter their name, email, phone number, shipping address, and cart items.
2. **Payload Compilation**: The `processMockCheckout` function compiles form inputs and cart data into the `CheckoutPayload` object for processing.
3. **Email Notification**: The application triggers the `notify-owner-email` Supabase Edge Function to send an email notification to the project owner with the order details.
4. **Success Feedback**: Upon successful order simulation, the application clears the cart and displays a success toast message to inform the user.
5. **Environment Integration**: Utilizes Deno for secure API key retrieval, ensuring safe communication with the Resend API for email notifications.
6. **Responsive Design**: The application is designed to work seamlessly on various devices, enhancing user accessibility.

## DESIGN SPECIFICATIONS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs
- Layout: The layout consists of a centered checkout form, a success message area, and clear separation of sections with ample white space to ensure simplicity and clarity.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Zustand for state management of the cart data

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using TypeScript and install necessary dependencies including Tailwind CSS and Zustand.
2. **Create Checkout Form**: Develop the checkout form component to collect user information. Ensure it integrates with Zustand for cart data.
3. **Implement `processMockCheckout`**: Define the `processMockCheckout` function to compile `CheckoutPayload` and invoke the `notify-owner-email` Edge Function.
4. **Create Supabase Edge Function**: Implement the `notify-owner-email` function in Supabase to handle incoming payloads and send email notifications using the Resend API.
5. **Integrate Environment Variables**: Ensure the application retrieves the Resend API key securely using `Deno.env.get('RESEND_API_KEY')`.
6. **Add Success Feedback**: Implement a toast notification to inform users of successful order simulation and cart clearing.
7. **Testing**: Conduct thorough testing of the application to ensure all parts function correctly, including form submissions and email notifications.

## USER EXPERIENCE
Users will interact with a minimalistic checkout form, where they can input their details and submit their order. Upon submission, the application will process their information and provide immediate feedback through a success message. The design prioritizes simplicity and clarity, ensuring users can navigate the checkout process with ease while receiving prompt notifications of their order status.