@akinon/projectzero 2.0.153-rc.4 → 2.0.153

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

@@ -1,83 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { getWidgetData } from '@akinon/next/data/server';
-import DataSourcePageLayout from '../layout';
-
-jest.mock('server-only', () => ({}));
-
-jest.mock('@akinon/next/data/server', () => ({
-  getWidgetData: jest.fn()
-}));
-
-jest.mock('@akinon/next/utils/server-translation', () => ({
-  t: (key: string) => key
-}));
-
-jest.mock('../banner', () => ({
-  Banner: ({ data }) => <div data-testid="banner">{data?.value?.title}</div>
-}));
-jest.mock('../header', () => ({
-  Header: ({ dataSource }) => <div data-testid="header">{dataSource.pk}</div>
-}));
-jest.mock('../stories', () => ({
-  Stories: ({ data, storeName }) => (
-    <div data-testid="stories">
-      {data?.length} {storeName}
-    </div>
-  )
-}));
-jest.mock('../products', () => ({
-  Products: ({ data, dataSourcePk, allProductsText }) => (
-    <div data-testid="products">
-      {data?.products?.length} {dataSourcePk} {allProductsText}
-    </div>
-  )
-}));
-jest.mock('../footer', () => ({
-  Footer: ({ data }) => <div data-testid="footer">{data?.value?.title}</div>
-}));
-
-const mockGetWidgetData = getWidgetData as jest.Mock;
-
-const page = {
-  pk: 3,
-  data_source: {
-    pk: 17,
-    name: 'ayse-ticaret',
-    slug: 'ayse-ticaret',
-    title: 'Ayşe Ticaret'
-  },
-  widget: 'ayse-ticaret-0',
-  product_collection_widget: 'ayse-ticaret-collection',
-  is_active: true
-};
-
-describe('DataSourcePageLayout', () => {
-  it('composes the page from the landing page widgets', async () => {
-    mockGetWidgetData.mockImplementation(async ({ slug }) =>
-      slug === 'ayse-ticaret-0'
-        ? {
-            attributes: {
-              banner: { value: { title: 'Kış Koleksiyonu' } },
-              stories: [{ value: { title: 'a' } }, { value: { title: 'b' } }],
-              footer: { value: { title: 'Hakkında' } }
-            }
-          }
-        : { products: [{ pk: 1 }, { pk: 2 }, { pk: 3 }] }
-    );
-
-    render(await DataSourcePageLayout({ data: page }));
-
-    expect(mockGetWidgetData).toHaveBeenCalledTimes(2);
-    expect(mockGetWidgetData).toHaveBeenCalledWith({ slug: 'ayse-ticaret-0' });
-    expect(mockGetWidgetData).toHaveBeenCalledWith({
-      slug: 'ayse-ticaret-collection'
-    });
-    expect(screen.getByTestId('banner')).toHaveTextContent('Kış Koleksiyonu');
-    expect(screen.getByTestId('header')).toHaveTextContent('17');
-    expect(screen.getByTestId('stories')).toHaveTextContent('2 Ayşe Ticaret');
-    expect(screen.getByTestId('products')).toHaveTextContent(
-      '3 17 common.data_source_page.all_products'
-    );
-    expect(screen.getByTestId('footer')).toHaveTextContent('Hakkında');
-  });
-});

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

@@ -1,143 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,140 +0,0 @@
-'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

@@ -1,45 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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>
-  );
-};