diff --git a/packages/ui-common/src/components/CurrencySelector/CurrencySelector.tsx b/packages/ui-common/src/components/CurrencySelector/CurrencySelector.tsx index f25a7b015..b24e18969 100644 --- a/packages/ui-common/src/components/CurrencySelector/CurrencySelector.tsx +++ b/packages/ui-common/src/components/CurrencySelector/CurrencySelector.tsx @@ -1,10 +1,12 @@ import { Box, Text } from "@mantine/core"; import { Check } from "lucide-react"; +import type { SupportedCurrency } from "../../lib/currency"; + export interface CurrencySelectorProps { /** Selected currency code, or "" when none picked yet. */ value: string; - onChange: (currency: "USD" | "ETB") => void; + onChange: (currency: SupportedCurrency) => void; disabled?: boolean; /** Validation error shown under the cards. */ error?: string; @@ -14,6 +16,12 @@ export interface CurrencySelectorProps { * USD is settled by bank transfer, never through the online gateway. */ allowUsd?: boolean; + /** + * Offer DJF alongside ETB (and USD, if also allowed). Same import-only + * gating as `allowUsd` — DJF is settled both online (WAAFI / CAC Bank) and + * by bank transfer. + */ + allowDjf?: boolean; } const ETB_OPTION = { @@ -30,6 +38,13 @@ const USD_OPTION = { hint: "Paid by bank transfer — send the slip to Finance", } as const; +const DJF_OPTION = { + code: "DJF", + symbol: "Fdj", + name: "Djibouti Franc", + hint: "Pay online, or by bank transfer — send the slip to Finance", +} as const; + /** * Card-style USD/ETB billing-currency picker. Renders unselected when `value` * is "" so a required choice never looks pre-made. @@ -40,8 +55,13 @@ export function CurrencySelector({ disabled = false, error, allowUsd = false, + allowDjf = false, }: CurrencySelectorProps) { - const options = allowUsd ? [ETB_OPTION, USD_OPTION] : [ETB_OPTION]; + const options = [ + ETB_OPTION, + ...(allowUsd ? [USD_OPTION] : []), + ...(allowDjf ? [DJF_OPTION] : []), + ]; return (