@akinon/projectzero 2.0.152 → 2.0.153-rc.4

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/slider.tsx

@@ -36,53 +36,100 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
     carouselRef.current?.next();
   };
 
-  const handleThumbnailClick = (index) => {
+  const handleThumbnailClick = (index: number) => {
     setActiveIndex(index);
     carouselRef.current?.goToSlide(index);
   };
 
   return (
-    <div className="lg:grid lg:grid-cols-6">
-      <div className="lg:col-span-1">
-        <div className="flex flex-col items-center justify-center md:mr-[6px]">
-          <button
-            onClick={goToPrev}
-            className={twMerge(
-              'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-              [activeIndex === 0 && 'cursor-not-allowed opacity-45']
-            )}
-            disabled={activeIndex === 0}
+    <>
+      <div className="lg:grid lg:grid-cols-6">
+        <div className="lg:col-span-1">
+          <div className="flex flex-col items-center justify-center md:mr-[6px]">
+            <button
+              onClick={goToPrev}
+              className={twMerge(
+                'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+                [activeIndex === 0 && 'cursor-not-allowed opacity-45']
+              )}
+              disabled={activeIndex === 0}
+            >
+              <Icon name="chevron-up" size={15} className="fill-[#000000]" />
+            </button>
+            <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
+              {product?.productimage_set?.map((item, index) => (
+                <Image
+                  key={index}
+                  src={item.image}
+                  alt={`Thumbnail ${index}`}
+                  width={80}
+                  height={128}
+                  aspectRatio={80 / 128}
+                  className={twMerge('cursor-pointer', [
+                    activeIndex === index && 'border-2 border-primary'
+                  ])}
+                  onClick={() => handleThumbnailClick(index)}
+                />
+              ))}
+            </div>
+            <button
+              onClick={goToNext}
+              className={twMerge(
+                'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+                [
+                  activeIndex === product.productimage_set.length - 1 &&
+                    'cursor-not-allowed opacity-45'
+                ]
+              )}
+              disabled={activeIndex === product.productimage_set.length - 1}
+            >
+              <Icon name="chevron-down" size={15} className="fill-[#000000]" />
+            </button>
+          </div>
+        </div>
+
+        <div className="relative lg:col-span-5">
+          <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
+
+          <PluginModule
+            component={Component.ProductImageSearchFeature}
+            props={{
+              product,
+              activeIndex,
+              showResetButton: true
+            }}
+          />
+
+          <CarouselCore
+            responsive={{
+              all: {
+                breakpoint: { max: 5000, min: 0 },
+                items: 1
+              }
+            }}
+            arrows={false}
+            swipeable={true}
+            ref={carouselRef}
+            afterChange={(previousSlide, { currentSlide }) => {
+              setActiveIndex(currentSlide);
+            }}
+            containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
           >
-            <Icon name="chevron-up" size={15} className="fill-[#000000]" />
-          </button>
-          <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
-            {product?.productimage_set?.map((item, index) => (
+            {product?.productimage_set?.map((item, i) => (
               <Image
-                key={index}
+                key={i}
                 src={item.image}
-                alt={`Thumbnail ${index}`}
-                width={80}
-                height={128}
-                className={twMerge('cursor-pointer', [
-                  activeIndex === index && 'border-2 border-primary'
-                ])}
-                onClick={() => handleThumbnailClick(index)}
+                alt={product?.name || 'Product image'}
+                draggable={false}
+                aspectRatio={484 / 726}
+                sizes="(min-width: 425px) 512px,
+              (min-width: 601px) 576px,
+              (min-width: 768px) 336px,
+              (min-width: 1024px) 484px, 368px"
+                fill
               />
             ))}
-          </div>
-          <button
-            onClick={goToNext}
-            className={twMerge(
-              'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-              [
-                activeIndex === product.productimage_set.length - 1 &&
-                  'cursor-not-allowed opacity-45'
-              ]
-            )}
-            disabled={activeIndex === product.productimage_set.length - 1}
-          >
-            <Icon name="chevron-down" size={15} className="fill-[#000000]" />
-          </button>
+          </CarouselCore>
         </div>
       </div>
 
@@ -140,6 +187,6 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
           ))}
         </CarouselCore>
       </div>
-    </div>
+    </>
   );
 }

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;
@@ -22,7 +23,7 @@ export const ProductItem = (props: Props) => {
   // TODO: Static image will change (TR)
   const { product, width, height, index } = props;
   const [viewed, setViewed] = useState(false);
-  const { FavButton } = useFavButton(product.pk);
+  const { FavButton } = useFavButton(product.pk, product);
   const { ref, inView } = useInView();
 
   const image_url = product.productimage_set[0]?.image;
@@ -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

@@ -164,6 +164,10 @@ export default async () => {
       name: 'Tamara Payment Extension',
       value: 'pz-tamara-extension'
     },
+    {
+      name: 'Similar Products',
+      value: 'pz-similar-products'
+    },
     {
       name: 'Hepsipay',
       value: 'pz-hepsipay'
@@ -176,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

@@ -183,6 +183,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             name: 'Tamara Payment Extension',
             value: 'pz-tamara-extension'
         },
+        {
+            name: 'Similar Products',
+            value: 'pz-similar-products'
+        },
         {
             name: 'Hepsipay',
             value: 'pz-hepsipay'
@@ -195,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",
+  "version": "2.0.153-rc.4",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {