Enhance eSIM reissue functionality with optional EID transfer

- Updated SimManagementService to allow reissuing eSIM profiles with an optional new EID, including validation for the EID format.
- Modified SubscriptionsController to accept a new EID in the request body for the eSIM reissue endpoint.
- Implemented a new React component for the eSIM reissue page, featuring form validation and user feedback for successful or failed requests.

apps/bff/src/subscriptions/sim-management.service.ts

@@ -751,7 +751,7 @@ export class SimManagementService {
   /**
    * Reissue eSIM profile
    */
-  async reissueEsimProfile(userId: string, subscriptionId: number): Promise<void> {
+  async reissueEsimProfile(userId: string, subscriptionId: number, newEid?: string): Promise<void> {
     try {
       const { account } = await this.validateSimSubscription(userId, subscriptionId);
 
@@ -761,18 +761,31 @@ export class SimManagementService {
         throw new BadRequestException("This operation is only available for eSIM subscriptions");
       }
 
-      await this.freebititService.reissueEsimProfile(account);
+      if (newEid) {
+        if (!/^\d{32}$/.test(newEid)) {
+          throw new BadRequestException('Invalid EID format. Expected 32 digits.');
+        }
+        await this.freebititService.reissueEsimProfileEnhanced(account, newEid, {
+          oldEid: simDetails.eid,
+          planCode: simDetails.planCode,
+        });
+      } else {
+        await this.freebititService.reissueEsimProfile(account);
+      }
 
       this.logger.log(`Successfully reissued eSIM profile for subscription ${subscriptionId}`, {
         userId,
         subscriptionId,
         account,
+        oldEid: simDetails.eid,
+        newEid: newEid || undefined,
       });
     } catch (error) {
       this.logger.error(`Failed to reissue eSIM profile for subscription ${subscriptionId}`, {
         error: getErrorMessage(error),
         userId,
         subscriptionId,
+        newEid: newEid || undefined,
       });
       throw error;
     }

apps/bff/src/subscriptions/subscriptions.controller.ts

@@ -373,16 +373,27 @@ export class SubscriptionsController {
   @Post(":id/sim/reissue-esim")
   @ApiOperation({
     summary: "Reissue eSIM profile",
-    description: "Reissue a downloadable eSIM profile (eSIM only)",
+    description: "Reissue a downloadable eSIM profile (eSIM only). Optionally provide a new EID to transfer to.",
   })
   @ApiParam({ name: "id", type: Number, description: "Subscription ID" })
+  @ApiBody({
+    description: "Optional new EID to transfer the eSIM to",
+    schema: {
+      type: "object",
+      properties: {
+        newEid: { type: "string", description: "32-digit EID", example: "89049032000001000000043598005455" },
+      },
+      required: [],
+    },
+  })
   @ApiResponse({ status: 200, description: "eSIM reissue successful" })
   @ApiResponse({ status: 400, description: "Not an eSIM subscription" })
   async reissueEsimProfile(
     @Request() req: RequestWithUser,
-    @Param("id", ParseIntPipe) subscriptionId: number
+    @Param("id", ParseIntPipe) subscriptionId: number,
+    @Body() body: { newEid?: string } = {}
   ) {
-    await this.simManagementService.reissueEsimProfile(req.user.id, subscriptionId);
+    await this.simManagementService.reissueEsimProfile(req.user.id, subscriptionId, body.newEid);
     return { success: true, message: "eSIM profile reissue completed successfully" };
   }
 

apps/portal/src/app/subscriptions/[id]/sim/reissue/page.tsx

@@ -1,3 +1,118 @@
-export default function Page() {
+"use client";
-  return null;
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { authenticatedApi } from "@/lib/api";
+
+export default function EsimReissuePage() {
+  const params = useParams();
+  const router = useRouter();
+  const subscriptionId = parseInt(params.id as string);
+  const [loading, setLoading] = useState(false);
+  const [detailsLoading, setDetailsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [oldEid, setOldEid] = useState<string | null>(null);
+  const [newEid, setNewEid] = useState<string>("");
+
+  useEffect(() => {
+    const fetchDetails = async () => {
+      try {
+        setDetailsLoading(true);
+        const data = await authenticatedApi.get<{ eid?: string }>(
+          `/subscriptions/${subscriptionId}/sim/details`
+        );
+        setOldEid(data?.eid || null);
+      } catch (e: any) {
+        setError(e instanceof Error ? e.message : "Failed to load SIM details");
+      } finally {
+        setDetailsLoading(false);
+      }
+    };
+    void fetchDetails();
+  }, [subscriptionId]);
+
+  const validEid = (val: string) => /^\d{32}$/.test(val);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setMessage(null);
+    if (!validEid(newEid)) {
+      setError("Please enter a valid 32-digit EID");
+      return;
+    }
+    setLoading(true);
+    try {
+      await authenticatedApi.post(`/subscriptions/${subscriptionId}/sim/reissue-esim`, { newEid });
+      setMessage("eSIM reissue requested successfully. You will receive the new profile shortly.");
+      setTimeout(() => router.push(`/subscriptions/${subscriptionId}#sim-management`), 1500);
+    } catch (e: any) {
+      setError(e instanceof Error ? e.message : "Failed to submit eSIM reissue");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="mb-4">
+          <Link href={`/subscriptions/${subscriptionId}#sim-management`} className="text-blue-600 hover:text-blue-700">← Back to SIM Management</Link>
+        </div>
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <h1 className="text-xl font-semibold text-gray-900 mb-1">Reissue eSIM</h1>
+          <p className="text-sm text-gray-600 mb-6">Enter the new EID to transfer this eSIM to. We will show your current EID for confirmation.</p>
+
+          {detailsLoading ? (
+            <div className="text-gray-600">Loading current eSIM details…</div>
+          ) : (
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700">Current EID</label>
+              <div className="mt-1 text-sm text-gray-900 font-mono bg-gray-50 rounded-md border border-gray-200 p-2">
+                {oldEid || "—"}
+              </div>
+            </div>
+          )}
+
+          {message && (
+            <div className="mb-4 text-green-700 bg-green-50 border border-green-200 rounded p-3">{message}</div>
+          )}
+          {error && (
+            <div className="mb-4 text-red-700 bg-red-50 border border-red-200 rounded p-3">{error}</div>
+          )}
+
+          <form onSubmit={(e) => void submit(e)} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700">New EID</label>
+              <input
+                type="text"
+                inputMode="numeric"
+                value={newEid}
+                onChange={(e) => setNewEid(e.target.value.trim())}
+                placeholder="32-digit EID (e.g., 8904….)"
+                className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono"
+                maxLength={32}
+              />
+              <p className="text-xs text-gray-500 mt-1">Must be exactly 32 digits.</p>
+            </div>
+            <div className="flex gap-3">
+              <button
+                type="submit"
+                disabled={loading || !validEid(newEid)}
+                className="px-4 py-2 rounded-md bg-blue-600 text-white text-sm disabled:opacity-50"
+              >
+                {loading ? "Processing…" : "Submit Reissue"}
+              </button>
+              <Link href={`/subscriptions/${subscriptionId}#sim-management`} className="px-4 py-2 rounded-md border border-gray-300 text-sm text-gray-700 bg-white hover:bg-gray-50">
+                Cancel
+              </Link>
+            </div>
+          </form>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
 }