@akinon/projectzero 2.0.63-beta.0 → 2.0.63

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @akinon/projectzero
 
-## 2.0.63-beta.0
+## 2.0.63
+
+### Patch Changes
+
+- 72a62c6: ZERO-4823: Implement 404 and 500 pages for theme editor
 
 ## 2.0.62
 

package/app-template/CHANGELOG.md

@@ -1,37 +1,38 @@
 # projectzeronext
 
-## 2.0.63-beta.0
-
-### Patch Changes
-
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.63-beta.0
-  - @akinon/pz-theme@2.0.63-beta.0
-  - @akinon/pz-virtual-try-on@2.0.63-beta.0
-  - @akinon/pz-akifast@2.0.63-beta.0
-  - @akinon/pz-apple-pay@2.0.63-beta.0
-  - @akinon/pz-b2b@2.0.63-beta.0
-  - @akinon/pz-basket-gift-pack@2.0.63-beta.0
-  - @akinon/pz-bkm@2.0.63-beta.0
-  - @akinon/pz-checkout-gift-pack@2.0.63-beta.0
-  - @akinon/pz-click-collect@2.0.63-beta.0
-  - @akinon/pz-credit-payment@2.0.63-beta.0
-  - @akinon/pz-cybersource-uc@2.0.63-beta.0
-  - @akinon/pz-flow-payment@2.0.63-beta.0
-  - @akinon/pz-google-pay@2.0.63-beta.0
-  - @akinon/pz-gpay@2.0.63-beta.0
-  - @akinon/pz-haso@2.0.63-beta.0
-  - @akinon/pz-hepsipay@2.0.63-beta.0
-  - @akinon/pz-masterpass@2.0.63-beta.0
-  - @akinon/pz-masterpass-rest@2.0.63-beta.0
-  - @akinon/pz-multi-basket@2.0.63-beta.0
-  - @akinon/pz-one-click-checkout@2.0.63-beta.0
-  - @akinon/pz-otp@2.0.63-beta.0
-  - @akinon/pz-pay-on-delivery@2.0.63-beta.0
-  - @akinon/pz-saved-card@2.0.63-beta.0
-  - @akinon/pz-similar-products@2.0.63-beta.0
-  - @akinon/pz-tabby-extension@2.0.63-beta.0
-  - @akinon/pz-tamara-extension@2.0.63-beta.0
+## 2.0.63
+
+### Patch Changes
+
+- 72a62c6: ZERO-4823: Implement 404 and 500 pages for theme editor
+- Updated dependencies [72a62c6]
+  - @akinon/pz-theme@2.0.63
+  - @akinon/pz-virtual-try-on@2.0.63
+  - @akinon/next@2.0.63
+  - @akinon/pz-akifast@2.0.63
+  - @akinon/pz-apple-pay@2.0.63
+  - @akinon/pz-b2b@2.0.63
+  - @akinon/pz-basket-gift-pack@2.0.63
+  - @akinon/pz-bkm@2.0.63
+  - @akinon/pz-checkout-gift-pack@2.0.63
+  - @akinon/pz-click-collect@2.0.63
+  - @akinon/pz-credit-payment@2.0.63
+  - @akinon/pz-cybersource-uc@2.0.63
+  - @akinon/pz-flow-payment@2.0.63
+  - @akinon/pz-google-pay@2.0.63
+  - @akinon/pz-gpay@2.0.63
+  - @akinon/pz-haso@2.0.63
+  - @akinon/pz-hepsipay@2.0.63
+  - @akinon/pz-masterpass@2.0.63
+  - @akinon/pz-masterpass-rest@2.0.63
+  - @akinon/pz-multi-basket@2.0.63
+  - @akinon/pz-one-click-checkout@2.0.63
+  - @akinon/pz-otp@2.0.63
+  - @akinon/pz-pay-on-delivery@2.0.63
+  - @akinon/pz-saved-card@2.0.63
+  - @akinon/pz-similar-products@2.0.63
+  - @akinon/pz-tabby-extension@2.0.63
+  - @akinon/pz-tamara-extension@2.0.63
 
 ## 2.0.62
 

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.63-beta.0",
+  "version": "2.0.63",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,33 +24,33 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.63-beta.0",
-    "@akinon/pz-akifast": "2.0.63-beta.0",
-    "@akinon/pz-apple-pay": "2.0.63-beta.0",
-    "@akinon/pz-b2b": "2.0.63-beta.0",
-    "@akinon/pz-basket-gift-pack": "2.0.63-beta.0",
-    "@akinon/pz-bkm": "2.0.63-beta.0",
-    "@akinon/pz-checkout-gift-pack": "2.0.63-beta.0",
-    "@akinon/pz-click-collect": "2.0.63-beta.0",
-    "@akinon/pz-credit-payment": "2.0.63-beta.0",
-    "@akinon/pz-cybersource-uc": "2.0.63-beta.0",
-    "@akinon/pz-flow-payment": "2.0.63-beta.0",
-    "@akinon/pz-google-pay": "2.0.63-beta.0",
-    "@akinon/pz-gpay": "2.0.63-beta.0",
-    "@akinon/pz-haso": "2.0.63-beta.0",
-    "@akinon/pz-hepsipay": "2.0.63-beta.0",
-    "@akinon/pz-masterpass": "2.0.63-beta.0",
-    "@akinon/pz-masterpass-rest": "2.0.63-beta.0",
-    "@akinon/pz-multi-basket": "2.0.63-beta.0",
-    "@akinon/pz-one-click-checkout": "2.0.63-beta.0",
-    "@akinon/pz-otp": "2.0.63-beta.0",
-    "@akinon/pz-pay-on-delivery": "2.0.63-beta.0",
-    "@akinon/pz-saved-card": "2.0.63-beta.0",
-    "@akinon/pz-similar-products": "2.0.63-beta.0",
-    "@akinon/pz-tabby-extension": "2.0.63-beta.0",
-    "@akinon/pz-tamara-extension": "2.0.63-beta.0",
-    "@akinon/pz-theme": "2.0.63-beta.0",
-    "@akinon/pz-virtual-try-on": "2.0.63-beta.0",
+    "@akinon/next": "2.0.63",
+    "@akinon/pz-akifast": "2.0.63",
+    "@akinon/pz-apple-pay": "2.0.63",
+    "@akinon/pz-b2b": "2.0.63",
+    "@akinon/pz-basket-gift-pack": "2.0.63",
+    "@akinon/pz-bkm": "2.0.63",
+    "@akinon/pz-checkout-gift-pack": "2.0.63",
+    "@akinon/pz-click-collect": "2.0.63",
+    "@akinon/pz-credit-payment": "2.0.63",
+    "@akinon/pz-cybersource-uc": "2.0.63",
+    "@akinon/pz-flow-payment": "2.0.63",
+    "@akinon/pz-google-pay": "2.0.63",
+    "@akinon/pz-gpay": "2.0.63",
+    "@akinon/pz-haso": "2.0.63",
+    "@akinon/pz-hepsipay": "2.0.63",
+    "@akinon/pz-masterpass": "2.0.63",
+    "@akinon/pz-masterpass-rest": "2.0.63",
+    "@akinon/pz-multi-basket": "2.0.63",
+    "@akinon/pz-one-click-checkout": "2.0.63",
+    "@akinon/pz-otp": "2.0.63",
+    "@akinon/pz-pay-on-delivery": "2.0.63",
+    "@akinon/pz-saved-card": "2.0.63",
+    "@akinon/pz-similar-products": "2.0.63",
+    "@akinon/pz-tabby-extension": "2.0.63",
+    "@akinon/pz-tamara-extension": "2.0.63",
+    "@akinon/pz-theme": "2.0.63",
+    "@akinon/pz-virtual-try-on": "2.0.63",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.2.6",
     "@react-google-maps/api": "2.17.1",
