counterweight
a5a1a2c1ad
- Translate LoadingState and EmptyState components (common namespace) - Translate Header navigation labels (navigation namespace) - Translate StatusBadge trade status labels (exchange namespace) - Create navigation.json translation files for es, en, ca - Create exchange.json translation files for status/direction/transfer labels - Update IntlProvider to load navigation and exchange namespaces - Update frontend tests to expect Spanish translations (default language) - Configure Playwright to use English language for e2e tests via storageState - Fix test expectations to match translated strings All frontend and e2e tests passing.
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { badgeStyles } from "../styles/shared";
|
|
import { getTradeStatusDisplay } from "../utils/exchange";
|
|
import { useTranslation } from "../hooks/useTranslation";
|
|
|
|
type StatusBadgeVariant = "success" | "error" | "ready";
|
|
|
|
interface StatusBadgeProps {
|
|
/** Status text to display */
|
|
children: React.ReactNode;
|
|
/** Optional variant for simple status badges */
|
|
variant?: StatusBadgeVariant;
|
|
/** Trade status (uses getTradeStatusDisplay for styling) */
|
|
tradeStatus?: string;
|
|
/** Custom style override */
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const STATUS_KEY_MAP: Record<string, string> = {
|
|
booked: "pending",
|
|
completed: "completed",
|
|
cancelled_by_user: "userCancelled",
|
|
cancelled_by_admin: "adminCancelled",
|
|
no_show: "noShow",
|
|
};
|
|
|
|
/**
|
|
* Standardized status badge component.
|
|
* Can be used with a variant prop for simple badges, or tradeStatus prop for trade-specific styling.
|
|
*/
|
|
export function StatusBadge({ children, variant, tradeStatus, style }: StatusBadgeProps) {
|
|
const t = useTranslation("exchange");
|
|
let badgeStyle: React.CSSProperties = { ...badgeStyles.badge };
|
|
|
|
if (tradeStatus) {
|
|
// Use trade status display utility for trade-specific badges
|
|
const statusDisplay = getTradeStatusDisplay(tradeStatus);
|
|
badgeStyle = {
|
|
...badgeStyle,
|
|
background: statusDisplay.bgColor,
|
|
color: statusDisplay.textColor,
|
|
};
|
|
} else if (variant) {
|
|
// Use variant styles for simple badges
|
|
switch (variant) {
|
|
case "success":
|
|
badgeStyle = { ...badgeStyle, ...badgeStyles.badgeSuccess };
|
|
break;
|
|
case "error":
|
|
badgeStyle = { ...badgeStyle, ...badgeStyles.badgeError };
|
|
break;
|
|
case "ready":
|
|
badgeStyle = { ...badgeStyle, ...badgeStyles.badgeReady };
|
|
break;
|
|
}
|
|
}
|
|
|
|
const displayText = tradeStatus
|
|
? t(`status.${STATUS_KEY_MAP[tradeStatus] || tradeStatus}`)
|
|
: children;
|
|
|
|
return <span style={{ ...badgeStyle, ...style }}>{displayText}</span>;
|
|
}
|