[V0_FILE]typescriptreact:file="app/admin/esim/page.tsx" isMerged="true" isEdit="true" import type { Metadata } from "next" import ESIMDashboard from "@/components/esim/esim-dashboard" export const metadata: Metadata = { title: "eSIM Management Dashboard", description: "Manage your eSIM profiles and installations", } export default function ESIMManagementPage() { return } [V0_FILE]typescriptreact:file="components/esim/esim-filters.tsx" isMerged="true" isEdit="true" "use client" import { useRouter, useSearchParams } from "next/navigation" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, X } from "lucide-react" import { Button } from "@/components/ui/button" import { useEffect, useState } from "react" export function ESIMFilters() { const router = useRouter() const searchParams = useSearchParams() const [searchQuery, setSearchQuery] = useState(searchParams.get("search") || "") const carriers = [ { value: "all", label: "All Carriers" }, { value: "mpt", label: "MPT" }, { value: "atom", label: "ATOM" }, { value: "ooredoo", label: "Ooredoo" }, { value: "mytel", label: "Mytel" }, ] const handleCarrierChange = (value: string) => { const params = new URLSearchParams(searchParams) params.set("carrier", value) router.push(`/admin/esim?${params.toString()}`) } const handleSearch = () => { const params = new URLSearchParams(searchParams) if (searchQuery) { params.set("search", searchQuery) } else { params.delete("search") } router.push(`/admin/esim?${params.toString()}`) } const handleClearSearch = () => { setSearchQuery("") const params = new URLSearchParams(searchParams) params.delete("search") router.push(`/admin/esim?${params.toString()}`) } useEffect(() => { setSearchQuery(searchParams.get("search") || "") }, [searchParams]) return (

setSearchQuery(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSearch()} className="pl-9 bg-slate-800 border-slate-700 text-white placeholder:text-slate-400 focus-visible:ring-cyan-600" /> {searchQuery && ( )}

) } [V0_FILE]typescriptreact:file="types/esim.ts" isMerged="true" isEdit="true" export interface ESIM { id: string phone: string lpa: string shortId: string status: string carrier: string createdAt: string } [V0_FILE]typescriptreact:file="lib/mock-data.ts" isMerged="true" isEdit="true" import type { ESIM } from "@/types/esim" export const mockESIMs: ESIM[] = [ { id: "1", phone: "09970000616", lpa: "LPA:1$mpt.com.mm$ABCD-EFGH-IJKL-MNOP", shortId: "ab12cd", status: "active", carrier: "mpt", createdAt: "2025-04-08T10:30:00Z", }, { id: "2", phone: "09442142226", lpa: "LPA:1$atom.com.mm$QRST-UVWX-YZ12-3456", shortId: "xy89zt", status: "revoked", carrier: "atom", createdAt: "2025-04-01T14:15:00Z", }, { id: "3", phone: "09791234567", lpa: "LPA:1$ooredoo.com.mm$7890-ABCD-EFGH-IJKL", shortId: "mn56op", status: "active", carrier: "ooredoo", createdAt: "2025-04-05T09:45:00Z", }, { id: "4", phone: "09678901234", lpa: "LPA:1$mytel.com.mm$MNOP-QRST-UVWX-YZ12", shortId: "qr34st", status: "expired", carrier: "mytel", createdAt: "2025-03-20T16:20:00Z", }, { id: "5", phone: "09987654321", lpa: "LPA:1$mpt.com.mm$3456-7890-ABCD-EFGH", shortId: "uv78wx", status: "active", carrier: "mpt", createdAt: "2025-04-07T11:10:00Z", }, ] [V0_FILE]typescript:file="hooks/use-mobile.ts" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" export const useMobile = () => { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768) // Adjust breakpoint as needed } // Set initial value handleResize() // Listen for window resize events window.addEventListener("resize", handleResize) // Clean up event listener on unmount return () => { window.removeEventListener("resize", handleResize) } }, []) return isMobile } [V0_FILE]typescriptreact:file="components/auth/auth-provider.tsx" isMerged="true" isEdit="true" "use client" import { createContext, useContext, useEffect, useState, type ReactNode } from "react" import { useRouter, usePathname } from "next/navigation" import { Loader2 } from "lucide-react" interface AuthContextType { isAuthenticated: boolean username: string | null logout: () => void } const AuthContext = createContext({ isAuthenticated: false, username: null, logout: () => {}, }) export const useAuth = () => useContext(AuthContext) interface AuthProviderProps { children: ReactNode } export function AuthProvider({ children }: AuthProviderProps) { const [isAuthenticated, setIsAuthenticated] = useState(false) const [username, setUsername] = useState(null) const [isLoading, setIsLoading] = useState(true) const router = useRouter() const pathname = usePathname() useEffect(() => { // Check if user is authenticated const checkAuth = () => { const authData = localStorage.getItem("esim-admin-auth") if (!authData) { setIsAuthenticated(false) setUsername(null) setIsLoading(false) return } try { const { isAuthenticated, username, expiresAt } = JSON.parse(authData) // Check if token is expired if (expiresAt && Date.now() > expiresAt) { localStorage.removeItem("esim-admin-auth") setIsAuthenticated(false) setUsername(null) setIsLoading(false) return } setIsAuthenticated(isAuthenticated) setUsername(username) } catch (error) { setIsAuthenticated(false) setUsername(null) } setIsLoading(false) } checkAuth() }, []) useEffect(() => { // Redirect to login if not authenticated and trying to access protected routes if (!isLoading && !isAuthenticated && pathname?.startsWith("/admin")) { router.push("/login") } // Redirect to dashboard if already authenticated and trying to access login if (!isLoading && isAuthenticated && pathname === "/login") { router.push("/admin/esim") } }, [isAuthenticated, isLoading, pathname, router]) const logout = () => { localStorage.removeItem("esim-admin-auth") setIsAuthenticated(false) setUsername(null) router.push("/login") } if (isLoading) { return (

) } return {children} } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" isEdit="true" import { redirect } from "next/navigation" export default function Home() { redirect("/login") } [V0_FILE]json:file="package.json" isMerged="true" isEdit="true" { "dependencies": { "qrcode": "^1.5.3" } } [V0_FILE]typescriptreact:file="app/support/esim-installation/page.tsx" isEdit="true" isMerged="true" import DeviceSpecificGuide from "@/components/device-specific-guide" export default function ESIMInstallationGuidePage() { return } [V0_FILE]typescriptreact:file="app/admin/profile/page.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" import { Loader2, Save, User, KeyRound, Mail, Phone, Shield, Upload, ArrowLeft } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { useAuth } from "@/components/auth/auth-provider" interface ProfileData { fullName: string email: string phone: string role: string avatarUrl: string | null } export default function ProfilePage() { const { username } = useAuth() const { toast } = useToast() const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [isSaving, setIsSaving] = useState(false) const [activeTab, setActiveTab] = useState("profile") const [isEditing, setIsEditing] = useState(false) // Profile data const [profileData, setProfileData] = useState({ fullName: "", email: "", phone: "", role: "Administrator", avatarUrl: null, }) // Security data const [currentPassword, setCurrentPassword] = useState("") const [newPassword, setNewPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") // Load profile data useEffect(() => { const fetchProfileData = async () => { // In a real app, this would be an API call // const response = await fetch('/api/profile') // const data = await response.json() // Simulate API call setTimeout(() => { setProfileData({ fullName: "Admin User", email: "admin@example.com", phone: "09970000616", role: "Administrator", avatarUrl: null, }) setIsLoading(false) }, 1000) } fetchProfileData() }, []) const handleProfileChange = (field: keyof ProfileData, value: string) => { setProfileData((prev) => ({ ...prev, [field]: value, })) } const handleSaveProfile = async () => { setIsSaving(true) try { // In a real app, this would be an API call // await fetch('/api/profile', { // method: 'PUT', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify(profileData) // }) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Profile updated", description: "Your profile information has been updated successfully", }) setIsEditing(false) } catch (error) { toast({ title: "Error updating profile", description: error instanceof Error ? error.message : "An unknown error occurred", variant: "destructive", }) } finally { setIsSaving(false) } } const handleChangePassword = async (e: React.FormEvent) => { e.preventDefault() setIsSaving(true) try { // Validate passwords if (newPassword !== confirmPassword) { throw new Error("New passwords do not match") } if (newPassword.length < 8) { throw new Error("New password must be at least 8 characters long") } // In a real app, this would be an API call // await fetch('/api/auth/change-password', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ currentPassword, newPassword }), // }) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Password updated", description: "Your password has been changed successfully", }) // Clear form setCurrentPassword("") setNewPassword("") setConfirmPassword("") } catch (error) { toast({ title: "Error changing password", description: error instanceof Error ? error.message : "An unknown error occurred", variant: "destructive", }) } finally { setIsSaving(false) } } const handleAvatarUpload = () => { // In a real app, this would open a file picker // For demo purposes, we'll just simulate an upload setIsSaving(true) setTimeout(() => { setProfileData((prev) => ({ ...prev, avatarUrl: `https://api.dicebear.com/7.x/initials/svg?seed=${profileData.fullName}`, })) setIsSaving(false) toast({ title: "Avatar updated", description: "Your profile picture has been updated successfully", }) }, 1500) } if (isLoading) { return (

) } return (

Profile Settings

{/* Profile sidebar */}

{profileData.avatarUrl ? ( ) : ( {profileData.fullName .split(" ") .map((n) => n[0]) .join("")} )}

{profileData.fullName}

@{username}

{profileData.role}

{profileData.email}

Phone

{profileData.phone}

{/* Profile content */}

Profile Security

Profile Information Update your personal information

{!isEditing && ( )}

Full Name handleProfileChange("fullName", e.target.value)} className="bg-slate-900 border-slate-700 text-white focus-visible:ring-cyan-600" disabled={!isEditing} />

