@delmaredigital/payload-experiments 0.1.0-rc.7 → 0.2.0-rc.2

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

@@ -0,0 +1,355 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 './newTest.css';
+export function NewTest({ surface, pages }) {
+    const router = useRouter();
+    const [step, setStep] = useState('kind');
+    const [pointId, setPointId] = useState('');
+    const point = surface.flagPoints.find((item)=>item.id === pointId);
+    const [unitType, setUnitType] = useState('visitor');
+    const [name, setName] = useState('');
+    const [hypothesis, setHypothesis] = useState('');
+    const [advanced, setAdvanced] = useState(false);
+    const [layers, setLayers] = useState([]);
+    const [layer, setLayer] = useState();
+    const [layerState, setLayerState] = useState('loading');
+    const [layerRetry, setLayerRetry] = useState(0);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState('');
+    const inFlight = useRef(false);
+    useEffect(()=>{
+        if (step !== 'setting' || !advanced) return;
+        const controller = new AbortController();
+        setLayerState('loading');
+        void (async ()=>{
+            try {
+                const response = await fetch(`${surface.apiRoute.replace(/\/$/, '')}/xp-layers?depth=0&limit=100`, {
+                    credentials: 'include',
+                    signal: controller.signal
+                });
+                const body = await response.json();
+                if (!response.ok || !Array.isArray(body?.docs)) throw new Error('groups');
+                if (!controller.signal.aborted) {
+                    setLayers(body.docs);
+                    setLayerState('ready');
+                }
+            } catch  {
+                if (!controller.signal.aborted) setLayerState('error');
+            }
+        })();
+        return ()=>controller.abort();
+    }, [
+        step,
+        advanced,
+        surface.apiRoute,
+        layerRetry
+    ]);
+    async function submit() {
+        if (inFlight.current || !point || !name.trim()) return;
+        inFlight.current = true;
+        setPending(true);
+        setError('');
+        try {
+            const { id } = await createTest(surface.apiRoute, {
+                kind: 'flag',
+                unitType,
+                name,
+                flagPoint: point.id,
+                ...layer === undefined ? {} : {
+                    layer
+                },
+                ...hypothesis.trim() ? {
+                    hypothesis
+                } : {}
+            });
+            router.push(formatAdminURL({
+                adminRoute: surface.adminRoute,
+                path: `/experiments/${encodeURIComponent(String(id))}`
+            }));
+        } catch (cause) {
+            setError(cause instanceof CreateRefused ? cause.message : C.createError);
+            inFlight.current = false;
+            setPending(false);
+        }
+    }
+    const collections = [
+        ...new Set(pages?.map((page)=>page.collection))
+    ];
+    return /*#__PURE__*/ _jsxs("main", {
+        className: "xp-new-test",
+        children: [
+            step === 'kind' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        children: C.question
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-new-test-cards",
+                        children: [
+                            pages !== undefined ? /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                className: "xp-new-test-card",
+                                onClick: ()=>setStep('block'),
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: C.block
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: C.blockMeaning
+                                    }),
+                                    surface.descriptions?.block ? /*#__PURE__*/ _jsx("span", {
+                                        children: surface.descriptions.block
+                                    }) : null
+                                ]
+                            }) : null,
+                            surface.flagPoints.length > 0 ? /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                className: "xp-new-test-card",
+                                onClick: ()=>setStep('setting'),
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: C.setting
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: C.settingMeaning
+                                    }),
+                                    surface.descriptions?.setting ? /*#__PURE__*/ _jsx("span", {
+                                        children: surface.descriptions.setting
+                                    }) : null
+                                ]
+                            }) : null
+                        ]
+                    }),
+                    pages === undefined && !surface.flagPoints.length ? /*#__PURE__*/ _jsx("p", {
+                        children: C.unavailable
+                    }) : null
+                ]
+            }) : step === 'block' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        children: C.block
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        children: C.handoff
+                    }),
+                    !pages?.length ? /*#__PURE__*/ _jsx("p", {
+                        children: C.noPages
+                    }) : collections.map((collection)=>{
+                        const group = pages.filter((page)=>page.collection === collection);
+                        return /*#__PURE__*/ _jsxs("section", {
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: group[0].collectionLabel
+                                }),
+                                /*#__PURE__*/ _jsx("ul", {
+                                    children: group.map((page)=>/*#__PURE__*/ _jsxs("li", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: page.title
+                                                }),
+                                                ' ',
+                                                /*#__PURE__*/ _jsx("a", {
+                                                    href: page.editorUrl,
+                                                    children: C.open
+                                                })
+                                            ]
+                                        }, `${typeof page.id}:${page.id}`))
+                                }),
+                                group.length === 50 ? /*#__PURE__*/ _jsx("p", {
+                                    children: C.recentPages
+                                }) : null
+                            ]
+                        }, collection);
+                    })
+                ]
+            }) : step === 'setting' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        children: C.chooseSetting
+                    }),
+                    /*#__PURE__*/ _jsxs("fieldset", {
+                        children: [
+                            /*#__PURE__*/ _jsx("legend", {
+                                children: C.setting
+                            }),
+                            surface.flagPoints.map((setting)=>/*#__PURE__*/ _jsxs("label", {
+                                    className: "xp-new-test-choice",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "radio",
+                                            name: "setting",
+                                            checked: pointId === setting.id,
+                                            onChange: ()=>{
+                                                if (pointId !== setting.id) {
+                                                    setPointId(setting.id);
+                                                    setName(setting.label);
+                                                }
+                                            }
+                                        }),
+                                        setting.label,
+                                        setting.description ? /*#__PURE__*/ _jsx("span", {
+                                            children: setting.description
+                                        }) : null
+                                    ]
+                                }, setting.id))
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("fieldset", {
+                        "aria-describedby": "xp-new-people-help",
+                        children: [
+                            /*#__PURE__*/ _jsx("legend", {
+                                children: C.people
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "radio",
+                                        name: "people",
+                                        checked: unitType === 'visitor',
+                                        onChange: ()=>setUnitType('visitor')
+                                    }),
+                                    C.visitors
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "radio",
+                                        name: "people",
+                                        checked: unitType === 'user',
+                                        onChange: ()=>setUnitType('user')
+                                    }),
+                                    C.users
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        id: "xp-new-people-help",
+                        children: C.peopleHelp
+                    }),
+                    /*#__PURE__*/ _jsxs("details", {
+                        open: advanced,
+                        onToggle: (event)=>setAdvanced(event.currentTarget.open),
+                        children: [
+                            /*#__PURE__*/ _jsx("summary", {
+                                children: C.advanced
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                children: [
+                                    C.group,
+                                    /*#__PURE__*/ _jsxs("select", {
+                                        "aria-describedby": "xp-new-group-help",
+                                        disabled: layerState !== 'ready',
+                                        value: layer === undefined ? '' : layers.findIndex((item)=>item.id === layer),
+                                        onChange: (event)=>setLayer(event.currentTarget.value === '' ? undefined : layers[Number(event.currentTarget.value)]?.id),
+                                        children: [
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "",
+                                                children: C.noGroup
+                                            }),
+                                            layers.map((item, index)=>/*#__PURE__*/ _jsx("option", {
+                                                    value: index,
+                                                    children: item.name
+                                                }, index))
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                id: "xp-new-group-help",
+                                children: C.groupHelp
+                            }),
+                            layerState === 'loading' ? /*#__PURE__*/ _jsx("p", {
+                                role: "status",
+                                children: C.groupsLoading
+                            }) : layerState === 'error' ? /*#__PURE__*/ _jsxs("p", {
+                                role: "alert",
+                                children: [
+                                    C.groupsError,
+                                    ' ',
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>setLayerRetry((value)=>value + 1),
+                                        children: C.retry
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs("form", {
+                onSubmit: (event)=>{
+                    event.preventDefault();
+                    void submit();
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        children: C.nameQuestion
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        children: [
+                            C.name,
+                            /*#__PURE__*/ _jsx("input", {
+                                required: true,
+                                value: name,
+                                disabled: pending,
+                                onChange: (event)=>setName(event.currentTarget.value)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        children: [
+                            C.hypothesis,
+                            /*#__PURE__*/ _jsx("textarea", {
+                                value: hypothesis,
+                                disabled: pending,
+                                onChange: (event)=>setHypothesis(event.currentTarget.value)
+                            })
+                        ]
+                    }),
+                    error ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: error
+                    }) : null,
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "submit",
+                        disabled: pending || !name.trim(),
+                        children: pending ? C.creating : C.createTest
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-new-test-actions",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: pending,
+                        onClick: ()=>{
+                            if (step === 'kind') router.push(formatAdminURL({
+                                adminRoute: surface.adminRoute,
+                                path: '/experiments'
+                            }));
+                            else {
+                                setError('');
+                                setStep(step === 'name' ? 'setting' : 'kind');
+                            }
+                        },
+                        children: C.back
+                    }),
+                    step === 'setting' ? /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: !point,
+                        onClick: ()=>setStep('name'),
+                        children: C.next
+                    }) : null
+                ]
+            })
+        ]
+    });
+}

