786-feat: Add merch page

dev-data/hero-page.data.ts

@@ -1,4 +1,5 @@
 import coursesPageHeroImg from '@/shared/assets/mentor-with-his-students.webp';
+import welcome from '@/shared/assets/welcome.webp';
 
 export const heroPageData = {
   school: {
@@ -26,4 +27,11 @@ export const heroPageData = {
     subTitle: ['By teaching others, you learn yourself'],
     imageAltText: '',
   },
+  merch: {
+    mainTitle: 'Merch',
+    widgetTitle: 'Free assets for your design',
+    subTitle: [''],
+    heroImageSrc: welcome,
+    imageAltText: 'A sloth mascot with arms raised under a welcome sign',
+  },
 };

package.json

@@ -31,6 +31,7 @@
     "dayjs": "^1.11.13",
     "github-markdown-css": "^5.8.1",
     "http-status": "^2.1.0",
+    "jszip": "^3.10.1",
     "next": "15.3.1",
     "pagefind": "^1.3.0",
     "react": "19.1.0",

src/app/merch/page.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from 'next';
+
+import { Merch } from '@/views/merch/merch';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const title = 'Merch · The Rolling Scopes School';
+
+  return { title };
+}
+
+export default function MerchRoute() {
+  return <Merch />;
+}

src/core/api/app-api.ts

@@ -1,5 +1,6 @@
 import { CourseApi } from '@/entities/course/api/course-api';
 import { MentorApi } from '@/entities/mentor/api/mentor-api';
+import { MerchApi } from '@/entities/merch/api/merch-api';
 import { TrainerApi } from '@/entities/trainer/api/trainer-api';
 import { ApiBaseClass } from '@/shared/api/api-base-class';
 import { ApiServices } from '@/shared/types';
