@akinon/projectzero 2.0.153-rc.4 → 2.0.153

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