@akinon/projectzero 2.0.152-rc.0 → 2.0.152-rc.2

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

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

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

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

package/app-template/src/views/product-item/index.tsx

@@ -10,6 +10,7 @@ import useFavButton from '../../hooks/use-fav-button';
 import { Product } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
 import { Price, Link } from '@theme/components';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 interface Props {
   product: Product;
@@ -81,6 +82,10 @@ export const ProductItem = (props: Props) => {
         >
           {product_name}
         </Link>
+        <PluginModule
+          component={Component.RateReviewPlpBadge}
+          props={{ product }}
+        />
         <div className="font-semibold">
           {parseFloat(retail_price) > parseFloat(price) && (
             <Price

package/app-template/tsconfig.json

@@ -24,6 +24,9 @@
       ],
       "@flat-page/*": [
         "./app/[pz]/flat-page/*"
+      ],
+      "@data-source-landing-page/*": [
+        "./app/[pz]/data-source-landing-page/*"
       ]
     },
     "allowSyntheticDefaultImports": true,

package/commands/plugins.ts

@@ -180,6 +180,10 @@ export default async () => {
       name: 'Virtual Try-On',
       value: 'pz-virtual-try-on'
     },
+    {
+      name: 'Rate & Review',
+      value: 'pz-rate-review'
+    },
     {
       name: 'Masterpass Rest',
       value: 'pz-masterpass-rest'

package/dist/commands/plugins.js

@@ -199,6 +199,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             name: 'Virtual Try-On',
             value: 'pz-virtual-try-on'
         },
+        {
+            name: 'Rate & Review',
+            value: 'pz-rate-review'
+        },
         {
             name: 'Masterpass Rest',
             value: 'pz-masterpass-rest'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.152-rc.0",
+  "version": "2.0.152-rc.2",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {