@akinon/projectzero 2.0.39-rc.0 → 2.0.39

package/app-template/src/views/category/layout.tsx

@@ -3,11 +3,14 @@ import { BreadcrumbResultType, GetCategoryResponse } from '@akinon/next/types';
 import Breadcrumb from '@theme/views/breadcrumb';
 import { CategoryBanner } from '@theme/views/category/category-banner';
 import ListPage from '@theme/views/category/category-info';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
 
 export default async function Layout({
   data,
   children,
-  breadcrumbData
+  breadcrumbData,
+  pageContext
 }: {
   data: GetCategoryResponse;
   children?: React.ReactNode;
@@ -35,7 +38,14 @@ export default async function Layout({
         </div>
         <CategoryBanner {...data?.category?.attributes?.category_banner} />
       </div>
-      <ListPage data={data} />
+      {/* The listing context was built on every request and thrown away: the
+          prop was declared and never read, so no listing binding has ever
+          resolved on any brand. */}
+      <ChromeSlot
+        slug={PLACEHOLDER_SLUGS.productListing}
+        fallback={<ListPage data={data} />}
+        pageContext={pageContext}
+      />
     </>
   );
 }

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

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

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

@@ -1,8 +1,9 @@
 import Breadcrumb from '@theme/views/breadcrumb';
 import { ProductInfoSlider } from '@theme/views/product';
-import ThemePlaceholder from '@akinon/pz-theme/src/theme-placeholder';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
 import { BreadcrumbResultType, ProductResult } from '@akinon/next/types';
-import { buildProductPageContext } from '@theme/utils/theme-page-context';
+import { buildProductPageContext } from '@akinon/pz-theme/src/chrome/page-context';
 
 interface DeliveryReturnItem {
   product_delivery_returns?: {
@@ -23,7 +24,9 @@ export default async function ProductLayout({
   breadcrumbData,
   children
 }: ProductPageProps) {
-  const productPageContext = buildProductPageContext(data);
+  // Breadcrumbs travel with the product context so the PDP is not the one
+  // page type whose composition cannot build a trail.
+  const productPageContext = buildProductPageContext(data, breadcrumbData);
   const categoryIds = breadcrumbData
     ?.map((item) => item.extra_context?.attributes?.category_id)
     .filter(Boolean)
@@ -51,8 +54,8 @@ export default async function ProductLayout({
           <div className="w-full">{children}</div>
         </div>
       </div>
-      <ThemePlaceholder
-        slug="product-page-new"
+      <ChromeSlot
+        slug={PLACEHOLDER_SLUGS.productDetail}
         pageContext={productPageContext}
       />
     </div>

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

@@ -36,100 +36,53 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
     carouselRef.current?.next();
   };
 
-  const handleThumbnailClick = (index: number) => {
+  const handleThumbnailClick = (index) => {
     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}
-            >
-              <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 }}
+    <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}
           >
-            {product?.productimage_set?.map((item, i) => (
+            <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={i}
+                key={index}
                 src={item.image}
-                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
+                alt={`Thumbnail ${index}`}
+                width={80}
+                height={128}
+                className={twMerge('cursor-pointer', [
+                  activeIndex === index && 'border-2 border-primary'
+                ])}
+                onClick={() => handleThumbnailClick(index)}
               />
             ))}
-          </CarouselCore>
+          </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>
 
@@ -187,6 +140,6 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
           ))}
         </CarouselCore>
       </div>
-    </>
+    </div>
   );
 }

package/commands/plugins.ts

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

package/dist/commands/plugins.js

@@ -183,10 +183,6 @@ 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'

package/package.json

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

package/app-template/src/app/api/client-env/route.ts

@@ -1,5 +0,0 @@
-export { GET } from '@akinon/next/api/client-env';
-
-// NEXT_PUBLIC_* values are read from the server runtime, not the build. Force
-// dynamic so Next never statically caches an (empty) build-time response.
-export const dynamic = 'force-dynamic';