@@ -74,7 +74,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.63-beta.0",
+    "@akinon/eslint-plugin-projectzero": "2.0.63",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/src/app/[pz]/404/page.tsx

@@ -0,0 +1,24 @@
+import 'server-only';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import { buildNotFoundPageContext } from '@akinon/pz-theme/src/chrome/page-context';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import NotFoundContent from '@theme/views/not-found-content';
+
+// The not-found boundary is not routable, so the theme editor could never
+// open it in the preview iframe. This page serves that preview: it mounts
+// the same slot with the same fallback, so the designer composes exactly
+// what a shopper sees on a real 404.
+export const dynamic = 'force-dynamic';
+
+async function Page() {
+  return (
+    <ChromeSlot
+      slug={PLACEHOLDER_SLUGS.notFound}
+      pageContext={buildNotFoundPageContext()}
+      fallback={<NotFoundContent />}
+    />
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/500/page.tsx

@@ -0,0 +1,23 @@
+import 'server-only';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import { buildErrorPageContext } from '@akinon/pz-theme/src/chrome/page-context';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import ServerErrorContent from '@theme/views/server-error-content';
+
+// The error boundary cannot be opened by URL, so the theme editor could never
+// preview it. This page serves that preview: it mounts the same slot the
+// boundary reads its composition from, with the same code-owned fallback.
+export const dynamic = 'force-dynamic';
+
+async function Page() {
+  return (
+    <ChromeSlot
+      slug={PLACEHOLDER_SLUGS.serverError}
+      pageContext={buildErrorPageContext()}
+      fallback={<ServerErrorContent />}
+    />
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/error.tsx

@@ -2,6 +2,10 @@
 
 import { useSentryUncaughtErrors } from '@akinon/next/hooks';
 import PzErrorPage from '@akinon/next/views/error-page';
+import { useErrorComposition } from '@akinon/pz-theme/src/chrome/error-composition';
+import ThemePlaceholderClient from '@akinon/pz-theme/src/theme-placeholder-client';
+import { ThemePageContextProvider } from '@akinon/pz-theme/src/theme-page-context';
+import { ThemeSettingsProvider } from '@akinon/pz-theme/src/theme-settings-context';
 
 export default function ErrorPage({
   error,
@@ -13,5 +17,28 @@ export default function ErrorPage({
   // DO NOT REMOVE THIS LINE TO REPORT UNCAUGHT ERRORS TO SENTRY
   useSentryUncaughtErrors(error);
 
+  // Prefetched by the layout provider before anything failed; null until a
+  // designer composes the server-error placeholder in the theme editor.
+  const composition = useErrorComposition();
+
+  if (composition) {
+    return (
+      <>
+        {composition.themeCSS && (
+          <style dangerouslySetInnerHTML={{ __html: composition.themeCSS }} />
+        )}
+        <ThemeSettingsProvider value={composition.themeSettings}>
+          <ThemePageContextProvider value={composition.pageContext}>
+            <ThemePlaceholderClient
+              slug={composition.slug}
+              initialSections={composition.sections}
+              initialPlaceholderId={composition.placeholderId}
+            />
+          </ThemePageContextProvider>
+        </ThemeSettingsProvider>
+      </>
+    );
+  }
+
   return <PzErrorPage error={error} reset={reset} />;
 }

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

@@ -20,6 +20,8 @@ import { PreviewAuthStateReporter } from '@akinon/pz-theme/src/chrome/preview-au
 import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
 import ThemeModals from '@akinon/pz-theme/src/overlays/theme-modals';
 import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import { ErrorCompositionProvider } from '@akinon/pz-theme/src/chrome/error-composition';
+import { loadErrorComposition } from '@akinon/pz-theme/src/chrome/error-composition-source';
 import './configure-page-context';
 
 export const viewport: Viewport = {
@@ -55,6 +57,12 @@ async function RootLayout({
   translations,
   children
 }: ResolvedRootLayoutProps) {
+  // Reconstructed here, above the error boundary, because the boundary is a
+  // client component that can neither fetch nor receive server props — see
+  // pz-theme's error-composition.tsx. Costs one memoized widget read until a
+  // designer composes the server-error placeholder.
+  const errorComposition = await loadErrorComposition();
+
   return (
     <html lang={locale.isoCode} {...(locale.rtl ? { dir: 'rtl' } : {})}>
       <head />
@@ -69,7 +77,9 @@ async function RootLayout({
                 />
               </MobileAppToggler>
               <main>
-                <OfflineFallback>{children}</OfflineFallback>
+                <ErrorCompositionProvider composition={errorComposition}>
+                  <OfflineFallback>{children}</OfflineFallback>
+                </ErrorCompositionProvider>
                 <RouteHandler />
                 <PreviewAuthStateReporter />
                 <RootModal />

package/app-template/src/app/[pz]/not-found.tsx

@@ -1,22 +1,15 @@
-'use client';
-
 import React from 'react';
-import { Button, Link } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import { buildNotFoundPageContext } from '@akinon/pz-theme/src/chrome/page-context';
+import NotFoundContent from '@theme/views/not-found-content';
 
 export default function NotFound() {
-  const { t } = useLocalization();
-
   return (
-    <div className="py-10 flex flex-col items-center justify-center">
-      <div className="text-8xl font-bold text-gray-400">404</div>
-      <h1 className="text-4xl font-bold mb-4">{t('not_found.title')}</h1>
-      <p className="text-lg mb-6 text-gray-600">{t('not_found.sub_title')}</p>
-      <Link href={'/'}>
-        <Button className="h-auto mt-4 text-base py-3 px-6">
-          {t('not_found.button')}
-        </Button>
-      </Link>
-    </div>
+    <ChromeSlot
+      slug={PLACEHOLDER_SLUGS.notFound}
+      pageContext={buildNotFoundPageContext()}
+      fallback={<NotFoundContent />}
+    />
   );
 }

package/app-template/src/views/not-found-content.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+import { Button, Link } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+export default function NotFoundContent() {
+  const { t } = useLocalization();
+
+  return (
+    <div className="py-10 flex flex-col items-center justify-center">
+      <div className="text-8xl font-bold text-gray-400">404</div>
+      <h1 className="text-4xl font-bold mb-4">{t('not_found.title')}</h1>
+      <p className="text-lg mb-6 text-gray-600">{t('not_found.sub_title')}</p>
+      <Link href={'/'}>
+        <Button className="h-auto mt-4 text-base py-3 px-6">
+          {t('not_found.button')}
+        </Button>
+      </Link>
+    </div>
+  );
+}

package/app-template/src/views/server-error-content.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Button, Link } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+/**
+ * The code-owned 500 markup, shared by the real error boundary's fallback and
+ * the /500 preview page. Mirrors PzErrorPage's server-error branch, minus the
+ * `reset` dependency an error boundary alone can provide.
+ */
+export default function ServerErrorContent() {
+  const { t } = useLocalization();
+
+  const reloadPage = () => {
+    if (typeof window !== 'undefined') {
+      window.location.reload();
+    }
+  };
+
+  return (
+    <section className="text-center px-6 my-14 md:px-0 md:m-14">
+      <div className="text-7xl font-bold md:text-8xl">500</div>
+      <h1 className="text-lg md:text-xl"> {t('common.page_500.title')} </h1>
+      <p className="text-lg md:text-xl"> {t('common.page_500.description')} </p>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href="/" className="text-lg underline">
+          {t('common.page_500.link_text')}
+        </Link>
+        <Button onClick={reloadPage} className="text-lg">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}

package/package.json

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