package/dist/admin/surface/newTest/newTest.css

@@ -0,0 +1,9 @@
+.xp-new-test { max-width: 60rem; padding: var(--base); color: var(--theme-text); }
+.xp-new-test-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--base); }
+.xp-new-test-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border: 1px solid var(--theme-elevation-200); border-radius: .5rem; background: var(--theme-elevation-50); color: var(--theme-text); text-align: left; cursor: pointer; font: inherit; }
+.xp-new-test-card strong { font-size: 1.25rem; }
+.xp-new-test-card:hover { background: var(--theme-elevation-100); }
+.xp-new-test label { display: block; margin-block: .75rem; }
+.xp-new-test input:not([type=radio]), .xp-new-test textarea, .xp-new-test select { display: block; width: 100%; max-width: 36rem; padding: .5rem; color: var(--theme-text); background: var(--theme-input-bg); border: 1px solid var(--theme-elevation-300); font: inherit; }
+.xp-new-test-choice span { display: block; margin-left: 1.5rem; }
+.xp-new-test-actions { display: flex; gap: 1rem; margin-top: var(--base); }

package/dist/admin/surface/pageBlock/pageBlock.model.d.ts

@@ -0,0 +1,6 @@
+import type { Arm } from '../../../types/contracts.js';
+import type { PreflightResult } from '../../../types/endpoints.js';
+type Placement = PreflightResult['placements'][number];
+export declare function placementLine(placement: Placement): string;
+export declare function slotReady(placement: Placement, arm: Arm): boolean;
+export {};

