Merge pull request #11 from aXenDeveloper/change_marketplace_ips

Change marketplace IPS to invisionize

.vscode/settings.json

@@ -5,6 +5,7 @@
     "commitlint",
     "datetime",
     "fluentui",
+    "invisionize",
     "overscan",
     "stylelint",
     "Swipeable",

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}`
     }
   };
 }

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} />;
 }

app/[locale]/(main)/products/[id]/page.tsx

@@ -2,7 +2,8 @@ import { getTranslator } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
 import { ProductView } from '@/views/products/[id]/ProductView';
-import { dataProducts } from '@/views/products/dataProducts';
+import { productsData } from '@/views/products/productsData';
+import { CONFIG, ExchangeRateToUSD } from '@/config';
 
 interface Props {
   params: {
@@ -14,7 +15,7 @@ interface Props {
 export async function generateMetadata({ params: { id, locale } }: Props) {
   const t = await getTranslator(locale, 'nav');
 
-  const findProduct = dataProducts.find(product => product.id === id);
+  const findProduct = productsData.find(product => product.id === id);
 
   if (findProduct) {
     return {
@@ -27,12 +28,23 @@ export async function generateMetadata({ params: { id, locale } }: Props) {
   };
 }
 
-export default function Page({ params: { id } }: Props) {
-  const findProduct = dataProducts.find(product => product.id === id);
+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} />
+  );
 }

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} />;
 }

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
         }
       ]
     }

assets/faq/transfer_products_from_ips_marketplace/transfer_products_from_ips_marketplace-en.mdx

@@ -0,0 +1,9 @@
+# Transfer products from IPS Marketplace to Invisionize
+
+As you know IPS Marketplace is closing October 30, 2023 ([You can read more here](https://invisioncommunity.com/news/invision-community/marketplace-closure-r1283/)) and I am moving all products to [Invisionize](https://forum.invisionize.pl/).
+
+## How to transfer license of my products?
+
+1. Sign up on [Invisionize](https://forum.invisionize.pl/),
+2. Sand me a PM on [IPS Community](https://invisioncommunity.com/messenger/compose/?to=580858) with your [Invisionize](https://forum.invisionize.pl/) username and which products you want to transfer,
+3. Wait for my answer. I will transfer your purchases to your account.

assets/faq/transfer_products_from_ips_marketplace/transfer_products_from_ips_marketplace-pl.mdx

@@ -0,0 +1,9 @@
+# Przenoszenie produktów z IPS Marketplace do Invisionize
+
+Jak już wiesz IPS Marketplace zamyka się 30 Października 2023r. ([Więcej możesz przeczytać tutaj](https://invisioncommunity.com/news/invision-community/marketplace-closure-r1283/)) i przenoszę wszystkie produkty do [Invisionize](https://forum.invisionize.pl/).
+
+## Jak przenieść licencję moich produktów?
+
+1. Zarejestruj się na [Invisionize](https://forum.invisionize.pl/),
+2. Wyślij mi wiadomość na [IPS Community](https://invisioncommunity.com/messenger/compose/?to=580858) z nazwą użytkownika na [Invisionize](https://forum.invisionize.pl/) oraz które produkty chcesz przenieść,
+3. Poczekaj na odpowiedź. Ja przeniosę Twoje zakupy na Twoje konto.

components/button/Button.test.tsx

@@ -3,6 +3,8 @@ import { expect, describe, it } from 'vitest';
 
 import { Button } from './Button';
 
+import { RootMock } from '../../__mocks__/RootMock';
+
 describe('Button', () => {
   it('renders children', () => {
     const { getByText } = render(<Button id="test">Hello World</Button>);
@@ -19,7 +21,8 @@ describe('Button', () => {
     const { getByTestId } = render(
       <Button id="test" href="/foo">
         Click me
-      </Button>
+      </Button>,
+      { wrapper: RootMock }
     );
     const button = getByTestId('button_test');
     expect(button.tagName).toBe('A');

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>
 

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>
 

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');

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;
+}

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}",
@@ -139,7 +141,8 @@
     "pages": {
       "global": {
         "welcome": "Welcome",
-        "technology": "Technology & Tools"
+        "technology": "Technology & Tools",
+        "transfer_products_from_ips_marketplace": "Transfer products from IPS Marketplace"
       },
       "collaboration": {
         "title": "Collaboration",

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}",
@@ -139,7 +141,8 @@
     "pages": {
       "global": {
         "welcome": "Witaj",
-        "technology": "Technologie i narzędzia"
+        "technology": "Technologie i narzędzia",
+        "transfer_products_from_ips_marketplace": "Przenoszenie produktów z IPS Marketplace"
       },
       "collaboration": {
         "title": "Współpraca",