@akinon/projectzero 2.0.153 → 2.0.154-rc.5

package/app-template/src/utils/sanitize.ts

@@ -0,0 +1,167 @@
+// Helpers for rendering third-party (e.g. seller-entered) content.
+
+const ALLOWED_TAGS = [
+  'b',
+  'strong',
+  'i',
+  'em',
+  'u',
+  'br',
+  'p',
+  'ul',
+  'ol',
+  'li',
+  'h2',
+  'h3',
+  'h4'
+];
+
+const VOID_TAGS = ['br'];
+
+const ESCAPED_CHARACTERS: Record<string, string> = {
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;'
+};
+
+const DROPPED_ELEMENTS = /<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
+
+// `&` is escaped only when it does not already start a character reference,
+// so entities written by an editor (&amp;, &nbsp;, &#351;) keep rendering.
+const BARE_AMPERSAND = /&(?!(?:#\d{1,7}|#x[\da-f]{1,6}|[a-z][a-z\d]{1,31});)/gi;
+
+const ESCAPED_TAG = /&lt;(\/?)([a-z][a-z\d]*)(?:\s[\s\S]*?)?(\/?)&gt;/gi;
+
+// Everything is escaped first; then only the allowed tags are turned back into
+// markup, without any attribute, and balanced so nothing leaks past the
+// container. Other tags are removed and their text is kept.
+export const toSafeHtml = (value?: string) => {
+  if (!value) {
+    return '';
+  }
+
+  const openTags: string[] = [];
+  const escaped = value
+    .replace(DROPPED_ELEMENTS, '')
+    .replace(BARE_AMPERSAND, '&amp;')
+    .replace(/[<>"']/g, (character) => ESCAPED_CHARACTERS[character]);
+
+  const html = escaped.replace(
+    ESCAPED_TAG,
+    (_match, closing: string, name: string, selfClosing: string) => {
+      const tag = name.toLowerCase();
+
+      if (!ALLOWED_TAGS.includes(tag)) {
+        return '';
+      }
+
+      if (VOID_TAGS.includes(tag)) {
+        return closing ? '' : `<${tag}>`;
+      }
+
+      if (selfClosing) {
+        return '';
+      }
+
+      if (!closing) {
+        openTags.push(tag);
+        return `<${tag}>`;
+      }
+
+      const index = openTags.lastIndexOf(tag);
+
+      if (index === -1) {
+        return '';
+      }
+
+      return openTags
+        .splice(index)
+        .reverse()
+        .map((openTag) => `</${openTag}>`)
+        .join('');
+    }
+  );
+
+  return (
+    html +
+    openTags
+      .reverse()
+      .map((openTag) => `</${openTag}>`)
+      .join('')
+  );
+};
+
+const TEXT_ENTITIES: Record<string, string> = {
+  '&nbsp;': ' ',
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'"
+};
+
+export const toPlainText = (value?: string) =>
+  (value ?? '')
+    .replace(DROPPED_ELEMENTS, ' ')
+    .replace(/<[^>]*>/g, ' ')
+    .replace(
+      /&(?:nbsp|amp|lt|gt|quot|#39);/gi,
+      (entity) => TEXT_ENTITIES[entity.toLowerCase()]
+    )
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const SAFE_COLOR =
+  /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\(\s*[\d.%]+(?:\s*[,/\s]\s*[\d.%]+){2,3}\s*\)|[a-z]{3,20})$/i;
+
+// Inline styles are not escaped by React beyond HTML entities, so a value
+// like `red;position:fixed` would add declarations; only plain colors pass.
+export const toSafeColor = (value: string | undefined, fallback: string) => {
+  const color = value?.trim();
+
+  return color && SAFE_COLOR.test(color) ? color : fallback;
+};
+
+const EXTERNAL_LINK_REL = 'nofollow ugc noopener noreferrer';
+
+const getHost = (url?: string) => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return '';
+  }
+};
+
+// Site-relative paths and same-site urls are kept as is; other http(s) urls
+// open in a new tab without passing link equity; anything else is dropped.
+export const getSafeLinkProps = (
+  href?: string,
+  siteUrl: string = process.env.NEXT_PUBLIC_URL
+): { href: string; target?: string; rel?: string } | null => {
+  const value = href?.trim();
+
+  if (!value) {
+    return null;
+  }
+
+  if (/^\/(?![/\\])/.test(value)) {
+    return { href: value };
+  }
+
+  if (!/^https?:\/\//i.test(value)) {
+    return null;
+  }
+
+  const host = getHost(value);
+
+  if (!host) {
+    return null;
+  }
+
+  if (host === getHost(siteUrl)) {
+    return { href: value };
+  }
+
+  return { href: value, target: '_blank', rel: EXTERNAL_LINK_REL };
+};

package/app-template/src/views/category/category-info.tsx

@@ -7,10 +7,12 @@ import { CategoryHeader } from './category-header';
 import { Filters } from './filters';
 import { Pagination } from '@theme/components';
 import { ProductItem } from '@theme/views/product-item';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { GetCategoryResponse } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
+import { FavouriteProductIdsProvider } from '@theme/hooks/favourite-product-ids-context';
 import { useLocalization } from '@akinon/next/hooks';
 import { Link, LoaderSpinner } from '@akinon/next/components';
 import { ROUTES } from '@theme/routes';
@@ -62,6 +64,11 @@ export default function ListPage(props: ListPageProps) {
 
   const { t } = useLocalization();
 
+  const productPks = useMemo(
+    () => data?.products?.map((product) => product.pk) ?? [],
+    [data?.products]
+  );
+
   useEffect(() => {
     dispatch(setFacets(data.facets));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -105,23 +112,30 @@ export default function ListPage(props: ListPageProps) {
 
             {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
-            <div
-              className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
-                'md:grid-cols-3': layoutSize === 3,
-                'lg:grid-cols-2': layoutSize === 2,
-                'lg:grid-cols-3': layoutSize === 3
-              })}
-            >
-              {data?.products?.map((product, index) => (
-                <ProductItem
-                  key={product.pk}
-                  product={product}
-                  width={itemDimensions.width}
-                  height={itemDimensions.height}
-                  index={index}
-                />
-              ))}
-            </div>
+            <FavouriteProductIdsProvider productIds={productPks}>
+              <div
+                className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
+                  'md:grid-cols-3': layoutSize === 3,
+                  'lg:grid-cols-2': layoutSize === 2,
+                  'lg:grid-cols-3': layoutSize === 3
+                })}
+              >
+                <PluginModule
+                  component={Component.RateReviewPlpProvider}
+                  props={{ products: data?.products ?? [] }}
+                >
+                  {data?.products?.map((product, index) => (
+                    <ProductItem
+                      key={product.pk}
+                      product={product}
+                      width={itemDimensions.width}
+                      height={itemDimensions.height}
+                      index={index}
+                    />
+                  ))}
+                </PluginModule>
+              </div>
+            </FavouriteProductIdsProvider>
             {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}

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

@@ -0,0 +1,173 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Header } from '../header';
+
+const mockPush = jest.fn();
+
+jest.mock('@akinon/next/hooks', () => ({
+  useLocalization: () => ({ t: (key: string) => key }),
+  useRouter: () => ({ push: mockPush })
+}));
+
+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/components` resolves to this module; jest keys mocks by resolved path.
+jest.mock('../../../components', () => ({
+  Button: ({ children, ...props }) => <button {...props}>{children}</button>,
+  Icon: ({ name }) => <i data-icon={name} />,
+  Link: ({ children, href, ...props }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  )
+}));
+
+const dataSource = {
+  pk: 17,
+  name: 'ayse-ticaret',
+  slug: 'ayse-ticaret',
+  title: 'Ayşe Ticaret'
+};
+
+const header = {
+  value: {
+    logo_link: '/ayse-ticaret/',
+    menu_1_title: 'Yeni Gelenler',
+    menu_1_link: '/yeni-gelenler/',
+    menu_2_title: 'İndirim',
+    menu_2_link: '',
+    search_placeholder: 'Ayşe Ticaret’te ara',
+    follow_button_title: 'Takip Et',
+    follow_button_background: '#ff0000',
+    follow_button_title_color: '#000000'
+  },
+  kwargs: {
+    value: {
+      logo: { url: 'https://cdn.example.com/logo.png' }
+    }
+  }
+};
+
+describe('Data source page header', () => {
+  beforeEach(() => {
+    mockPush.mockClear();
+  });
+
+  it('renders the store logo as the page heading with its link', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toContainElement(screen.getByAltText('Ayşe Ticaret'));
+    expect(screen.getByAltText('Ayşe Ticaret').closest('a')).toHaveAttribute(
+      'href',
+      '/ayse-ticaret/'
+    );
+  });
+
+  it('renders only the menu items that have a usable link', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    expect(screen.getByText('Yeni Gelenler')).toHaveAttribute(
+      'href',
+      '/yeni-gelenler/'
+    );
+    expect(screen.queryByText('İndirim')).not.toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(1);
+  });
+
+  it('applies valid follow button colors and drops unsafe ones', () => {
+    const { rerender } = render(
+      <Header data={header} dataSource={dataSource} />
+    );
+
+    expect(screen.getByText('Takip Et')).toHaveStyle({
+      backgroundColor: '#ff0000',
+      color: '#000000'
+    });
+
+    rerender(
+      <Header
+        data={{
+          ...header,
+          value: {
+            ...header.value,
+            follow_button_background: 'red;position:fixed;inset:0',
+            follow_button_title_color: 'url(https://tracker.example/p.gif)'
+          }
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    expect(screen.getByText('Takip Et')).toHaveStyle({
+      backgroundColor: '#000000',
+      color: '#ffffff'
+    });
+    expect(screen.getByText('Takip Et').getAttribute('style')).not.toMatch(
+      /position|url\(/
+    );
+  });
+
+  it('falls back to the store name and the default placeholder', () => {
+    render(<Header data={{ value: {} }} dataSource={dataSource} />);
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Ayşe Ticaret' })
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Takip Et')).not.toBeInTheDocument();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('searchbox', {
+        name: 'common.data_source_page.search_placeholder'
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the logo without a link when the link is unusable', () => {
+    render(
+      <Header
+        data={{
+          ...header,
+          value: { ...header.value, logo_link: 'javascript:alert(1)' }
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    expect(screen.getByAltText('Ayşe Ticaret').closest('a')).toBeNull();
+  });
+
+  it('searches inside the store with an encoded query', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    fireEvent.change(
+      screen.getByRole('searchbox', { name: 'Ayşe Ticaret’te ara' }),
+      { target: { value: '  kırmızı elbise & ceket ' } }
+    );
+    fireEvent.submit(screen.getByRole('search'));
+
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list/?search_text=k%C4%B1rm%C4%B1z%C4%B1+elbise+%26+ceket&seller_ids=17'
+    );
+  });
+
+  it('lists all store products for a blank query', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    fireEvent.change(screen.getByTestId('data-source-page-search-input'), {
+      target: { value: '   ' }
+    });
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'common.data_source_page.search_button'
+      })
+    );
+
+    expect(mockPush).toHaveBeenCalledWith('/list/?seller_ids=17');
+  });
+});

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

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

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