package/dist/admin/surface/pageBlock/pageBlock.model.js

@@ -0,0 +1,8 @@
+import { TEST_PAGE as C } from '../../copy/testPage.js';
+export function placementLine(placement) {
+    return `${C.onPage} ${placement.title} (${placement.detail === 'Published' ? 'Published' : 'Draft'})`;
+}
+export function slotReady(placement, arm) {
+    const slot = arm.kind === 'holdout' ? 'control' : arm.slot;
+    return Boolean(slot && (placement.slots?.[slot] ?? 0) > 0);
+}

package/dist/admin/surface/pageBlock/parts.d.ts

@@ -0,0 +1,2 @@
+import type { KindParts } from '../contracts.js';
+export declare const pageBlockParts: KindParts;

package/dist/admin/surface/pageBlock/parts.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TEST_PAGE as C } from '../../copy/testPage.js';
+import { placementLine, slotReady } from './pageBlock.model.js';
+function Binding({ test }) {
+    const placements = test.preflight?.placements ?? [];
+    return /*#__PURE__*/ _jsx("div", {
+        className: "xp-page-binding",
+        children: placements.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                placements.map((placement, index)=>/*#__PURE__*/ _jsxs("p", {
+                        children: [
+                            placementLine(placement),
+                            ' ',
+                            placement.editorUrl ? /*#__PURE__*/ _jsx("a", {
+                                href: placement.editorUrl,
+                                children: C.openPage
+                            }) : null
+                        ]
+                    }, index)),
+                /*#__PURE__*/ _jsx("p", {
+                    children: C.editedOnPage
+                })
+            ]
+        }) : /*#__PURE__*/ _jsx("p", {
+            children: C.notPlaced
+        })
+    });
+}
+function VersionContent({ test, armIndex }) {
+    const arm = test.doc?.arms[armIndex];
+    if (!arm) return null;
+    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("p", {
+        children: C.holdoutContent
+    });
+    const placements = test.preflight?.placements ?? [];
+    return /*#__PURE__*/ _jsx("div", {
+        children: placements.length ? placements.map((placement, index)=>/*#__PURE__*/ _jsxs("p", {
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            placement.title,
+                            ": "
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: slotReady(placement, arm) ? 'xp-content-ready' : 'xp-content-empty',
+                        children: slotReady(placement, arm) ? C.ready : C.emptySlot
+                    }),
+                    ' ',
+                    placement.editorUrl ? /*#__PURE__*/ _jsx("a", {
+                        href: placement.editorUrl,
+                        children: C.editOnPage
+                    }) : null
+                ]
+            }, index)) : /*#__PURE__*/ _jsx("p", {
+            children: C.emptySlot
+        })
+    });
+}
+export const pageBlockParts = {
+    Binding,
+    VersionContent
+};

package/dist/admin/surface/readiness/ActionDialogs.d.ts

@@ -0,0 +1,15 @@
+import type { SectionProps } from '../contracts.js';
+import type { ExperimentAction } from '../../actions/actions.model.js';
+type Props = SectionProps & {
+    onClose(): void;
+};
+/** Prop-driven ConfirmDialog adapter: same model/copy, section reload instead of a page reload. */
+export declare function ConfirmAction({ test, surface, action, winnerLabel, onClose }: Props & {
+    action: ExperimentAction;
+    winnerLabel: string;
+}): import("react").JSX.Element;
+/** AllocateDialog's validation and copy, with data supplied by the test document. */
+export declare function AllocateAction({ test, surface, onClose }: Props): import("react").JSX.Element;
+/** AddMetricDialog adapter; the primary goal is deliberately absent from the role picker. */
+export declare function AddMetricAction({ test, surface, onClose }: Props): import("react").JSX.Element;
+export {};