give
/
src
/
DonationForms
/
resources
/
registrars
/
templates
/
fields
/
Amount
/
CurrencySwitcher.tsx
CurrencySwitcher.tsx
2 years ago
CustomAmount.tsx
1 year ago
DonationAmountCurrency.tsx
2 years ago
DonationAmountLevels.tsx
1 month ago
index.tsx
1 month ago
withCurrencySettings.tsx
1 month ago
CurrencySwitcher.tsx
112 lines
| 1 | import {CurrencySwitcherSetting} from '@givewp/forms/types'; |
| 2 | import {ChangeEvent, useMemo} from 'react'; |
| 3 | import amountFormatter from '@givewp/forms/app/utilities/amountFormatter'; |
| 4 | |
| 5 | /** |
| 6 | * @since 3.0.0 |
| 7 | */ |
| 8 | const convertCurrencySettingsToOptions = (currencySettings: CurrencySwitcherSetting[]): CurrencyOption[] => { |
| 9 | return currencySettings.map(({id}) => { |
| 10 | const formatter = amountFormatter(id); |
| 11 | const symbol = formatter.formatToParts().find(({type}) => type === 'currency').value; |
| 12 | |
| 13 | return { |
| 14 | id, |
| 15 | symbol, |
| 16 | }; |
| 17 | }); |
| 18 | }; |
| 19 | |
| 20 | /** |
| 21 | * @since 3.0.0 |
| 22 | */ |
| 23 | export type CurrencyOption = { |
| 24 | id: string; |
| 25 | symbol: string; |
| 26 | }; |
| 27 | |
| 28 | /** |
| 29 | * Find the currency setting by currency id |
| 30 | * |
| 31 | * @since 3.0.0 |
| 32 | */ |
| 33 | export const getCurrencySetting = ( |
| 34 | currency: string, |
| 35 | currencySettings: CurrencySwitcherSetting[] |
| 36 | ): CurrencySwitcherSetting | undefined => { |
| 37 | return currencySettings.find(({id}) => id === currency); |
| 38 | }; |
| 39 | |
| 40 | /** |
| 41 | * @since 3.0.0 |
| 42 | */ |
| 43 | export const isBaseCurrency = (currencySetting: CurrencySwitcherSetting) => currencySetting.exchangeRate === 0; |
| 44 | |
| 45 | /** |
| 46 | * Calculate the amount based on the currency exchange rate, taking into account the from and to currency values |
| 47 | * |
| 48 | * @since 3.0.0 |
| 49 | */ |
| 50 | export const calculateCurrencyAmount = ( |
| 51 | amount: number, |
| 52 | fromCurrency: string, |
| 53 | toCurrency: string, |
| 54 | currencySettings: CurrencySwitcherSetting[] |
| 55 | ): number => { |
| 56 | const fromCurrencySetting = getCurrencySetting(fromCurrency, currencySettings); |
| 57 | const toCurrencySetting = getCurrencySetting(toCurrency, currencySettings); |
| 58 | |
| 59 | // convert from currency to base amount by dividing by the current exchange rate |
| 60 | // make sure to round the amount to avoid floating point issues |
| 61 | if (fromCurrencySetting !== undefined && !isBaseCurrency(fromCurrencySetting)) { |
| 62 | amount = Math.round(amount / fromCurrencySetting.exchangeRate); |
| 63 | } |
| 64 | |
| 65 | // convert to next currency by multiplying by the next exchange rate |
| 66 | if (toCurrencySetting !== undefined && !isBaseCurrency(toCurrencySetting)) { |
| 67 | amount = amount * toCurrencySetting.exchangeRate; |
| 68 | } |
| 69 | |
| 70 | return amount; |
| 71 | }; |
| 72 | |
| 73 | /** |
| 74 | * @since 3.0.0 |
| 75 | */ |
| 76 | type CurrencySwitcherProps = { |
| 77 | defaultCurrency: string; |
| 78 | currencySettings: CurrencySwitcherSetting[]; |
| 79 | onSelect?: (event: ChangeEvent<HTMLSelectElement>) => void; |
| 80 | }; |
| 81 | |
| 82 | /** |
| 83 | * The currency select and static component |
| 84 | * |
| 85 | * @since 3.0.0 |
| 86 | */ |
| 87 | function CurrencySwitcher({defaultCurrency, currencySettings, onSelect}: CurrencySwitcherProps) { |
| 88 | const currencyOptions = useMemo( |
| 89 | () => convertCurrencySettingsToOptions(currencySettings), |
| 90 | [JSON.stringify(currencySettings)] |
| 91 | ); |
| 92 | |
| 93 | return ( |
| 94 | <span className="givewp-fields-amount__currency-select-container"> |
| 95 | <select |
| 96 | className="givewp-fields-amount__currency-select" |
| 97 | onChange={onSelect} |
| 98 | defaultValue={defaultCurrency} |
| 99 | > |
| 100 | {currencyOptions.map((option) => { |
| 101 | return ( |
| 102 | <option key={option.id} value={option.id}> |
| 103 | {option.id} {option.symbol} |
| 104 | </option> |
| 105 | ); |
| 106 | })} |
| 107 | </select> |
| 108 | </span> |
| 109 | ); |
| 110 | } |
| 111 | export default CurrencySwitcher; |
| 112 |