feat: Add exchange rate from PLN to USD, update price products

aXenDeveloper · aXenDeveloper · commit c7c822cea5f7 · 2023-08-27T19:34:49.000+02:00
diff --git a/app/[locale]/(main)/faq/layout.tsx b/app/[locale]/(main)/faq/layout.tsx
@@ -3,8 +3,7 @@ import { getTranslator } from 'next-intl/server';
 import { Metadata } from 'next';
 
 import { WrapperFaq } from '@/views/faq/wrapper/WrapperFaq';
-
-import { CONFIG_TITLE } from '../../../../config';
+import { CONFIG } from '@/config';
 
 interface MetadataProps {
   params: {
@@ -18,7 +17,7 @@ export async function generateMetadata({ params: { locale } }: MetadataProps): P
   return {
     title: {
       default: t('faq'),
-      template: `%s - ${t('faq')} - ${CONFIG_TITLE}`
+      template: `%s - ${t('faq')} - ${CONFIG.title}`
     }
   };
 }
diff --git a/app/[locale]/(main)/products/(products)/page.tsx b/app/[locale]/(main)/products/(products)/page.tsx
@@ -1,6 +1,7 @@
 import { getTranslator } from 'next-intl/server';
 
 import { ProductsView } from '@/views/products/ProductsView';
+import { CONFIG, ExchangeRateToUSD } from '@/config';
 
 interface MetadataProps {
   params: {
@@ -16,6 +17,15 @@ export async function generateMetadata({ params: { locale } }: MetadataProps) {
   };
 }
 
-export default function Page() {
-  return <ProductsView />;
+const fetchExchangeRateToUSD = async (): Promise<ExchangeRateToUSD> => {
+  const current = await fetch(CONFIG.nbpAPI);
+
+  return current.json();
+};
+
+export default async function Page() {
+  const exchangeRateToUSD = await fetchExchangeRateToUSD();
+  const current = exchangeRateToUSD.rates;
+
+  return <ProductsView oneUSDtoPLN={current.length > 0 ? current[0].mid : undefined} />;
 }
diff --git a/app/[locale]/(main)/products/[id]/page.tsx b/app/[locale]/(main)/products/[id]/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
 
 import { ProductView } from '@/views/products/[id]/ProductView';
 import { productsData } from '@/views/products/productsData';
+import { CONFIG, ExchangeRateToUSD } from '@/config';
 
 interface Props {
   params: {
@@ -27,12 +28,23 @@ export async function generateMetadata({ params: { id, locale } }: Props) {
   };
 }
 
-export default function Page({ params: { id } }: Props) {
+const fetchExchangeRateToUSD = async (): Promise<ExchangeRateToUSD> => {
+  const current = await fetch(CONFIG.nbpAPI);
+
+  return current.json();
+};
+
+export default async function Page({ params: { id } }: Props) {
   const findProduct = productsData.find(product => product.id === id);
 
   if (!findProduct) {
     notFound();
   }
 
-  return <ProductView {...findProduct} />;
+  const exchangeRateToUSD = await fetchExchangeRateToUSD();
+  const current = exchangeRateToUSD.rates;
+
+  return (
+    <ProductView {...findProduct} oneUSDtoPLN={current.length > 0 ? current[0].mid : undefined} />
+  );
 }
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -1,5 +1,15 @@
 import { HomeView } from '@/views/home/HomeView';
+import { CONFIG, ExchangeRateToUSD } from '@/config';
 
-export default function Page() {
-  return <HomeView />;
+const fetchExchangeRateToUSD = async (): Promise<ExchangeRateToUSD> => {
+  const current = await fetch(CONFIG.nbpAPI);
+
+  return current.json();
+};
+
+export default async function Page() {
+  const exchangeRateToUSD = await fetchExchangeRateToUSD();
+  const current = exchangeRateToUSD.rates;
+
+  return <HomeView oneUSDtoPLN={current.length > 0 ? current[0].mid : undefined} />;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,16 +3,16 @@ import '@/styles/global.scss';
 import { Metadata } from 'next';
 import { Analytics } from '@vercel/analytics/react';
 
-import { CONFIG_TITLE } from '../config';
+import { CONFIG } from '../config';
 
 export function generateMetadata(): Metadata {
   const desc =
     "I'm Maciej Piotr Balcerzak and I'm working as Software Engineer with a passion for creating beautiful and user-friendly products. I have experience in front-end, back-end, testing and UX/UI design, but my primary experience is front-end. Also I'm contributor for Invision Community making themes and apps.";
 
   return {
     title: {
-      default: CONFIG_TITLE,
-      template: `%s - ${CONFIG_TITLE}`
+      default: CONFIG.title,
+      template: `%s - ${CONFIG.title}`
     },
     icons: {
       shortcut: '/icons/favicon.ico'
@@ -21,14 +21,14 @@ export function generateMetadata(): Metadata {
     themeColor: '#200706',
     metadataBase: new URL('https://axendev.net/'),
     openGraph: {
-      title: CONFIG_TITLE,
+      title: CONFIG.title,
       description: desc,
       images: [
         {
           url: '/icons/og.png',
           width: 1050,
           height: 350,
-          alt: CONFIG_TITLE
+          alt: CONFIG.title
         }
       ]
     }
diff --git a/components/layout/footer/Footer.tsx b/components/layout/footer/Footer.tsx
@@ -6,7 +6,7 @@ import style from './Footer.module.scss';
 import { Logo } from '@/assets/Logo';
 import { SocialFooter } from './socials/SocialsFooter';
 import { InfoFooter } from './info/InfoFooter';
-import { CONFIG_TITLE } from '@/config';
+import { CONFIG } from '@/config';
 
 export const Footer = () => {
   const t = useTranslations('global');
@@ -15,7 +15,7 @@ export const Footer = () => {
     <footer className={style.main}>
       <div className={cx('layout_wrapper', style.wrapper)}>
         <div className={style.logo}>
-          <Link href="/" aria-label={t('logo', { name: CONFIG_TITLE })}>
+          <Link href="/" aria-label={t('logo', { name: CONFIG.title })}>
             <Logo />
           </Link>
 
diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
@@ -6,7 +6,7 @@ import style from './Header.module.scss';
 import { Nav } from './nav/Nav';
 import { Drawer } from './drawer/Drawer';
 import { WrapperHeader } from './wrapper/WrapperHeader';
-import { CONFIG_TITLE } from '@/config';
+import { CONFIG } from '@/config';
 
 import { Switches } from '../../switches/Switches';
 
@@ -16,7 +16,7 @@ export const Header = () => {
   return (
     <WrapperHeader>
       <div className="layout_wrapper">
-        <Link href="/" className={style.logo} aria-label={t('logo', { name: CONFIG_TITLE })}>
+        <Link href="/" className={style.logo} aria-label={t('logo', { name: CONFIG.title })}>
           <Logo />
         </Link>
 
diff --git a/components/switches/theme/ThemeSwitch.tsx b/components/switches/theme/ThemeSwitch.tsx
@@ -13,7 +13,7 @@ import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import style from './ThemeSwitch.module.scss';
-import { CONFIG_LOCAL_STORAGE_THEME } from '@/config';
+import { CONFIG } from '@/config';
 
 import { Tooltip } from '../../tooltip/Tooltip';
 
@@ -28,7 +28,7 @@ export const ThemeSwitch = () => {
   const [theme, setTheme] = useState<ThemeType | null>(null);
 
   useEffect(() => {
-    const theme = localStorage.getItem(CONFIG_LOCAL_STORAGE_THEME);
+    const theme = localStorage.getItem(CONFIG.local_storage_theme);
 
     if (theme === ThemeType.light) {
       setTheme(ThemeType.light);
@@ -50,8 +50,8 @@ export const ThemeSwitch = () => {
       window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
     if (theme === ThemeType.system) {
-      localStorage.removeItem(`${CONFIG_LOCAL_STORAGE_THEME}_manual`);
-      localStorage.removeItem(CONFIG_LOCAL_STORAGE_THEME);
+      localStorage.removeItem(`${CONFIG.local_storage_theme}_manual`);
+      localStorage.removeItem(CONFIG.local_storage_theme);
 
       if (checkDark) {
         document.documentElement.setAttribute('theme', 'dark');
@@ -64,8 +64,8 @@ export const ThemeSwitch = () => {
       return;
     }
 
-    localStorage.setItem(`${CONFIG_LOCAL_STORAGE_THEME}_manual`, '1');
-    localStorage.setItem(CONFIG_LOCAL_STORAGE_THEME, theme);
+    localStorage.setItem(`${CONFIG.local_storage_theme}_manual`, '1');
+    localStorage.setItem(CONFIG.local_storage_theme, theme);
 
     if (theme === ThemeType.dark) {
       document.documentElement.setAttribute('theme', 'dark');
diff --git a/config.ts b/config.ts
@@ -1,3 +1,16 @@
-export const CONFIG_LOCAL_STORAGE_THEME = 'aXenDev_theme';
+export const CONFIG = {
+  nbpAPI: 'https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json',
+  title: 'aXenDev',
+  local_storage_theme: 'aXenDev_theme'
+};
 
-export const CONFIG_TITLE = 'aXenDev';
+export interface ExchangeRateToUSD {
+  code: string;
+  currency: string;
+  rates: {
+    effectiveDate: string;
+    mid: number;
+    no: string;
+  }[];
+  table: string;
+}
diff --git a/messages/en.json b/messages/en.json
@@ -76,6 +76,8 @@
   "products": {
     "title": "Products",
     "desc": "Explore my products and find the one that suits you best.",
+    "or": "or",
+    "price_calc_info": "The price is calculated based on the PLN => USD current exchange rate.",
     "back": "Back to Products",
     "free": "Free",
     "buy_now_on": "Buy Now on {name}",
diff --git a/messages/pl.json b/messages/pl.json
@@ -76,6 +76,8 @@
   "products": {
     "title": "Produkty",
     "desc": "Eksploruj moje produkty i znajdź ten, który najbardziej Ci odpowiada.",
+    "or": "lub",
+    "price_calc_info": "Cena jest przeliczana na bazie PLN => USD aktualnego kursu walut.",
     "back": "Wróć do projektów",
     "free": "Darmowe",
     "buy_now_on": "Kup teraz na {name}",
diff --git a/views/home/HomeView.tsx b/views/home/HomeView.tsx
@@ -6,10 +6,14 @@ import { AboutHomeSection } from './sections/about/AboutHomeSection';
 import { TechnologiesHomeSection } from './sections/technology/TechnologiesHomeSection';
 import { FaqHomeSection } from './sections/faq/FaqHomeSection';
 
-export const HomeView = () => (
+interface Props {
+  oneUSDtoPLN: number | undefined;
+}
+
+export const HomeView = ({ oneUSDtoPLN }: Props) => (
   <div className={style.wrapper}>
     <MainHomeSection />
-    <LastProductsHomeSection />
+    <LastProductsHomeSection oneUSDtoPLN={oneUSDtoPLN} />
     <AboutHomeSection />
     <TechnologiesHomeSection />
     <FaqHomeSection />
diff --git a/views/home/sections/lastProducts/LastProductsHomeSection.tsx b/views/home/sections/lastProducts/LastProductsHomeSection.tsx
@@ -6,7 +6,11 @@ import { Button } from '@/components/button/Button';
 import { CategoriesProductEnum, productsData } from '../../../products/productsData';
 import { ItemProducts } from '../../../products/item/ItemProducts';
 
-export const LastProductsHomeSection = () => {
+interface Props {
+  oneUSDtoPLN: number | undefined;
+}
+
+export const LastProductsHomeSection = ({ oneUSDtoPLN }: Props) => {
   const t = useTranslations('home');
 
   return (
@@ -24,7 +28,7 @@ export const LastProductsHomeSection = () => {
           .sort((a, b) => b.createdAt - a.createdAt)
           .slice(0, 4)
           .map(item => (
-            <ItemProducts key={item.id} {...item} single />
+            <ItemProducts key={item.id} {...item} oneUSDtoPLN={oneUSDtoPLN} single />
           ))}
       </div>
     </section>
diff --git a/views/products/ProductsView.tsx b/views/products/ProductsView.tsx
@@ -8,7 +8,11 @@ import style from './ProductsView.module.scss';
 import { CategoriesProductEnum, productsData } from './productsData';
 import { ItemProducts } from './item/ItemProducts';
 
-export const ProductsView = () => {
+interface Props {
+  oneUSDtoPLN: number | undefined;
+}
+
+export const ProductsView = ({ oneUSDtoPLN }: Props) => {
   const searchParams = useSearchParams();
   const filters = searchParams.getAll('filter');
 
@@ -36,7 +40,7 @@ export const ProductsView = () => {
       className={style.wrapper}
       data={data}
       overscan={200}
-      itemContent={(_index, item) => <ItemProducts {...item} />}
+      itemContent={(_index, item) => <ItemProducts {...item} oneUSDtoPLN={oneUSDtoPLN} />}
     />
   );
 };
diff --git a/views/products/[id]/details/DetailsProduct.module.scss b/views/products/[id]/details/DetailsProduct.module.scss
@@ -16,8 +16,24 @@
       font-weight: 600;
     }
 
-    > p {
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: flex-end;
+
+      width: 50%;
+
       text-align: right;
+
+      > p {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        justify-content: flex-end;
+
+        font-size: 1rem;
+      }
     }
   }
 }
diff --git a/views/products/[id]/details/DetailsProduct.tsx b/views/products/[id]/details/DetailsProduct.tsx
@@ -8,10 +8,27 @@ import { ProductsInterface } from '../../productsData';
 export const DetailsProduct = ({
   categories,
   createdAt,
+  oneUSDtoPLN,
   price
 }: Omit<ProductsInterface, 'images' | 'links'>) => {
   const t = useTranslations('products');
 
+  const convertPrice = () => {
+    if (!price) return <span className={style.highlight}>{t('free')}</span>;
+
+    return (
+      <>
+        <span className={style.highlight}>{price} PLN</span>
+        {oneUSDtoPLN && (
+          <>
+            <span>{t('or')}</span>
+            <span className={style.highlight}>${(price / oneUSDtoPLN).toFixed(2)}</span>
+          </>
+        )}
+      </>
+    );
+  };
+
   return (
     <ul className={style.wrapper}>
       <li>
@@ -22,7 +39,10 @@ export const DetailsProduct = ({
       </li>
       <li>
         <span>{t('details.price')}</span>
-        <p className={style.highlight}>{price !== 0 ? <>${price}</> : t('free')}</p>
+        <div>
+          <p>{convertPrice()}</p>
+          {price > 0 && <span>{t('price_calc_info')}</span>}
+        </div>
       </li>
       <li>
         <span>{t('details.release_date')}</span>
diff --git a/views/products/item/ItemProducts.module.scss b/views/products/item/ItemProducts.module.scss
@@ -101,9 +101,14 @@
     font-weight: 500;
 
     &:first-child {
+      display: flex;
+      gap: 0.25rem;
       font-size: 1rem;
-      font-weight: 500;
-      color: rgb(var(--price));
     }
   }
 }
+
+.highlight {
+  font-weight: 500;
+  color: rgb(var(--category));
+}
diff --git a/views/products/item/ItemProducts.tsx b/views/products/item/ItemProducts.tsx
diff --git a/views/products/productsData.ts b/views/products/productsData.ts
