@delmaredigital/payload-experiments 0.3.0-rc.4 → 0.4.0-rc.2

package/dist/admin/surface/newTest/NewTest.js

@@ -1,15 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { fetchAllDocs } from '../../../lib/fetchAllDocs.js';
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation.js';
 import { formatAdminURL } from 'payload/shared';
 import { NEW_TEST_COPY as C } from '../../copy/newTest.js';
 import { CreateRefused, createTest } from '../../../puck/editor/createTest.js';
+import { PageWizard } from './PageWizard.js';
 import './newTest.css';
 export function NewTest({ surface, pages }) {
     const router = useRouter();
     const [step, setStep] = useState('kind');
+    const [kind, setKind] = useState('flag');
+    const [created, setCreated] = useState();
     const [pointId, setPointId] = useState('');
     const point = surface.flagPoints.find((item)=>item.id === pointId);
     const [unitType, setUnitType] = useState('visitor');
@@ -50,23 +54,32 @@ export function NewTest({ surface, pages }) {
         layerRetry
     ]);
     async function submit() {
-        if (inFlight.current || !point || !name.trim()) return;
+        if (inFlight.current || kind === 'flag' && !point || !name.trim()) return;
         inFlight.current = true;
         setPending(true);
         setError('');
         try {
             const { id } = await createTest(surface.apiRoute, {
-                kind: 'flag',
-                unitType,
+                kind,
+                unitType: kind === 'page' ? 'visitor' : unitType,
                 name,
-                flagPoint: point.id,
-                ...layer === undefined ? {} : {
+                ...kind === 'flag' ? {
+                    flagPoint: point.id
+                } : surface.pageCollections?.length === 1 ? {
+                    pageCollection: surface.pageCollections[0].slug
+                } : {},
+                ...kind !== 'flag' || layer === undefined ? {} : {
                     layer
                 },
                 ...hypothesis.trim() ? {
                     hypothesis
                 } : {}
             });
+            if (kind === 'page') {
+                setCreated(id);
+                setPending(false);
+                return;
+            }
             router.push(formatAdminURL({
                 adminRoute: surface.adminRoute,
                 path: `/experiments/${encodeURIComponent(String(id))}`
@@ -77,6 +90,10 @@ export function NewTest({ surface, pages }) {
             setPending(false);
         }
     }
+    if (created !== undefined) return /*#__PURE__*/ _jsx(PageWizard, {
+        id: created,
+        surface: surface
+    });
     const collections = [
         ...new Set(pages?.map((page)=>page.collection))
     ];
@@ -102,15 +119,37 @@ export function NewTest({ surface, pages }) {
                                     /*#__PURE__*/ _jsx("span", {
                                         children: C.blockMeaning
                                     }),
-                                    surface.descriptions?.block ? /*#__PURE__*/ _jsx("span", {
-                                        children: surface.descriptions.block
+                                    surface.admin?.descriptions?.block ? /*#__PURE__*/ _jsx("span", {
+                                        children: surface.admin?.descriptions?.block
+                                    }) : null
+                                ]
+                            }) : null,
+                            surface.pageCollections?.length ? /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                className: "xp-new-test-card",
+                                onClick: ()=>{
+                                    setKind('page');
+                                    setStep('name');
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: C.page
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: C.pageMeaning
+                                    }),
+                                    surface.admin?.descriptions?.page ? /*#__PURE__*/ _jsx("span", {
+                                        children: surface.admin?.descriptions?.page
                                     }) : null
                                 ]
                             }) : null,
                             surface.flagPoints.length > 0 ? /*#__PURE__*/ _jsxs("button", {
                                 type: "button",
                                 className: "xp-new-test-card",
-                                onClick: ()=>setStep('setting'),
+                                onClick: ()=>{
+                                    setKind('flag');
+                                    setStep('setting');
+                                },
                                 children: [
                                     /*#__PURE__*/ _jsx("strong", {
                                         children: C.setting
@@ -118,14 +157,14 @@ export function NewTest({ surface, pages }) {
                                     /*#__PURE__*/ _jsx("span", {
                                         children: C.settingMeaning
                                     }),
-                                    surface.descriptions?.setting ? /*#__PURE__*/ _jsx("span", {
-                                        children: surface.descriptions.setting
+                                    surface.admin?.descriptions?.setting ? /*#__PURE__*/ _jsx("span", {
+                                        children: surface.admin?.descriptions.setting
                                     }) : null
                                 ]
                             }) : null
                         ]
                     }),
-                    pages === undefined && !surface.flagPoints.length ? /*#__PURE__*/ _jsx("p", {
+                    pages === undefined && !surface.flagPoints.length && !surface.pageCollections?.length ? /*#__PURE__*/ _jsx("p", {
                         children: C.unavailable
                     }) : null
                 ]
@@ -156,7 +195,10 @@ export function NewTest({ surface, pages }) {
                                                 /*#__PURE__*/ _jsx("a", {
                                                     href: page.editorUrl,
                                                     children: C.open
-                                                })
+                                                }),
+                                                page.editor === 'blocks' ? /*#__PURE__*/ _jsx("p", {
+                                                    children: C.blocksHandoff
+                                                }) : null
                                             ]
                                         }, `${typeof page.id}:${page.id}`))
                                 }),
