Added currency support and custom dropdown (#25)

* Added currency support and custom dropdown

* Fetching list of currencies from server

* Removed currency codes from translation files

* Minor refactor

Author: dusanradovanovic

package.json

@@ -15,6 +15,7 @@
     "node-sass": "^4.13.0",
     "react": "^16.13.1",
     "react-axe": "^3.5.2",
+    "react-cool-onclickoutside": "^1.5.2",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-script-hook": "^1.1.1",

src/AppHeader.tsx

@@ -2,17 +2,14 @@ import React from 'react';
 import { Link } from "react-router-dom";
 import { ImageContainer } from './ImageContainer';
 import { useTranslation } from './app-state';
+import { LanguageDropdown } from './LanguageDropdown';
 
 import './AppHeader.scss';
 import headerLogo from './images/site-images/Company-Logo.svg';
 
 
 export const AppHeader: React.FC = () => {
-  const { t, selectedLanguage, setLanguage } = useTranslation();
-
-  const onChangeLang = (e: React.FocusEvent<HTMLSelectElement>) => {
-    setLanguage(e.target.value);
-  };
+  const { t } = useTranslation();
 
   return (
     <div className="appheader">
@@ -22,10 +19,7 @@ export const AppHeader: React.FC = () => {
         </Link>
       </div>
       <div className="appheader__language">
-        <select value={selectedLanguage} aria-label={t('language')} onChange={onChangeLang} onBlur={onChangeLang}>
-          <option value="en">{t('english')}</option>
-          <option value="fr">{t('french')}</option>
-        </select>
+        <LanguageDropdown />
       </div>
       <div className="appheader__moltincartcontainer">
         <span className="moltin-cart-button"></span>

src/Category.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { loadCategoryProducts } from './service';
-import { useCategories } from './app-state';
+import { useCategories, useTranslation, useCurrency } from './app-state';
 import { ProductThumbnail } from './ProductThumbnail';
 import { createCategoryUrl } from './routes';
 import { Pagination } from './Pagination';
@@ -10,6 +10,9 @@ import { useResolve } from './hooks';
 import './Category.scss';
 
 function useCategoryProducts(categoryId: string | undefined, pageNum: number) {
+  const { selectedLanguage } = useTranslation();
+  const { selectedCurrency } = useCurrency();
+
   const [totalPages, setTotalPages] = useState<number>();
 
   useEffect(() => {
@@ -20,11 +23,11 @@ function useCategoryProducts(categoryId: string | undefined, pageNum: number) {
   const [products] = useResolve(async () => {
     // during initial loading of categories categoryId might be undefined
     if (categoryId) {
-      const result = await loadCategoryProducts(categoryId, pageNum);
+      const result = await loadCategoryProducts(categoryId, pageNum, selectedLanguage, selectedCurrency);
       setTotalPages(result.pagination.totalPages);
       return result;
     }
-  }, [categoryId, pageNum]);
+  }, [categoryId, pageNum, selectedLanguage, selectedCurrency]);
 
   return { products, totalPages };
 }

src/LanguageDropdown.scss

@@ -0,0 +1,62 @@
+@import './theme/common';
+
+.languagedropdown {
+  $block: &;
+
+  position: relative;
+
+  #{$block}__selectorbtn {
+    padding: 5px 5px;
+    cursor: pointer;
+
+    &:focus {
+      box-shadow: 0 0 0px 2px $btnFocusOutlineColor;
+    }
+  }
+
+  #{$block}__dropdown {
+    position: absolute;
+    border-radius: 5px;
+    box-shadow: 0 0 10px hsla(0, 0, 0, 0.2);
+    width: 150px;
+    right: 0;
+    top: 100%;
+    background-color: white;
+    padding: 5px 0;
+    z-index: 10;
+
+    #{$block}__section {
+      padding: 5px 0;
+      border-bottom: 1px solid hsl(0, 0, 95%);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      #{$block}__title {
+        padding: 5px 12px;
+        font-size: smaller;
+        font-weight: bold;
+      }
+
+      #{$block}__itembtn {
+        display: block;
+        width: 100%;
+        padding: 5px 12px;
+        cursor: pointer;
+
+        &:focus {
+          box-shadow: 0 0 0px 2px $btnFocusOutlineColor inset;
+        }
+
+        &:hover:not(:disabled) {
+          background-color: hsl(0, 0, 95%);
+        }
+
+        &:disabled {
+          color: hsl(0, 0, 80%);
+        }
+      }
+    }
+  }
+}

