@akinon/projectzero 2.0.152-rc.0 → 2.0.152-rc.2

package/app-template/src/views/data-source-page/__tests__/sections.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react';
+import { Banner } from '../banner';
+import { Stories } from '../stories';
+import { Products } from '../products';
+import { Footer } from '../footer';
+
+jest.mock('@akinon/next/components/image', () => ({
+  Image: ({ alt, src }: { alt: string; src: string }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} src={src} />
+  )
+}));
+
+// `@theme/*` modules resolve to these paths; jest keys mocks by resolved path.
+jest.mock('../../../components', () => ({
+  Link: ({ children, href, ...props }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  )
+}));
+
+jest.mock('../../product-item', () => ({
+  ProductItem: ({ product }) => (
+    <div data-testid="product-item">{product.name}</div>
+  )
+}));
+
+describe('Data source page sections', () => {
+  it('renders the banner only when it has an image', () => {
+    const { container } = render(<Banner data={{ value: { title: 'x' } }} />);
+
+    expect(container).toBeEmptyDOMElement();
+
+    render(
+      <Banner
+        data={{
+          value: { title: 'Kış Koleksiyonu', subtitle: 'Yeni sezon' },
+          kwargs: { value: { image: { url: 'https://cdn.example.com/b.jpg' } } }
+        }}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: 'Kış Koleksiyonu' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('Yeni sezon')).toBeInTheDocument();
+  });
+
+  it('renders each story as a single link', () => {
+    const { container } = render(
+      <Stories data={[{ value: { link: '/x/' } }]} />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+
+    render(
+      <Stories
+        storeName="Ayşe Ticaret"
+        data={[
+          {
+            value: { title: 'Elbise', link: '/elbise/' },
+            kwargs: {
+              value: { image: { url: 'https://cdn.example.com/s.jpg' } }
+            }
+          },
+          {
+            value: { link: '/ceket/' },
+            kwargs: {
+              value: { image: { url: 'https://cdn.example.com/c.jpg' } }
+            }
+          },
+          { value: { title: 'Ayakkabı', link: 'javascript:alert(1)' } }
+        ]}
+      />
+    );
+
+    expect(screen.getAllByRole('link')).toHaveLength(2);
+    expect(screen.getByRole('link', { name: 'Elbise' })).toHaveAttribute(
+      'href',
+      '/elbise/'
+    );
+    expect(screen.getByRole('link', { name: 'Ayşe Ticaret' })).toHaveAttribute(
+      'href',
+      '/ceket/'
+    );
+    expect(screen.getByText('Ayakkabı').closest('a')).toBeNull();
+  });
+
+  it('renders the collection products and a link to all store products', () => {
+    const { container } = render(
+      <Products data={{ products: [] }} allProductsText="Tümü" />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+
+    render(
+      <Products
+        data={{
+          attributes: { title: { value: 'Mağazanın Ürünleri' } },
+          products: [{ pk: 1, name: 'Ceket' } as never]
+        }}
+        dataSourcePk={17}
+        allProductsText="Mağazanın tüm ürünleri"
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { name: 'Mağazanın Ürünleri' })
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('product-item')).toHaveTextContent('Ceket');
+    expect(
+      screen.getByRole('link', { name: 'Mağazanın tüm ürünleri' })
+    ).toHaveAttribute('href', '/list/?seller_ids=17');
+  });
+
+  it('renders the footer with seller html made safe', () => {
+    const { container: empty } = render(<Footer data={{ value: {} }} />);
+
+    expect(empty).toBeEmptyDOMElement();
+
+    const { container } = render(
+      <Footer
+        data={{
+          value: {
+            title: 'Ayşe Ticaret Hakkında',
+            description:
+              '<p>Kargo &amp; İade <strong>garantisi</strong><img src=x onerror=alert(1)><b>bedava'
+          }
+        }}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: 'Ayşe Ticaret Hakkında' })
+    ).toBeInTheDocument();
+    expect(container.querySelector('strong')).toHaveTextContent('garantisi');
+    expect(container).toHaveTextContent('Kargo & İade garantisi');
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.innerHTML).not.toContain('onerror');
+    expect(container.querySelector('b')).toHaveTextContent('bedava');
+  });
+});