Email Address handleProfileChange("email", e.target.value)} className="bg-slate-900 border-slate-700 text-white focus-visible:ring-cyan-600" disabled={!isEditing} />

Phone Number handleProfileChange("phone", e.target.value)} className="bg-slate-900 border-slate-700 text-white focus-visible:ring-cyan-600" disabled={!isEditing} />

Role

Your role cannot be changed

{isEditing && ( )} Change Password Update your password to keep your account secure

Current Password setCurrentPassword(e.target.value)} className="bg-slate-900 border-slate-700 text-white focus-visible:ring-cyan-600" required />

New Password setNewPassword(e.target.value)} className="bg-slate-900 border-slate-700 text-white focus-visible:ring-cyan-600" required />

Password must be at least 8 characters long

Confirm New Password setConfirmPassword(e.target.value)} className="bg-slate-900 border-slate-700 text-white focus-visible:ring-cyan-600" required />

Security Settings Manage your account security preferences

Two-Factor Authentication

Add an extra layer of security to your account

Active Sessions

Manage devices where you're currently logged in

) } [V0_FILE]typescriptreact:file="components/esim/header.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { useAuth } from "@/components/auth/auth-provider" import { LogOut, User, Menu } from "lucide-react" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { useState } from "react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function Header() { const { username, logout } = useAuth() const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

eSIM Management

{username}

Administrator

Profile logout()} > Log out

