feat: invoice expiry date-time picker with timezone support (#486)

Author: Mimah97

src/components/invoice/ExpiryDatePicker.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface ExpiryDatePickerProps {
+  value: string;
+  onChange: (iso: string) => void;
+  onTimezoneChange?: (tz: string) => void;
+  timezone?: string;
+  error?: string;
+}
+
+export default function ExpiryDatePicker({
+  value,
+  onChange,
+  onTimezoneChange,
+  timezone: externalTimezone,
+  error,
+}: ExpiryDatePickerProps) {
+  const [timezone, setTimezone] = useState<string>(() => {
+    if (externalTimezone) return externalTimezone;
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  });
+
+  const [timezones, setTimezones] = useState<string[]>([]);
+
+  useEffect(() => {
+    try {
+      const supported = Intl.supportedValuesOf('timeZone') as string[];
+      setTimezones(supported);
+    } catch {
+      setTimezones([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (externalTimezone) {
+      setTimezone(externalTimezone);
+    }
+  }, [externalTimezone]);
+
+  const handleTimezoneChange = (tz: string) => {
+    setTimezone(tz);
+    if (onTimezoneChange) {
+      onTimezoneChange(tz);
+    }
+  };
+
+  const isExpired = value && new Date(value) < new Date();
+
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label htmlFor="expiry-date" className="block text-sm font-medium text-gray-300 mb-1">
+            Expiry Date & Time
+          </label>
+          <input
+            id="expiry-date"
+            type="datetime-local"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            aria-invalid={isExpired || !!error}
+            aria-describedby={error ? 'expiry-error' : undefined}
+            className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 aria-invalid:border-red-600 aria-invalid:ring-red-600"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="timezone-select" className="block text-sm font-medium text-gray-300 mb-1">
+            Timezone
+          </label>
+          <select
+            id="timezone-select"
+            value={timezone}
+            onChange={(e) => handleTimezoneChange(e.target.value)}
+            className="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            {timezones.map((tz) => (
+              <option key={tz} value={tz}>
+                {tz}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {(error || isExpired) && (
+        <div
+          id="expiry-error"
+          role="alert"
+          className="text-sm text-red-400 bg-red-950/40 border border-red-800 rounded-lg px-3 py-2"
+        >
+          {error || 'Expiry date cannot be in the past'}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/invoice/ExpiryDisplay.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+interface ExpiryDisplayProps {
+  timestamp: number;
+  overrideTimezone?: string;
+}
+
+export default function ExpiryDisplay({
+  timestamp,
+  overrideTimezone,
+}: ExpiryDisplayProps) {
+  const date = new Date(timestamp * 1000);
+  const timezone = overrideTimezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const formatted = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZone: timezone,
+    timeZoneName: 'short',
+  }).format(date);
+
+  const isExpired = date < new Date();
+
+  return (
+    <div className={`text-sm ${isExpired ? 'text-red-400' : 'text-gray-300'}`}>
+      <span className="font-mono">{formatted}</span>
+      {isExpired && <span className="ml-2 text-xs font-medium">(Expired)</span>}
+    </div>
+  );
+}

src/hooks/useInvoiceForm.ts

@@ -0,0 +1,67 @@
+'use client';
+
+import { useCallback, useState, useMemo } from 'react';
+
+interface InvoiceFormState {
+  expiryDate: string;
+  timezone: string;
+}
+
+export function useInvoiceForm() {
+  const [state, setState] = useState<InvoiceFormState>(() => ({
+    expiryDate: '',
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  }));
+
+  const setExpiryDate = useCallback((date: string) => {
+    setState((prev) => ({ ...prev, expiryDate: date }));
+  }, []);
+
+  const setTimezone = useCallback((tz: string) => {
+    setState((prev) => ({ ...prev, timezone: tz }));
+  }, []);
+
+  const validation = useMemo(() => {
+    const errors: Record<string, string> = {};
+
+    if (state.expiryDate) {
+      const date = new Date(state.expiryDate);
+      if (date < new Date()) {
+        errors.expiryDate = 'Expiry date cannot be in the past';
+      }
+    }
+
+    return {
+      isValid: Object.keys(errors).length === 0,
+      errors,
+    };
+  }, [state.expiryDate]);
+
+  const getUtcTimestamp = useCallback((): number | null => {
+    if (!state.expiryDate || !validation.isValid) {
+      return null;
+    }
+
+    const localDate = new Date(state.expiryDate);
+    return Math.floor(localDate.getTime() / 1000);
+  }, [state.expiryDate, validation.isValid]);
+
+  const convertToUtcIso = useCallback((): string | null => {
+    if (!state.expiryDate) {
+      return null;
+    }
+
+    const localDate = new Date(state.expiryDate);
+    return localDate.toISOString();
+  }, [state.expiryDate]);
+
+  return {
+    expiryDate: state.expiryDate,
+    timezone: state.timezone,
+    setExpiryDate,
+    setTimezone,
+    validation,
+    getUtcTimestamp,
+    convertToUtcIso,
+  };
+}