Web, handle currency

[sebpalluel]

Create a New Library @currency/types

• Move types, maps, enums from libs/next/currency/src/lib/index.ts to this library. It will be used in all the related libraries.

Create a New Library @currency/api

• Create a class Currency that will take two API keys for two providers:
  1. fixer: FIXER_CURRENCY_API_KEY (Latest Rates Endpoint). This API key will be used: 0f0ab52ebe369b4693f500cd98188313
  2. exchangeRate: EXCHANGE_RATE_API_KEY (Latest Rates Endpoint). This API key will be used 6e3f3f4d004990ef4b296ff05cbc1445
• Create a getRate method that takes a base currency as input and uses the endpoint to receive the latest rates with supported currencies. This method will, in order of preference, use the fixer API and then the exchangeRate API. If fixer fails for a rate limit reason, only log a warning; otherwise, use an error log. Use exchangeRate as a fallback in case the request fails. In any case of failure, use an error log and throw an error because data could not be retrieved.
• Create default JSON files with rates for each currency (e.g., USD.json, EUR.json, etc.). In the local environment, we will use these as a fallback instead of calling the API. To support loading of .json you will need to add resolveJsonModule: true in the tsconfig.json of the libs using it. You will also need to include them as it's done in libs/next/i18n/tsconfig.lib.json.
• Provide Jest unit tests (the API should not be called but mocked, also test that the JSON files are returned instead of the API response).

Create a New Library @next/currency-cache That Will Use @next/cache

• Create a function setRate: It will store a key-value pair for each supported currency (so Currency_Enum) as currency-${Currency_Enum.Key}-rates, storing the rates respective to all the supported currencies and the base one. It will use the getRate method from @currency/api.
• Create a function setRates that will use Promise.allSettled with setRate for all supported currencies. Additionally, add a revalidateTag with currency-rates at the end of the method.
• Create a function getRate that will retrieve the rates from the cache with a given base currency.
• Create a function getRates that will retrieve the rates from the cache for all supported currencies:

const rates = {
  USD: {
    EUR: 0.9,
    // ...
  },
  EUR: {
    USD: 1.1,
    // ...
  },
  // ...
};

• create a new cron job in vercel.json that will point to setRates , it should be executed every 6 hours.
• Provide jest unit tests.

Create new api route in web project and a new library @next/currency-api to avoid excessive queries to the redis cache

• Create a new API route with the GET method at apps/web/app/api/currency/rates/route.ts that will use getRates from @next/currency-cache and return the result.
• In the @next/currency-api library, create a method getRates that uses this code:

fetch('/api/currency/rates', {
{ next: { tags: ['currency-rates'] } }
})

(You might use cache from React to wrap the method to avoid an infinite loop on the GET method).

Integrate the rates retrieval with currency conversion in @next/currency

• create a new provider with react context to be used in the main layout.tsx. This provider will be named CurrencyProvider and will provide a hook named useCurrency that provides rates retrieved from the @next/currency-api. An isLoading prop will be provided to indicate if the call is ongoing.
• update the formatCurrency and toUserCurrency to take rates as an input
• update the code where formatCurrency is used to use the useCurrency hook. If loading, display <TextSkeleton/> in place of the <Text/>.
• In case the formatCurrency is used in a RSC, simply use @next/currency-api getRates to provide the rates to formatCurrency.
• provide jest unit and integration test.

In @features/settings add currency preference in user settings

• use setCurrencyPreference and getCurrencyPreference from @next/currency to add a new component in @features/settings called CurrencyDropdown that will be integrated in GlobalSettings.