{isMobileMenuOpen && (

{username?.charAt(0).toUpperCase()}

{username}

Administrator

setIsMobileMenuOpen(false)} > Profile

)}

) } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/support-contact.tsx" isMerged="true" isEdit="true" import { Mail, MessageCircle, Phone } from "lucide-react" import { Button } from "@/components/ui/button" interface SupportContactProps { className?: string variant?: "minimal" | "full" } export function SupportContact({ className, variant = "full" }: SupportContactProps) { return (

{variant === "full" &&

Need Help?

}

{variant === "minimal" && (

We're here to help with your eSIM installation

)}

) } [V0_FILE]typescriptreact:file="components/device-specific-guide.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Smartphone, Apple, SmartphoneIcon as Android, AlertCircle, CheckCircle, HelpCircle, Wifi } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" // Import the SupportContact component import { SupportContact } from "@/components/support-contact" export default function DeviceSpecificGuide() { const [deviceType, setDeviceType] = useState("ios") return (

Device-Specific eSIM Installation

Learn how to install eSIMs on different devices and troubleshoot common issues

iOS Android Compatibility Troubleshooting iOS eSIM Installation For iPhone XS, XR, 11, 12, 13, 14, 15 series and newer iPad Pro/Air models

Installation Methods

1. QR Code Scanning