src/LanguageDropdown.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import useOnclickOutside from 'react-cool-onclickoutside';
+import { useTranslation, useCurrency } from './app-state';
+
+import './LanguageDropdown.scss';
+
+const languages = [
+  { key: 'en', name: 'english' },
+  { key: 'fr', name: 'french' },
+];
+
+export const LanguageDropdown: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t, selectedLanguage, setLanguage } = useTranslation();
+  const { allCurrencies, selectedCurrency, setCurrency } = useCurrency();
+
+  const selectedLangName = languages.find(l => l.key === selectedLanguage)!.name;
+
+  const handleSelectorClicked = () => {
+    setIsOpen(true);
+  };
+
+  const ref = useOnclickOutside(() => {
+    setIsOpen(false);
+  });
+
+  const handleLanguageSelected = (lang: string) => {
+    setLanguage(lang);
+    setIsOpen(false);
+  }
+
+  const handleCurrencySelected = (currency: string) => {
+    setCurrency(currency);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="languagedropdown">
+      <button className="languagedropdown__selectorbtn" onClick={handleSelectorClicked}>
+        {`${t(selectedLangName)}/${selectedCurrency}`}
+      </button>
+      {isOpen && (
+        <div ref={ref} className="languagedropdown__dropdown">
+          <div className="languagedropdown__section">
+            <div className="languagedropdown__title">
+              {t('language')}
+            </div>
+            {languages.map(l => (
+              <button
+                key={l.key}
+                className="languagedropdown__itembtn"
+                disabled={selectedLanguage === l.key}
+                onClick={() => handleLanguageSelected(l.key)}
+              >
+                {t(l.name)}
+              </button>
+            ))}
+          </div>
+          <div className="languagedropdown__section">
+            <div className="languagedropdown__title">
+              Currency
+            </div>
+            {allCurrencies.map(c => (
+              <button
+                key={c.id}
+                className="languagedropdown__itembtn"
+                disabled={selectedCurrency === c.code}
+                onClick={() => handleCurrencySelected(c.code)}
+              >
+                {c.code}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/Product.tsx

@@ -3,10 +3,10 @@ import { useParams } from 'react-router-dom';
 import { useResolve } from './hooks';
 import { loadProductBySlug } from './service';
 import { CompareCheck } from './CompareCheck';
-import { useTranslation } from './app-state';
+import { ProductMainImage } from './ProductMainImage';
+import { useTranslation, useCurrency } from './app-state';
 
 import './Product.scss';
-import { ProductMainImage } from './ProductMainImage';
 
 
 interface ProductParams {
@@ -16,7 +16,11 @@ interface ProductParams {
 export const Product: React.FC = () => {
   const { productSlug } = useParams<ProductParams>();
   const { t, selectedLanguage } = useTranslation();
-  const [product] = useResolve(async () => loadProductBySlug(productSlug, selectedLanguage), [productSlug, selectedLanguage]);
+  const { selectedCurrency } = useCurrency();
+  const [product] = useResolve(
+    async () => loadProductBySlug(productSlug, selectedLanguage, selectedCurrency),
+    [productSlug, selectedLanguage, selectedCurrency]
+  );
 
   return (
     <div className="product">

src/app-state.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import constate from 'constate';
 import { Category, loadCategoryTree, Product } from './service';
+import * as service from './service';
 import { config } from './config';
 
 import en from './locales/en.json';
@@ -11,7 +12,7 @@ const translations: { [lang: string]: { [name: string]: string } } = {
   fr,
 };
 
-const fallbackLanguage = 'en';
+const defaultLanguage = 'en';
 
 function getInitialLanguage(): string {
   const savedLanguage = localStorage.getItem('selectedLanguage');
@@ -44,7 +45,7 @@ function getInitialLanguage(): string {
     }
   }
 
-  return fallbackLanguage;
+  return defaultLanguage;
 }
 
 function checkTranslations() {
@@ -101,6 +102,48 @@ function useTranslationState() {
   };
 }
 
+const defaultCurrency = 'USD';
+
+function useCurrencyState() {
+  const [allCurrencies, setAllCurrencies] = useState<service.Currency[]>([]);
+  // Set previously saved or defautlt currency before fetching the list of supported ones
+  const [selectedCurrency, setSelectedCurrency] = useState(localStorage.getItem('selectedCurrency') ?? defaultCurrency);
+
+  const setCurrency = (newCurrency: string) => {
+    localStorage.setItem('selectedCurrency', newCurrency);
+    setSelectedCurrency(newCurrency);
+  };
+
+  useEffect(() => {
+    // Only fetch currencies once
+    if (allCurrencies.length > 0) {
+      return;
+    }
+
+    service.loadEnabledCurrencies().then(currencies => {
+      // Check if we need to update selectedCurrency
+      const selected = currencies.find(c => c.code === selectedCurrency);
+
+      if (!selected) {
+        // Saved or default currency we initially selected was not found in the list of server currencies
+        // Switch selectedCurrency to server default one if exist or first one in the list
+        setSelectedCurrency(currencies.find(c => c.default)?.code ?? currencies[0].code);
+
+        // Clear selection in local storage
+        localStorage.removeItem('selectedCurrency');
+      }
+
+      setAllCurrencies(currencies);
+    });
+  }, [allCurrencies.length, selectedCurrency]);
+
+  return {
+    allCurrencies,
+    selectedCurrency,
+    setCurrency,
+  }
+}
+
 function getCategoryPaths(categories: Category[]): { [categoryId: string]: Category[] } {
   const lastCat = categories[categories.length - 1];
 
@@ -177,9 +220,11 @@ function useCompareProductsState() {
 
 function useGlobalState() {
   const translation = useTranslationState();
+  const currency = useCurrencyState();
 
   return {
     translation,
+    currency,
     categories: useCategoriesState(translation.selectedLanguage),
     compareProducts: useCompareProductsState(),
   };
@@ -188,11 +233,13 @@ function useGlobalState() {
 export const [
   AppStateProvider,
   useTranslation,
+  useCurrency,
   useCategories,
   useCompareProducts,
 ] = constate(
   useGlobalState,
   value => value.translation,
+  value => value.currency,
   value => value.categories,
   value => value.compareProducts
 );

src/index.scss

@@ -24,8 +24,6 @@ body {
   height: 100%;
 }
 
-$btnColor: hsl(190, 70%, 34%);
-
 .epbtn {
   position: relative;
   text-align: center;
@@ -62,7 +60,7 @@ $btnColor: hsl(190, 70%, 34%);
   }
 
   &:focus {
-    box-shadow: 0 0 0px 2px change-color($color: $btnColor, $saturation: 35%, $lightness: 75%);
+    box-shadow: 0 0 0px 2px btnFocusOutlineColor;
   }
 
   &:active {