0a387275ff
- Updated AuthService to directly access address fields and added support for address line 2. - Introduced AddressDto in SignupDto for structured address validation. - Modified OrdersController to utilize CreateOrderDto for improved type safety. - Enhanced OrderBuilder to include address snapshot functionality during order creation. - Updated UsersService to handle address updates and added new methods in WHMCS service for client updates. - Improved address confirmation logic in AddressConfirmation component for internet orders.
427 lines
16 KiB
TypeScript
427 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { DashboardLayout } from "@/components/layout/dashboard-layout";
|
|
import { authenticatedApi } from "@/lib/api";
|
|
import {
|
|
CreditCardIcon,
|
|
MapPinIcon,
|
|
PencilIcon,
|
|
CheckIcon,
|
|
XMarkIcon,
|
|
ExclamationTriangleIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
|
|
interface Address {
|
|
street: string | null;
|
|
streetLine2: string | null;
|
|
city: string | null;
|
|
state: string | null;
|
|
postalCode: string | null;
|
|
country: string | null;
|
|
}
|
|
|
|
interface BillingInfo {
|
|
company: string | null;
|
|
email: string;
|
|
phone: string | null;
|
|
address: Address;
|
|
isComplete: boolean;
|
|
}
|
|
|
|
export default function BillingPage() {
|
|
const searchParams = useSearchParams();
|
|
const isCompletionFlow = searchParams.get("complete") === "true";
|
|
|
|
const [billingInfo, setBillingInfo] = useState<BillingInfo | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState(false);
|
|
const [editedAddress, setEditedAddress] = useState<Address | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
void fetchBillingInfo();
|
|
}, []);
|
|
|
|
const fetchBillingInfo = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await authenticatedApi.get<BillingInfo>("/users/billing");
|
|
setBillingInfo(data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to load billing information");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleEdit = () => {
|
|
setEditing(true);
|
|
setEditedAddress(
|
|
billingInfo?.address || {
|
|
street: "",
|
|
streetLine2: "",
|
|
city: "",
|
|
state: "",
|
|
postalCode: "",
|
|
country: "",
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!editedAddress) return;
|
|
|
|
// Validate required fields
|
|
const isComplete = !!(
|
|
editedAddress.street?.trim() &&
|
|
editedAddress.city?.trim() &&
|
|
editedAddress.state?.trim() &&
|
|
editedAddress.postalCode?.trim() &&
|
|
editedAddress.country?.trim()
|
|
);
|
|
|
|
if (!isComplete) {
|
|
setError("Please fill in all required address fields");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSaving(true);
|
|
setError(null);
|
|
|
|
// Update address via API
|
|
await authenticatedApi.patch("/users/billing", {
|
|
street: editedAddress.street,
|
|
streetLine2: editedAddress.streetLine2,
|
|
city: editedAddress.city,
|
|
state: editedAddress.state,
|
|
postalCode: editedAddress.postalCode,
|
|
country: editedAddress.country,
|
|
});
|
|
|
|
// Update local state
|
|
if (billingInfo) {
|
|
setBillingInfo({
|
|
...billingInfo,
|
|
address: editedAddress,
|
|
isComplete: true,
|
|
});
|
|
}
|
|
|
|
setEditing(false);
|
|
setEditedAddress(null);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to update address");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setEditing(false);
|
|
setEditedAddress(null);
|
|
setError(null);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex items-center space-x-3 mb-6">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<span className="text-xl font-semibold text-gray-900">
|
|
Loading billing information...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex items-center space-x-3 mb-6">
|
|
<CreditCardIcon className="h-8 w-8 text-blue-600" />
|
|
<h1 className="text-3xl font-bold text-gray-900">
|
|
{isCompletionFlow ? "Complete Your Profile" : "Billing & Address"}
|
|
</h1>
|
|
</div>
|
|
|
|
{isCompletionFlow && (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-6">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex-shrink-0">
|
|
<ExclamationTriangleIcon className="h-6 w-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-blue-900 mb-2">
|
|
Profile Completion Required
|
|
</h3>
|
|
<p className="text-blue-800">
|
|
Please review and complete your address information to access all features and
|
|
enable service ordering.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
|
|
<div className="flex items-start space-x-3">
|
|
<ExclamationTriangleIcon className="h-5 w-5 text-red-500 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="text-sm font-medium text-red-800">Error</h3>
|
|
<p className="text-sm text-red-700 mt-1">{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Address Information */}
|
|
<div className="bg-white border rounded-xl p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center space-x-3">
|
|
<MapPinIcon className="h-6 w-6 text-blue-600" />
|
|
<h2 className="text-xl font-semibold text-gray-900">Service Address</h2>
|
|
</div>
|
|
{billingInfo?.isComplete && !editing && (
|
|
<button
|
|
onClick={handleEdit}
|
|
className="flex items-center space-x-2 text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
>
|
|
<PencilIcon className="h-4 w-4" />
|
|
<span>Edit</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Address is required at signup, so this should rarely be needed */}
|
|
|
|
{editing ? (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Street Address *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editedAddress?.street || ""}
|
|
onChange={e =>
|
|
setEditedAddress(prev => (prev ? { ...prev, street: e.target.value } : null))
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="123 Main Street"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Street Address Line 2
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editedAddress?.streetLine2 || ""}
|
|
onChange={e =>
|
|
setEditedAddress(prev =>
|
|
prev ? { ...prev, streetLine2: e.target.value } : null
|
|
)
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Apartment, suite, etc. (optional)"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">City *</label>
|
|
<input
|
|
type="text"
|
|
value={editedAddress?.city || ""}
|
|
onChange={e =>
|
|
setEditedAddress(prev => (prev ? { ...prev, city: e.target.value } : null))
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Tokyo"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
State/Prefecture *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editedAddress?.state || ""}
|
|
onChange={e =>
|
|
setEditedAddress(prev => (prev ? { ...prev, state: e.target.value } : null))
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Tokyo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Postal Code *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editedAddress?.postalCode || ""}
|
|
onChange={e =>
|
|
setEditedAddress(prev =>
|
|
prev ? { ...prev, postalCode: e.target.value } : null
|
|
)
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="100-0001"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Country *
|
|
</label>
|
|
<select
|
|
value={editedAddress?.country || ""}
|
|
onChange={e =>
|
|
setEditedAddress(prev =>
|
|
prev ? { ...prev, country: e.target.value } : null
|
|
)
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Select Country</option>
|
|
<option value="JP">Japan</option>
|
|
<option value="US">United States</option>
|
|
<option value="GB">United Kingdom</option>
|
|
<option value="CA">Canada</option>
|
|
<option value="AU">Australia</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3 pt-4">
|
|
<button
|
|
onClick={() => void handleSave()}
|
|
disabled={saving}
|
|
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition-colors"
|
|
>
|
|
<CheckIcon className="h-4 w-4" />
|
|
<span>{saving ? "Saving..." : "Save Address"}</span>
|
|
</button>
|
|
<button
|
|
onClick={handleCancel}
|
|
disabled={saving}
|
|
className="flex items-center space-x-2 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 disabled:bg-gray-300 transition-colors"
|
|
>
|
|
<XMarkIcon className="h-4 w-4" />
|
|
<span>Cancel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{billingInfo?.address.street ? (
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<div className="text-gray-900">
|
|
<p className="font-medium">{billingInfo.address.street}</p>
|
|
{billingInfo.address.streetLine2 && <p>{billingInfo.address.streetLine2}</p>}
|
|
<p>
|
|
{billingInfo.address.city}, {billingInfo.address.state}{" "}
|
|
{billingInfo.address.postalCode}
|
|
</p>
|
|
<p>{billingInfo.address.country}</p>
|
|
</div>
|
|
|
|
<div className="mt-3 pt-3 border-t border-gray-200">
|
|
<div className="flex items-center space-x-2">
|
|
{billingInfo.isComplete ? (
|
|
<>
|
|
<CheckIcon className="h-4 w-4 text-green-500" />
|
|
<span className="text-sm text-green-700 font-medium">
|
|
Address Complete
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ExclamationTriangleIcon className="h-4 w-4 text-yellow-500" />
|
|
<span className="text-sm text-yellow-700 font-medium">
|
|
Address Incomplete
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<MapPinIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
|
<p className="text-gray-600 mb-4">No address on file</p>
|
|
<button
|
|
onClick={handleEdit}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
Add Address
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div className="bg-white border rounded-xl p-6">
|
|
<div className="flex items-center space-x-3 mb-4">
|
|
<CreditCardIcon className="h-6 w-6 text-blue-600" />
|
|
<h2 className="text-xl font-semibold text-gray-900">Contact Information</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<div className="bg-gray-50 rounded-lg p-3">
|
|
<p className="text-gray-900">{billingInfo?.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{billingInfo?.company && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Company</label>
|
|
<div className="bg-gray-50 rounded-lg p-3">
|
|
<p className="text-gray-900">{billingInfo.company}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{billingInfo?.phone && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
|
|
<div className="bg-gray-50 rounded-lg p-3">
|
|
<p className="text-gray-900">{billingInfo.phone}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-blue-50 rounded-lg">
|
|
<p className="text-sm text-blue-800">
|
|
<strong>Note:</strong> Contact information is managed through your account settings.
|
|
Address changes are synchronized with our billing system. This address is used for
|
|
both billing and service delivery.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|