329 lines
13 KiB
TypeScript
329 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 } from "@/features/subscriptions/api/sim-actions.api";
|
|
import type { SimReissueFullRequest } from "@customer-portal/domain/sim";
|
|
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
|
|
import type { SimDetails } from "@/features/subscriptions/components/sim/SimDetailsCard";
|
|
import { Button } from "@/components/atoms";
|
|
|
|
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(
|
|
process.env.NODE_ENV === "development"
|
|
? (e instanceof Error
|
|
? e.message
|
|
: "Failed to load SIM details")
|
|
: "Unable to load SIM details right now. Please try again."
|
|
);
|
|
} 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: SimReissueFullRequest =
|
|
simType === "esim" ? { simType, newEid: newEid.trim() } : { simType };
|
|
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(
|
|
process.env.NODE_ENV === "development"
|
|
? (e instanceof Error
|
|
? e.message
|
|
: "Failed to submit reissue request")
|
|
: "Unable to submit your request right now. Please try again."
|
|
);
|
|
} 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={`/account/subscriptions/${subscriptionId}#sim-management`}
|
|
className="text-primary hover:underline"
|
|
>
|
|
← Back to SIM Management
|
|
</Link>
|
|
</div>
|
|
|
|
<SubCard>
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold text-foreground mb-2">Request SIM Reissue</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
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-muted rounded-lg"></div>
|
|
<div className="h-32 bg-muted rounded-lg"></div>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={e => void submit(e)} className="space-y-6">
|
|
{/* Current SIM Info */}
|
|
{simDetails && (
|
|
<div className="bg-muted border border-border rounded-lg p-4 mb-6">
|
|
<div className="text-xs text-muted-foreground font-medium uppercase mb-2">
|
|
Current SIM
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground">Number:</span>{" "}
|
|
<span className="font-medium">{simDetails.msisdn}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Type:</span>{" "}
|
|
<span className="font-medium capitalize">{simDetails.simType}</span>
|
|
</div>
|
|
{simDetails.iccid && (
|
|
<div className="col-span-2">
|
|
<span className="text-muted-foreground">ICCID:</span>{" "}
|
|
<span className="font-mono text-xs">{simDetails.iccid}</span>
|
|
</div>
|
|
)}
|
|
{currentEid && (
|
|
<div className="col-span-2">
|
|
<span className="text-muted-foreground">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-muted-foreground">
|
|
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-primary bg-primary-soft"
|
|
: "border-border hover:border-border-muted bg-card"
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="simType"
|
|
value="physical"
|
|
checked={simType === "physical"}
|
|
onChange={() => setSimType("physical")}
|
|
className="sr-only"
|
|
/>
|
|
<DeviceTabletIcon className="h-12 w-12 text-muted-foreground mb-3" />
|
|
<div className="text-lg font-medium text-foreground">Physical SIM</div>
|
|
<div className="text-sm text-muted-foreground 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-primary 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-primary bg-primary-soft"
|
|
: "border-border hover:border-border-muted bg-card"
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="simType"
|
|
value="esim"
|
|
checked={simType === "esim"}
|
|
onChange={() => setSimType("esim")}
|
|
className="sr-only"
|
|
/>
|
|
<CpuChipIcon className="h-12 w-12 text-muted-foreground mb-3" />
|
|
<div className="text-lg font-medium text-foreground">eSIM</div>
|
|
<div className="text-sm text-muted-foreground text-center mt-1">
|
|
Download your eSIM profile instantly
|
|
</div>
|
|
{simType === "esim" && (
|
|
<div className="absolute top-2 right-2 w-6 h-6 bg-primary 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-info-soft border border-info/25 rounded-lg">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground 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-input rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring font-mono bg-background text-foreground"
|
|
/>
|
|
<p className="text-xs text-muted-foreground 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-danger mt-1">
|
|
Please enter exactly 32 digits ({newEid.length}/32)
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{currentEid && (
|
|
<div className="text-sm text-foreground">
|
|
<strong>Current EID:</strong>{" "}
|
|
<span className="font-mono text-xs">{currentEid}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Physical SIM Info */}
|
|
{simType === "physical" && (
|
|
<div className="p-4 bg-warning-soft border border-warning/25 rounded-lg">
|
|
<h3 className="text-sm font-medium text-foreground mb-2">
|
|
Physical SIM Information
|
|
</h3>
|
|
<ul className="text-sm text-muted-foreground 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())}
|
|
loading={loading}
|
|
loadingText="Processing…"
|
|
>
|
|
Submit Reissue Request
|
|
</Button>
|
|
<Button
|
|
as="a"
|
|
href={`/account/subscriptions/${subscriptionId}#sim-management`}
|
|
variant="outline"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</SubCard>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|
|
|
|
export default SimReissueContainer;
|