Add currencies setting to frontend

aelassas · Dec 11, 2024 · 4959914 · 4959914
1 parent 0953d3e
commit 4959914
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 113 deletions.
diff --git a/frontend/.env.docker.example b/frontend/.env.docker.example
@@ -3,6 +3,7 @@ VITE_BC_API_HOST=http://localhost:4002
 VITE_BC_RECAPTCHA_ENABLED=false
 VITE_BC_RECAPTCHA_SITE_KEY=GOOGLE_RECAPTCHA_SITE_KEY
 VITE_BC_DEFAULT_LANGUAGE=en
+VITE_BC_BASE_CURRENCY=USD
 VITE_BC_PAGE_SIZE=30
 VITE_BC_CARS_PAGE_SIZE=15
 VITE_BC_BOOKINGS_PAGE_SIZE=20

diff --git a/frontend/.env.example b/frontend/.env.example
@@ -4,6 +4,7 @@ VITE_BC_API_HOST=http://localhost:4002
 VITE_BC_RECAPTCHA_ENABLED=false
 VITE_BC_RECAPTCHA_SITE_KEY=GOOGLE_RECAPTCHA_SITE_KEY
 VITE_BC_DEFAULT_LANGUAGE=en
+VITE_BC_BASE_CURRENCY=USD
 VITE_BC_PAGE_SIZE=30
 VITE_BC_CARS_PAGE_SIZE=15
 VITE_BC_BOOKINGS_PAGE_SIZE=20

diff --git a/frontend/src/common/helper.ts b/frontend/src/common/helper.ts
@@ -625,3 +625,11 @@ export const downloadURI = (uri: string, name: string = '') => {
   link.click()
   link.remove()
 }
+
+/**
+ * Return currency symbol.
+ *
+ * @param {string} code
+ * @returns {string|undefined}
+ */
+export const getCurrencySymbol = (code: string) => env._CURRENCIES.find((c) => c.code === code)?.symbol
diff --git a/frontend/src/config/env.config.ts b/frontend/src/config/env.config.ts
@@ -1,11 +1,15 @@
 import * as bookcarsTypes from ':bookcars-types'
 import Const from './const'
 
-//
-// ISO 639-1 language codes and their labels
-// https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
-//
-const LANGUAGES = [
+type Language = { code: string, label: string }
+
+/**
+ * ISO 639-1 language codes and their labels
+ * https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+ *
+ * @type {Language[]}
+ */
+const LANGUAGES: Language[] = [
   {
     code: 'en',
     label: 'English',
@@ -20,6 +24,25 @@ const LANGUAGES = [
   },
 ]
 
+type Currency = { code: string, symbol: string }
+
+/**
+ * ISO 4217 currency codes and their symbols
+ * https://docs.stripe.com/currencies
+ *
+ * @type {Currency[]}
+ */
+const CURRENCIES: Currency[] = [
+  {
+    code: 'USD',
+    symbol: '$',
+  },
+  {
+    code: 'EUR',
+    symbol: '€',
+  }
+]
+
 const env = {
   isMobile: window.innerWidth <= 960,
   isProduction: import.meta.env.VITE_NODE_ENV === 'production',
@@ -30,6 +53,9 @@ const env = {
   LANGUAGES: LANGUAGES.map((l) => l.code),
   _LANGUAGES: LANGUAGES,
   DEFAULT_LANGUAGE: String(import.meta.env.VITE_BC_DEFAULT_LANGUAGE || 'en'),
+  CURRENCIES: CURRENCIES.map((c) => c.code),
+  _CURRENCIES: CURRENCIES,
+  BASE_CURRENCY: String(import.meta.env.VITE_BC_BASE_CURRENCY || 'USD'),
   PAGE_SIZE: Number.parseInt(String(import.meta.env.VITE_BC_PAGE_SIZE), 10) || 30,
   CARS_PAGE_SIZE: Number.parseInt(String(import.meta.env.VITE_BC_CARS_PAGE_SIZE), 10) || 15,
   BOOKINGS_PAGE_SIZE: Number.parseInt(String(import.meta.env.VITE_BC_BOOKINGS_PAGE_SIZE), 10) || 20,

diff --git a/frontend/src/services/StripeService.ts b/frontend/src/services/StripeService.ts
@@ -1,5 +1,7 @@
 import * as bookcarsTypes from ':bookcars-types'
+import * as bookcarsHelper from ':bookcars-helper'
 import axiosInstance from './axiosInstance'
+import env from '@/config/env.config'
 
 /**
  * Create Checkout Session.
@@ -42,3 +44,25 @@ export const createPaymentIntent = (payload: bookcarsTypes.CreatePaymentPayload)
       payload
     )
     .then((res) => res.data)
+
+/**
+* Set currency.
+*
+* @param {string} currency
+*/
+export const setCurrency = (currency: string) => {
+  localStorage.setItem('bc-fe-currency', currency)
+}
+
+/**
+ * Get currency.
+ *
+ * @returns {string}
+ */
+export const getCurrency = () => {
+  const currency = localStorage.getItem('bc-fe-currency')
+  if (currency && bookcarsHelper.checkCurrency(currency)) {
+    return currency
+  }
+  return env.BASE_CURRENCY
+}
diff --git a/packages/bookcars-helper/index.ts b/packages/bookcars-helper/index.ts
@@ -1,5 +1,5 @@
 import * as bookcarsTypes from ':bookcars-types'
-import CurrencyConverter, { CurrencyCode } from ':currency-converter'
+import CurrencyConverter, { CurrencyCode, currencies } from ':currency-converter'
 
 /**
  * Format a number.
@@ -352,6 +352,14 @@ export const convertPrice = async (amount: number, from: CurrencyCode, to: Curre
   return res
 }
 
+/**
+ * Check if currency is supported.
+ *
+ * @param {string} currency
+ * @returns {boolean}
+ */
+export const checkCurrency = (currency: string) => currencies.findIndex((c) => c === currency) > -1
+
 /**
  * Check whether language is french
  *