Go to Settings → Cellular/Mobile Data
Tap Add Cellular/Mobile Plan
Scan the QR code provided by your carrier
Follow the on-screen instructions to complete setup

2. Activation Code Method

Go to Settings → Cellular/Mobile Data
Tap Add Cellular/Mobile Plan
Tap Enter Details Manually at the bottom
Enter the SM-DP+ address and activation code

3. Carrier App Method

Download your carrier's app from the App Store
Log in to your account
Follow the in-app instructions to activate your eSIM

4. One-Click Installation (Our Method)

Click the Install eSIM button on our page
Your device will open the Settings app automatically
Confirm the installation when prompted

This uses the tel:*5000# protocol with the encoded LPA

Technical Details

LPA Format for iOS

The LPA (Local Profile Assistant) format for iOS follows this structure:

                      LPA:1$sm-dp-plus-address$activation-code

Example:{" "} LPA:1$rsp.truphone.com$1234-5678-9012-3456

iOS URL Scheme

Our one-click installation uses the iOS URL scheme:

                      tel:*5000#LPA:1$sm-dp-plus-address$activation-code

This triggers the eSIM installation process directly.

Device Compatibility

iPhone XS, XR, 11, 12, 13, 14, 15 series
iPad Pro (3rd gen and newer)
iPad Air (3rd gen and newer)
iOS 12.1 or later required

Note: iPhone models sold in mainland China do not support eSIM.

iOS 16+ Dual eSIM Support iPhone 13 and newer models running iOS 16+ support using two eSIMs simultaneously, without requiring a physical SIM card. Android eSIM Installation For Pixel, Samsung Galaxy, Motorola, and other compatible Android devices

Installation Methods

1. QR Code Scanning

Go to Settings → Connections → SIM Manager
Tap Add Mobile Plan or Add using QR code
Scan the QR code provided by your carrier
Follow the on-screen instructions to complete setup

Note: Menu names may vary by device manufacturer and Android version

2. Carrier App Method

Download your carrier's app from Google Play Store
Log in to your account
Follow the in-app instructions to activate your eSIM

3. One-Click Installation (Our Method)

Click the Install eSIM button on our page
Your device will open the Settings app automatically
Confirm the installation when prompted

This uses Android's intent system with the eSIM data

Technical Details

Android Intent Format

Our one-click installation uses the Android Intent system:

                      intent://details#Intent;scheme=android; action=android.intent.action.VIEW;
                      type=application/vnd.gsma.eid; data=LPA:1$sm-dp-plus-address$activation-code; end

Device-Specific Paths

Settings paths vary by manufacturer:

Google Pixel: Settings → Network & Internet → SIMs → Add carrier
Samsung: Settings → Connections → SIM Manager → Add mobile plan
Motorola: Settings → Network & Internet → Mobile network → Advanced → Carrier → Add carrier

Device Compatibility

Google Pixel 3 and newer
Samsung Galaxy S20/Note 20 and newer
Samsung Galaxy Z Fold/Flip series
Motorola Razr (2020 and newer)
Android 10 or later recommended

Note: Compatibility varies widely among Android manufacturers.

Android Fragmentation Due to Android fragmentation, the eSIM installation process may vary significantly between device manufacturers and even between models from the same manufacturer. Device Compatibility Guide Check if your device supports eSIM technology

Apple Devices

iPhone

iPhone XS, XS Max
iPhone XR
iPhone 11, 11 Pro, 11 Pro Max
iPhone 12, 12 mini, 12 Pro, 12 Pro Max
iPhone 13, 13 mini, 13 Pro, 13 Pro Max
iPhone 14, 14 Plus, 14 Pro, 14 Pro Max
iPhone 15, 15 Plus, 15 Pro, 15 Pro Max
iPhone SE (2nd & 3rd gen)

iPad

iPad Pro 11" (1st gen and newer)
iPad Pro 12.9" (3rd gen and newer)
iPad Air (3rd gen and newer)
iPad (7th gen and newer) - cellular models
iPad mini (5th gen and newer) - cellular models