@@ -10,6 +11,7 @@ export class Api {
   public readonly trainer: TrainerApi;
   public readonly course: CourseApi;
   public readonly mentor: MentorApi;
+  public readonly merch: MerchApi;
 
   constructor(
     private readonly baseURI: string,
@@ -23,5 +25,6 @@ export class Api {
     this.trainer = new TrainerApi(this.services);
     this.course = new CourseApi(this.services);
     this.mentor = new MentorApi(this.services);
+    this.merch = new MerchApi(this.services);
   }
 }

src/core/styles/_constants.scss

@@ -82,6 +82,7 @@ $opacity-100: 1;
 $opacity-80: 0.8;
 $opacity-70: 0.7;
 $opacity-50: 0.5;
+$opacity-40: 0.4;
 $opacity-30: 0.3;
 $opacity-20: 0.2;
 $opacity-15: 0.15;

src/entities/merch/api/merch-api.ts

@@ -0,0 +1,10 @@
+import { MerchResponse } from '../types';
+import { ApiServices } from '@/shared/types';
+
+export class MerchApi {
+  constructor(private readonly services: ApiServices) {}
+
+  public queryMerchCatalog() {
+    return this.services.rest.get<MerchResponse>(`/merch/filelist.json`);
+  }
+}

src/entities/merch/helpers/download.ts

@@ -0,0 +1,45 @@
+import JSZip from 'jszip';
+
+function downloadFile(url: string, filename: string) {
+  const link = document.createElement('a');
+
+  link.href = url;
+  link.download = filename;
+  link.download = url.split('/').pop() || '';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+
+  downloadFile(url, filename);
+}
+
+async function createArchive(files: string[]): Promise<Blob> {
+  const zip = new JSZip();
+
+  await Promise.all(
+    files.map(async (url) => {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const filename = url.split('/').pop() || '';
+
+      zip.file(filename, blob);
+    }),
+  );
+
+  return zip.generateAsync({ type: 'blob' });
+}
+
+export async function downloadArchive(files: string[], filename: string) {
+  if (files.length === 1) {
+    downloadFile(files[0], filename);
+    return;
+  }
+
+  const archiveBlob = await createArchive(files);
+
+  downloadBlob(archiveBlob, `${filename}.zip`);
+}

src/entities/merch/helpers/transform-merch-catalog.ts

@@ -0,0 +1,36 @@
+import { ApiMerchItem, ApiMerchItemAdapt, MerchProduct, MerchResponse } from '../types';
+
+export const transformMerchCatalog = (data: MerchResponse): MerchProduct[] => {
+  const products: MerchProduct[] = [];
+  const baseUrl = process.env.API_BASE_URL;
+  let index = 0;
+  const processCategory = (category: ApiMerchItemAdapt, parentTags: string[]) => {
+    for (const [key, value] of Object.entries(category)) {
+      if (isApiMerchItem(value)) {
+        index += 1;
+        products.push({
+          id: index,
+          name: key,
+          title: value.name,
+          preview: value.preview.map((path) => `${baseUrl}/${path}`),
+          download: value.download.map((path) => `${baseUrl}/${path}`),
+          tags: parentTags,
+        });
+      } else {
+        processCategory(value, [...parentTags, key]);
+      }
+    }
+  };
+
+  for (const [categoryName, categoryData] of Object.entries(data)) {
+    processCategory(categoryData, [categoryName]);
+  }
+
+  return products;
+};
+
+const isApiMerchItem = (item: unknown): item is ApiMerchItem => {
+  return Boolean(
+    item && typeof item === 'object' && 'name' in item && 'preview' in item && 'download' in item,
+  );
+};

src/entities/merch/index.ts

@@ -0,0 +1,3 @@
+export type { MerchProduct } from './types';
+export { MerchCard } from './ui/merch-card/merch-card';
+export { merchStore } from './model/store';

src/entities/merch/model/store.ts

@@ -0,0 +1,16 @@
+import { transformMerchCatalog } from '../helpers/transform-merch-catalog';
+import { api } from '@/shared/api/api';
+
+class MerchStore {
+  public loadMerchCatalog = async () => {
+    const res = await api.merch.queryMerchCatalog();
+
+    if (res.isSuccess) {
+      return transformMerchCatalog(res.result);
+    }
+
+    throw new Error('Error while loading merch catalog.');
+  };
+}
+
+export const merchStore = new MerchStore();

src/entities/merch/types.ts

@@ -0,0 +1,27 @@
+export type ApiMerchItem = {
+  name: string;
+  preview: string[];
+  download: string[];
+};
+
+type ApiMerchCategory = {
+  [key: string]: ApiMerchItem;
+};
+
+type ApiMerchData = {
+  [category: string]: ApiMerchCategory;
+};
+
+export type ApiMerchItemAdapt = ApiMerchItem | ApiMerchCategory | ApiMerchData;
+export type MerchResponse = {
+  [category: string]: ApiMerchData;
+};
+
+export type MerchProduct = {
+  id: number;
+  name: string;
+  title: string;
+  preview: string[];
+  download: string[];
+  tags: string[];
+};

src/entities/merch/ui/merch-card/merch-card.module.scss

@@ -0,0 +1,98 @@
+.merch-card {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  max-width: 320px;
+  height: 100%;
+  margin: 0 auto;
+  border-radius: 5px;
+
+  background-color: $color-white;
+  box-shadow: 0 4px 12px 0 hsla(from $color-black h s l / $opacity-10);
+
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow:
+      0 1px 5px hsla(from $color-black h s l / $opacity-40),
+      0 2px 8px -8px hsla(from $color-black h s l / $opacity-40);
+  }
+}
+
+.preview-wrap {
+  position: relative;
+  display: flex;
+  height: 180px;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      hsla(from $color-black h s l / $opacity-10) 100%
+    );
+  }
+}
+
+.info-wrap {
+  display: flex;
+  flex: 1 1;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 16px;
+}
+
+.preview {
+  object-fit: contain;
+}
+
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.download {
+  cursor: pointer;
+
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+
+  padding: 8px 10px;
+  border: none;
+  border-radius: 100%;
+
+  opacity: 0.8;
+  background-color: $color-yellow;
+  box-shadow: 0 4px 12px 0 hsla(from $color-black h s l / $opacity-10);
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.download-img {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  background-color: $color-yellow;
+}

src/entities/merch/ui/merch-card/merch-card.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { useState } from 'react';
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import { downloadArchive } from '../../helpers/download';
+import { MerchProduct } from '@/entities/merch/types';
+import downloadImg from '@/shared/assets/svg/download.svg';
+import { Paragraph } from '@/shared/ui/paragraph';
+
+import styles from './merch-card.module.scss';
+
+export const cx = classNames.bind(styles);
+
+export const MerchCard = ({ title, preview, download }: MerchProduct) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDownload = async () => {
+    if (isLoading) {
+      return;
+    }
+
+    setIsLoading(true);
+    await downloadArchive(download, `${title}.zip`);
+
+    setIsLoading(false);
+  };
+
+  return (
+    <article className={cx('merch-card')} data-testid="merch">
+      <figure className={cx('preview-wrap')}>
+        <div className={cx('image-container')}>
+          <Image
+            className={cx('preview')}
+            src={preview[0]}
+            alt={title}
+            fill
+            sizes="(max-width: 320px) 100vw, 320px"
+          />
+        </div>
+        <button onClick={handleDownload} className={cx('download')} disabled={isLoading}>
+          <Image src={downloadImg} alt="download link" className={cx('download-img')} />
+        </button>
+      </figure>
+      <div className={cx('info-wrap')}>
+        <Paragraph fontSize="medium">{title}</Paragraph>
+      </div>
+    </article>
+  );
+};