@akinon/projectzero 2.0.153-rc.4 → 2.0.154-beta.0

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

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

@@ -1,217 +0,0 @@
-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/product-offers.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
-import { Link, Price } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-import { Product } from '@akinon/next/types';
-
-const INITIAL_OFFER_COUNT = 2;
-
-interface ProductOffersProps {
-  offers?: Product[];
-  productPk?: Product['pk'];
-}
-
-export const ProductOffers: React.FC<ProductOffersProps> = ({
-  offers,
-  productPk
-}) => {
-  const { t } = useLocalization();
-  const [showAll, setShowAll] = useState(false);
-  const revealedOfferRef = useRef<HTMLDivElement>(null);
-
-  // See all unmounts itself on click, so hand the focus to the first offer it
-  // revealed instead of dropping it on the document.
-  useEffect(() => {
-    if (showAll) {
-      revealedOfferRef.current?.focus();
-    }
-  }, [showAll]);
-
-  // The product on screen can itself be one of the offers (a seller's own
-  // product), and it is not another seller of the product.
-  const otherOffers = offers?.filter((offer) => offer.pk !== productPk) ?? [];
-
-  if (!otherOffers.length) {
-    return null;
-  }
-
-  const displayedOffers = showAll
-    ? otherOffers
-    : otherOffers.slice(0, INITIAL_OFFER_COUNT);
-
-  return (
-    <div className="w-full mb-8" data-testid="product-offers">
-      <div className="w-full text-left text-sm pb-1 mb-2">
-        {t('product.offers.title')}
-      </div>
-
-      <div className="w-full border p-4">
-        <div>
-          {displayedOffers.map((offer, index) => {
-            const sellerName =
-              offer.data_source?.title || offer.data_source?.name;
-            const starGrade = parseFloat(offer.attributes?.erp_star_grade);
-            const isFirstRevealed = index === INITIAL_OFFER_COUNT;
-
-            return (
-              <div
-                key={offer.pk}
-                ref={isFirstRevealed ? revealedOfferRef : undefined}
-                tabIndex={isFirstRevealed ? -1 : undefined}
-                className="mb-2 pb-2 border-b last:mb-0 last:pb-0 last:border-none"
-                data-testid="product-offer"
-              >
-                <div className="flex items-center gap-1 mb-1">
-                  {/* Commerce builds the offer url with the seller_id and the
-                      variant, so it opens that seller's own product. */}
-                  {sellerName && (
-                    <Link
-                      href={offer.absolute_url}
-                      className="text-sm text-[#1f6bc1] font-medium hover:underline"
-                    >
-                      {sellerName}
-                    </Link>
-                  )}
-
-                  {Number.isFinite(starGrade) && (
-                    <div
-                      className="text-[10px] px-1 bg-[#08b449] text-white flex items-center justify-center rounded"
-                      data-testid="offer-star-grade"
-                    >
-                      {starGrade.toFixed(1)}
-                    </div>
-                  )}
-                </div>
-
-                {offer.name && (
-                  <div className="text-sm mb-1 text-gray-800">{offer.name}</div>
-                )}
-
-                <div className="flex items-center gap-2">
-                  {offer.price && (
-                    <Price className="font-bold" value={offer.price} />
-                  )}
-
-                  <span
-                    className={clsx(
-                      'ml-auto text-xs',
-                      offer.in_stock ? 'text-success' : 'text-error'
-                    )}
-                  >
-                    {offer.in_stock
-                      ? t('product.offers.in_stock')
-                      : t('product.offers.out_of_stock')}
-                  </span>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-
-        {!showAll && otherOffers.length > INITIAL_OFFER_COUNT && (
-          <button
-            type="button"
-            className="w-full mt-2 text-center text-sm cursor-pointer hover:underline"
-            onClick={() => setShowAll(true)}
-          >
-            {t('product.offers.see_all')}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};

package/app-template/src/views/product/rate-review.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { ProductPageProps } from './layout';
-
-export default function ProductRateReview({
-  data
-}: Pick<ProductPageProps, 'data'>) {
-  return (
-    <PluginModule
-      component={Component.ProductRateReview}
-      props={{
-        product: {
-          sku: data.product.sku,
-          base_code: data.product.base_code
-        },
-        classNames: { root: 'w-full mt-8' }
-      }}
-    />
-  );
-}