package/app-template/src/app/global-error.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { useSentryUncaughtErrors } from '@akinon/next/hooks';
-
-export default function GlobalError({
-  error,
-  reset
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  useSentryUncaughtErrors(error);
-
-  return (
-    <html>
-      <body>
-        <h2>Something went wrong!</h2>
-        <button onClick={() => reset()}>Try again</button>
-      </body>
-    </html>
-  );
-}

package/app-template/src/utils/__tests__/theme-page-context.test.ts

@@ -1,148 +0,0 @@
-import {
-  buildAccountPageContext,
-  buildBasketPageContext,
-  buildCustomPageContext,
-  buildHomepagePageContext,
-  buildListingPageContext,
-  buildProductPageContext
-} from '../theme-page-context';
-
-describe('theme-page-context utils', () => {
-  it('builds homepage and custom page contexts', () => {
-    const homepage = buildHomepagePageContext();
-    const customPage = buildCustomPageContext('summer-campaign');
-
-    expect(homepage.homepage.slug).toBe('homepage');
-    expect(customPage.customPage.slug).toBe('summer-campaign');
-    expect(customPage.customPage.title).toBe('Summer Campaign');
-  });
-
-  it('builds product page context with normalized product aliases', () => {
-    const productPageContext = buildProductPageContext({
-      product: {
-        pk: 1,
-        name: 'Spring Sneaker',
-        absolute_url: '/products/spring-sneaker',
-        productimage_set: [{ image: 'https://cdn.example.com/image.jpg' }],
-        price: '199.90',
-        retail_price: '249.90',
-        currency_type: 'TRY',
-        attributes_kwargs: {}
-      },
-      selected_variant: null,
-      variants: []
-    } as never);
-
-    // The normalized aliases (title/url/images) are added dynamically and
-    // are not part of the declared product type.
-    const product = productPageContext.product as Record<string, any>;
-    expect(product.title).toBe('Spring Sneaker');
-    expect(product.url).toBe('/products/spring-sneaker');
-    expect(product.images[0].url).toBe('https://cdn.example.com/image.jpg');
-  });
-
-  it('builds listing context aliases for category/search/plp style pages', () => {
-    const listingContext = buildListingPageContext({
-      data: {
-        category: {
-          name: 'Sneakers',
-          absolute_url: '/category/sneakers',
-          attributes: {
-            category_seo_title: {
-              value: {
-                text: 'Sneaker landing'
-              }
-            }
-          }
-        },
-        products: [
-          {
-            pk: 1,
-            name: 'Spring Sneaker',
-            absolute_url: '/products/spring-sneaker',
-            productimage_set: [{ image: 'https://cdn.example.com/image.jpg' }],
-            price: '199.90',
-            retail_price: '249.90',
-            currency_type: 'TRY',
-            attributes_kwargs: {}
-          }
-        ],
-        facets: [{ key: 'color', name: 'Color' }],
-        pagination: { count: 12 },
-        sorters: [{ label: 'Newest', value: 'newest' }],
-        search_text: 'sneaker'
-      } as never,
-      breadcrumbData: [
-        { label: 'Sneakers', path: '/category/sneakers' }
-      ] as never,
-      pageType: 'search',
-      path: '/list'
-    });
-
-    expect(listingContext.page.type).toBe('search');
-    expect(listingContext.category.name).toBe('Sneakers');
-    expect(listingContext.search.query).toBe('sneaker');
-    expect(listingContext.plp.products).toHaveLength(1);
-    expect(listingContext.listing.totalProducts).toBe(12);
-  });
-
-  it('builds basket and account contexts from live data', () => {
-    const basketContext = buildBasketPageContext({
-      basket: {
-        pk: 10,
-        total_quantity: 3,
-        total_amount: '799.90',
-        total_product_amount: '899.90',
-        total_discount_amount: '100.00',
-        voucher_code: 'SPRING',
-        discounts: [],
-        basketitem_set: [
-          {
-            id: 1,
-            quantity: 2,
-            price: '399.95',
-            retail_price: '449.95',
-            total_amount: '799.90',
-            unit_price: '399.95',
-            currency_type: 'TRY',
-            image: 'https://cdn.example.com/image.jpg',
-            attributes_kwargs: {
-              color: { label: 'Color', value: 'Black' }
-            },
-            product: {
-              pk: 1,
-              name: 'Spring Sneaker',
-              absolute_url: '/products/spring-sneaker',
-              productimage_set: [
-                { image: 'https://cdn.example.com/image.jpg' }
-              ],
-              price: '399.95',
-              retail_price: '449.95',
-              currency_type: 'TRY',
-              attributes_kwargs: {}
-            }
-          }
-        ]
-      } as never,
-      path: '/baskets/basket'
-    });
-
-    const accountContext = buildAccountPageContext({
-      path: '/account/profile',
-      profileInfo: {
-        first_name: 'Ada',
-        last_name: 'Lovelace',
-        email: 'ada@example.com'
-      },
-      sessionUser: {
-        name: 'Ada Lovelace',
-        email: 'ada@example.com'
-      }
-    });
-
-    expect(basketContext.basket.totalQuantity).toBe(3);
-    expect(basketContext.basket.items[0].title).toBe('Spring Sneaker');
-    expect(accountContext.account.user.fullName).toBe('Ada Lovelace');
-    expect(accountContext.account.route).toBe('/account/profile');
-  });
-});