@@ -331,13 +373,10 @@ export function NewTest({ surface, pages }) {
                         type: "button",
                         disabled: pending,
                         onClick: ()=>{
-                            if (step === 'kind') router.push(formatAdminURL({
-                                adminRoute: surface.adminRoute,
-                                path: '/experiments'
-                            }));
+                            if (step === 'kind') router.push(surfaceUrls.home(surface.adminRoute));
                             else {
                                 setError('');
-                                setStep(step === 'name' ? 'setting' : 'kind');
+                                setStep(step === 'name' && kind === 'flag' ? 'setting' : 'kind');
                             }
                         },
                         children: C.back

package/dist/admin/surface/newTest/PageWizard.d.ts

@@ -0,0 +1,7 @@
+import type { DocId } from '../../../types/contracts.js';
+import type { SurfaceProps } from '../contracts.js';
+/** One session stays mounted across Collection, all page steps and Review. */
+export declare function PageWizard({ id, surface }: {
+    id: DocId;
+    surface: SurfaceProps;
+}): import("react").JSX.Element;

package/dist/admin/surface/newTest/PageWizard.js

@@ -0,0 +1,214 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import { useTestDocument } from '../useTestDocument.js';
+import { CopyRoute } from '../pagePicker/CopyRoute.js';
+import { PageCombobox } from '../pagePicker/PageCombobox.js';
+import { testPageCollection, controlFirst } from '../pagePicker/pagePicker.model.js';
+import { NEW_TEST_COPY as C } from '../../copy/newTest.js';
+import { READINESS_COPY } from '../../copy/readiness.js';
+import { TEST_PAGE } from '../../copy/testPage.js';
+import { SURFACE_COPY } from '../../copy/surface.js';
+import { pageStepCopy } from '../../copy/pages.js';
+import { READINESS, nextStep, pageReadinessContext, readinessArm } from '../readiness/readiness.model.js';
+import { FieldErrors } from '../test/fields.js';
+import { SaveStatus } from '../readiness/SaveStatus.js';
+import { createApi } from '../../api.js';
+import { useTransition } from '../readiness/useTransition.js';
+/** One session stays mounted across Collection, all page steps and Review. */ export function PageWizard({ id, surface }) {
+    const router = useRouter();
+    const collections = surface.pageCollections ?? [];
+    const [step, setStep] = useState(collections.length > 1 ? 'collection' : 'control');
+    const test = useTestDocument(id, {
+        apiRoute: surface.apiRoute,
+        refetchPreflightOnFocus: step === 'review'
+    });
+    const testUrl = formatAdminURL({
+        adminRoute: surface.adminRoute,
+        path: `/experiments/${encodeURIComponent(String(id))}`
+    });
+    const transition = useTransition(test, ()=>router.push(testUrl));
+    useEffect(()=>{
+        if (step === 'review') void test.refreshPreflight();
+    }, [
+        step,
+        test.refreshPreflight
+    ]);
+    const leave = ()=>router.push(testUrl);
+    if (test.loadState === 'loading') return /*#__PURE__*/ _jsx("p", {
+        role: "status",
+        children: TEST_PAGE.loading
+    });
+    if (!test.doc || test.loadState !== 'ready') return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.loadState === 'forbidden' ? TEST_PAGE.forbidden : test.loadState === 'missing' ? TEST_PAGE.missing : TEST_PAGE.error
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>void test.reload(),
+                children: TEST_PAGE.retry
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: leave,
+                children: C.backToTest
+            })
+        ]
+    });
+    const doc = test.doc;
+    const collection = testPageCollection(collections, doc, test.preflight?.pagePlacements);
+    const arms = controlFirst(doc.arms).filter((arm)=>arm.kind !== 'holdout');
+    const steps = [
+        ...collections.length > 1 ? [
+            'collection'
+        ] : [],
+        ...arms.map((arm)=>arm.key),
+        'review'
+    ];
+    const arm = arms.find((item)=>item.key === step);
+    const ctx = pageReadinessContext(doc, test.preflight, surface);
+    const next = nextStep(test.preflight, ctx);
+    const ready = Boolean(test.preflight && !test.preflightPending && !test.preflightError && test.preflight.checks.every((check)=>check.ok));
+    const busy = test.hasUnsaved || test.saving === 'saving' || transition.busy;
+    const jump = (section, key)=>{
+        if (section === 'versions') setStep(key ?? arms.find((item)=>!item.pageTarget)?.key ?? 'control');
+        else router.push(`${testUrl}#section-${section}`);
+    };
+    const picker = arm && collection ? /*#__PURE__*/ _jsx(PageCombobox, {
+        collection: collection,
+        test: test,
+        armKey: arm.key,
+        apiRoute: surface.apiRoute
+    }, `${collection.slug}/${arm.key}`) : null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-new-test xp-page-wizard",
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                children: step === 'collection' ? C.collection : step === 'review' ? C.review : arm?.kind === 'control' ? C.original : pageStepCopy(arm?.label ?? '')
+            }),
+            /*#__PURE__*/ _jsx(SaveStatus, {
+                test: test
+            }),
+            test.errors._section ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.errors._section
+            }) : null,
+            step === 'collection' ? /*#__PURE__*/ _jsxs("fieldset", {
+                children: [
+                    /*#__PURE__*/ _jsx("legend", {
+                        children: C.collection
+                    }),
+                    collections.map((entry)=>/*#__PURE__*/ _jsxs("label", {
+                            children: [
+                                /*#__PURE__*/ _jsx("input", {
+                                    type: "radio",
+                                    name: "page-collection",
+                                    checked: doc.pageCollection === entry.slug,
+                                    disabled: busy,
+                                    onChange: ()=>{
+                                        test.stage({
+                                            pageCollection: entry.slug
+                                        });
+                                        void test.commit();
+                                    }
+                                }),
+                                entry.label
+                            ]
+                        }, entry.slug))
+                ]
+            }) : step === 'review' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    test.preflightError ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: test.preflightError
+                    }) : null,
+                    /*#__PURE__*/ _jsx("ul", {
+                        children: test.preflight?.checks.map((check, index)=>{
+                            if (!Object.hasOwn(READINESS, check.code)) return check.ok ? null : /*#__PURE__*/ _jsx("li", {
+                                children: SURFACE_COPY.next
+                            }, `${check.code}/${index}`);
+                            const row = READINESS[check.code];
+                            const sentence = row.next(check.detail, ctx);
+                            const label = typeof row.nextStep === 'function' ? row.nextStep(check.detail, ctx) : row.nextStep;
+                            return sentence && !check.ok ? /*#__PURE__*/ _jsxs("li", {
+                                children: [
+                                    sentence,
+                                    label ? /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>jump(row.section, readinessArm(check.code, check.detail, ctx)),
+                                        children: label
+                                    }) : null
+                                ]
+                            }, `${check.code}/${index}`) : null;
+                        })
+                    }),
+                    ready ? /*#__PURE__*/ _jsx("p", {
+                        children: READINESS_COPY.ready
+                    }) : null,
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy || test.preflightPending || !test.preflight,
+                        onClick: ()=>{
+                            if (ready) void transition.run(()=>createApi(surface.apiRoute).start(id));
+                            else if (next) jump(next.section, next.arm);
+                        },
+                        children: ready ? C.start : C.finishSetup
+                    }),
+                    transition.error ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: transition.error
+                    }) : null
+                ]
+            }) : arm?.kind === 'control' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        children: C.originalHelp
+                    }),
+                    picker
+                ]
+            }) : collection ? /*#__PURE__*/ _jsx(CopyRoute, {
+                collection: collection,
+                children: picker
+            }) : null,
+            arm ? /*#__PURE__*/ _jsx(FieldErrors, {
+                test: test,
+                path: `arms.${doc.arms.findIndex((item)=>item.key === arm.key)}.pageTarget`
+            }) : null,
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-new-test-actions",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy,
+                        onClick: ()=>{
+                            const previous = steps[steps.indexOf(step) - 1];
+                            if (previous) setStep(previous);
+                            else leave();
+                        },
+                        children: C.back
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy,
+                        onClick: leave,
+                        children: C.backToTest
+                    }),
+                    step !== 'review' ? /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy || step === 'collection' && !collection,
+                        onClick: ()=>setStep(steps[steps.indexOf(step) + 1] ?? 'review'),
+                        children: C.next
+                    }) : null
+                ]
+            }),
+            test.errors.pageCollection ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.errors.pageCollection
+            }) : null
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/CopyRoute.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { PageCollection } from './pagePicker.model.js';
+export declare function CopyRoute({ collection, children }: {
+    collection: PageCollection;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/admin/surface/pagePicker/CopyRoute.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PAGE_COPY as C, openCollectionCopy, openOriginalCopy } from '../../copy/pages.js';
+export function CopyRoute({ collection, children }) {
+    const link = /*#__PURE__*/ _jsx("a", {
+        href: collection.copyUrl,
+        target: "_blank",
+        rel: "noopener",
+        children: collection.copyLabel ?? openCollectionCopy(collection.label)
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-copy-route",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-copy-route-action"
+            }),
+            collection.copyHint ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs("p", {
+                        children: [
+                            collection.copyHint,
+                            ' ',
+                            link
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        children: C.ownAddress
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs("ol", {
+                children: [
+                    /*#__PURE__*/ _jsxs("li", {
+                        children: [
+                            openOriginalCopy(collection.label),
+                            ' ',
+                            link
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("li", {
+                        children: C.duplicateStep
+                    }),
+                    /*#__PURE__*/ _jsx("li", {
+                        children: C.ownAddress
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                children: C.thenChoose
+            }),
+            children
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/PageCombobox.d.ts

@@ -0,0 +1,10 @@
+import type { TestDocApi } from '../contracts.js';
+import type { PageCollection } from './pagePicker.model.js';
+import './pagePicker.css';
+/** One input owns focus; list options are navigated through aria-activedescendant. */
+export declare function PageCombobox({ collection, test, armKey, apiRoute }: {
+    collection: PageCollection;
+    test: TestDocApi;
+    armKey: string;
+    apiRoute: string;
+}): import("react").JSX.Element;