"use client"; import { forwardRef } from "react"; import { format } from "date-fns"; import { ServerIcon, CheckCircleIcon, ExclamationTriangleIcon, ClockIcon, XCircleIcon, CalendarIcon, CurrencyYenIcon, IdentificationIcon, TagIcon, } from "@heroicons/react/24/outline"; import { StatusPill } from "@/components/atoms/status-pill"; import { SubCard } from "@/components/molecules/SubCard/SubCard"; import { formatCurrency, getCurrencyLocale } from "@customer-portal/domain"; import type { Subscription } from "@customer-portal/domain"; import { cn } from "@/lib/utils"; interface SubscriptionDetailsProps { subscription: Subscription; showServiceSpecificSections?: boolean; className?: string; } const getStatusIcon = (status: string) => { switch (status) { case "Active": return ; case "Suspended": return ; case "Terminated": return ; case "Cancelled": return ; case "Pending": return ; default: return ; } }; const getStatusVariant = (status: string) => { switch (status) { case "Active": return "success" as const; case "Suspended": return "warning" as const; case "Terminated": return "error" as const; case "Cancelled": return "neutral" as const; case "Pending": return "info" as const; default: return "neutral" as const; } }; const formatDate = (dateString: string | undefined) => { if (!dateString) return "N/A"; try { return format(new Date(dateString), "MMM d, yyyy"); } catch { return "Invalid date"; } }; const formatBillingLabel = (cycle: string) => { switch (cycle) { case "Monthly": return "Monthly Billing"; case "Annually": return "Annual Billing"; case "Quarterly": return "Quarterly Billing"; case "Semi-Annually": return "Semi-Annual Billing"; case "Biennially": return "Biennial Billing"; case "Triennially": return "Triennial Billing"; default: return "One-time Payment"; } }; const isSimService = (productName: string) => { return productName.toLowerCase().includes("sim"); }; const isInternetService = (productName: string) => { const name = productName.toLowerCase(); return name.includes("internet") || name.includes("broadband") || name.includes("fiber"); }; const isVpnService = (productName: string) => { return productName.toLowerCase().includes("vpn"); }; export const SubscriptionDetails = forwardRef( ({ subscription, showServiceSpecificSections = true, className }, ref) => { return (
{/* Main Details Card */}
{getStatusIcon(subscription.status)}

Subscription Details

Service subscription information

} >
{/* Billing Amount */}

Billing Amount

{formatCurrency(subscription.amount, { currency: "JPY", locale: getCurrencyLocale("JPY"), })}

{formatBillingLabel(subscription.cycle)}

{/* Next Due Date */}

Next Due Date

{formatDate(subscription.nextDue)}

Due date

{/* Registration Date */}

Registration Date

{formatDate(subscription.registrationDate)}

Service created

{/* Additional Details */}

Service ID

{subscription.serviceId}

{subscription.orderNumber && (

Order Number

{subscription.orderNumber}

)} {subscription.groupName && (

Product Group

{subscription.groupName}

)} {subscription.paymentMethod && (

Payment Method

{subscription.paymentMethod}

)}
{/* Custom Fields */} {subscription.customFields && Object.keys(subscription.customFields).length > 0 && (

Additional Information

{Object.entries(subscription.customFields).map(([key, value]) => (

{key.replace(/([A-Z])/g, " $1").trim()}

{value}

))}
)} {/* Notes */} {subscription.notes && (

Notes

{subscription.notes}

)} {/* Service-Specific Information */} {showServiceSpecificSections && ( <> {/* SIM Service Information */} {isSimService(subscription.productName) && ( }>

SIM Management Available

This subscription includes SIM management features such as data usage monitoring, top-up options, and service configuration.

  • • Real-time data usage tracking
  • • Data top-up and plan changes
  • • Service feature toggles
  • • SIM reissue options
)} {/* Internet Service Information */} {isInternetService(subscription.productName) && ( } >

Internet Service Features

Your internet service includes high-speed connectivity and support options.

  • • High-speed internet connection
  • • 24/7 technical support
  • • Service monitoring
  • • Installation support
)} {/* VPN Service Information */} {isVpnService(subscription.productName) && ( }>

VPN Service Features

Your VPN service provides secure and private internet access.

  • • Encrypted internet connection
  • • Multiple server locations
  • • No-logs policy
  • • Multi-device support
)} )} ); } ); SubscriptionDetails.displayName = "SubscriptionDetails";