312 lines
13 KiB
TypeScript
312 lines
13 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { useParams } from "next/navigation";
|
||
|
|
import { PageLayout } from "@/components/templates/PageLayout";
|
||
|
|
import { SubCard } from "@/components/molecules/SubCard/SubCard";
|
||
|
|
import { DevicePhoneMobileIcon, DeviceTabletIcon, CpuChipIcon } from "@heroicons/react/24/outline";
|
||
|
|
import { simActionsService, type ReissueSimRequest } from "@/features/subscriptions/services/sim-actions.service";
|
||
|
|
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
|
||
|
|
import type { SimDetails } from "@/features/sim-management/components/SimDetailsCard";
|
||
|
|
|
||
|
|
type SimType = "physical" | "esim";
|
||
|
|
|
||
|
|
export function SimReissueContainer() {
|
||
|
|
const params = useParams();
|
||
|
|
const subscriptionId = params.id as string;
|
||
|
|
const [simType, setSimType] = useState<SimType | null>(null);
|
||
|
|
const [newEid, setNewEid] = useState("");
|
||
|
|
const [currentEid, setCurrentEid] = useState<string | null>(null);
|
||
|
|
const [simDetails, setSimDetails] = useState<SimDetails | null>(null);
|
||
|
|
const [message, setMessage] = useState<string | null>(null);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [loadingDetails, setLoadingDetails] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchDetails = async () => {
|
||
|
|
try {
|
||
|
|
const info = await simActionsService.getSimInfo(subscriptionId);
|
||
|
|
if (info?.details) {
|
||
|
|
setSimDetails(info.details);
|
||
|
|
setCurrentEid(info.details.eid || null);
|
||
|
|
}
|
||
|
|
} catch (e: unknown) {
|
||
|
|
setError(e instanceof Error ? e.message : "Failed to load SIM details");
|
||
|
|
} finally {
|
||
|
|
setLoadingDetails(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
void fetchDetails();
|
||
|
|
}, [subscriptionId]);
|
||
|
|
|
||
|
|
const isValidEid = () => {
|
||
|
|
return /^\d{32}$/.test(newEid.trim());
|
||
|
|
};
|
||
|
|
|
||
|
|
const submit = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (!simType) {
|
||
|
|
setError("Please select a SIM type");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (simType === "esim" && !isValidEid()) {
|
||
|
|
setError("Please enter a valid 32-digit EID");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setLoading(true);
|
||
|
|
setMessage(null);
|
||
|
|
setError(null);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const request: ReissueSimRequest = {
|
||
|
|
simType,
|
||
|
|
...(simType === "esim" && { newEid: newEid.trim() }),
|
||
|
|
};
|
||
|
|
await simActionsService.reissueSim(subscriptionId, request);
|
||
|
|
|
||
|
|
if (simType === "esim") {
|
||
|
|
setMessage(
|
||
|
|
"eSIM reissue request submitted successfully. You will receive instructions via email to download your new eSIM profile."
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
setMessage(
|
||
|
|
"Physical SIM reissue request submitted successfully. You will be contacted shortly with shipping details (typically 3-5 business days)."
|
||
|
|
);
|
||
|
|
}
|
||
|
|
} catch (e: unknown) {
|
||
|
|
setError(e instanceof Error ? e.message : "Failed to submit reissue request");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageLayout
|
||
|
|
icon={<DevicePhoneMobileIcon />}
|
||
|
|
title="Reissue SIM"
|
||
|
|
description="Request a replacement SIM card"
|
||
|
|
>
|
||
|
|
<div className="max-w-3xl mx-auto">
|
||
|
|
<div className="mb-4">
|
||
|
|
<Link
|
||
|
|
href={`/subscriptions/${subscriptionId}#sim-management`}
|
||
|
|
className="text-blue-600 hover:text-blue-700"
|
||
|
|
>
|
||
|
|
← Back to SIM Management
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SubCard>
|
||
|
|
<div className="mb-6">
|
||
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-2">Request SIM Reissue</h2>
|
||
|
|
<p className="text-sm text-gray-600">
|
||
|
|
If your SIM card is lost, damaged, or you need to switch between physical SIM and eSIM,
|
||
|
|
you can request a replacement here.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{message && (
|
||
|
|
<div className="mb-4">
|
||
|
|
<AlertBanner variant="success" title="Request Submitted">
|
||
|
|
{message}
|
||
|
|
</AlertBanner>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{error && (
|
||
|
|
<div className="mb-4">
|
||
|
|
<AlertBanner variant="error" title="Request Failed">
|
||
|
|
{error}
|
||
|
|
</AlertBanner>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{loadingDetails ? (
|
||
|
|
<div className="animate-pulse space-y-4">
|
||
|
|
<div className="h-32 bg-gray-100 rounded-lg"></div>
|
||
|
|
<div className="h-32 bg-gray-100 rounded-lg"></div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<form onSubmit={e => void submit(e)} className="space-y-6">
|
||
|
|
{/* Current SIM Info */}
|
||
|
|
{simDetails && (
|
||
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
|
||
|
|
<div className="text-xs text-gray-500 font-medium uppercase mb-2">Current SIM</div>
|
||
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500">Number:</span>{" "}
|
||
|
|
<span className="font-medium">{simDetails.msisdn}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500">Type:</span>{" "}
|
||
|
|
<span className="font-medium capitalize">{simDetails.simType}</span>
|
||
|
|
</div>
|
||
|
|
{simDetails.iccid && (
|
||
|
|
<div className="col-span-2">
|
||
|
|
<span className="text-gray-500">ICCID:</span>{" "}
|
||
|
|
<span className="font-mono text-xs">{simDetails.iccid}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{currentEid && (
|
||
|
|
<div className="col-span-2">
|
||
|
|
<span className="text-gray-500">Current EID:</span>{" "}
|
||
|
|
<span className="font-mono text-xs">{currentEid}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* SIM Type Selection */}
|
||
|
|
<div className="space-y-3">
|
||
|
|
<label className="block text-sm font-medium text-gray-700">
|
||
|
|
Select Replacement SIM Type
|
||
|
|
</label>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
{/* Physical SIM Option */}
|
||
|
|
<label
|
||
|
|
className={`relative flex flex-col items-center p-6 border-2 rounded-xl cursor-pointer transition-all ${
|
||
|
|
simType === "physical"
|
||
|
|
? "border-blue-500 bg-blue-50"
|
||
|
|
: "border-gray-200 hover:border-gray-300 bg-white"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
name="simType"
|
||
|
|
value="physical"
|
||
|
|
checked={simType === "physical"}
|
||
|
|
onChange={() => setSimType("physical")}
|
||
|
|
className="sr-only"
|
||
|
|
/>
|
||
|
|
<DeviceTabletIcon className="h-12 w-12 text-gray-600 mb-3" />
|
||
|
|
<div className="text-lg font-medium text-gray-900">Physical SIM</div>
|
||
|
|
<div className="text-sm text-gray-500 text-center mt-1">
|
||
|
|
A new physical SIM card will be shipped to you
|
||
|
|
</div>
|
||
|
|
{simType === "physical" && (
|
||
|
|
<div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</label>
|
||
|
|
|
||
|
|
{/* eSIM Option */}
|
||
|
|
<label
|
||
|
|
className={`relative flex flex-col items-center p-6 border-2 rounded-xl cursor-pointer transition-all ${
|
||
|
|
simType === "esim"
|
||
|
|
? "border-blue-500 bg-blue-50"
|
||
|
|
: "border-gray-200 hover:border-gray-300 bg-white"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
name="simType"
|
||
|
|
value="esim"
|
||
|
|
checked={simType === "esim"}
|
||
|
|
onChange={() => setSimType("esim")}
|
||
|
|
className="sr-only"
|
||
|
|
/>
|
||
|
|
<CpuChipIcon className="h-12 w-12 text-gray-600 mb-3" />
|
||
|
|
<div className="text-lg font-medium text-gray-900">eSIM</div>
|
||
|
|
<div className="text-sm text-gray-500 text-center mt-1">
|
||
|
|
Download your eSIM profile instantly
|
||
|
|
</div>
|
||
|
|
{simType === "esim" && (
|
||
|
|
<div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* eSIM EID Input */}
|
||
|
|
{simType === "esim" && (
|
||
|
|
<div className="space-y-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-blue-900 mb-2">
|
||
|
|
New EID (eSIM Identifier)
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={newEid}
|
||
|
|
onChange={e => setNewEid(e.target.value.replace(/\D/g, ""))}
|
||
|
|
placeholder="Enter your device's 32-digit EID"
|
||
|
|
maxLength={32}
|
||
|
|
className="w-full px-3 py-2 border border-blue-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono"
|
||
|
|
/>
|
||
|
|
<p className="text-xs text-blue-700 mt-1">
|
||
|
|
The EID is a 32-digit number unique to your device. You can find it in your
|
||
|
|
device settings under "About" or "SIM status".
|
||
|
|
</p>
|
||
|
|
{newEid && !isValidEid() && (
|
||
|
|
<p className="text-xs text-red-600 mt-1">
|
||
|
|
Please enter exactly 32 digits ({newEid.length}/32)
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{currentEid && (
|
||
|
|
<div className="text-sm text-blue-800">
|
||
|
|
<strong>Current EID:</strong>{" "}
|
||
|
|
<span className="font-mono text-xs">{currentEid}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Physical SIM Info */}
|
||
|
|
{simType === "physical" && (
|
||
|
|
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||
|
|
<h3 className="text-sm font-medium text-yellow-900 mb-2">Physical SIM Information</h3>
|
||
|
|
<ul className="text-sm text-yellow-800 space-y-1">
|
||
|
|
<li>• A new physical SIM card will be shipped to your registered address</li>
|
||
|
|
<li>• Typical delivery time: 3-5 business days</li>
|
||
|
|
<li>• You will receive an email with tracking information</li>
|
||
|
|
<li>• The old SIM card will be deactivated once the new one is activated</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Submit Buttons */}
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={loading || !simType || (simType === "esim" && !isValidEid())}
|
||
|
|
className="px-6 py-2 rounded-md bg-blue-600 text-white font-medium text-sm disabled:opacity-50 hover:bg-blue-700 transition-colors"
|
||
|
|
>
|
||
|
|
{loading ? "Processing…" : "Submit Reissue Request"}
|
||
|
|
</button>
|
||
|
|
<Link
|
||
|
|
href={`/subscriptions/${subscriptionId}#sim-management`}
|
||
|
|
className="px-6 py-2 rounded-md border border-gray-300 text-sm text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
||
|
|
>
|
||
|
|
Cancel
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
)}
|
||
|
|
</SubCard>
|
||
|
|
</div>
|
||
|
|
</PageLayout>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SimReissueContainer;
|
||
|
|
|