Fix date/time formatting to use es-ES locale
- Update all date/time formatting functions to use 'es-ES' locale instead of 'en-US' or 'de-DE' - Update utility functions in utils/date.ts and utils/exchange.ts - Update all component files that use date formatting - Update e2e test helper to match new Spanish date format - All formatting now uses Spanish locale regardless of selected language as per PR requirements
This commit is contained in:
parent
d2fc7d8850
commit
e35e79e84d
19 changed files with 146 additions and 50 deletions
|
|
@ -116,7 +116,7 @@ export default function AdminInvitesPage() {
|
|||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleString();
|
||||
return new Date(dateStr).toLocaleString("es-ES");
|
||||
};
|
||||
|
||||
const getStatusBadgeVariant = (status: string): "ready" | "success" | "error" | undefined => {
|
||||
|
|
|
|||
|
|
@ -39,11 +39,11 @@ export default function AdminPriceHistoryPage() {
|
|||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleString();
|
||||
return new Date(dateStr).toLocaleString("es-ES");
|
||||
};
|
||||
|
||||
const formatPrice = (price: number) => {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
return new Intl.NumberFormat("es-ES", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
minimumFractionDigits: 2,
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ export default function AdminTradesPage() {
|
|||
<span style={tradeCardStyles.rateLabel}>Rate:</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("de-DE", {
|
||||
{trade.agreed_price_eur.toLocaleString("es-ES", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
|
|
@ -270,7 +270,7 @@ export default function AdminTradesPage() {
|
|||
<span style={tradeCardStyles.rateLabel}>Market:</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.market_price_eur.toLocaleString("de-DE", {
|
||||
{trade.market_price_eur.toLocaleString("es-ES", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -277,10 +277,10 @@ export function BookingStep({
|
|||
}}
|
||||
>
|
||||
<div style={styles.dateWeekday}>
|
||||
{date.toLocaleDateString("en-US", { weekday: "short" })}
|
||||
{date.toLocaleDateString("es-ES", { weekday: "short" })}
|
||||
</div>
|
||||
<div style={styles.dateDay}>
|
||||
{date.toLocaleDateString("en-US", {
|
||||
{date.toLocaleDateString("es-ES", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})}
|
||||
|
|
@ -312,7 +312,7 @@ export function BookingStep({
|
|||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>
|
||||
{t("bookingStep.availableSlots")}{" "}
|
||||
{selectedDate.toLocaleDateString("en-US", {
|
||||
{selectedDate.toLocaleDateString("es-ES", {
|
||||
weekday: "long",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ interface ConfirmationStepProps {
|
|||
* Format price for display
|
||||
*/
|
||||
function formatPrice(price: number): string {
|
||||
return `€${price.toLocaleString("de-DE", { maximumFractionDigits: 0 })}`;
|
||||
return `€${price.toLocaleString("es-ES", { maximumFractionDigits: 0 })}`;
|
||||
}
|
||||
|
||||
const styles: Record<string, CSSProperties> = {
|
||||
|
|
@ -168,7 +168,7 @@ export function ConfirmationStep({
|
|||
</div>
|
||||
<div style={styles.compressedBookingDetails}>
|
||||
<span>
|
||||
{selectedDate?.toLocaleDateString("en-US", {
|
||||
{selectedDate?.toLocaleDateString("es-ES", {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ interface PriceDisplayProps {
|
|||
* Format price for display
|
||||
*/
|
||||
function formatPrice(price: number): string {
|
||||
return `€${price.toLocaleString("de-DE", { maximumFractionDigits: 0 })}`;
|
||||
return `€${price.toLocaleString("es-ES", { maximumFractionDigits: 0 })}`;
|
||||
}
|
||||
|
||||
const styles: Record<string, CSSProperties> = {
|
||||
|
|
@ -121,7 +121,7 @@ export function PriceDisplay({
|
|||
</div>
|
||||
{lastUpdate && (
|
||||
<div style={styles.priceTimestamp}>
|
||||
{t("priceDisplay.updated")} {lastUpdate.toLocaleTimeString()}
|
||||
{t("priceDisplay.updated")} {lastUpdate.toLocaleTimeString("es-ES")}
|
||||
{isPriceStale && <span style={styles.staleWarning}> {t("priceDisplay.stale")}</span>}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -15,18 +15,15 @@ interface LanguageContextType {
|
|||
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
||||
|
||||
export function LanguageProvider({ children }: { children: ReactNode }) {
|
||||
// Start with default locale for SSR consistency
|
||||
const [locale, setLocaleState] = useState<Locale>(DEFAULT_LOCALE);
|
||||
const [isHydrated, setIsHydrated] = useState(false);
|
||||
|
||||
// Load locale from localStorage on mount
|
||||
// Load locale from localStorage after hydration
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
|
||||
console.log("[useLanguage] Loading locale from localStorage:", stored);
|
||||
if (stored && (stored === "es" || stored === "en" || stored === "ca")) {
|
||||
console.log("[useLanguage] Setting locale to:", stored);
|
||||
setLocaleState(stored as Locale);
|
||||
} else {
|
||||
console.log("[useLanguage] No valid stored locale, using default:", DEFAULT_LOCALE);
|
||||
}
|
||||
setIsHydrated(true);
|
||||
}, []);
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ export default function TradeDetailPage() {
|
|||
<span style={styles.detailLabel}>Market Price:</span>
|
||||
<span style={styles.detailValue}>
|
||||
€
|
||||
{trade.market_price_eur.toLocaleString("de-DE", {
|
||||
{trade.market_price_eur.toLocaleString("es-ES", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
|
|
@ -164,7 +164,7 @@ export default function TradeDetailPage() {
|
|||
<span style={styles.detailLabel}>Agreed Price:</span>
|
||||
<span style={styles.detailValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("de-DE", {
|
||||
{trade.agreed_price_eur.toLocaleString("es-ES", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ export default function TradesPage() {
|
|||
<span style={tradeCardStyles.rateLabel}>{t("trade.rate")}</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("de-DE", {
|
||||
{trade.agreed_price_eur.toLocaleString("es-ES", {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/BTC
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export function formatDate(d: Date): string {
|
|||
*/
|
||||
export function formatTime(isoString: string): string {
|
||||
const d = new Date(isoString);
|
||||
return d.toLocaleTimeString("en-US", {
|
||||
return d.toLocaleTimeString("es-ES", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
|
|
@ -29,7 +29,7 @@ export function formatTime(isoString: string): string {
|
|||
*/
|
||||
export function formatDateTime(isoString: string): string {
|
||||
const d = new Date(isoString);
|
||||
return d.toLocaleString("en-US", {
|
||||
return d.toLocaleString("es-ES", {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
|
|
@ -43,7 +43,7 @@ export function formatDateTime(isoString: string): string {
|
|||
* Format date for display (e.g., "Mon, Jan 15").
|
||||
*/
|
||||
export function formatDisplayDate(d: Date): string {
|
||||
return d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
|
||||
return d.toLocaleDateString("es-ES", { weekday: "short", month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
* e.g., 10000 -> "€100"
|
||||
*/
|
||||
export function formatEur(cents: number): string {
|
||||
return `€${(cents / 100).toLocaleString("de-DE")}`;
|
||||
return `€${(cents / 100).toLocaleString("es-ES")}`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue