Feat/footer about page

package.json

@@ -35,6 +35,7 @@
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.56.2",
     "react-router": "^7.1.1",
     "yet-another-react-lightbox": "^3.23.2",

src/App.tsx

@@ -6,6 +6,7 @@ import { CustomerProvider } from './context/provider/customer-provider';
 import { ToastContextProvider } from './context/toast-provider';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router';
+import { ErrorBoundary } from 'react-error-boundary';
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
@@ -29,14 +30,16 @@ export function App() {
   }, [pathname]);
 
   return (
-    <ToastContextProvider>
-      <QueryClientProvider client={queryClient}>
-        <CustomerProvider>
-          <ThemeAppProvider theme={responseTheme}>
-            <AppRouter />
-          </ThemeAppProvider>
-        </CustomerProvider>
-      </QueryClientProvider>
-    </ToastContextProvider>
+    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
+      <ToastContextProvider>
+        <QueryClientProvider client={queryClient}>
+          <CustomerProvider>
+            <ThemeAppProvider theme={responseTheme}>
+              <AppRouter />
+            </ThemeAppProvider>
+          </CustomerProvider>
+        </QueryClientProvider>
+      </ToastContextProvider>
+    </ErrorBoundary>
   );
 }

src/api/cart.ts

@@ -1,5 +1,5 @@
 import { getRequestToken } from '@/utils/request-token-handler';
-import { fetchFromApi } from './platformApi';
+import { fetchFromApi } from './platform-api';
 import type { Cart, CartUpdateAction } from '@commercetools/platform-sdk';
 
 export const getCartWithoutToken = async () => {

src/api/catalog.ts

@@ -1,4 +1,4 @@
-import { fetchFromApi } from '@/api/platformApi';
+import { fetchFromApi } from '@/api/platform-api';
 import { getRequestToken } from '@/utils/request-token-handler';
 import type {
   Category,

src/api/clientAuth.test.ts → src/api/client-auth.test.ts

@@ -1,8 +1,8 @@
-import { loginCustomer } from './clientAuth';
-import { fetchFromApi, getCustomerToken } from '@/api/platformApi';
+import { loginCustomer } from './client-auth';
+import { fetchFromApi, getCustomerToken } from '@/api/platform-api';
 import { getRequestToken } from '@/utils/request-token-handler';
 
-vi.mock('@/api/platformApi', () => ({
+vi.mock('@/api/platform-api', () => ({
   fetchFromApi: vi.fn(),
   getCustomerToken: vi.fn(),
 }));
@@ -11,7 +11,7 @@ vi.mock('@/utils/request-token-handler', () => ({
   getRequestToken: vi.fn(),
 }));
 
-vi.mock('@/utils/mapApiErrorToMessage', () => ({
+vi.mock('@/utils/map-api-error-to-message', () => ({
   mapApiErrorToMessage: vi.fn(),
 }));
 

src/api/clientAuth.ts → src/api/client-auth.ts

@@ -1,7 +1,7 @@
 import type { Address, CustomerDraft, CustomerSignInResult } from '@commercetools/platform-sdk';
 import type { ErrorResponse } from '@commercetools/platform-sdk';
-import { getCustomerToken, fetchFromApi } from '@/api/platformApi';
-import { mapApiErrorToMessage } from '@/utils/mapApiErrorToMessage';
+import { getCustomerToken, fetchFromApi } from '@/api/platform-api';
+import { mapApiErrorToMessage } from '@/utils/map-api-error-to-message';
 import { getRequestToken } from '@/utils/request-token-handler';
 
 export type RegisterCustomerOptions = {

src/api/promo.ts

@@ -1,9 +1,8 @@
 import { getRequestToken } from '@/utils/request-token-handler';
-import { fetchFromApi } from './platformApi';
+import { fetchFromApi } from './platform-api';
 import type {
   CartDiscountPagedQueryResponse,
   CartUpdateAction,
-  DiscountCode,
   DiscountCodePagedQueryResponse,
 } from '@commercetools/platform-sdk';
 import { updateCart } from './cart';
@@ -15,11 +14,6 @@ export const getCardDiscounts = async () => {
   return result.results;
 };
 
-export const getDiscountCodeByKey = async (key: string) => {
-  const token = await getRequestToken();
-  return await fetchFromApi<DiscountCode>(`/discount-codes/key=${key}`, token);
-};
-
 export const getDiscountCodes = async () => {
   const token = await getRequestToken();
   const result = await fetchFromApi<DiscountCodePagedQueryResponse>(`/discount-codes`, token);

src/api/update-customer.ts

@@ -1,5 +1,5 @@
 import type { Customer, MyCustomerUpdateAction } from '@commercetools/platform-sdk';
-import { fetchFromApi } from './platformApi';
+import { fetchFromApi } from './platform-api';
 
 export const updateCustomer = async (token: string, body: { version: number; actions: MyCustomerUpdateAction[] }) => {
   return await fetchFromApi<Customer>('/me', token, {

src/components/addresses-block/address-form/address-form.tsx

@@ -66,7 +66,7 @@ export function AddressBlockForm({
       queryClient.setQueryData(['customer', token], data);
     },
     onError: (err) => {
-      showToast({ message: err.message, isError: true });
+      showToast({ message: err.message, severity: 'error' });
     },
   });
 

src/components/addresses-block/address-list/address-list.tsx

@@ -31,7 +31,7 @@ export function AddressList({ addresses, type, defaultAddressId, handleUpdateAdd
       showToast({ message: SUCCESS_MESSAGES.DELETE_ADDRESS });
     },
     onError: (err) => {
-      showToast({ message: err.message, isError: true });
+      showToast({ message: err.message, severity: 'error' });
     },
   });
 

src/components/cart-card/cart-card.tsx

@@ -10,7 +10,7 @@ import styles from './cart-card.module.scss';
 import { useNavigate } from 'react-router';
 import { ROUTES } from '@/router/routes';
 import { useMutation } from '@tanstack/react-query';
-import { removeProductFromCart } from '@/api/removeProductFromCart';
+import { removeProductFromCart } from '@/api/remove-product-from-cart';
 import { useCart } from '@/context/cart-context';
 import { useToast } from '@/context/toast-provider';
 import { SUCCESS_MESSAGES } from '@/utils/constants/messages';
@@ -38,7 +38,7 @@ export function CartRow({ product }: CartRowProps) {
       showToast({ message: SUCCESS_MESSAGES.REMOVE_PRODUCT });
     },
     onError: (err) => {
-      showToast({ message: err.message, isError: true });
+      showToast({ message: err.message, severity: 'error' });
     },
   });
 

src/components/footer/footer.module.scss

@@ -0,0 +1,50 @@
+@use '../../styles/mixins' as *;
+
+.footer {
+  position: sticky;
+  bottom: 0;
+
+  margin-top: -20px;
+  padding: var(--spacing-10) var(--spacing-4);
+
+  background: linear-gradient(to bottom, var(--mui-palette-grey-900), var(--mui-palette-background-default));
+}
+
+.footer-content {
+  text-align: center;
+
+  @include flex(column, var(--spacing-4), $justify: center);
+
+  & h3 {
+    margin-bottom: var(--spacing-2);
+  }
+}
+
+.link-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1) var(--spacing-3);
+  justify-content: center;
+
+  & a {
+    font-size: 0.9rem;
+    color: var(--mui-palette-primary-main);
+    text-decoration: none;
+
+    @include transition;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+
+  & svg {
+    width: 0.8em;
+    margin-right: var(--spacing-1);
+  }
+}

src/components/footer/footer.tsx

@@ -0,0 +1,32 @@
+import Typography from '@mui/material/Typography';
+import { teamMembers } from '@/utils/constants/ui';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import styles from './footer.module.scss';
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerContent}>
+        <div>
+          <Typography variant="h5" component="h3">
+            Contact Us
+          </Typography>
+
+          <div className={styles.linkWrapper}>
+            {teamMembers.map((member) => (
+              <Typography key={member.name} component="a" href={member.github} className={styles.link} target="_blank">
+                <GitHubIcon />
+                {member.name}
+              </Typography>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <Typography>Non-commercial project built for educational purposes.</Typography>
+          <Typography>2025 Frontend First</Typography>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/form-wrapper/form-wrapper.module.scss

@@ -0,0 +1,35 @@
+@use '../../styles/mixins' as *;
+
+.page {
+  width: 100%;
+  padding: var(--spacing-5) var(--spacing-1) var(--spacing-10);
+}
+
+.background {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+
+  width: 110%;
+  border-radius: 0 0 var(--border-radius-3) var(--border-radius-3);
+
+  background-image: url('/images/login-bg.webp');
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: left;
+  background-size: cover;
+}
+
+.form-wrapper {
+  width: 100%;
+  max-width: 500px;
+  margin: auto;
+  padding: var(--spacing-7);
+  border-radius: var(--spacing-1);
+
+  background-color: var(--pallet-color-dark);
+
+  & h6 {
+    text-align: center;
+  }
+}

src/components/form-wrapper/form-wrapper.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import styles from './form-wrapper.module.scss';
+
+type FormWrapperProps = {
+  children: ReactNode;
+};
+
+export function FormWrapper({ children }: FormWrapperProps) {
+  return (
+    <div className={styles.page}>
+      <div className={styles.formWrapper}>{children}</div>
+      <div className={styles.background}></div>
+    </div>
+  );
+}