@akinon/projectzero 1.126.20-v1-rc.17 → 1.126.20

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

@@ -0,0 +1,168 @@
+'use client';
+
+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';
+
+export interface ResolvedCheckoutConfig {
+  variantId: CheckoutVariantId;
+  options: CheckoutVariantOptions;
+}
+
+interface RawCheckoutConfig {
+  variant?: string;
+  options?: Record<string, unknown>;
+}
+
+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 => {
+  if (!raw) return {};
+  const cast = raw as Partial<CheckoutVariantOptions>;
+  const out: CheckoutVariantOptions = {};
+  if (typeof cast.enableEditMode === 'boolean')
+    out.enableEditMode = cast.enableEditMode;
+  if (typeof cast.autoAdvance === 'boolean') out.autoAdvance = cast.autoAdvance;
+  if (typeof cast.stickyMobileCta === 'boolean')
+    out.stickyMobileCta = cast.stickyMobileCta;
+  if (typeof cast.showOrderReview === 'boolean')
+    out.showOrderReview = cast.showOrderReview;
+  if (typeof cast.showTrustBadges === 'boolean')
+    out.showTrustBadges = cast.showTrustBadges;
+  if (typeof cast.gtmEnabled === 'boolean') out.gtmEnabled = cast.gtmEnabled;
+  if (typeof cast.compactMode === 'boolean') out.compactMode = cast.compactMode;
+  return out;
+};
+
+const readBaseFromSettings = (): ResolvedCheckoutConfig => {
+  const fromSettings = (settings as { checkout?: RawCheckoutConfig })?.checkout;
+  const variantId = isKnownVariant(fromSettings?.variant)
+    ? fromSettings.variant
+    : FALLBACK_VARIANT;
+  return {
+    variantId,
+    options: coerceOptions(fromSettings?.options)
+  };
+};
+
+const mergeOverride = (
+  base: ResolvedCheckoutConfig,
+  override: RawCheckoutConfig | undefined
+): ResolvedCheckoutConfig => {
+  if (!override) return base;
+  return {
+    variantId: isKnownVariant(override.variant)
+      ? override.variant
+      : base.variantId,
+    options: { ...base.options, ...coerceOptions(override.options) }
+  };
+};
+
+/**
+ * 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 [merged, setMerged] =
+    useState<ResolvedCheckoutConfig>(readBaseFromSettings);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/theme-settings', { cache: 'no-store' })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: { checkout?: RawCheckoutConfig } | null) => {
+        if (cancelled) return;
+        if (!data?.checkout) return;
+        setMerged(() => mergeOverride(readBaseFromSettings(), data.checkout));
+      })
+      .catch(() => {
+        // Silent: backend not reachable or widget missing — keep settings.js baseline
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  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/tailwind.config.js

@@ -1,4 +1,4 @@
-const getAkinonNextContent = require("@akinon/next/tailwind/content");
+const getAkinonNextContent = require('@akinon/next/tailwind/content');
 const deepMerge = require('@akinon/next/utils/deep-merge');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const plugins = require('./src/plugins');
@@ -20,6 +20,8 @@ if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
 
 const defaultConfig = {
   content: [
+    './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/dist/commands/plugins.js

@@ -50,7 +50,10 @@ function checkVersion(pkg) {
             const pkgInfo = (yield response.json());
             const latestVersion = pkgInfo['dist-tags'].latest;
             if (!semver_1.default.satisfies(pkg.dependencies['@akinon/next'], latestVersion)) {
-                console.warn(`\x1b[43mWarning: The "${packageName}" package is currently at version ${pkg.dependencies['@akinon/next']}. Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`, '\x1b[0m\n');
+                console.warn(`\x1b[43m Warning: The "${packageName}" package is currently at`, `\x1b[41m version ${pkg.dependencies['@akinon/next']}`, `\x1b[43m Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`, '\x1b[0m\n');
+            }
+            else {
+                console.log(`\x1b[42m Info: The package "${packageName}" is currently in the current version (${latestVersion}).`, '\x1b[0m\n');
             }
         }
         catch (error) {
@@ -72,7 +75,25 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             throw new Error('plugins.js was not found in either of the expected locations.');
         }
     }
-    const pkg = require(path_1.default.resolve(rootDir, './package.json'));
+    function findPackageJson() {
+        const packageJsonPaths = [
+            path_1.default.resolve(rootDir, './package.json'),
+            path_1.default.resolve(rootDir, './apps/projectzeronext/package.json')
+        ];
+        for (const packageJsonPath of packageJsonPaths) {
+            try {
+                const pkg = require(packageJsonPath);
+                if (pkg.dependencies['@akinon/next']) {
+                    return pkg;
+                }
+            }
+            catch (error) {
+                continue;
+            }
+        }
+        throw new Error('Could not find package.json with @akinon/next dependency');
+    }
+    const pkg = findPackageJson();
     yield checkVersion(pkg);
     const pluginsFilePath = findPluginsFilePath();
     let installedPlugins = [];

package/package.json

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

package/app-template/src/app/[pz]/account/orders/[id]/layout.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
-}