@akinon/projectzero 2.0.79-rc.0 → 2.0.79

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/app-template/src/views/product-item/index.tsx

@@ -22,7 +22,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, product);
+  const { FavButton } = useFavButton(product.pk);
   const { ref, inView } = useInView();
 
   const image_url = product.productimage_set[0]?.image;

package/app-template/tailwind.config.js

@@ -22,6 +22,8 @@ const defaultConfig = {
   content: [
     './node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
     '../../node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@akinon/pz-theme/src/**/*.{js,ts,jsx,tsx}',
+    '../../node_modules/@akinon/pz-theme/src/**/*.{js,ts,jsx,tsx}',
     './src/app/**/*.{js,ts,jsx,tsx}',
     './src/pages/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}',

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.79-rc.0",
+  "version": "2.0.79",
   "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/hooks/favourite-product-ids-context.tsx

@@ -1,104 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
-import { useSession } from 'next-auth/react';
-import { useGetFavouriteProductIdsQuery } from '@akinon/next/data/client/wishlist';
-import {
-  isFavouriteProductIdsSuspended,
-  suspendFavouriteProductIds
-} from '@theme/utils/favourite-product-ids-fallback';
-
-interface FavouriteProductIdsContextValue {
-  // False while the batch flow is unavailable (endpoint 404'd or errored), so
-  // consumers can fall back to the legacy favourites-list request.
-  isActive: boolean;
-  getFavouriteId: (productPk: number) => number | undefined;
-}
-
-const FavouriteProductIdsContext =
-  createContext<FavouriteProductIdsContextValue | null>(null);
-
-export const useFavouriteProductIds = () =>
-  useContext(FavouriteProductIdsContext);
-
-type Phase = 'init' | 'batch' | 'fallback';
-
-interface FavouriteProductIdsProviderProps {
-  productIds: Array<number | string>;
-  children: ReactNode;
-}
-
-export function FavouriteProductIdsProvider({
-  productIds,
-  children
-}: FavouriteProductIdsProviderProps) {
-  const { status } = useSession();
-
-  // Storage can only be read on the client, so the first render stays neutral
-  // to keep SSR and hydration output identical.
-  const [phase, setPhase] = useState<Phase>('init');
-
-  useEffect(() => {
-    setPhase(isFavouriteProductIdsSuspended() ? 'fallback' : 'batch');
-  }, []);
-
-  const sortedProductIds = useMemo(() => {
-    const unique = Array.from(
-      new Set(productIds.map(Number).filter((id) => Number.isFinite(id)))
-    );
-    // Stable order keeps the RTK Query cache key deterministic for the page.
-    return unique.sort((a, b) => a - b);
-  }, [productIds]);
-
-  const { data, error } = useGetFavouriteProductIdsQuery(
-    { productIds: sortedProductIds },
-    {
-      skip:
-        status !== 'authenticated' ||
-        phase !== 'batch' ||
-        sortedProductIds.length === 0
-    }
-  );
-
-  useEffect(() => {
-    if (!error) return;
-
-    if ('status' in error && error.status === 404) {
-      suspendFavouriteProductIds();
-    }
-
-    setPhase('fallback');
-  }, [error]);
-
-  const favouriteIdByProductPk = useMemo(() => {
-    const map = new Map<number, number>();
-
-    data?.favourite_products?.forEach((item) => {
-      map.set(Number(item.product_id), item.favourite_id);
-    });
-
-    return map;
-  }, [data]);
-
-  const value = useMemo<FavouriteProductIdsContextValue>(
-    () => ({
-      isActive: phase !== 'fallback',
-      getFavouriteId: (productPk: number) =>
-        favouriteIdByProductPk.get(Number(productPk))
-    }),
-    [phase, favouriteIdByProductPk]
-  );
-
-  return (
-    <FavouriteProductIdsContext.Provider value={value}>
-      {children}
-    </FavouriteProductIdsContext.Provider>
-  );
-}

package/app-template/src/utils/__tests__/favourite-product-ids-fallback.test.ts

@@ -1,42 +0,0 @@
-import {
-  FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS,
-  isFavouriteProductIdsSuspended,
-  suspendFavouriteProductIds
-} from '../favourite-product-ids-fallback';
-
-const STORAGE_KEY = 'pz-favourite-product-ids-unavailable-until';
-
-describe('favourite-product-ids-fallback', () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-  });
-
-  it('is not suspended by default', () => {
-    expect(isFavouriteProductIdsSuspended()).toBe(false);
-  });
-
-  it('suspends after a 404 marker is written', () => {
-    suspendFavouriteProductIds();
-
-    expect(isFavouriteProductIdsSuspended()).toBe(true);
-
-    const until = Number(window.localStorage.getItem(STORAGE_KEY));
-    expect(until).toBeGreaterThan(Date.now());
-    expect(until).toBeLessThanOrEqual(
-      Date.now() + FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS
-    );
-  });
-
-  it('expires the suspension and clears the marker', () => {
-    window.localStorage.setItem(STORAGE_KEY, String(Date.now() - 1000));
-
-    expect(isFavouriteProductIdsSuspended()).toBe(false);
-    expect(window.localStorage.getItem(STORAGE_KEY)).toBeNull();
-  });
-
-  it('treats a corrupt marker as not suspended', () => {
-    window.localStorage.setItem(STORAGE_KEY, 'not-a-number');
-
-    expect(isFavouriteProductIdsSuspended()).toBe(false);
-  });
-});

package/app-template/src/utils/favourite-product-ids-fallback.ts

@@ -1,51 +0,0 @@
-const STORAGE_KEY = 'pz-favourite-product-ids-unavailable-until';
-
-// Not every brand's backend ships the favourite-product-ids endpoint at the
-// same time, so a 404 suspends the new flow for this long before probing again.
-export const FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS = 6 * 60 * 60 * 1000;
-
-const getStorage = (): Storage | null => {
-  try {
-    // The property access itself is what throws when storage is blocked, so it
-    // has to be inside the try rather than guarded by a typeof check.
-    return typeof window === 'undefined' ? null : window.localStorage ?? null;
-  } catch {
-    return null;
-  }
-};
-
-// Fails open: when storage is unavailable the endpoint is probed again, which
-// at worst costs one extra 404 per page view.
-export const isFavouriteProductIdsSuspended = (): boolean => {
-  const storage = getStorage();
-  if (!storage) return false;
-
-  try {
-    const raw = storage.getItem(STORAGE_KEY);
-    if (!raw) return false;
-
-    const until = Number(raw);
-    if (!Number.isFinite(until) || Date.now() >= until) {
-      storage.removeItem(STORAGE_KEY);
-      return false;
-    }
-
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-export const suspendFavouriteProductIds = (): void => {
-  const storage = getStorage();
-  if (!storage) return;
-
-  try {
-    storage.setItem(
-      STORAGE_KEY,
-      String(Date.now() + FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS)
-    );
-  } catch {
-    // Fail open; see isFavouriteProductIdsSuspended.
-  }
-};