[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import type React from "react" import { forwardRef } from "react" import { cn } from "@/lib/utils" const Card = forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = forwardRef>(({ className, ...props }, ref) => (

)) CardHeader.displayName = "CardHeader" const CardTitle = forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = forwardRef>(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = forwardRef>(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/input-field.tsx" isMerged="true" import type React from "react" import { forwardRef } from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes { label?: string error?: string icon?: React.ReactNode } const InputField = forwardRef( ({ className, type, label, error, icon, ...props }, ref) => { return (
{label && ( {label} )}
{icon &&
{icon}
}
{error &&
{error}
}
) }, ) InputField.displayName = "InputField" export { InputField } [V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true" "use client" import type React from "react" import { createContext, forwardRef, useContext, useId } from "react" import { cn } from "@/lib/utils" const FormContext = createContext<{ id: string }>({ id: "" }) const Form = forwardRef>(({ className, ...props }, ref) => { const id = useId() return (
) }) Form.displayName = "Form" const FormField = forwardRef>(({ className, ...props }, ref) => { return
}) FormField.displayName = "FormField" const FormLabel = forwardRef>( ({ className, ...props }, ref) => { const { id } = useContext(FormContext) return ( ) }, ) FormLabel.displayName = "FormLabel" const FormDescription = forwardRef>( ({ className, ...props }, ref) => { return
}, ) FormDescription.displayName = "FormDescription" const FormMessage = forwardRef>( ({ className, children, ...props }, ref) => { return (
{children}
) }, ) FormMessage.displayName = "FormMessage" export { Form, FormField, FormLabel, FormDescription, FormMessage } [V0_FILE]typescriptreact:file="components/ui/modal.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { X } from "lucide-react" import { cn } from "@/lib/utils" interface ModalProps { isOpen: boolean onClose: () => void title?: string children: React.ReactNode className?: string } export function Modal({ isOpen, onClose, title, children, className }: ModalProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { // Delay showing the modal to allow for animation let timeoutId: NodeJS.Timeout if (isOpen) { setIsVisible(true) document.body.style.overflow = "hidden" } else { timeoutId = setTimeout(() => { setIsVisible(false) document.body.style.overflow = "" }, 300) } return () => { clearTimeout(timeoutId) document.body.style.overflow = "" } }, [isOpen]) if (!isVisible && !isOpen) return null return (

e.stopPropagation()} >
{title &&
{title}
}

{children}

) } [V0_FILE]typescriptreact:file="components/ui/navbar.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import { cn } from "@/lib/utils" interface NavItem { label: string href: string } interface NavbarProps { logo: React.ReactNode items: NavItem[] className?: string } export function Navbar({ logo, items, className }: NavbarProps) { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

{logo}

{items.map((item) => ( {item.label} ))}

{isMenuOpen && (

{items.map((item) => ( setIsMenuOpen(false)} > {item.label} ))}

)}
) } [V0_FILE]typescriptreact:file="components/ui/loading-spinner.tsx" isMerged="true" import { cn } from "@/lib/utils" interface LoadingSpinnerProps { size?: "sm" | "md" | "lg" className?: string } export function LoadingSpinner({ size = "md", className }: LoadingSpinnerProps) { const sizeClasses = { sm: "h-4 w-4", md: "h-8 w-8", lg: "h-12 w-12", } return (

) } [V0_FILE]typescriptreact:file="components/ui/dropdown.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" interface DropdownItem { label: string value: string } interface DropdownProps { items: DropdownItem[] value?: string onChange?: (value: string) => void placeholder?: string className?: string disabled?: boolean } export function Dropdown({ items, value, onChange, placeholder = "Select an option", className, disabled = false, }: DropdownProps) { const [isOpen, setIsOpen] = useState(false) const [selectedItem, setSelectedItem] = useState(items.find((item) => item.value === value)) const dropdownRef = useRef(null) useEffect(() => { setSelectedItem(items.find((item) => item.value === value)) }, [value, items]) useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) const handleSelect = (item: DropdownItem) => { setSelectedItem(item) onChange?.(item.value) setIsOpen(false) } return (
{isOpen && (
{items.map((item) => (
handleSelect(item)} role="option" aria-selected={selectedItem?.value === item.value} > {item.label}
))}
)}
) } [V0_FILE]typescriptreact:file="components/ui/footer.tsx" isMerged="true" import type React from "react" import Link from "next/link" import { cn } from "@/lib/utils" interface FooterLink { label: string href: string } interface FooterColumn { title: string links: FooterLink[] } interface FooterProps { logo: React.ReactNode columns: FooterColumn[] copyright?: string className?: string } export function Footer({ logo, columns, copyright = `© ${new Date().getFullYear()} eSIM AI. All rights reserved.`, className, }: FooterProps) { return (

{logo}
Making eSIM technology accessible and easy to use with AI assistance.

{columns.map((column, index) => (
0 ? "mt-12 md:mt-0" : ""}>
{column.title}

{column.links.map((link) => (
{link.label}
))}

))}

{copyright}

) } [V0_FILE]typescriptreact:file="components/ui/icon.tsx" isMerged="true" import type { LightbulbIcon as LucideProps } from "lucide-react" import dynamicIconImports from "lucide-react/dynamicIconImports" import dynamic from "next/dynamic" import { cn } from "@/lib/utils" interface IconProps extends LucideProps { name: keyof typeof dynamicIconImports className?: string } export function Icon({ name, className, ...props }: IconProps) { const LucideIcon = dynamic(dynamicIconImports[name]) return } [V0_FILE]typescriptreact:file="components/ai/ai-form-helper.tsx" isMerged="true" "use client" import { useState } from "react" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Icon } from "@/components/ui/icon" import { LoadingState } from "@/components/ui/loading-state" import { useLoading } from "@/contexts/loading-context" interface AIFormHelperProps { formType: string onSuggestion?: (suggestion: string) => void className?: string loadingId?: string } export function AIFormHelper({ formType, onSuggestion, className, loadingId = "ai-form-helper" }: AIFormHelperProps) { const [isLoading, setIsLoading] = useState(false) const [suggestion, setSuggestion] = useState("") const [error, setError] = useState("") const { startLoading, stopLoading } = useLoading() const generateSuggestion = async () => { setIsLoading(true) setError("") startLoading(loadingId) try { const { text } = await generateText({ model: openai("gpt-4o"), prompt: `Generate a helpful suggestion for a user filling out a ${formType} form for eSIM Myanmar services. Keep it concise and actionable.`, }) setSuggestion(text) onSuggestion?.(text) } catch (err) { console.error("Error generating suggestion:", err) setError("Failed to generate suggestion. Please try again.") } finally { setIsLoading(false) stopLoading(loadingId) } } const useSuggestion = () => { onSuggestion?.(suggestion) } return ( eSIM Assistant {error ? (
{error}
) : suggestion ? (
{suggestion}
) : (
Need help filling out this {formType} form? Click below to get AI-powered suggestions.
)} {suggestion && ( )} ) } [V0_FILE]typescriptreact:file="components/ai/ai-response-card.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Icon } from "@/components/ui/icon" import { cn } from "@/lib/utils" interface AIResponseCardProps { title: string response: string timestamp?: string onSave?: () => void onShare?: () => void className?: string } export function AIResponseCard({ title, response, timestamp, onSave, onShare, className }: AIResponseCardProps) { const [isTyping, setIsTyping] = useState(true) const [displayedResponse, setDisplayedResponse] = useState("") useEffect(() => { if (!response) { setIsTyping(false) return } setIsTyping(true) setDisplayedResponse("") let index = 0 const interval = setInterval(() => { setDisplayedResponse((prev) => prev + response[index]) index++ if (index >= response.length) { clearInterval(interval) setIsTyping(false) } }, 20) // Adjust typing speed here return () => clearInterval(interval) }, [response]) return ( {title} {timestamp &&
{timestamp}
}
{displayedResponse} {isTyping && }
{onSave && ( )} {onShare && ( )} ) } [V0_FILE]typescriptreact:file="components/ai/ai-custom-input.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { streamText } from "ai" import { openai } from "@ai-sdk/openai" import { Button } from "@/components/ui/button" import { InputField } from "@/components/ui/input-field" import { Icon } from "@/components/ui/icon" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { useLoading } from "@/contexts/loading-context" import { cn } from "@/lib/utils" interface AICustomInputProps { placeholder?: string buttonText?: string onResponse?: (response: string) => void className?: string systemPrompt?: string loadingId?: string } export function AICustomInput({ placeholder = "Ask about eSIM services...", buttonText = "Ask AI", onResponse, className, systemPrompt = "You are a helpful assistant for eSIM Myanmar services. Provide concise and accurate information about eSIM technology, travel connectivity, data plans, and device compatibility.", loadingId = "ai-custom-input", }: AICustomInputProps) { const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const abortControllerRef = useRef(null) const { startLoading, stopLoading } = useLoading() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!input.trim() || isLoading) return setIsLoading(true) setError("") startLoading(loadingId) // Cancel any ongoing request if (abortControllerRef.current) { abortControllerRef.current.abort() } // Create a new abort controller abortControllerRef.current = new AbortController() try { let fullResponse = "" const result = streamText({ model: openai("gpt-4o"), prompt: input, system: systemPrompt, signal: abortControllerRef.current.signal, onChunk: ({ chunk }) => { if (chunk.type === "text-delta") { fullResponse += chunk.text onResponse?.(fullResponse) } }, }) await result.text } catch (err) { if (err instanceof Error && err.name !== "AbortError") { console.error("Error generating response:", err) setError("Failed to generate a response. Please try again.") } } finally { setIsLoading(false) stopLoading(loadingId) abortControllerRef.current = null } } const handleCancel = () => { if (abortControllerRef.current) { abortControllerRef.current.abort() abortControllerRef.current = null } setIsLoading(false) stopLoading(loadingId) } return (

setInput(e.target.value)} placeholder={placeholder} disabled={isLoading} icon={} className="flex-1" /> {isLoading ? ( ) : ( )}
{error &&
{error}
} {isLoading && (
Generating response...
)}
) } [V0_FILE]typescriptreact:file="components/ai/ai-help-chatbot.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { streamText } from "ai" import { openai } from "@ai-sdk/openai" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { InputField } from "@/components/ui/input-field" import { Icon } from "@/components/ui/icon" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { useLoading } from "@/contexts/loading-context" import { cn } from "@/lib/utils" interface Message { id: string role: "user" | "assistant" content: string } interface AIHelpChatbotProps { title?: string initialMessage?: string className?: string loadingId?: string } export function AIHelpChatbot({ title = "eSIM Myanmar Assistant", initialMessage = "Hello! I'm your eSIM Myanmar assistant. How can I help you with your connectivity needs today?", className, loadingId = "ai-help-chatbot", }: AIHelpChatbotProps) { const [messages, setMessages] = useState([ { id: "0", role: "assistant", content: initialMessage, }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) const abortControllerRef = useRef(null) const { startLoading, stopLoading } = useLoading() useEffect(() => { scrollToBottom() }, [messages]) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!input.trim() || isLoading) return const userMessage: Message = { id: Date.now().toString(), role: "user", content: input, } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) startLoading(loadingId) // Cancel any ongoing request if (abortControllerRef.current) { abortControllerRef.current.abort() } // Create a new abort controller abortControllerRef.current = new AbortController() try { const assistantMessageId = (Date.now() + 1).toString() let assistantMessage = "" setMessages((prev) => [...prev, { id: assistantMessageId, role: "assistant", content: "" }]) const result = streamText({ model: openai("gpt-4o"), prompt: input, system: "You are a helpful assistant for eSIM Myanmar services. Provide concise and accurate information about eSIM technology, travel connectivity, data plans, and device compatibility.", signal: abortControllerRef.current.signal, onChunk: ({ chunk }) => { if (chunk.type === "text-delta") { assistantMessage += chunk.text setMessages((prev) => prev.map((msg) => (msg.id === assistantMessageId ? { ...msg, content: assistantMessage } : msg)), ) } }, }) await result.text } catch (err) { if (err instanceof Error && err.name !== "AbortError") { console.error("Error in chat:", err) setMessages((prev) => [ ...prev, { id: Date.now().toString(), role: "assistant", content: "I'm sorry, I encountered an error. Please try again.", }, ]) } } finally { setIsLoading(false) stopLoading(loadingId) abortControllerRef.current = null } } const handleCancel = () => { if (abortControllerRef.current) { abortControllerRef.current.abort() abortControllerRef.current = null } setIsLoading(false) stopLoading(loadingId) } return ( {title}
{messages.map((message) => (

{message.content || }

))}

setInput(e.target.value)} placeholder="Ask about eSIMs, plans, or activation..." disabled={isLoading} className="flex-1" /> {isLoading ? ( ) : ( )}
) } [V0_FILE]javascript:file="postcss.config.js" isMerged="true" module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Brand colors teal: { DEFAULT: "#1E2F3C", 50: "#E6EBED", 100: "#C2D1D8", 200: "#9EB7C3", 300: "#7A9DAE", 400: "#568399", 500: "#3A5A6C", 600: "#1E2F3C", // Brand dark teal 700: "#162430", 800: "#0E1923", 900: "#060E17", }, cyan: { DEFAULT: "#00FFFF", // Brand vibrant cyan 50: "#E6FFFF", 100: "#B3FFFF", 200: "#80FFFF", 300: "#4DFFFF", 400: "#1AFFFF", 500: "#00E6E6", 600: "#00CCCC", 700: "#00B3B3", 800: "#009999", 900: "#008080", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, pulse: { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 }, }, typing: { "0%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-5px)" }, "100%": { transform: "translateY(0)" }, }, glow: { "0%, 100%": { boxShadow: "0 0 5px rgba(0, 255, 255, 0.5)" }, "50%": { boxShadow: "0 0 20px rgba(0, 255, 255, 0.8)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", float: "float 6s ease-in-out infinite", pulse: "pulse 2s ease-in-out infinite", "typing-1": "typing 1s ease-in-out infinite", "typing-2": "typing 1s ease-in-out infinite 0.2s", "typing-3": "typing 1s ease-in-out infinite 0.4s", glow: "glow 2s ease-in-out infinite", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 210 30% 18%; /* #1E2F3C / --foreground: 0 0% 100%; --card: 210 30% 18%; --card-foreground: 0 0% 100%; --popover: 210 30% 18%; --popover-foreground: 0 0% 100%; --primary: 180 100% 50%; / #00FFFF / --primary-foreground: 210 30% 18%; --secondary: 210 30% 25%; --secondary-foreground: 0 0% 100%; --muted: 210 30% 25%; --muted-foreground: 0 0% 70%; --accent: 180 100% 50%; --accent-foreground: 210 30% 18%; --destructive: 0 100% 50%; --destructive-foreground: 0 0% 100%; --border: 210 30% 25%; --input: 210 30% 25%; --ring: 180 100% 50%; --radius: 0.5rem; } .dark { --background: 210 30% 18%; --foreground: 0 0% 100%; --card: 210 30% 18%; --card-foreground: 0 0% 100%; --popover: 210 30% 18%; --popover-foreground: 0 0% 100%; --primary: 180 100% 50%; --primary-foreground: 210 30% 18%; --secondary: 210 30% 25%; --secondary-foreground: 0 0% 100%; --muted: 210 30% 25%; --muted-foreground: 0 0% 70%; --accent: 180 100% 50%; --accent-foreground: 210 30% 18%; --destructive: 0 100% 50%; --destructive-foreground: 0 0% 100%; --border: 210 30% 25%; --input: 210 30% 25%; --ring: 180 100% 50%; } } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; } } /* Glassmorphism / .glass { background: rgba(30, 47, 60, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .glass-light { background: rgba(30, 47, 60, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } / Gradient text / .gradient-text { background: linear-gradient(90deg, #00ffff, #00bfff); -webkit-background-clip: text; background-clip: text; color: transparent; } / Glow effect / .glow { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); transition: box-shadow 0.3s ease; } .glow:hover { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); } / Background pattern / .bg-pattern { background-image: radial-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px); background-size: 30px 30px; } [V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" export function Navbar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) const pathname = usePathname() useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navItems = [ { label: "Home", href: "/" }, { label: "eSIM Plans", href: "/esim-plans" }, { label: "Resources", href: "/resources" }, { label: "Contact", href: "/contact" }, { label: "Dashboard", href: "/dashboard" }, ] const isActive = (path: string) => { if (path === "/") return pathname === "/" return pathname.startsWith(path) } return (

eSIM Myanmar {/ Desktop Navigation /}
{navItems.map((item) => ( {item.label} ))}
{/ Mobile Navigation Toggle /}
{/ Mobile Navigation Menu /} {isOpen && (

{navItems.map((item) => ( setIsOpen(false)} > {item.label} ))}

)}
) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", glow: "bg-cyan text-teal-600 hover:bg-cyan-400 transition-all duration-300 animate-glow", gradient: "bg-gradient-to-r from-cyan to-blue-500 text-teal-600 hover:from-cyan-400 hover:to-blue-400 transition-all duration-300", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", xl: "h-14 rounded-md px-10 text-lg", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ChatBubble } from "@/components/chat-bubble" export function HeroSection() { return (
{/* Background pattern /}

Welcome to eSIM Myanmar

Your trusted provider for digital eSIM solutions in Myanmar. Stay connected anywhere with our affordable and reliable data plans.

{/ Animated chat interface preview /}

{/ Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/chat-bubble.tsx" isMerged="true" import { cn } from "@/lib/utils" interface Message { role: "user" | "assistant" content: string } interface ChatBubbleProps { messages: Message[] typing?: boolean className?: string } export function ChatBubble({ messages, typing = false, className }: ChatBubbleProps) { return (

AI Assistant

{messages.map((message, index) => (

{message.content}

))} {typing && (

)}

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" isMerged="true" import { Smartphone, Zap, Globe, CreditCard, Wifi, ShieldCheck } from "lucide-react" import { FeatureCard } from "@/components/feature-card" export function FeaturesSection() { const features = [ { icon: , title: "Instant Activation", description: "Get your eSIM instantly delivered to your email. Scan the QR code and you're ready to connect.", }, { icon: , title: "Fast Connectivity", description: "Enjoy high-speed data with our partner networks across Myanmar and internationally.", }, { icon: , title: "Secure & Reliable", description: "Our eSIMs use encrypted technology to ensure your connection is secure and your data is protected.", }, { icon: , title: "International Coverage", description: "Stay connected in over 190+ countries with our global eSIM plans for travelers.", }, { icon: , title: "Flexible Plans", description: "Choose from daily, weekly, or monthly plans that fit your needs and budget.", }, { icon: , title: "Easy Top-ups", description: "Running low on data? Easily top up your eSIM online without changing your profile.", }, ] return (

Why Choose eSIM Myanmar

Our digital eSIM solutions offer convenience, flexibility, and reliability for all your connectivity needs.

{features.map((feature, index) => ( ))}

{/ Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/feature-card.tsx" isMerged="true" import type { ReactNode } from "react" import { cn } from "@/lib/utils" interface FeatureCardProps { icon: ReactNode title: string description: string className?: string } export function FeatureCard({ icon, title, description, className }: FeatureCardProps) { return (

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/interactive-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useLoading } from "@/contexts/loading-context" import { cn } from "@/lib/utils" interface Message { role: "user" | "assistant" content: string } const demoResponses: Record = { default: "I'm your eSIM assistant. How can I help you with your connectivity needs today?", hello: "Hello! It's nice to meet you. How can I assist you with your eSIM needs today?", help: "I can help with selecting the right eSIM plan, activation instructions, troubleshooting connection issues, and answering questions about our services. What do you need help with?", features: "Our eSIMs offer instant activation, no physical SIM needed, dual SIM functionality (keep your home number), coverage in 190+ countries, and 24/7 support.", pricing: "We offer several eSIM plans: Thailand Traveler ($12.99), Southeast Asia Explorer ($24.99), and Global Voyager ($49.99). Would you like more details on any specific plan?", } export function InteractiveDemo() { const [messages, setMessages] = useState([ { role: "assistant", content: "Hi there! I'm your eSIM Myanmar assistant. Ask me anything about our eSIM services.", }, ]) const [input, setInput] = useState("") const [isTyping, setIsTyping] = useState(false) const { startLoading, stopLoading } = useLoading() const handleSend = () => { if (!input.trim()) return // Add user message const userMessage: Message = { role: "user", content: input } setMessages((prev) => [...prev, userMessage]) setInput("") // Simulate AI thinking setIsTyping(true) startLoading("demo-chat") // Determine response based on input keywords setTimeout(() => { let responseContent = demoResponses.default const lowerInput = input.toLowerCase() if (lowerInput.includes("hello") || lowerInput.includes("hi")) { responseContent = demoResponses.hello } else if (lowerInput.includes("help") || lowerInput.includes("what can you do")) { responseContent = demoResponses.help } else if (lowerInput.includes("feature")) { responseContent = demoResponses.features } else if (lowerInput.includes("price") || lowerInput.includes("cost") || lowerInput.includes("plan")) { responseContent = demoResponses.pricing } else if (lowerInput.includes("activate") || lowerInput.includes("setup")) { responseContent = "To activate your eSIM, you'll need to scan the QR code we send you after purchase. Go to your phone's settings, select 'Mobile Data' or 'Cellular', then 'Add Data Plan' and scan the QR code. Need more detailed instructions for your specific device?" } else if (lowerInput.includes("compatible") || lowerInput.includes("work with")) { responseContent = "Our eSIMs work with most modern smartphones including iPhone XS and newer, Google Pixel 3 and newer, Samsung Galaxy S20 and newer, and many other recent models. Would you like me to check if your specific device is compatible?" } const assistantMessage: Message = { role: "assistant", content: responseContent } setMessages((prev) => [...prev, assistantMessage]) setIsTyping(false) stopLoading("demo-chat") }, 1500) } return (

Try Our eSIM Assistant

Experience how easy it is to get help with our eSIM services.

{/ Chat header /}

eSIM Myanmar Assistant

{/ Chat messages /}

{messages.map((message, index) => (

{message.content}

))} {isTyping && (

)}

{/ Chat input /}

setInput(e.target.value)} placeholder="Ask about our eSIM services..." className="bg-white/10 border-white/20 text-white placeholder:text-white/50" onKeyDown={(e) => e.key === "Enter" && handleSend()} disabled={isTyping} />

This is a simulated demo. Try asking about features, pricing, activation, or device compatibility!

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isMerged="true" import { TestimonialCard } from "@/components/testimonial-card" export function TestimonialsSection() { const testimonials = [ { name: "Sarah Johnson", role: "Digital Nomad", company: "Travel Blogger", image: "/placeholder.svg?height=80&width=80", content: "eSIM Myanmar made my travels through Southeast Asia so much easier. I got instant connectivity in Thailand, Vietnam, and Cambodia without having to hunt for local SIM cards.", rating: 5, }, { name: "Michael Chen", role: "Business Traveler", company: "Tech Consultant", image: "/placeholder.svg?height=80&width=80", content: "As someone who travels frequently for work, having an eSIM has been a game-changer. The Global Voyager plan from eSIM Myanmar keeps me connected in every country I visit.", rating: 5, }, { name: "Emily Rodriguez", role: "Tourist", company: "", image: "/placeholder.svg?height=80&width=80", content: "I was worried about staying connected during my vacation in Myanmar, but the eSIM was so easy to set up. The data speeds were great and customer service was very helpful.", rating: 4, }, { name: "David Kim", role: "Local Resident", company: "Yangon", image: "/placeholder.svg?height=80&width=80", content: "I've been using eSIM Myanmar for my daily connectivity needs for 6 months now. The service is reliable and their data plans are much more affordable than traditional options.", rating: 5, }, ] return (

What Our Users Say

Discover how our eSIM solutions are helping travelers and locals stay connected.

{testimonials.map((testimonial, index) => ( ))}

{/* Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/testimonial-card.tsx" isMerged="true" import Image from "next/image" import { Star } from "lucide-react" import { cn } from "@/lib/utils" interface TestimonialCardProps { name: string role: string company: string image: string content: string rating: number className?: string } export function TestimonialCard({ name, role, company, image, content, rating, className }: TestimonialCardProps) { return (

{name}

{role} at {company}

{Array.from({ length: 5 }).map((_, i) => ( ))}

"{content}"

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isMerged="true" import { Button } from "@/components/ui/button" export function CTASection() { return (

{/ Background glow effects /}

Ready to Stay Connected Anywhere?

Join thousands of travelers who are already using eSIM Myanmar to stay connected globally without the hassle of physical SIM cards.

No physical SIM card needed. Works with all eSIM-compatible devices.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Twitter, Instagram, Linkedin, Smartphone, Mail, Globe, Phone } from "lucide-react" export function Footer() { const currentYear = new Date().getFullYear() const footerLinks = { "eSIM Plans": [ { label: "Local eSIMs", href: "/esim-plans/local" }, { label: "Travel eSIMs", href: "/esim-plans/travel" }, { label: "Global eSIMs", href: "/esim-plans/global" }, { label: "Data Top-ups", href: "/esim-plans/top-up" }, { label: "All Plans", href: "/esim-plans" }, ], Resources: [ { label: "Activation Guide", href: "/resources/activation-guide" }, { label: "Compatibility Check", href: "/resources/compatibility" }, { label: "Tutorials", href: "/resources/tutorials" }, { label: "FAQ", href: "/resources/faq" }, { label: "User Guides", href: "/resources/guides" }, ], Company: [ { label: "About Us", href: "/about" }, { label: "Contact Us", href: "/contact" }, { label: "Terms of Service", href: "/terms" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Careers", href: "/careers" }, ], } return (

{/ Company Info /}
eSIM Myanmar
Your trusted provider for digital eSIM solutions in Myanmar and globally. Stay connected anywhere with our affordable and reliable data plans.

Facebook Twitter Instagram LinkedIn

{/ Footer Links /} {Object.entries(footerLinks).map(([category, links]) => (

{category}

{links.map((link) => (
{link.label}
))}

))} {/ Contact /}

Contact Us

esim.com.mm

info@esim.com.mm

09650000172

@esimmyanmar

© {currentYear} eSIM Myanmar. All rights reserved.

) } [V0_FILE]typescriptreact:file="components/about-section.tsx" isMerged="true" export function AboutSection() { return (

About eSIM Myanmar

We're on a mission to make digital connectivity accessible, affordable, and hassle-free for everyone in Myanmar and beyond.

Our Story

Founded in 2023, eSIM Myanmar began with a simple idea: mobile connectivity should be easy, affordable, and accessible to everyone. Our team of telecom experts and tech enthusiasts came together to bring eSIM technology to Myanmar.

Today, we serve travelers, digital nomads, and locals alike, helping them stay connected across Myanmar and internationally with our range of eSIM data plans.

Our Mission

To revolutionize mobile connectivity in Myanmar by making eSIM technology accessible, affordable, and user-friendly for everyone.

Our Vision

A world where staying connected across borders is seamless, affordable, and environmentally friendly through digital eSIM technology.

Our Values

Innovation, reliability, transparency, and a relentless focus on customer satisfaction and support.

{/ Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/services-section.tsx" isMerged="true" import { Smartphone, Globe, Wifi, Plane, Users, HeadphonesIcon } from "lucide-react" import { FeatureCard } from "@/components/feature-card" export function ServicesSection() { const services = [ { icon: , title: "Travel eSIMs", description: "Stay connected while traveling internationally with our country-specific and regional eSIM plans.", }, { icon: , title: "Local eSIMs", description: "Get affordable data plans for use within Myanmar, perfect for locals and long-term visitors.", }, { icon: , title: "Global eSIMs", description: "Our global eSIM plans provide coverage in multiple countries for frequent travelers.", }, { icon: , title: "Data Top-ups", description: "Easily add more data to your existing eSIM when you need it, without changing your profile.", }, { icon: , title: "Business Solutions", description: "Custom eSIM solutions for businesses with multiple employees who travel or work remotely.", }, { icon: , title: "24/7 Support", description: "Our dedicated support team is available around the clock to assist with any eSIM-related issues.", }, ] return (

Our Services

Comprehensive eSIM solutions designed to keep you connected wherever you go.

{services.map((service, index) => ( ))}

{/ Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" isMerged="true" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface PricingTierProps { name: string price: string description: string features: string[] highlighted?: boolean buttonText?: string className?: string } function PricingTier({ name, price, description, features, highlighted = false, buttonText = "Get Started", className, }: PricingTierProps) { return (
{highlighted && (
Most Popular
)}
{name}

{price} {price !== "Custom" && /plan}

{description}

{features.map((feature, index) => (
{feature}
))}

) } export function PricingSection() { return (

Simple Pricing

Affordable eSIM plans designed to fit every traveler's needs. No hidden fees or complicated tiers.

All plans include instant delivery and activation. No physical SIM card needed.

{/ Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" interface FAQItemProps { question: string answer: string } function FAQItem({ question, answer }: FAQItemProps) { const [isOpen, setIsOpen] = useState(false) return (

{answer}

) } export function FAQSection() { const faqs = [ { question: "What is an eSIM?", answer: "An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan without having to use a physical SIM card. It's built into your device and can be programmed to connect to different mobile networks.", }, { question: "How do I know if my device supports eSIM?", answer: "Most newer smartphones support eSIM, including iPhone XS and newer, Google Pixel 3 and newer, Samsung Galaxy S20 and newer, and many other recent models. You can check your device specifications or contact us for assistance in determining compatibility.", }, { question: "How do I activate my eSIM?", answer: "After purchasing an eSIM plan, you'll receive a QR code via email. On your device, go to Settings > Mobile Data > Add Data Plan, then scan the QR code. Follow the on-screen instructions to complete activation. We also provide detailed step-by-step guides for different device models.", }, { question: "Can I use my eSIM and physical SIM at the same time?", answer: "Yes, if your device is dual SIM capable, you can use both your physical SIM and eSIM simultaneously. This allows you to have two different phone numbers and data plans on one device, which is perfect for keeping your home number while traveling.", }, { question: "What happens when my data runs out or expires?", answer: "When your data runs out or your plan expires, you can easily purchase a top-up or a new plan from our website. Your eSIM profile remains on your device, so you don't need to scan a new QR code - the new data will be added to your existing profile.", }, { question: "What kind of support does eSIM Myanmar provide?", answer: "We offer 24/7 customer support via email, phone, and live chat. Our support team can help with eSIM activation, troubleshooting connection issues, and answering any questions about our plans. All customers have access to our detailed guides and FAQs.", }, ] return (

Frequently Asked Questions

Find answers to common questions about eSIMs and our services.

{faqs.map((faq, index) => ( ))}

Don't see your question here?{" "} Contact us {" "} for more information.

{/ Decorative elements /}

) } [V0_FILE]typescriptreact:file="components/ui/loading-state.tsx" isMerged="true" import type React from "react" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { cn } from "@/lib/utils" interface LoadingStateProps { isLoading: boolean children: React.ReactNode loadingText?: string className?: string spinnerSize?: "sm" | "md" | "lg" overlay?: boolean } export function LoadingState({ isLoading, children, loadingText = "Loading...", className, spinnerSize = "md", overlay = false, }: LoadingStateProps) { if (!isLoading) return <>{children} if (overlay) { return (
{children}
{loadingText &&
{loadingText}
}

) } return (
{loadingText &&
{loadingText}
}
) } [V0_FILE]typescriptreact:file="lib/api.ts" isMerged="true" "use client" import { useState, useEffect } from "react" interface ApiOptions { url: string method?: "GET" | "POST" | "PUT" | "DELETE" body?: any headers?: Record onSuccess?: (data: T) => void onError?: (error: Error) => void } interface ApiState { data: T | null isLoading: boolean error: Error | null refetch: () => Promise } export function useApi({ url, method = "GET", body, headers = {}, onSuccess, onError }: ApiOptions): ApiState { const [data, setData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const fetchData = async () => { setIsLoading(true) setError(null) try { const response = await fetch(url, { method, headers: { "Content-Type": "application/json", ...headers, }, body: body ? JSON.stringify(body) : undefined, }) if (!response.ok) { throw new Error(`API error: ${response.status}`) } const result = await response.json() setData(result) onSuccess?.(result) } catch (err) { const error = err instanceof Error ? err : new Error(String(err)) setError(error) onError?.(error) } finally { setIsLoading(false) } } useEffect(() => { fetchData() }, [url]) return { data, isLoading, error, refetch: fetchData } } export async function apiRequest({ url, method = "GET", body, headers = {}, }: Omit, "onSuccess" | "onError">): Promise { const response = await fetch(url, { method, headers: { "Content-Type": "application/json", ...headers, }, body: body ? JSON.stringify(body) : undefined, }) if (!response.ok) { throw new Error(`API error: ${response.status}`) } return response.json() } [V0_FILE]typescriptreact:file="contexts/loading-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useCallback } from "react" interface LoadingContextType { isLoading: boolean startLoading: (id?: string) => void stopLoading: (id?: string) => void loadingIds: Set } const LoadingContext = createContext(undefined) export function LoadingProvider({ children }: { children: React.ReactNode }) { const [isLoading, setIsLoading] = useState(false) const [loadingIds, setLoadingIds] = useState>(new Set()) const startLoading = useCallback((id?: string) => { if (id) { setLoadingIds((prev) => { const newIds = new Set(prev) newIds.add(id) return newIds }) } setIsLoading(true) }, []) const stopLoading = useCallback((id?: string) => { if (id) { setLoadingIds((prev) => { const newIds = new Set(prev) newIds.delete(id) if (newIds.size === 0) { setIsLoading(false) } return newIds }) } else { setIsLoading(false) setLoadingIds(new Set()) } }, []) return ( {children} ) } export function useLoading() { const context = useContext(LoadingContext) if (context === undefined) { throw new Error("useLoading must be used within a LoadingProvider") } return context } [V0_FILE]typescriptreact:file="components/ui/global-loading.tsx" isMerged="true" "use client" import { useLoading } from "@/contexts/loading-context" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { cn } from "@/lib/utils" interface GlobalLoadingProps { className?: string } export function GlobalLoading({ className }: GlobalLoadingProps) { const { isLoading } = useLoading() if (!isLoading) return null return (

Loading...

) } [V0_FILE]typescriptreact:file="src/services/api/index.ts" isMerged="true" // Base API service export from "./base-api" // Feature-specific API services export * from "./ai-service" export * from "./user-service" export * from "./esim-service" [V0_FILE]typescriptreact:file="src/services/api/base-api.ts" isMerged="true" // Base API configuration and utilities const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "https://api.esim.com.mm" export interface ApiResponse { data: T success: boolean message?: string } export interface ApiError { status: number message: string errors?: Record } export async function fetchApi(endpoint: string, options: RequestInit = {}): Promise> { const url = `${API_BASE_URL}${endpoint}` const defaultHeaders: HeadersInit = { "Content-Type": "application/json", Accept: "application/json", } // Get auth token if available const token = typeof localStorage !== "undefined" ? localStorage.getItem("auth_token") : null const headers = { ...defaultHeaders, ...options.headers, ...(token ? { Authorization: `Bearer ${token}` } : {}), } try { const response = await fetch(url, { ...options, headers, }) // Handle 204 No Content responses if (response.status === 204) { return { success: true, data: null as unknown as T } } // Parse JSON response const data = await response.json() if (!response.ok) { const error: ApiError = { status: response.status, message: data.message || "An error occurred", errors: data.errors, } throw error } return data } catch (error) { if (error instanceof TypeError && error.message.includes("Failed to fetch")) { throw { status: 0, message: "Network error. Please check your connection.", } as ApiError } throw error } } export function handleApiError(error: unknown): ApiError { if (typeof error === "object" && error !== null && "status" in error) { return error as ApiError } return { status: 500, message: error instanceof Error ? error.message : "An unknown error occurred", } } [V0_FILE]typescriptreact:file="src/services/api/ai-service.ts" isMerged="true" import { fetchApi, type ApiResponse } from "./base-api" export interface AiCompletionRequest { prompt: string systemPrompt?: string maxTokens?: number } export interface AiCompletionResponse { text: string usage: { promptTokens: number completionTokens: number totalTokens: number } } export async function getAiCompletion(request: AiCompletionRequest): Promise> { return fetchApi("/ai/completion", { method: "POST", body: JSON.stringify(request), }) } export interface AiChatMessage { role: "user" | "assistant" | "system" content: string } export interface AiChatRequest { messages: AiChatMessage[] maxTokens?: number } export interface AiChatResponse { message: AiChatMessage usage: { promptTokens: number completionTokens: number totalTokens: number } } export async function getAiChatResponse(request: AiChatRequest): Promise> { return fetchApi("/ai/chat", { method: "POST", body: JSON.stringify(request), }) } // eSIM-specific AI assistance export interface ESIMAiAssistRequest { query: string esimId?: string region?: string context?: "purchase" | "activation" | "troubleshooting" | "usage" } export interface ESIMAiAssistResponse { answer: string suggestedActions?: { type: "purchase" | "activate" | "topup" | "support" | "link" label: string data?: any }[] } export async function getESIMAiAssistance(request: ESIMAiAssistRequest): Promise> { return fetchApi("/ai/esim-assist", { method: "POST", body: JSON.stringify(request), }) } // AI-powered plan recommendations export interface ESIMPlanRecommendationRequest { destination?: string[] duration?: number dataNeeds?: "low" | "medium" | "high" budget?: number activities?: string[] } export interface ESIMPlanRecommendation { planId: string planName: string provider: string confidence: number reasoning: string } export async function getESIMPlanRecommendations( request: ESIMPlanRecommendationRequest, ): Promise> { return fetchApi("/ai/recommend-plans", { method: "POST", body: JSON.stringify(request), }) } [V0_FILE]typescriptreact:file="src/services/api/user-service.ts" isMerged="true" import { fetchApi, type ApiResponse } from "./base-api" export interface User { id: string name: string email: string role: string createdAt: string updatedAt: string } export interface LoginRequest { email: string password: string } export interface LoginResponse { user: User token: string } export async function login(request: LoginRequest): Promise> { return fetchApi("/auth/login", { method: "POST", body: JSON.stringify(request), }) } export interface RegisterRequest { name: string email: string password: string } export async function register(request: RegisterRequest): Promise> { return fetchApi("/auth/register", { method: "POST", body: JSON.stringify(request), }) } export async function getCurrentUser(): Promise> { return fetchApi("/users/me") } export async function updateUser(userId: string, data: Partial): Promise> { return fetchApi(`/users/${userId}`, { method: "PATCH", body: JSON.stringify(data), }) } [V0_FILE]typescriptreact:file="src/hooks/use-auth.ts" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { login, register, getCurrentUser, type User, type LoginRequest, type RegisterRequest, } from "@/services/api/user-service" import { useLoading } from "@/contexts/loading-context" interface AuthState { user: User | null isAuthenticated: boolean isLoading: boolean error: string | null } export function useAuth() { const [state, setState] = useState({ user: null, isAuthenticated: false, isLoading: true, error: null, }) const { startLoading, stopLoading } = useLoading() const loadUser = useCallback(async () => { setState((prev) => ({ ...prev, isLoading: true, error: null })) startLoading("auth") try { const response = await getCurrentUser() setState({ user: response.data, isAuthenticated: true, isLoading: false, error: null, }) } catch (error) { setState({ user: null, isAuthenticated: false, isLoading: false, error: "Failed to load user", }) } finally { stopLoading("auth") } }, [startLoading, stopLoading]) useEffect(() => { // Check if token exists in localStorage const token = localStorage.getItem("auth_token") if (token) { loadUser() } else { setState((prev) => ({ ...prev, isLoading: false })) } }, [loadUser]) const loginUser = async (credentials: LoginRequest) => { setState((prev) => ({ ...prev, isLoading: true, error: null })) startLoading("auth-login") try { const response = await login(credentials) localStorage.setItem("auth_token", response.data.token) setState({ user: response.data.user, isAuthenticated: true, isLoading: false, error: null, }) return response.data } catch (error) { setState((prev) => ({ ...prev, isLoading: false, error: "Invalid credentials", })) throw error } finally { stopLoading("auth-login") } } const registerUser = async (userData: RegisterRequest) => { setState((prev) => ({ ...prev, isLoading: true, error: null })) startLoading("auth-register") try { const response = await register(userData) localStorage.setItem("auth_token", response.data.token) setState({ user: response.data.user, isAuthenticated: true, isLoading: false, error: null, }) return response.data } catch (error) { setState((prev) => ({ ...prev, isLoading: false, error: "Registration failed", })) throw error } finally { stopLoading("auth-register") } } const logout = () => { localStorage.removeItem("auth_token") setState({ user: null, isAuthenticated: false, isLoading: false, error: null, }) } return { ...state, login: loginUser, register: registerUser, logout, refreshUser: loadUser, } } [V0_FILE]typescriptreact:file="src/hooks/use-ai.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useCallback } from "react" import { getAiCompletion, getAiChatResponse, type AiChatMessage } from "@/services/api/ai-service" import { useLoading } from "@/contexts/loading-context" export function useAiCompletion() { const [result, setResult] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { startLoading, stopLoading } = useLoading() const generateCompletion = useCallback( async (prompt: string, systemPrompt?: string) => { setIsLoading(true) setError(null) startLoading("ai-completion") try { const response = await getAiCompletion({ prompt, systemPrompt, }) setResult(response.data.text) return response.data.text } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to generate completion" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("ai-completion") } }, [startLoading, stopLoading], ) return { result, isLoading, error, generateCompletion, } } export function useAiChat() { const [messages, setMessages] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { startLoading, stopLoading } = useLoading() const sendMessage = useCallback( async (message: string, systemPrompt?: string) => { setIsLoading(true) setError(null) startLoading("ai-chat") const userMessage: AiChatMessage = { role: "user", content: message, } const updatedMessages = [...messages, userMessage] setMessages(updatedMessages) try { const response = await getAiChatResponse({ messages: systemPrompt ? [{ role: "system", content: systemPrompt }, ...updatedMessages] : updatedMessages, }) const assistantMessage = response.data.message setMessages([...updatedMessages, assistantMessage]) return assistantMessage } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to get chat response" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("ai-chat") } }, [messages, startLoading, stopLoading], ) const clearMessages = useCallback(() => { setMessages([]) }, []) return { messages, isLoading, error, sendMessage, clearMessages, } } [V0_FILE]typescriptreact:file="app/demo/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useLoading } from "@/contexts/loading-context" import { LoadingState } from "@/components/ui/loading-state" export default function DemoPage() { const { startLoading, stopLoading } = useLoading() const [isComponentLoading, setIsComponentLoading] = useState(false) const simulateGlobalLoading = () => { startLoading("demo-global") setTimeout(() => { stopLoading("demo-global") }, 3000) } const simulateComponentLoading = () => { setIsComponentLoading(true) setTimeout(() => { setIsComponentLoading(false) }, 3000) } return (

Loading States Demo

Global Loading
This demonstrates a global loading overlay that blocks the entire UI.
Component Loading
This demonstrates a component-level loading state.

This content is hidden during loading

) } [V0_FILE]typescriptreact:file="src/services/api/esim-service.ts" isMerged="true" import { fetchApi, type ApiResponse } from "./base-api" // eSIM Types export interface ESim { id: string iccid: string status: "active" | "inactive" | "expired" | "pending" activationDate?: string expiryDate?: string dataUsage: { used: number total: number unit: "MB" | "GB" } plan: ESIMPlan qrCode?: string regions: string[] } export interface ESIMPlan { id: string name: string description: string price: number currency: string dataAmount: number dataUnit: "MB" | "GB" validity: number validityUnit: "days" | "months" regions: string[] features: string[] } export interface ESIMProvider { id: string name: string logo: string regions: string[] rating: number plans: ESIMPlan[] } export interface ESIMRegion { code: string name: string flag: string providers: number plans: number } // API Functions // Get all eSIMs for the current user export async function getUserESims(): Promise> { return fetchApi("/esims/user") } // Get a specific eSIM by ID export async function getESim(esimId: string): Promise> { return fetchApi(`/esims/${esimId}`) } // Purchase a new eSIM export interface PurchaseESIMRequest { planId: string paymentMethodId: string email: string } export interface PurchaseESIMResponse { esim: ESim transactionId: string receipt: { id: string url: string } } export async function purchaseESim(request: PurchaseESIMRequest): Promise> { return fetchApi("/esims/purchase", { method: "POST", body: JSON.stringify(request), }) } // Activate an eSIM export async function activateESim(esimId: string): Promise> { return fetchApi(`/esims/${esimId}/activate`, { method: "POST", }) } // Deactivate an eSIM export async function deactivateESim(esimId: string): Promise> { return fetchApi(`/esims/${esimId}/deactivate`, { method: "POST", }) } // Top up an eSIM with more data export interface TopUpESIMRequest { esimId: string planId: string paymentMethodId: string } export async function topUpESim(request: TopUpESIMRequest): Promise> { return fetchApi("/esims/topup", { method: "POST", body: JSON.stringify(request), }) } // Get all available eSIM plans export async function getESIMPlans(regionCode?: string): Promise> { const endpoint = regionCode ? `/plans?region=${regionCode}` : "/plans" return fetchApi(endpoint) } // Get a specific eSIM plan by ID export async function getESIMPlan(planId: string): Promise> { return fetchApi(`/plans/${planId}`) } // Get all available eSIM providers export async function getESIMProviders(regionCode?: string): Promise> { const endpoint = regionCode ? `/providers?region=${regionCode}` : "/providers" return fetchApi(endpoint) } // Get a specific eSIM provider by ID export async function getESIMProvider(providerId: string): Promise> { return fetchApi(`/providers/${providerId}`) } // Get all available regions for eSIMs export async function getESIMRegions(): Promise> { return fetchApi("/regions") } // Get usage history for an eSIM export interface ESIMUsageRecord { date: string dataUsed: number dataUnit: "MB" | "GB" } export async function getESIMUsageHistory(esimId: string): Promise> { return fetchApi(`/esims/${esimId}/usage`) } // Get QR code for an eSIM export async function getESIMQRCode(esimId: string): Promise> { return fetchApi<{ qrCode: string }>(`/esims/${esimId}/qrcode`) } // Get installation instructions for an eSIM export interface ESIMInstallationInstructions { deviceType: "ios" | "android" | "other" steps: { title: string description: string image?: string }[] } export async function getESIMInstallationInstructions( esimId: string, deviceType: "ios" | "android" | "other", ): Promise> { return fetchApi(`/esims/${esimId}/instructions?device=${deviceType}`) } // Search for eSIM plans export interface SearchESIMPlansParams { region?: string dataMin?: number dataMax?: number priceMin?: number priceMax?: number validityMin?: number validityMax?: number provider?: string sort?: "price" | "data" | "validity" | "rating" order?: "asc" | "desc" } export async function searchESIMPlans(params: SearchESIMPlansParams): Promise> { const queryParams = new URLSearchParams() Object.entries(params).forEach(([key, value]) => { if (value !== undefined) { queryParams.append(key, value.toString()) } }) return fetchApi(`/plans/search?${queryParams.toString()}`) } [V0_FILE]typescriptreact:file="src/hooks/use-esim.ts" isMerged="true" "use client" import { useState, useCallback } from "react" import { getUserESims, getESim, purchaseESim, activateESim, deactivateESim, topUpESim, getESIMPlans, getESIMProviders, getESIMRegions, getESIMUsageHistory, getESIMQRCode, getESIMInstallationInstructions, searchESIMPlans, type ESim, type ESIMPlan, type ESIMProvider, type ESIMRegion, type PurchaseESIMRequest, type TopUpESIMRequest, type SearchESIMPlansParams, } from "@/services/api/esim-service" import { useLoading } from "@/contexts/loading-context" // Hook for managing user's eSIMs export function useUserESims() { const [esims, setEsims] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { startLoading, stopLoading } = useLoading() const loadUserESims = useCallback(async () => { setIsLoading(true) setError(null) startLoading("esim-load") try { const response = await getUserESims() setEsims(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIMs" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-load") } }, [startLoading, stopLoading]) const getESIMDetails = useCallback( async (esimId: string) => { setIsLoading(true) setError(null) startLoading("esim-details") try { const response = await getESim(esimId) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIM details" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-details") } }, [startLoading, stopLoading], ) const purchaseNewESim = useCallback( async (request: PurchaseESIMRequest) => { setIsLoading(true) setError(null) startLoading("esim-purchase") try { const response = await purchaseESim(request) // Update the local state with the new eSIM setEsims((prev) => [...prev, response.data.esim]) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to purchase eSIM" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-purchase") } }, [startLoading, stopLoading], ) const activateUserESim = useCallback( async (esimId: string) => { setIsLoading(true) setError(null) startLoading("esim-activate") try { const response = await activateESim(esimId) // Update the local state with the activated eSIM setEsims((prev) => prev.map((esim) => (esim.id === esimId ? response.data : esim))) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to activate eSIM" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-activate") } }, [startLoading, stopLoading], ) const deactivateUserESim = useCallback( async (esimId: string) => { setIsLoading(true) setError(null) startLoading("esim-deactivate") try { const response = await deactivateESim(esimId) // Update the local state with the deactivated eSIM setEsims((prev) => prev.map((esim) => (esim.id === esimId ? response.data : esim))) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to deactivate eSIM" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-deactivate") } }, [startLoading, stopLoading], ) const topUpUserESim = useCallback( async (request: TopUpESIMRequest) => { setIsLoading(true) setError(null) startLoading("esim-topup") try { const response = await topUpESim(request) // Update the local state with the topped-up eSIM setEsims((prev) => prev.map((esim) => (esim.id === request.esimId ? response.data : esim))) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to top up eSIM" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-topup") } }, [startLoading, stopLoading], ) const getESIMUsage = useCallback( async (esimId: string) => { setIsLoading(true) setError(null) startLoading("esim-usage") try { const response = await getESIMUsageHistory(esimId) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIM usage history" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-usage") } }, [startLoading, stopLoading], ) const getESIMQR = useCallback( async (esimId: string) => { setIsLoading(true) setError(null) startLoading("esim-qrcode") try { const response = await getESIMQRCode(esimId) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIM QR code" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-qrcode") } }, [startLoading, stopLoading], ) return { esims, isLoading, error, loadUserESims, getESIMDetails, purchaseNewESim, activateUserESim, deactivateUserESim, topUpUserESim, getESIMUsage, getESIMQR, } } // Hook for browsing eSIM plans and providers export function useESIMPlans() { const [plans, setPlans] = useState([]) const [providers, setProviders] = useState([]) const [regions, setRegions] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { startLoading, stopLoading } = useLoading() const loadESIMPlans = useCallback( async (regionCode?: string) => { setIsLoading(true) setError(null) startLoading("esim-plans") try { const response = await getESIMPlans(regionCode) setPlans(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIM plans" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-plans") } }, [startLoading, stopLoading], ) const loadESIMProviders = useCallback( async (regionCode?: string) => { setIsLoading(true) setError(null) startLoading("esim-providers") try { const response = await getESIMProviders(regionCode) setProviders(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIM providers" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-providers") } }, [startLoading, stopLoading], ) const loadESIMRegions = useCallback(async () => { setIsLoading(true) setError(null) startLoading("esim-regions") try { const response = await getESIMRegions() setRegions(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load eSIM regions" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-regions") } }, [startLoading, stopLoading]) const searchPlans = useCallback( async (params: SearchESIMPlansParams) => { setIsLoading(true) setError(null) startLoading("esim-search") try { const response = await searchESIMPlans(params) setPlans(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to search eSIM plans" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-search") } }, [startLoading, stopLoading], ) const getInstallationInstructions = useCallback( async (esimId: string, deviceType: "ios" | "android" | "other") => { setIsLoading(true) setError(null) startLoading("esim-instructions") try { const response = await getESIMInstallationInstructions(esimId, deviceType) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load installation instructions" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-instructions") } }, [startLoading, stopLoading], ) return { plans, providers, regions, isLoading, error, loadESIMPlans, loadESIMProviders, loadESIMRegions, searchPlans, getInstallationInstructions, } } [V0_FILE]typescriptreact:file="src/hooks/use-esim-ai.ts" isMerged="true" "use client" import { useState, useCallback } from "react" import { getESIMAiAssistance, getESIMPlanRecommendations, type ESIMAiAssistRequest, type ESIMAiAssistResponse, type ESIMPlanRecommendationRequest, type ESIMPlanRecommendation, } from "@/services/api/ai-service" import { useLoading } from "@/contexts/loading-context" // Hook for eSIM-specific AI assistance export function useESIMAiAssistant() { const [response, setResponse] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { startLoading, stopLoading } = useLoading() const getAssistance = useCallback( async (request: ESIMAiAssistRequest) => { setIsLoading(true) setError(null) startLoading("esim-ai-assist") try { const response = await getESIMAiAssistance(request) setResponse(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to get AI assistance" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-ai-assist") } }, [startLoading, stopLoading], ) return { response, isLoading, error, getAssistance, } } // Hook for AI-powered plan recommendations export function useESIMPlanRecommendations() { const [recommendations, setRecommendations] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const { startLoading, stopLoading } = useLoading() const getRecommendations = useCallback( async (request: ESIMPlanRecommendationRequest) => { setIsLoading(true) setError(null) startLoading("esim-ai-recommendations") try { const response = await getESIMPlanRecommendations(request) setRecommendations(response.data) return response.data } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to get plan recommendations" setError(errorMessage) throw err } finally { setIsLoading(false) stopLoading("esim-ai-recommendations") } }, [startLoading, stopLoading], ) return { recommendations, isLoading, error, getRecommendations, } } [V0_FILE]typescriptreact:file="app/api/mock/regions/route.ts" isMerged="true" import { NextResponse } from "next/server" // Mock data for development const mockRegions = [ { code: "EU", name: "Europe", flag: "🇪🇺", providers: 12, plans: 45, }, { code: "NA", name: "North America", flag: "🌎", providers: 8, plans: 32, }, { code: "AS", name: "Asia", flag: "🌏", providers: 15, plans: 38, }, { code: "AF", name: "Africa", flag: "🌍", providers: 6, plans: 18, }, { code: "OC", name: "Oceania", flag: "🌏", providers: 5, plans: 15, }, { code: "SA", name: "South America", flag: "🌎", providers: 7, plans: 22, }, { code: "GL", name: "Global", flag: "🌐", providers: 4, plans: 10, }, ] export async function GET() { // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 500)) return NextResponse.json({ success: true, data: mockRegions, }) } [V0_FILE]typescriptreact:file="app/api/mock/plans/route.ts" isMerged="true" import { NextResponse } from "next/server" // Mock data for development const mockPlans = [ { id: "plan-001", name: "Europe Traveler", description: "5GB data valid for 30 days across Europe", price: 29.99, currency: "USD", dataAmount: 5, dataUnit: "GB", validity: 30, validityUnit: "days", regions: ["Europe"], features: ["Data only", "Multi-country", "4G/LTE"], }, { id: "plan-002", name: "Global Explorer", description: "10GB data valid for 30 days worldwide", price: 49.99, currency: "USD", dataAmount: 10, dataUnit: "GB", validity: 30, validityUnit: "days", regions: ["Global"], features: ["Data only", "Global coverage", "High-speed"], }, { id: "plan-003", name: "USA Unlimited", description: "Unlimited data for 7 days in the USA", price: 39.99, currency: "USD", dataAmount: -1, // -1 indicates unlimited dataUnit: "GB", validity: 7, validityUnit: "days", regions: ["North America"], features: ["Unlimited data", "USA only", "5G where available"], }, { id: "plan-004", name: "Asia Connect", description: "8GB data for 15 days across Asia", price: 34.99, currency: "USD", dataAmount: 8, dataUnit: "GB", validity: 15, validityUnit: "days", regions: ["Asia"], features: ["Data only", "Multi-country", "4G/LTE"], }, { id: "plan-005", name: "Weekend Getaway", description: "3GB data for 3 days, perfect for weekend trips", price: 14.99, currency: "USD", dataAmount: 3, dataUnit: "GB", validity: 3, validityUnit: "days", regions: ["Europe", "North America"], features: ["Data only", "Fast activation", "4G/LTE"], }, ] export async function GET(request: Request) { // Get region from query params if provided const { searchParams } = new URL(request.url) const region = searchParams.get("region") // Filter plans by region if provided let filteredPlans = mockPlans if (region) { filteredPlans = mockPlans.filter((plan) => plan.regions.some((r) => r.toLowerCase() === region.toLowerCase())) } // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 600)) return NextResponse.json({ success: true, data: filteredPlans, }) } [V0_FILE]typescriptreact:file="app/api/mock/providers/route.ts" isMerged="true" import { NextResponse } from "next/server" // Mock data for development const mockProviders = [ { id: "provider-001", name: "GlobalConnect", logo: "/placeholder.svg?height=80&width=80", regions: ["Europe", "North America", "Asia"], rating: 4.7, plans: [ { id: "plan-001", name: "Europe Traveler", description: "5GB data valid for 30 days across Europe", price: 29.99, currency: "USD", dataAmount: 5, dataUnit: "GB", validity: 30, validityUnit: "days", regions: ["Europe"], features: ["Data only", "Multi-country", "4G/LTE"], }, { id: "plan-002", name: "Global Explorer", description: "10GB data valid for 30 days worldwide", price: 49.99, currency: "USD", dataAmount: 10, dataUnit: "GB", validity: 30, validityUnit: "days", regions: ["Global"], features: ["Data only", "Global coverage", "High-speed"], }, ], }, { id: "provider-002", name: "TravelSIM", logo: "/placeholder.svg?height=80&width=80", regions: ["Europe", "North America", "South America"], rating: 4.5, plans: [ { id: "plan-003", name: "USA Unlimited", description: "Unlimited data for 7 days in the USA", price: 39.99, currency: "USD", dataAmount: -1, // -1 indicates unlimited dataUnit: "GB", validity: 7, validityUnit: "days", regions: ["North America"], features: ["Unlimited data", "USA only", "5G where available"], }, ], }, { id: "provider-003", name: "AsiaConnect", logo: "/placeholder.svg?height=80&width=80", regions: ["Asia", "Oceania"], rating: 4.3, plans: [ { id: "plan-004", name: "Asia Connect", description: "8GB data for 15 days across Asia", price: 34.99, currency: "USD", dataAmount: 8, dataUnit: "GB", validity: 15, validityUnit: "days", regions: ["Asia"], features: ["Data only", "Multi-country", "4G/LTE"], }, ], }, { id: "provider-004", name: "QuickConnect", logo: "/placeholder.svg?height=80&width=80", regions: ["Europe", "North America", "Asia", "Africa", "South America", "Oceania"], rating: 4.8, plans: [ { id: "plan-005", name: "Weekend Getaway", description: "3GB data for 3 days, perfect for weekend trips", price: 14.99, currency: "USD", dataAmount: 3, dataUnit: "GB", validity: 3, validityUnit: "days", regions: ["Europe", "North America"], features: ["Data only", "Fast activation", "4G/LTE"], }, ], }, ] export async function GET(request: Request) { // Get region from query params if provided const { searchParams } = new URL(request.url) const region = searchParams.get("region") // Filter providers by region if provided let filteredProviders = mockProviders if (region) { filteredProviders = mockProviders.filter((provider) => provider.regions.some((r) => r.toLowerCase() === region.toLowerCase()), ) } // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 700)) return NextResponse.json({ success: true, data: filteredProviders, }) } [V0_FILE]typescript:file="app/api/mock/ai/esim-assist/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { handleApiError } from "@/lib/api/middleware/error-handler" import { rateLimiter } from "@/lib/api/middleware/rate-limiter" import { validateBody } from "@/lib/api/utils/validate" import { esimAiAssistSchema } from "@/lib/api/validation/schemas" import { successResponse } from "@/lib/api/utils/response" import { logger } from "@/lib/api/utils/logger" /** * @swagger * /api/mock/ai/esim-assist: * post: * summary: Get AI assistance for eSIM-related queries * description: Returns AI-generated responses to user queries about eSIMs * tags: * - AI Services * requestBody: * required: true * content: * application/json: * schema: * type: object * properties: * query: * type: string * description: User's question or request * esimId: * type: string * description: Optional eSIM ID for context * region: * type: string * description: Optional region for context * context: * type: string * enum: [purchase, activation, troubleshooting, usage] * description: Context of the query * responses: * 200: * description: Successful response with AI assistance * 400: * description: Invalid request parameters * 429: * description: Too many requests * 500: * description: Server error */ export async function POST(request: NextRequest) { try { // Apply rate limiting (20 requests per minute) await rateLimiter(request, { limit: 20, window: 60 }) // Validate request body const data = await validateBody(request, esimAiAssistSchema) logger.info({ message: "Processing AI assistance request", query: data.query, context: data.context, }) // Simulate processing delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Generate a contextual response based on the query and context const response = { answer: "", suggestedActions: [], } const lowerQuery = data.query.toLowerCase() if (lowerQuery.includes("activate") || lowerQuery.includes("install")) { response.answer = "To activate your eSIM, you'll need to scan the QR code with your device. For iPhones, go to Settings > Cellular > Add Cellular Plan. For Android, go to Settings > Network & Internet > Mobile Network > Add carrier. Would you like me to show you detailed instructions for your specific device?" response.suggestedActions = [ { type: "activate", label: "View Activation Instructions", data: { esimId: data.esimId || "esim-001" }, }, { type: "support", label: "Contact Support", data: null, }, ] } else if (lowerQuery.includes("data") || lowerQuery.includes("usage")) { response.answer = "Your current data usage is 1.2GB out of 5GB. At your current rate of usage, your data should last for approximately 20 more days. Would you like to see your detailed usage history or top up your data?" response.suggestedActions = [ { type: "link", label: "View Usage Details", data: { url: "/dashboard/usage" }, }, { type: "topup", label: "Top Up Data", data: { esimId: data.esimId || "esim-001" }, }, ] } else if (lowerQuery.includes("buy") || lowerQuery.includes("purchase") || lowerQuery.includes("plan")) { response.answer = `Based on your query, I recommend looking at our ${data.region || "Global"} travel plans. We have several options ranging from 3GB to unlimited data, with validity periods from 3 days to 30 days. Would you like me to recommend a specific plan based on your needs?` response.suggestedActions = [ { type: "purchase", label: "Browse Plans", data: { region: data.region || "global" }, }, { type: "link", label: "Get Personalized Recommendation", data: { url: "/recommend" }, }, ] } else if (lowerQuery.includes("problem") || lowerQuery.includes("not working") || lowerQuery.includes("issue")) { response.answer = "I'm sorry to hear you're experiencing issues. The most common problems with eSIMs are related to activation or APN settings. Have you successfully scanned the QR code and completed the activation process? Also, make sure data roaming is enabled on your device." response.suggestedActions = [ { type: "support", label: "Troubleshooting Guide", data: null, }, { type: "support", label: "Contact Support", data: null, }, ] } else { response.answer = "I'm here to help with all your eSIM needs. You can ask me about purchasing new eSIMs, activating your existing eSIMs, checking data usage, or troubleshooting any issues. What would you like to know?" response.suggestedActions = [ { type: "purchase", label: "Browse Plans", data: null, }, { type: "link", label: "View My eSIMs", data: { url: "/dashboard" }, }, ] } logger.info({ message: "AI assistance completed", suggestedActionsCount: response.suggestedActions.length, }) return successResponse(response) } catch (error) { return handleApiError(error) } } [V0_FILE]typescript:file="app/api/mock/ai/recommend-plans/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { handleApiError } from "@/lib/api/middleware/error-handler" import { rateLimiter } from "@/lib/api/middleware/rate-limiter" import { validateBody } from "@/lib/api/utils/validate" import { esimPlanRecommendationSchema } from "@/lib/api/validation/schemas" import { successResponse } from "@/lib/api/utils/response" import { logger } from "@/lib/api/utils/logger" /** * @swagger * /api/mock/ai/recommend-plans: * post: * summary: Get AI-powered eSIM plan recommendations * description: Returns personalized eSIM plan recommendations based on user preferences * tags: * - AI Services * requestBody: * required: true * content: * application/json: * schema: * type: object * properties: * destination: * type: array * items: * type: string * description: List of destination countries * duration: * type: number * description: Trip duration in days * dataNeeds: * type: string * enum: [low, medium, high] * description: Level of data usage expected * budget: * type: number * description: Maximum budget in USD * activities: * type: array * items: * type: string * description: List of planned activities * responses: * 200: * description: Successful response with plan recommendations * 400: * description: Invalid request parameters * 429: * description: Too many requests * 500: * description: Server error / export async function POST(request: NextRequest) { try { // Apply rate limiting (10 requests per minute) await rateLimiter(request, { limit: 10, window: 60 }) // Validate request body const data = await validateBody(request, esimPlanRecommendationSchema) logger.info({ message: "Processing plan recommendation request", destination: data.destination, dataNeeds: data.dataNeeds, }) // Simulate processing delay await new Promise((resolve) => setTimeout(resolve, 1200)) // Mock recommendations based on input const recommendations = [ { planId: "plan-001", planName: "Europe Traveler", provider: "GlobalConnect", confidence: 0.92, reasoning: "This plan offers 5GB of data which is suitable for your medium data needs. It covers all European countries you're visiting and is valid for 30 days, which covers your entire trip duration. The price fits within your budget.", }, { planId: "plan-005", planName: "Weekend Getaway", provider: "QuickConnect", confidence: 0.78, reasoning: "If your trip is shorter than a week, this plan offers good value with 3GB of data for 3 days. It's more economical if you're only traveling for a weekend.", }, { planId: "plan-002", planName: "Global Explorer", provider: "GlobalConnect", confidence: 0.65, reasoning: "This plan offers more data (10GB) which could be beneficial if you plan to use data-intensive applications like video streaming or frequent video calls. However, it's more expensive and might exceed your budget.", }, ] // Filter recommendations based on destination if provided let filteredRecommendations = recommendations if (data.destination && data.destination.length > 0) { // This is a simplified mock filter - in a real implementation, // you would match destinations with plan coverage regions if (data.destination.some((d) => d.toLowerCase().includes("europe"))) { filteredRecommendations = recommendations.filter((r) => r.planId === "plan-001" || r.planId === "plan-005") } else if (data.destination.some((d) => d.toLowerCase().includes("usa"))) { filteredRecommendations = recommendations.filter((r) => r.planId === "plan-003" || r.planId === "plan-002") } } // Filter by budget if provided if (data.budget) { // Mock pricing data const planPrices = { "plan-001": 29.99, "plan-002": 49.99, "plan-003": 39.99, "plan-005": 14.99, } filteredRecommendations = filteredRecommendations.filter( (r) => planPrices[r.planId as keyof typeof planPrices] <= data.budget!, ) } logger.info({ message: "Plan recommendation completed", recommendationCount: filteredRecommendations.length, }) return successResponse(filteredRecommendations) } catch (error) { return handleApiError(error) } } [V0_FILE]typescriptreact:file="app/api/mock/esims/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" // Mock data for development const mockESims = { "esim-001": { id: "esim-001", iccid: "8944123456789012345", status: "active", activationDate: "2023-10-15T10:30:00Z", expiryDate: "2023-11-15T10:30:00Z", dataUsage: { used: 1.2, total: 5, unit: "GB", }, plan: { id: "plan-001", name: "Europe Traveler", description: "5GB data valid for 30 days across Europe", price: 29.99, currency: "USD", dataAmount: 5, dataUnit: "GB", validity: 30, validityUnit: "days", regions: ["Europe"], features: ["Data only", "Multi-country"], }, qrCode: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEX///8AAABVwtN+AAAB70lEQVR42uyYMY7sIBBEa7kBR1yBKK7AETfgCkRxBY64AkdcgSNuQNR8qmqwx7Oj/ZGslfZJI43X7uru6gLGjh07duzYsWPHjh07duzYsWPHjh07duz4P8cLgHcAXwD8BvANwAOAHwC+AfgF4AuAdwCvAJ4A/FMOoQqHUIVDqMIhVOEQqnAIVTiEKhxCFQ6hCodQhUOowiF04RDqcAh1OIQ6HEIdDqEOh1CHQ6jDIdThEOpwCHU4hDocQhMOoQmH0IRDaMIhNOEQmnAITTiEJhxCEw6hCYfQhEPowiF04RC6cAhdOIQuHEIXDqELh9CFQ+jCIXThEPpwCH04hD4cQh8OoQ+H0IdD6MMh9OEQ+nAIfTiEPhxCHw5hCIcwhEMYwiEM4RCGcAhDOIQhHMIQDmEIhzCEQxjCIYzhEMZwCGM4hDEcwhgOYQyHMIZDGMMhjOEQxnAIYziEKRzCFA5hCocwhUOYwiFM4RCmcAhTOIQpHMIUDmEKhzCHQ5jDIczhEOZwCHM4hDkcwhwOYQ6HMIdDmMMhzOEQlnAISziEJRzCEg5hCYewhENYwiEs4RCWcAhLOIQlHMIaDmENh7CGQ1jDIazhENZwCGs4hDUcwhoOYQ2HsIZD2MIhbOEQtnAIWziELRzCFg5hC4ewhUPYwiFsf/n4A6iRCNLHdpX9AAAAAElFTkSuQmCC", regions: ["France", "Germany", "Italy", "Spain", "UK"], }, "esim-002": { id: "esim-002", iccid: "8944123456789054321", status: "inactive", activationDate: null, expiryDate: null, dataUsage: { used: 0, total: 10, unit: "GB", }, plan: { id: "plan-002", name: "Global Explorer", description: "10GB data valid for 30 days worldwide", price: 49.99, currency: "USD", dataAmount: 10, dataUnit: "GB", validity: 30, validityUnit: "days", regions: ["Global"], features: ["Data only", "Global coverage", "High-speed"], }, qrCode: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEX///8AAABVwtN+AAAB70lEQVR42uyYMY7sIBBEa7kBR1yBKK7AETfgCkRxBY64AkdcgSNuQNR8qmqwx7Oj/ZGslfZJI43X7uru6gLGjh07duzYsWPHjh07duzYsWPHjh07duz4P8cLgHcAXwD8BvANwAOAHwC+AfgF4AuAdwCvAJ4A/FMOoQqHUIVDqMIhVOEQqnAIVTiEKhxCFQ6hCodQhUOowiF04RDqcAh1OIQ6HEIdDqEOh1CHQ6jDIdThEOpwCHU4hDocQhMOoQmH0IRDaMIhNOEQmnAITTiEJhxCEw6hCYfQhEPowiF04RC6cAhdOIQuHEIXDqELh9CFQ+jCIXThEPpwCH04hD4cQh8OoQ+H0IdD6MMh9OEQ+nAIfTiEPhxCHw5hCIcwhEMYwiEM4RCGcAhDOIQhHMIQDmEIhzCEQxjCIYzhEMZwCGM4hDEcwhgOYQyHMIZDGMMhjOEQxnAIYziEKRzCFA5hCocwhUOYwiFM4RCmcAhTOIQpHMIUDmEKhzCHQ5jDIczhEOZwCHM4hDkcwhwOYQ6HMIdDmMMhzOEQlnAISziEJRzCEg5hCYewhENYwiEs4RCWcAhLOIQlHMIaDmENh7CGQ1jDIazhENZwCGs4hDUcwhoOYQ2HsIZD2MIhbOEQtnAIWziELRzCFg5hC4ewhUPYwiFsf/n4A6iRCNLHdpX9AAAAAElFTkSuQmCC", regions: ["USA", "Canada", "Mexico", "Brazil", "UK", "France", "Germany", "Japan", "Australia"], }, } export async function GET(request: Request, { params }: { params: { id: string } }) { const id = params.id // Check if the eSIM exists if (!mockESims[id]) { return NextResponse.json({ success: false, message: "eSIM not found" }, { status: 404 }) } // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 500)) return NextResponse.json({ success: true, data: mockESims[id], }) } [V0_FILE]typescriptreact:file="components/esim/user-esims-list.tsx" isMerged="true" "use client" import { useEffect } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { useUserESims } from "@/src/hooks/use-esim" import { Wifi, WifiOff, BarChart, QrCode } from "lucide-react" import Link from "next/link" export function UserESimsList() { const { esims, isLoading, error, loadUserESims } = useUserESims() useEffect(() => { loadUserESims() }, [loadUserESims]) if (isLoading && esims.length === 0) { return (

) } if (error) { return (

Failed to load your eSIMs

) } if (esims.length === 0) { return ( No eSIMs Found You don't have any eSIMs yet ) } return (
{esims.map((esim) => (

{esim.plan.name} {esim.iccid}

{esim.status === "active" ? (
Active
) : (
Inactive
)}

Data {esim.dataUsage.used} / {esim.dataUsage.total} {esim.dataUsage.unit}

Validity {esim.expiryDate ? new Date(esim.expiryDate).toLocaleDateString() : "Not activated"}

{esim.regions.slice(0, 3).map((region) => ( {region} ))} {esim.regions.length > 3 && ( +{esim.regions.length - 3} more )}

))}
) } [V0_FILE]typescriptreact:file="components/esim/esim-plans-browser.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Dropdown } from "@/components/ui/dropdown" import { useESIMPlans } from "@/src/hooks/use-esim" import { Globe, Wifi, Calendar, CreditCard } from "lucide-react" import type { ESIMPlan, SearchESIMPlansParams } from "@/src/services/api/esim-service" export function ESIMPlansBrowser() { const { plans, regions, isLoading, error, loadESIMPlans, loadESIMRegions, searchPlans } = useESIMPlans() const [searchParams, setSearchParams] = useState({}) const [regionOptions, setRegionOptions] = useState<{ label: string; value: string }[]>([]) const [sortOptions] = useState([ { label: "Price (Low to High)", value: "price-asc" }, { label: "Price (High to Low)", value: "price-desc" }, { label: "Data (Low to High)", value: "data-asc" }, { label: "Data (High to Low)", value: "data-desc" }, { label: "Validity (Low to High)", value: "validity-asc" }, { label: "Validity (High to Low)", value: "validity-desc" }, ]) const [selectedSort, setSelectedSort] = useState("") useEffect(() => { loadESIMPlans() loadESIMRegions().then((regions) => { const options = regions.map((region) => ({ label: `${region.name} ${region.flag}`, value: region.code, })) setRegionOptions([{ label: "All Regions", value: "" }, ...options]) }) }, [loadESIMPlans, loadESIMRegions]) const handleRegionChange = (value: string) => { setSearchParams((prev) => ({ ...prev, region: value || undefined })) } const handleSortChange = (value: string) => { setSelectedSort(value) const [field, order] = value.split("-") setSearchParams((prev) => ({ ...prev, sort: field as "price" | "data" | "validity" | "rating", order: order as "asc" | "desc", })) } const handleSearch = () => { searchPlans(searchParams) } const renderPlanCard = (plan: ESIMPlan) => { return ( {plan.name} {plan.description}

Data
{plan.dataAmount === -1 ? "Unlimited" : `${plan.dataAmount} ${plan.dataUnit}`}

Validity
{plan.validity} {plan.validityUnit}

Coverage
{plan.regions.join(", ")}

{plan.features.map((feature) => ( {feature} ))}

{plan.price} {plan.currency}
) } return (
Find Your Perfect eSIM Plan Browse and filter eSIM plans for your next trip

Region

Sort By

{isLoading && plans.length === 0 ? (

) : error ? (

Failed to load eSIM plans

) : (
{plans.map(renderPlanCard)}
)}
) } [V0_FILE]typescriptreact:file="components/esim/esim-ai-assistant.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { InputField } from "@/components/ui/input-field" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { useESIMAiAssistant } from "@/src/hooks/use-esim-ai" import { Bot, Send, ExternalLink, Zap } from "lucide-react" import Link from "next/link" interface ESIMAiAssistantProps { esimId?: string region?: string context?: "purchase" | "activation" | "troubleshooting" | "usage" } export function ESIMAiAssistant({ esimId, region, context }: ESIMAiAssistantProps) { const { response, isLoading, error, getAssistance } = useESIMAiAssistant() const [query, setQuery] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!query.trim()) return getAssistance({ query, esimId, region, context, }) } const renderSuggestedAction = (action: any, index: number) => { switch (action.type) { case "link": return ( ) case "purchase": return ( ) case "activate": case "topup": case "support": default: return ( ) } } return ( eSIM AI Assistant Ask me anything about eSIMs, plans, or troubleshooting {response && (

