@akinon/projectzero 2.0.43-rc.0 → 2.0.44

package/app-template/src/views/checkout/variants/registry.ts

@@ -23,10 +23,21 @@ export const UNIFIED_VARIANTS: ReadonlySet<string> = new Set([
 ]);
 
 export const getCheckoutVariant = (variant: CheckoutVariantId | undefined) => {
-  const loader = variantLoaders[variant ?? 'multi-step'] ?? variantLoaders['multi-step'];
+  // Own-key lookup only (see `isKnownVariant`): an inherited member would
+  // resolve to a truthy non-loader and `dynamic()` would never render a flow.
+  const loader = isKnownVariant(variant)
+    ? variantLoaders[variant]
+    : variantLoaders['multi-step'];
 
   return dynamic(loader, { ssr: false });
 };
 
+/**
+ * `in` also answers true for inherited Object.prototype members ('toString',
+ * 'constructor', '__proto__', …), which would let a saved setting name a
+ * "known" variant with no loader — `getCheckoutVariant` would then hand
+ * `dynamic()` a non-function and the flow would be lost. Own keys only.
+ */
 export const isKnownVariant = (value: unknown): value is CheckoutVariantId =>
-  typeof value === 'string' && value in variantLoaders;
+  typeof value === 'string' &&
+  Object.prototype.hasOwnProperty.call(variantLoaders, value);

package/app-template/src/views/checkout/variants/use-resolved-config.ts

@@ -1,7 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore
+} from 'react';
 import settings from '@theme/settings';
+import {
+  getCheckoutFlowVariantOverride,
+  isThemeEditorDesigner,
+  noFlowVariantOnServer,
+  subscribeCheckoutPieces,
+  type CheckoutFlowVariantPreference
+} from '@akinon/pz-theme/src/chrome/checkout-pieces';
 import { isKnownVariant } from './registry';
 import type { CheckoutVariantId, CheckoutVariantOptions } from './types';
 
@@ -17,6 +30,21 @@ interface RawCheckoutConfig {
 
 const FALLBACK_VARIANT: CheckoutVariantId = 'multi-step';
 
+/**
+ * The only two layouts a composition may steer to, mapped to variant ids. A
+ * closed record on purpose: an unknown preference resolves to `undefined` here
+ * and the storefront's configured variant survives — and the unified
+ * basket-and-checkout family stays unreachable from a composition, so the
+ * basket-to-checkout redirect pair can never be broken by a page edit.
+ */
+const COMPOSITION_VARIANT_MAP: Record<
+  CheckoutFlowVariantPreference,
+  CheckoutVariantId
+> = {
+  'one-page': 'one-page',
+  'step-by-step': 'multi-step'
+};
+
 const coerceOptions = (
   raw: Record<string, unknown> | undefined
 ): CheckoutVariantOptions => {
@@ -56,17 +84,30 @@ const mergeOverride = (
 };
 
 /**
- * Resolves checkout config from two layers (each optional):
+ * Resolves checkout config from three layers (each optional):
  *
  *   1. settings.js (sync, always available — baseline / fallback)
  *   2. /api/theme-settings (backend theme-config widget — persistent override)
+ *   3. the composition's checkout flow outlet (`flowVariant`) — highest
  *
  * Layer 2 falls back silently if backend is unreachable or no config is saved.
  * The editor is OPTIONAL — when no theme-config is saved, the storefront keeps
  * using its built-in settings.js.
+ *
+ * Layer 3 only ever names a LAYOUT, never options, and only through the
+ * closed `COMPOSITION_VARIANT_MAP`. It is read ONCE, in a layout effect, so a
+ * composed checkout resolves its variant before first paint (the outlet's own
+ * registration layout effect runs in an earlier sibling subtree of the same
+ * hydration commit) and never flips mid-session — a late registration, or the
+ * theme-settings response landing afterwards, can no longer swap the flow out
+ * from under a shopper. On the designer canvas the live value is followed
+ * instead, so a `Checkout Type` edit previews immediately.
+ *
+ * With no outlet registered, nothing overrides: the resolution is exactly the
+ * two-layer result the storefront had before the bridge existed.
  */
 export const useResolvedCheckoutConfig = (): ResolvedCheckoutConfig => {
-  const [config, setConfig] = useState<ResolvedCheckoutConfig>(readBaseFromSettings);
+  const [merged, setMerged] = useState<ResolvedCheckoutConfig>(readBaseFromSettings);
 
   useEffect(() => {
     let cancelled = false;
@@ -75,7 +116,7 @@ export const useResolvedCheckoutConfig = (): ResolvedCheckoutConfig => {
       .then((data: { checkout?: RawCheckoutConfig } | null) => {
         if (cancelled) return;
         if (!data?.checkout) return;
-        setConfig(() => mergeOverride(readBaseFromSettings(), data.checkout));
+        setMerged(() => mergeOverride(readBaseFromSettings(), data.checkout));
       })
       .catch(() => {
         // Silent: backend not reachable or widget missing — keep settings.js baseline
@@ -85,5 +126,36 @@ export const useResolvedCheckoutConfig = (): ResolvedCheckoutConfig => {
     };
   }, []);
 
-  return config;
+  const liveOverride = useSyncExternalStore(
+    subscribeCheckoutPieces,
+    getCheckoutFlowVariantOverride,
+    noFlowVariantOnServer
+  );
+
+  const [latchedOverride, setLatchedOverride] =
+    useState<CheckoutFlowVariantPreference | null>(null);
+
+  useLayoutEffect(() => {
+    setLatchedOverride(getCheckoutFlowVariantOverride());
+  }, []);
+
+  // The designer flag rides a postMessage and can arrive after mount; every
+  // claim change notifies the pieces store, which re-runs this render, so the
+  // canvas picks it up before an outlet edit could matter.
+  const composition = isThemeEditorDesigner() ? liveOverride : latchedOverride;
+  // Own-key lookup: an inherited member ('constructor', 'toString', …) would
+  // otherwise resolve to a truthy non-variant and lose the flow entirely.
+  const compositionVariant =
+    composition &&
+    Object.prototype.hasOwnProperty.call(COMPOSITION_VARIANT_MAP, composition)
+      ? COMPOSITION_VARIANT_MAP[composition]
+      : undefined;
+
+  return useMemo(
+    () =>
+      compositionVariant
+        ? { ...merged, variantId: compositionVariant }
+        : merged,
+    [merged, compositionVariant]
+  );
 };

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/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.43-rc.0",
+  "version": "2.0.44",
   "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>
-  );
-}