Android Devices

Google

Pixel 3, 3 XL, 3a, 3a XL
Pixel 4, 4 XL, 4a, 4a 5G
Pixel 5, 5a
Pixel 6, 6 Pro, 6a
Pixel 7, 7 Pro, 7a
Pixel 8, 8 Pro

Samsung

Galaxy S20, S20+, S20 Ultra (except models sold in China)
Galaxy S21, S21+, S21 Ultra
Galaxy S22, S22+, S22 Ultra
Galaxy S23, S23+, S23 Ultra
Galaxy S24, S24+, S24 Ultra
Galaxy Note 20, Note 20 Ultra
Galaxy Z Fold 2, 3, 4, 5
Galaxy Z Flip, Z Flip 3, 4, 5

Other Manufacturers

Motorola

Razr (2020 and newer)
Edge 20, 30, 40 series

Huawei

P40, P40 Pro
Mate 40 Pro
P50, P50 Pro

Oppo

Find X3 Pro, Find X5 Pro
Reno 6 Pro+, Reno 8 Pro

Xiaomi

Mi 11, 12 series
Redmi Note 11 Pro+ 5G

Checking eSIM Compatibility

On iOS Devices

Go to Settings → Cellular/Mobile Data
If you see Add Cellular/Mobile Plan, your device supports eSIM
Alternatively, check Settings → General →{" "} About for "Digital SIM" entry

On Android Devices

Go to Settings → Connections → SIM Manager{" "} (paths may vary)
Look for options like Add Mobile Plan or Download SIM
Check your device specifications on the manufacturer's website

Regional Variations Some devices may have eSIM disabled in certain regions or for specific carriers. Check with your device manufacturer or carrier for region-specific compatibility. Troubleshooting eSIM Installation Common issues and solutions for eSIM installation problems "Install eSIM" button doesn't do anything

Ensure your device supports eSIM technology (check the compatibility list)
Make sure you're using the device's default browser (Safari on iOS, Chrome on Android)
Check if JavaScript is enabled in your browser settings
Try refreshing the page and clicking the button again
If using iOS, ensure you're not in Low Power Mode
As a fallback, try scanning the QR code instead

"Invalid activation code" error

Verify that the activation code hasn't expired (typically valid for 24-48 hours)
Check for typos if you're entering the code manually
Ensure the activation code is from your current carrier
Contact your carrier to get a new activation code
Make sure your device's date and time are set correctly

"Network connection required" error

Ensure you have a stable Wi-Fi or cellular data connection
Try switching between Wi-Fi and cellular data
Restart your device and try again
If on Wi-Fi, try connecting to a different network
Check if your network is blocking the connection to the carrier's servers

QR code scanning fails

Ensure adequate lighting when scanning the QR code
Clean your camera lens
Hold your device steady and at the right distance (about 6-8 inches from the screen)
Try downloading the QR code and opening it in a larger view
If scanning from a screen, increase the brightness
Try the manual entry method instead

"SIM card full" or "Maximum profiles reached" error

Most devices have a limit on the number of eSIM profiles they can store
Go to your device's SIM management settings
Remove unused eSIM profiles to free up space
On iOS: Settings → Cellular → [Select unused eSIM] → Remove Cellular Plan
On Android: Settings → Connections → SIM Manager → [Select unused eSIM] → Remove

eSIM installed but no service

Ensure the eSIM is activated and set as the primary line (if applicable)
Check if cellular data is enabled for the eSIM
Toggle Airplane mode on and off
Restart your device
Check if you're in an area with coverage from your carrier
Verify that your account is active with the carrier
Try manually selecting the network in your device's settings

Device says "eSIM not supported"

Verify your device model is on the compatibility list
Ensure your device is running a supported operating system version
Check if your device was purchased in a region where eSIM is supported
Some carrier-locked devices may have eSIM functionality disabled
If using a dual SIM device, check if both slots are already in use
Contact your device manufacturer to confirm eSIM support

"Server not responding" error

This usually indicates a temporary issue with the carrier's eSIM servers
Wait a few minutes and try again
Check if your carrier is experiencing service outages
Try using a different network connection
Contact your carrier's customer support for assistance

General Troubleshooting Steps

Device Restart

Power off your device completely
Wait at least 30 seconds
Power on your device
Try the eSIM installation again

Network Reset

On iOS: Settings → General → Reset → Reset Network Settings
On Android: Settings → System → Reset options → Reset Wi-Fi, mobile & Bluetooth
Reconnect to Wi-Fi
Try the eSIM installation again

Note: This will remove all saved Wi-Fi networks and passwords

{/* Replace the "Contact Support" alert with our new component */} Contact Support If you've tried all troubleshooting steps and still can't install your eSIM, contact our support team for assistance.

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { Header } from "@/components/esim/header" import { SupportContact } from "@/components/support-contact" export default function AdminLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/esim/qr-code-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import type { ESIM } from "@/types/esim" import { useEffect, useRef } from "react" import { Download, Share2 } from "lucide-react" import { useToast } from "@/hooks/use-toast" import QRCode from "qrcode" interface QrCodeModalProps { esim: ESIM | null isOpen: boolean onClose: () => void } export function QrCodeModal({ esim, isOpen, onClose }: QrCodeModalProps) { const canvasRef = useRef(null) const { toast } = useToast() useEffect(() => { if (isOpen && esim && canvasRef.current) { // Generate QR code using qrcode.js QRCode.toCanvas( canvasRef.current, esim.lpa, { width: 240, margin: 4, color: { dark: "#000000", light: "#ffffff", }, }, (error) => { if (error) console.error("Error generating QR code:", error) }, ) } }, [isOpen, esim]) const handleDownload = () => { if (canvasRef.current) { const link = document.createElement("a") link.download = `esim-${esim?.shortId}.png` link.href = canvasRef.current.toDataURL("image/png") link.click() toast({ title: "QR Code downloaded", description: "The QR code has been saved to your device", }) } } const handleShare = async () => { if (canvasRef.current && navigator.share) { try { canvasRef.current.toBlob(async (blob) => { if (blob) { const file = new File([blob], `esim-${esim?.shortId}.png`, { type: "image/png" }) await navigator.share({ title: `eSIM for ${esim?.phone}`, text: "Scan this QR code to install your eSIM", files: [file], }) } }) } catch (error) { console.error("Error sharing:", error) toast({ title: "Sharing failed", description: "Could not share the QR code", variant: "destructive", }) } } else { toast({ title: "Sharing not supported", description: "Your browser doesn't support the Web Share API", variant: "destructive", }) } } if (!esim) return null return ( ) } [V0_FILE]typescriptreact:file="components/esim/update-esim-modal.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Loader2, CloudUpload, CheckCircle } from "lucide-react" import type { ESIM } from "@/types/esim" import { eagleCloudService } from "@/lib/eagle-cloud-service" import { useToast } from "@/hooks/use-toast" interface UpdateESIMModalProps { esim: ESIM | null isOpen: boolean onClose: () => void onUpdate: (esim: ESIM) => void isLoading: boolean } export function UpdateESIMModal({ esim, isOpen, onClose, onUpdate, isLoading }: UpdateESIMModalProps) { const [formData, setFormData] = useState>({}) const [isSyncing, setIsSyncing] = useState(false) const [isSynced, setIsSynced] = useState(false) const { toast } = useToast() useEffect(() => { if (esim) { setFormData({ ...esim }) setIsSynced(false) } }, [esim]) const handleChange = (field: keyof ESIM, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) setIsSynced(false) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (esim && formData) { const updatedEsim = { ...esim, ...formData } as ESIM // Auto-save to Eagle Cloud try { setIsSyncing(true) await eagleCloudService.autoSaveESIMProfile(updatedEsim) setIsSynced(true) toast({ title: "Auto-saved to Eagle Cloud", description: "eSIM profile changes have been saved to Eagle Cloud", variant: "default", }) } catch (error) { console.error("Error auto-saving to Eagle Cloud:", error) toast({ title: "Auto-save failed", description: "Changes will be saved locally only", variant: "destructive", }) } finally { setIsSyncing(false) } // Update locally onUpdate(updatedEsim) } } if (!esim) return null return (

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