{response.answer}

{response.suggestedActions && response.suggestedActions.length > 0 && (

Suggested Actions:
{response.suggestedActions.map((action, index) => renderSuggestedAction(action, index))}
)}
)} {error &&
{error}
}

setQuery(e.target.value)} placeholder="Ask about eSIMs, plans, or troubleshooting..." className="flex-1" disabled={isLoading} />

Powered by AI to help with your eSIM needs ) } [V0_FILE]typescriptreact:file="components/esim/esim-plan-recommender.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { InputField } from "@/components/ui/input-field" import { Dropdown } from "@/components/ui/dropdown" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { useESIMPlanRecommendations } from "@/src/hooks/use-esim-ai" import { Sparkles, Check, CreditCard } from "lucide-react" import Link from "next/link" export function ESIMPlanRecommender() { const { recommendations, isLoading, error, getRecommendations } = useESIMPlanRecommendations() const [formData, setFormData] = useState({ destination: "", duration: "", dataNeeds: "", budget: "", activities: "", }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleDataNeedsChange = (value: string) => { setFormData((prev) => ({ ...prev, dataNeeds: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() getRecommendations({ destination: formData.destination ? formData.destination.split(",").map((d) => d.trim()) : undefined, duration: formData.duration ? Number.parseInt(formData.duration) : undefined, dataNeeds: formData.dataNeeds as any, budget: formData.budget ? Number.parseFloat(formData.budget) : undefined, activities: formData.activities ? formData.activities.split(",").map((a) => a.trim()) : undefined, }) } return (
AI Plan Recommender Tell us about your trip and we'll recommend the best eSIM plans

