From 86cd636b873b019fcd79b407ce36d98f040b64b1 Mon Sep 17 00:00:00 2001 From: "T. Narantuya" Date: Thu, 11 Sep 2025 16:21:47 +0900 Subject: [PATCH] Refactor OrderStatusPage and SimChangePlanPage for improved readability and functionality - Removed duplicate text and unnecessary comments in OrderStatusPage for cleaner code. - Moved the status section to the top for better user experience. - Simplified the handling of item types in SimChangePlanPage and added new state variables for global IP assignment and scheduling. - Streamlined form submission and error handling in SimChangePlanPage, enhancing user feedback. --- .../src/app/(portal)/orders/[id]/page.tsx | 111 ------------------ .../[id]/sim/change-plan/page.tsx | 56 ++------- 2 files changed, 10 insertions(+), 157 deletions(-) diff --git a/apps/portal/src/app/(portal)/orders/[id]/page.tsx b/apps/portal/src/app/(portal)/orders/[id]/page.tsx index 16ce70e6..57a0ddd0 100644 --- a/apps/portal/src/app/(portal)/orders/[id]/page.tsx +++ b/apps/portal/src/app/(portal)/orders/[id]/page.tsx @@ -206,8 +206,6 @@ export default function OrderStatusPage() {

Your order has been created and submitted for processing. We will notify you as soon as it's approved and ready for activation. - Your order has been created and submitted for processing. We will notify you as soon - as it's approved and ready for activation.

@@ -226,7 +224,6 @@ export default function OrderStatusPage() { )} {/* Status Section - Moved to top */} - {data && {data && (() => { const statusInfo = getDetailedStatusInfo( @@ -245,11 +242,9 @@ export default function OrderStatusPage() { : "neutral"; return ( - Status} - header={

Status

} >
{statusInfo.description}
@@ -259,7 +254,6 @@ export default function OrderStatusPage() { />
- {/* Highlighted Next Steps Section */} {statusInfo.nextAction && (
@@ -271,7 +265,6 @@ export default function OrderStatusPage() {
)} - {statusInfo.timeline && (

@@ -282,16 +275,12 @@ export default function OrderStatusPage() { ); })()} - })()} {/* Combined Service Overview and Products */} {data && (

{/* Service Header */}
-
- {getServiceTypeIcon(data.orderType)} -
{getServiceTypeIcon(data.orderType)}
@@ -366,7 +355,6 @@ export default function OrderStatusPage() { const aIsInstallation = a.product.itemClass === "Installation"; const bIsInstallation = b.product.itemClass === "Installation"; - if (aIsService && !bIsService) return -1; if (!aIsService && bIsService) return 1; if (aIsInstallation && !bIsInstallation) return -1; @@ -376,53 +364,7 @@ export default function OrderStatusPage() { .map(item => { // Use the actual Item_Class__c values from Salesforce documentation const itemClass = item.product.itemClass; - // Use the actual Item_Class__c values from Salesforce documentation - const itemClass = item.product.itemClass; - // Get appropriate icon and color based on item type and billing cycle - const getItemTypeInfo = () => { - const isMonthly = item.product.billingCycle === "Monthly"; - const isService = itemClass === "Service"; - const isInstallation = itemClass === "Installation"; - - if (isService && isMonthly) { - // Main service products - Blue theme - return { - icon: , - bg: "bg-blue-50 border-blue-200", - iconBg: "bg-blue-100 text-blue-600", - label: itemClass || "Service", - labelColor: "text-blue-600", - }; - } else if (isInstallation) { - // Installation items - Green theme - return { - icon: , - bg: "bg-green-50 border-green-200", - iconBg: "bg-green-100 text-green-600", - label: itemClass || "Installation", - labelColor: "text-green-600", - }; - } else if (isMonthly) { - // Other monthly products - Blue theme - return { - icon: , - bg: "bg-blue-50 border-blue-200", - iconBg: "bg-blue-100 text-blue-600", - label: itemClass || "Service", - labelColor: "text-blue-600", - }; - } else { - // One-time products - Orange theme - return { - icon: , - bg: "bg-orange-50 border-orange-200", - iconBg: "bg-orange-100 text-orange-600", - label: itemClass || "Add-on", - labelColor: "text-orange-600", - }; - } - }; // Get appropriate icon and color based on item type and billing cycle const getItemTypeInfo = () => { const isMonthly = item.product.billingCycle === "Monthly"; @@ -468,21 +410,8 @@ export default function OrderStatusPage() { } }; - const typeInfo = getItemTypeInfo(); const typeInfo = getItemTypeInfo(); - return ( -
-
-
-
- {typeInfo.icon} -
return (
-
-
-

- {item.product.name} -

- - {typeInfo.label} - -

@@ -530,32 +448,6 @@ export default function OrderStatusPage() {

-
- {item.product.billingCycle} - {item.quantity > 1 && Qty: {item.quantity}} - {item.product.itemClass && ( - - {item.product.itemClass} - - )} -
-
-
- -
- {item.totalPrice && ( -
- ¥{item.totalPrice.toLocaleString()} -
- )} -
- {item.product.billingCycle === "Monthly" ? "/month" : "one-time"} -
-
-
-
- ); - })}
{item.totalPrice && ( @@ -577,9 +469,6 @@ export default function OrderStatusPage() {
-

- Additional fees may apply -

Additional fees may apply

diff --git a/apps/portal/src/app/(portal)/subscriptions/[id]/sim/change-plan/page.tsx b/apps/portal/src/app/(portal)/subscriptions/[id]/sim/change-plan/page.tsx index ebe3cb2a..d928a4ed 100644 --- a/apps/portal/src/app/(portal)/subscriptions/[id]/sim/change-plan/page.tsx +++ b/apps/portal/src/app/(portal)/subscriptions/[id]/sim/change-plan/page.tsx @@ -2,12 +2,12 @@ import { useState, useMemo } from "react"; import Link from "next/link"; +import { DashboardLayout } from "@/components/layout/dashboard-layout"; import { useParams } from "next/navigation"; import { authenticatedApi } from "@/lib/api"; const PLAN_CODES = ["PASI_5G", "PASI_10G", "PASI_25G", "PASI_50G"] as const; type PlanCode = (typeof PLAN_CODES)[number]; -type PlanCode = (typeof PLAN_CODES)[number]; const PLAN_LABELS: Record = { PASI_5G: "5GB", PASI_10G: "10GB", @@ -20,14 +20,12 @@ export default function SimChangePlanPage() { const subscriptionId = parseInt(params.id as string); const [currentPlanCode] = useState(""); const [newPlanCode, setNewPlanCode] = useState<"" | PlanCode>(""); + const [assignGlobalIp, setAssignGlobalIp] = useState(false); + const [scheduledAt, setScheduledAt] = useState(""); const [message, setMessage] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); - const options = useMemo( - () => (PLAN_CODES as readonly PlanCode[]).filter(c => c !== (currentPlanCode as PlanCode)), - [currentPlanCode] - ); const options = useMemo( () => (PLAN_CODES as readonly PlanCode[]).filter(c => c !== (currentPlanCode as PlanCode)), [currentPlanCode] @@ -45,9 +43,11 @@ export default function SimChangePlanPage() { try { await authenticatedApi.post(`/subscriptions/${subscriptionId}/sim/change-plan`, { newPlanCode, + assignGlobalIp, + scheduledAt: scheduledAt ? scheduledAt.replace(/-/g, "") : undefined, }); setMessage("Plan change submitted successfully"); - } catch (e: unknown) { + } catch (e: any) { setError(e instanceof Error ? e.message : "Failed to change plan"); } finally { setLoading(false); @@ -55,7 +55,8 @@ export default function SimChangePlanPage() { }; return ( -
+ +
← Back to SIM Management - - ← Back to SIM Management -

Change Plan

@@ -87,29 +82,13 @@ export default function SimChangePlanPage() { {error}
)} -

- Change Plan: Switch to a different data plan. Important: Plan changes must be requested - before the 25th of the month. Changes will take effect on the 1st of the following - month. -

- {message && ( -
- {message} -
- )} - {error && ( -
- {error} -
- )} -
void submit(e)} className="space-y-6"> +
@@ -163,22 +139,10 @@ export default function SimChangePlanPage() { > Back - - - Back -
+ ); }