@akinon/projectzero 2.0.152 → 2.0.153-rc.4

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

package/app-template/src/views/header/search/index.tsx

@@ -4,8 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeSearch } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
-
-import { Icon } from '@theme/components';
+import { Icon, Input } from '@theme/components';
 import Results from './results';
 import { ROUTES } from '@theme/routes';
 import { useLocalization, useRouter } from '@akinon/next/hooks';
@@ -42,6 +41,14 @@ export default function Search() {
     };
   }, [isSearchOpen, dispatch]);
 
+  const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value);
+  };
+
+  const handleCloseSearch = () => {
+    dispatch(closeSearch());
+  };
+
   return (
     <>
       <div
@@ -67,9 +74,9 @@ export default function Search() {
               {t('common.search.results_for')}
             </span>
             <div className="flex items-center">
-              <input
+              <Input
                 value={searchText}
-                onChange={(e) => setSearchText(e.target.value)}
+                onChange={handleSearchTextChange}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && searchText.trim() !== '') {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
@@ -91,11 +98,12 @@ export default function Search() {
               <Icon
                 name="close"
                 size={14}
-                onClick={() => dispatch(closeSearch())}
+                onClick={handleCloseSearch}
                 className="cursor-pointer"
               />
             </div>
           </div>
+
           <Results searchText={searchText} />
         </div>
       </div>

package/app-template/src/views/product/__tests__/product-offers.test.tsx

@@ -0,0 +1,217 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { Product } from '@akinon/next/types';
+import { ProductOffers } from '../product-offers';
+
+// Same module the component imports as `@theme/components` — jest keys mocks
+// by resolved path, and the `@theme/*` alias is not resolvable from a test
+// file. Stubbing it also keeps the suite off the storefront settings that the
+// real components pull in.
+jest.mock('../../../components', () => {
+  const React = require('react');
+
+  return {
+    Link: ({ href, children, ...rest }) =>
+      React.createElement('a', { href, ...rest }, children),
+    Price: ({ value }) =>
+      React.createElement('span', { 'data-testid': 'offer-price' }, value)
+  };
+});
+
+jest.mock('@akinon/next/hooks', () => ({
+  useLocalization: () => ({ t: (key: string) => key })
+}));
+
+const buildOffer = (overrides: Partial<Product> = {}) =>
+  ({
+    pk: 5897,
+    name: 'Test-product-offer',
+    price: '4000',
+    in_stock: true,
+    attributes: {},
+    data_source: { pk: 1, name: 'datasource-1', title: 'Market-1' },
+    absolute_url: '/galaxy-tab-a8-wifi/?seller_id=1',
+    ...overrides
+  } as Product);
+
+describe('ProductOffers', () => {
+  it('renders nothing when the product has no offers', () => {
+    const { container, rerender } = render(<ProductOffers />);
+
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(<ProductOffers offers={[]} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows the seller, price and stock of every offer', () => {
+    render(
+      <ProductOffers
+        offers={[
+          buildOffer(),
+          buildOffer({
+            pk: 5883,
+            name: 'Product-Offer 2 for galaxy-tab-a8',
+            price: '3004',
+            in_stock: false,
+            data_source: { pk: 2, name: 'datasource-2', title: 'Market-2' }
+          })
+        ]}
+      />
+    );
+
+    const [first, second] = screen.getAllByTestId('product-offer');
+
+    expect(screen.getByText('product.offers.title')).toBeInTheDocument();
+    expect(first).toHaveTextContent('Market-1');
+    expect(first).toHaveTextContent('Test-product-offer');
+    expect(first).toHaveTextContent('4000');
+    expect(first).toHaveTextContent('product.offers.in_stock');
+    expect(second).toHaveTextContent('Market-2');
+    expect(second).toHaveTextContent('3004');
+    expect(second).toHaveTextContent('product.offers.out_of_stock');
+  });
+
+  it('falls back to the data source name when it has no title', () => {
+    render(
+      <ProductOffers
+        offers={[
+          buildOffer({
+            data_source: { pk: 8, name: 'datasource-tester-3', title: null }
+          })
+        ]}
+      />
+    );
+
+    expect(
+      screen.getByRole('link', { name: 'datasource-tester-3' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders an offer without a data source without a seller link', () => {
+    render(
+      <ProductOffers offers={[buildOffer({ price: '0', data_source: null })]} />
+    );
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByTestId('product-offer')).toHaveTextContent(
+      'Test-product-offer'
+    );
+    expect(screen.getByTestId('offer-price')).toHaveTextContent('0');
+  });
+
+  it('links every offer to its own url, which carries the seller_id', () => {
+    render(
+      <ProductOffers
+        offers={[
+          buildOffer({
+            pk: 5897,
+            absolute_url: '/black-akn11111/?seller_id=1&size=M&color=Black'
+          }),
+          buildOffer({
+            pk: 5881,
+            absolute_url: '/black-akn11111/?seller_id=1&size=L&color=Black'
+          })
+        ]}
+      />
+    );
+
+    const [first, second] = screen.getAllByRole('link', { name: 'Market-1' });
+
+    expect(first).toHaveAttribute(
+      'href',
+      '/black-akn11111/?seller_id=1&size=M&color=Black'
+    );
+    expect(second).toHaveAttribute(
+      'href',
+      '/black-akn11111/?seller_id=1&size=L&color=Black'
+    );
+  });
+
+  it('leaves out the offer that is the product on screen', () => {
+    render(
+      <ProductOffers
+        productPk={5881}
+        offers={[
+          buildOffer({ pk: 5897, name: 'Test-product-offer' }),
+          buildOffer({ pk: 5881, name: 'Product-Offer for galaxy-tab-a8' }),
+          buildOffer({ pk: 5883, name: 'Product-Offer 2 for galaxy-tab-a8' })
+        ]}
+      />
+    );
+
+    const offers = screen.getAllByTestId('product-offer');
+
+    expect(offers).toHaveLength(2);
+    expect(offers[0]).toHaveTextContent('Test-product-offer');
+    expect(offers[1]).toHaveTextContent('Product-Offer 2 for galaxy-tab-a8');
+    expect(
+      screen.queryByRole('button', { name: 'product.offers.see_all' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when the product on screen is its only offer', () => {
+    const { container } = render(
+      <ProductOffers productPk={436} offers={[buildOffer({ pk: 436 })]} />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows the first two offers until see all is clicked', () => {
+    render(
+      <ProductOffers
+        offers={[
+          buildOffer({ pk: 1 }),
+          buildOffer({ pk: 2 }),
+          buildOffer({ pk: 3 })
+        ]}
+      />
+    );
+
+    expect(screen.getAllByTestId('product-offer')).toHaveLength(2);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'product.offers.see_all' })
+    );
+
+    const offers = screen.getAllByTestId('product-offer');
+
+    expect(offers).toHaveLength(3);
+    expect(offers[2]).toHaveFocus();
+    expect(
+      screen.queryByRole('button', { name: 'product.offers.see_all' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('does not offer see all when every offer is already shown', () => {
+    render(
+      <ProductOffers offers={[buildOffer({ pk: 1 }), buildOffer({ pk: 2 })]} />
+    );
+
+    expect(screen.getAllByTestId('product-offer')).toHaveLength(2);
+    expect(
+      screen.queryByRole('button', { name: 'product.offers.see_all' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows the seller star grade only when it is numeric', () => {
+    render(
+      <ProductOffers
+        offers={[
+          buildOffer({ pk: 1, attributes: { erp_star_grade: '4.5' } }),
+          buildOffer({ pk: 2, attributes: { erp_star_grade: 'n/a' } })
+        ]}
+      />
+    );
+
+    const [graded, ungraded] = screen.getAllByTestId('product-offer');
+
+    expect(within(graded).getByTestId('offer-star-grade')).toHaveTextContent(
+      '4.5'
+    );
+    expect(
+      within(ungraded).queryByTestId('offer-star-grade')
+    ).not.toBeInTheDocument();
+  });
+});

package/app-template/src/views/product/index.ts

@@ -6,4 +6,5 @@ export { default as ProductGroupInfo } from './product-group-info';
 export { default as MiscButtons } from './misc-buttons';
 export { default as ProductInfoSlider } from './slider';
 export { default as AccordionWrapper } from './accordion-wrapper';
+export { default as ProductRateReview } from './rate-review';
 export { default as CombineProductCard } from './combine-product-card';

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

@@ -13,6 +13,7 @@ import { useStockAlert } from '../../hooks/use-stock-alert';
 import { ProductVariants } from './product-variants';
 import { ProductActions } from './product-actions';
 import { ProductShare } from './product-share';
+import { ProductOffers } from './product-offers';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 export default function ProductInfo({ data }: ProductPageProps) {
@@ -73,6 +74,17 @@ export default function ProductInfo({ data }: ProductPageProps) {
 
   return (
     <>
+      <PluginModule
+        component={Component.RateReviewBadge}
+        props={{
+          product: {
+            sku: data.product.sku,
+            base_code: data.product.base_code
+          },
+          classNames: { root: 'mt-2' }
+        }}
+      />
+
       <div
         className={clsx(
           'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
@@ -121,6 +133,8 @@ export default function ProductInfo({ data }: ProductPageProps) {
       />
 
       <ProductShare productName={data.product.name} className="my-2 sm:mb-4" />
+
+      <ProductOffers offers={data.offers} productPk={data.product.pk} />
     </>
   );
 }