How much data do you need?

{error && (

{error}

)} {recommendations.length > 0 && (

Recommended Plans
{recommendations.map((rec, index) => (

{rec.planName} Provider: {rec.provider}
{index === 0 && (
Best Match
)}

Match Score {Math.round(rec.confidence 100)}%

{rec.reasoning}
))}
)}
) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { UserESimsList } from "@/components/esim/user-esims-list" import { ESIMAiAssistant } from "@/components/esim/esim-ai-assistant" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Wifi, Plus, Globe } from "lucide-react" import Link from "next/link" export default function DashboardPage() { return (

My eSIMs

Manage your eSIM Myanmar data plans

Quick Actions

Top Up Data

Add more data to your existing eSIM

Browse Plans

Find the perfect plan for your next trip

Get Recommendations

AI-powered plan suggestions

) } [V0_FILE]typescriptreact:file="app/esim-plans/layout.tsx" isMerged="true" import type React from "react" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" export default function ESIMPlansLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/esim-plans/page.tsx" isMerged="true" import Link from "next/link" import { Smartphone, Globe, Plane, Wifi, Plus, FileText, HelpCircle, CheckCircle, Video } from "lucide-react" import { Button } from "@/components/ui/button" export default function ESIMPlansPage() { const categories = [ { title: "Data eSIM Plans", description: "Browse our comprehensive selection of data plans with various allowances and validity periods.", icon: , href: "/esim-plans/data-plans", }, { title: "Local eSIMs", description: "Get connected locally with our Myanmar eSIM options for residents and visitors.", icon: , href: "/esim-plans/local", }, { title: "Travel eSIMs", description: "Stay connected while traveling with our country-specific and regional eSIM plans.", icon: , href: "/esim-plans/travel", }, { title: "Global eSIMs", description: "Connect worldwide with our global coverage eSIM plans for international travelers.", icon: , href: "/esim-plans/global", }, { title: "Data Top-ups", description: "Add more data to your existing eSIM plans with flexible top-up options.", icon: , href: "/esim-plans/top-up", }, { title: "Resources", description: "Access helpful resources including FAQs, guides, and customer support information.", icon: , href: "/esim-plans/resources", }, { title: "Activation Guide", description: "Learn how to activate your eSIM with our step-by-step instructions for all devices.", icon: , href: "/esim-plans/activation-guide", }, { title: "Compatibility Check", description: "Check if your device is compatible with our eSIM technology before purchasing.", icon: , href: "/esim-plans/compatibility", }, { title: "Tutorials", description: "Watch video tutorials and follow guides for eSIM setup and management.", icon:

Welcome to eSIM Myanmar

Why Choose eSIM Myanmar

{title}

Try Our eSIM Assistant

eSIM Myanmar Assistant

What Our Users Say

{name}

Ready to Stay Connected Anywhere?

About eSIM Myanmar

Our Story

Our Mission

Our Vision

Our Values

Our Services

{name}

Simple Pricing

{question}

Frequently Asked Questions

Loading States Demo

Recommended Plans

My eSIMs

Quick Actions

Top Up Data

Browse Plans

Get Recommendations

eSIM Plans & Resources

{category.title}

Data eSIM Plans

No Plans Found

Local eSIMs for Myanmar

Why Choose a Local eSIM?

Network Coverage

Available Local Plans

No Local Plans Available

Travel eSIMs

Popular Destinations

No Travel Plans Found

Global eSIMs

Benefits of Global eSIMs

{benefit.title}

How Global eSIMs Work

Perfect For

Available Global Plans

No Global Plans Available

Resources & Support

Contact Support

Need More Help?

eSIM Activation Guide

Activation Steps for{" "} {deviceType === "iphone" ? "iPhone" : deviceType === "android" ? "Android" : "Other Devices"}

{step.title}

Troubleshooting

QR Code Not Scanning

eSIM Not Connecting

"Not Compatible" Error

Need Help?

eSIM Compatibility Check

{checkResult.compatible ? "Compatible" : "Not Compatible"}

{device.brand}

iPhone

Android

Other Devices

Frequently Asked Questions

What is an eSIM?

Can I use both physical SIM and eSIM?

Will eSIM work if my device is locked?

Can I transfer my eSIM to another device?

Still Not Sure?

eSIM Tutorials & Guides

Video Tutorials

Written Guides

Request a Tutorial

Top-Up Successful!

Top Up Your eSIM

{esim.plan.name}

Contact Us

Message Sent!

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This