package/app-template/src/views/data-source-page/banner.tsx

@@ -0,0 +1,45 @@
+import { Image } from '@akinon/next/components/image';
+import { DataSourcePageData } from '@theme/types';
+
+export const Banner = ({ data }: { data?: DataSourcePageData['banner'] }) => {
+  const image = data?.kwargs?.value?.image?.url;
+  const mobileImage = data?.kwargs?.value?.mobile_image?.url;
+  const title = data?.value?.title;
+  const subtitle = data?.value?.subtitle;
+
+  if (!image && !mobileImage) {
+    return null;
+  }
+
+  return (
+    <div className="relative" data-testid="data-source-page-banner">
+      <Image
+        src={mobileImage ?? image}
+        alt=""
+        aspectRatio={375 / 540}
+        sizes="100vw"
+        fill
+        className="block sm:hidden"
+      />
+      <Image
+        src={image ?? mobileImage}
+        alt=""
+        aspectRatio={1540 / 540}
+        sizes="100vw"
+        fill
+        className="hidden sm:block"
+      />
+
+      {(title || subtitle) && (
+        <div className="absolute inset-0 px-4 lg:px-0 lg:pl-[15%]">
+          <div className="h-full flex flex-col justify-center items-center gap-4 text-center lg:max-w-xs">
+            {title && (
+              <h2 className="text-white text-5xl font-light">{title}</h2>
+            )}
+            {subtitle && <p className="text-white text-sm">{subtitle}</p>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/app-template/src/views/data-source-page/footer.tsx

@@ -0,0 +1,27 @@
+import { DataSourcePageData } from '@theme/types';
+import { toSafeHtml } from '@theme/utils/sanitize';
+
+export const Footer = ({ data }: { data?: DataSourcePageData['footer'] }) => {
+  const title = data?.value?.title;
+  const description = data?.value?.description;
+
+  if (!title && !description) {
+    return null;
+  }
+
+  return (
+    <div className="container border-t">
+      <div className="p-4 lg:px-32 2xl:px-64">
+        {title && (
+          <h2 className="text-3xl font-light border-b pb-4 mb-4">{title}</h2>
+        )}
+        {description && (
+          <div
+            className="text-xs [&_ul]:list-disc [&_ul]:ps-5 [&_ol]:list-decimal [&_ol]:ps-5 [&_p+p]:mt-2 [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold"
+            dangerouslySetInnerHTML={{ __html: toSafeHtml(description) }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/app-template/src/views/data-source-page/header.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { FormEvent, ReactNode, useState } from 'react';
+import { Image } from '@akinon/next/components/image';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
+import { DataSourcePage } from '@akinon/next/types';
+import { Button, Icon, Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import { DataSourcePageData } from '@theme/types';
+import { getSafeLinkProps, toSafeColor } from '@theme/utils/sanitize';
+
+type Props = {
+  data?: DataSourcePageData['header'];
+  dataSource: DataSourcePage['data_source'];
+};
+
+export const Header = ({ data, dataSource }: Props) => {
+  const { t } = useLocalization();
+  const router = useRouter();
+  const [searchText, setSearchText] = useState('');
+
+  const value = data?.value;
+  const logo = data?.kwargs?.value?.logo?.url;
+  const logoLink = getSafeLinkProps(value?.logo_link);
+  const storeName = dataSource?.title || dataSource?.name;
+  const searchPlaceholder =
+    value?.search_placeholder ||
+    t('common.data_source_page.search_placeholder');
+  const menuItems = [
+    { title: value?.menu_1_title, link: getSafeLinkProps(value?.menu_1_link) },
+    { title: value?.menu_2_title, link: getSafeLinkProps(value?.menu_2_link) }
+  ].filter((item) => item.title && item.link);
+
+  const searchInStore = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!dataSource?.pk) {
+      return;
+    }
+
+    const text = searchText.trim();
+    const params = new URLSearchParams({
+      ...(text && { search_text: text }),
+      seller_ids: String(dataSource.pk)
+    });
+
+    router.push(`${ROUTES.LIST}/?${params.toString()}`);
+  };
+
+  const logoContent: ReactNode = (
+    <>
+      <Image
+        src={logo}
+        alt={storeName ?? ''}
+        aspectRatio={285 / 27}
+        sizes="(min-width: 640px) 320px, 160px"
+        crop="none"
+        imageClassName="object-contain"
+        fill
+      />
+      <Icon name="home" size={25} className="text-primary" aria-hidden="true" />
+    </>
+  );
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-4 py-5 px-4 border-b lg:px-20 lg:py-6">
+      <h1 className="order-1 lg:order-none">
+        {logo ? (
+          logoLink ? (
+            <Link
+              {...logoLink}
+              className="flex items-center gap-2 w-40 sm:w-80"
+            >
+              {logoContent}
+            </Link>
+          ) : (
+            <div className="flex items-center gap-2 w-40 sm:w-80">
+              {logoContent}
+            </div>
+          )
+        ) : (
+          <span className="text-xl font-medium">{storeName}</span>
+        )}
+      </h1>
+
+      {menuItems.length > 0 && (
+        <ul className="order-3 w-full flex flex-wrap items-center gap-4 md:gap-8 lg:order-none lg:w-auto lg:ml-auto lg:gap-14">
+          {menuItems.map((item, index) => (
+            <li key={`data-source-menu__${index}`}>
+              <Link {...item.link}>{item.title}</Link>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <form
+        role="search"
+        aria-label={t('common.data_source_page.search_button')}
+        onSubmit={searchInStore}
+        className="order-4 w-full flex items-center justify-between border rounded focus-within:border-primary lg:order-none lg:ml-auto lg:w-56"
+      >
+        <input
+          type="search"
+          name="search_text"
+          enterKeyHint="search"
+          value={searchText}
+          onChange={(event) => setSearchText(event.target.value)}
+          placeholder={searchPlaceholder}
+          aria-label={searchPlaceholder}
+          className="w-full flex-1 h-10 px-2 text-xs border-none outline-none bg-transparent"
+          data-testid="data-source-page-search-input"
+        />
+        <button
+          type="submit"
+          aria-label={t('common.data_source_page.search_button')}
+          className="px-2"
+        >
+          <Icon name="search" size={20} aria-hidden="true" />
+        </button>
+      </form>
+
+      {value?.follow_button_title && (
+        <Button
+          type="button"
+          appearance="ghost"
+          className="order-2 rounded border-none font-medium lg:order-none"
+          style={{
+            backgroundColor: toSafeColor(
+              value.follow_button_background,
+              '#000000'
+            ),
+            color: toSafeColor(value.follow_button_title_color, '#ffffff')
+          }}
+        >
+          {value.follow_button_title}
+        </Button>
+      )}
+    </div>
+  );
+};

package/app-template/src/views/data-source-page/layout.tsx

@@ -0,0 +1,45 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+import { DataSourcePage } from '@akinon/next/types';
+import { t } from '@akinon/next/utils/server-translation';
+import {
+  DataSourcePageData,
+  DataSourceProductRecommendation
+} from '@theme/types';
+
+import { Banner } from './banner';
+import { Header } from './header';
+import { Stories } from './stories';
+import { Products } from './products';
+import { Footer } from './footer';
+
+export default async function DataSourcePageLayout({
+  data
+}: {
+  data: DataSourcePage;
+}) {
+  const [pageData, productCollectionData] = await Promise.all([
+    getWidgetData<DataSourcePageData>({ slug: data.widget }),
+    getWidgetData<DataSourceProductRecommendation>({
+      slug: data.product_collection_widget
+    })
+  ]);
+
+  const attributes = pageData?.attributes;
+  const storeName = data.data_source?.title || data.data_source?.name;
+
+  return (
+    <>
+      <Banner data={attributes?.banner} />
+      <Header data={attributes?.header} dataSource={data.data_source} />
+      <Stories data={attributes?.stories} storeName={storeName} />
+      <Products
+        data={productCollectionData}
+        dataSourcePk={data.data_source?.pk}
+        allProductsText={t('common.data_source_page.all_products')}
+      />
+      <Footer data={attributes?.footer} />
+    </>
+  );
+}

package/app-template/src/views/data-source-page/products.tsx

@@ -0,0 +1,55 @@
+import { WidgetResultType } from '@akinon/next/types';
+import { Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import { DataSourceProductRecommendation } from '@theme/types';
+import { ProductItem } from '@theme/views/product-item';
+
+type Props = {
+  data?: WidgetResultType<DataSourceProductRecommendation>;
+  dataSourcePk?: number;
+  allProductsText: string;
+};
+
+export const Products = ({ data, dataSourcePk, allProductsText }: Props) => {
+  const products = data?.products ?? [];
+  const title = data?.attributes?.title?.value;
+
+  if (!products.length && !dataSourcePk) {
+    return null;
+  }
+
+  return (
+    <section className="container px-4 my-8">
+      {products.length > 0 && (
+        <>
+          {title && (
+            <h2 className="text-2xl text-secondary font-light mb-4">{title}</h2>
+          )}
+
+          <div className="grid grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-3 lg:grid-cols-4">
+            {products.map((product, index) => (
+              <ProductItem
+                key={product.pk}
+                product={product}
+                width={272}
+                height={416}
+                index={index}
+              />
+            ))}
+          </div>
+        </>
+      )}
+
+      {dataSourcePk && (
+        <div className="flex justify-center mt-8">
+          <Link
+            href={`${ROUTES.LIST}/?seller_ids=${dataSourcePk}`}
+            className="text-sm font-medium underline"
+          >
+            {allProductsText}
+          </Link>
+        </div>
+      )}
+    </section>
+  );
+};

package/app-template/src/views/data-source-page/stories.tsx

@@ -0,0 +1,70 @@
+import { Image } from '@akinon/next/components/image';
+import { Link } from '@theme/components';
+import { DataSourcePageStory } from '@theme/types';
+import { getSafeLinkProps } from '@theme/utils/sanitize';
+
+type Props = {
+  data?: DataSourcePageStory[];
+  storeName?: string;
+};
+
+export const Stories = ({ data, storeName }: Props) => {
+  const stories = data?.filter(
+    (story) => story?.kwargs?.value?.image?.url || story?.value?.title
+  );
+
+  if (!stories?.length) {
+    return null;
+  }
+
+  return (
+    <div className="container">
+      <ul className="flex items-center gap-8 py-9 overflow-x-auto lg:flex-wrap lg:justify-center">
+        {stories.map((story, index) => {
+          const title = story.value?.title;
+          const image = story.kwargs?.value?.image?.url;
+          const link = getSafeLinkProps(story.value?.link);
+          const content = (
+            <>
+              {image && (
+                <Image
+                  src={image}
+                  alt=""
+                  aspectRatio={1}
+                  sizes="(max-width: 768px) 112px, 144px"
+                  className="mb-2"
+                  imageClassName="rounded-full"
+                  fill
+                />
+              )}
+              {title && (
+                <span className="block text-center underline text-sm font-medium">
+                  {title}
+                </span>
+              )}
+            </>
+          );
+
+          return (
+            <li
+              className="flex-shrink-0 first:ms-4 w-28 md:w-36"
+              key={`data-source-story__${index}`}
+            >
+              {link ? (
+                <Link
+                  {...link}
+                  className="block"
+                  aria-label={title ? undefined : storeName}
+                >
+                  {content}
+                </Link>
+              ) : (
+                content
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};