@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.js

@@ -0,0 +1,149 @@
+import react, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Button, Input, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as info_svg_ReactComponent } from "@webiny/icons/info.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { VariantSplitRow } from "./VariantSplitRow.js";
+import { ExperimentFormPresenterFeature } from "../feature.js";
+const ExperimentFormView_ExperimentFormViewInner = observer(function({ onCancel, onSubmit, initial, submitLabel = "Create experiment", allowStructureChange = true }) {
+    const { presenter } = useFeature(ExperimentFormPresenterFeature);
+    useMemo(()=>{
+        presenter.init(initial, {
+            submitLabel,
+            allowStructureChange,
+            onSubmit
+        });
+    }, [
+        presenter
+    ]);
+    const { vm } = presenter;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            flex: 1,
+            overflowY: "auto",
+            padding: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 20
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Experiment name",
+        value: vm.name,
+        onChange: (value)=>presenter.setName(value),
+        placeholder: "e.g. Homepage CTA test"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 12
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Experiment key",
+        value: vm.key,
+        onChange: (value)=>presenter.setKey(value),
+        placeholder: "homepage-cta-test"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            gap: 8,
+            background: "#f5f5f5",
+            borderRadius: 8,
+            padding: 12,
+            marginBottom: 28
+        }
+    }, /*#__PURE__*/ react.createElement(info_svg_ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            flexShrink: 0,
+            marginTop: 2
+        }
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "This key is the identifier reported to your analytics platform to track this experiment. Auto-generated from the name — edit it to override.")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 4
+        }
+    }, /*#__PURE__*/ react.createElement(Text, null, "Variants & traffic split"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: 100 === vm.total ? "#0f9d58" : "#d93025"
+        }
+    }, "Total ", vm.total, "%")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 16
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Each variant is an independent copy of the page. Sliders auto-balance to 100%.")), vm.buckets.map((bucket, index)=>/*#__PURE__*/ react.createElement(VariantSplitRow, {
+            key: bucket.id,
+            name: bucket.name,
+            variantKey: bucket.key,
+            description: bucket.description,
+            isControl: bucket.isControl,
+            weight: bucket.weight,
+            variantIndex: vm.buckets.slice(0, index).filter((b)=>!b.isControl).length,
+            onNameChange: (value)=>presenter.changeName(index, value),
+            onKeyChange: (value)=>presenter.changeKey(index, value),
+            onDescriptionChange: (value)=>presenter.changeDescription(index, value),
+            onChange: (value)=>presenter.changeWeight(index, value),
+            onRemove: bucket.isControl || !vm.allowStructureChange || vm.variantCount <= 1 ? void 0 : ()=>presenter.removeVariant(index),
+            removeIcon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, {
+                style: {
+                    width: 14,
+                    height: 14
+                }
+            })
+        })), vm.allowStructureChange ? /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 8
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Add variant",
+        onClick: ()=>presenter.addVariant()
+    })) : null), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: 12,
+            padding: 16,
+            borderTop: "1px solid #eee"
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Cancel",
+        onClick: onCancel
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: vm.submitLabel,
+        disabled: !vm.canSubmit,
+        onClick: ()=>presenter.submit()
+    })));
+});
+const ExperimentFormView = (props)=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        ExperimentFormPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(ExperimentFormView_ExperimentFormViewInner, props));
+};
+export { ExperimentFormView };
+
+//# sourceMappingURL=ExperimentFormView.js.map

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/components/ExperimentFormView.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/components/ExperimentFormView.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Button, Input, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { VariantSplitRow } from \"./VariantSplitRow.js\";\nimport { ExperimentFormPresenterFeature } from \"../feature.js\";\nimport type {\n    ExperimentFormInitial,\n    NewExperimentPayload\n} from \"../abstractions/ExperimentFormPresenter.js\";\n\ninterface Props {\n    onCancel: () => void;\n    onSubmit: (payload: NewExperimentPayload) => void;\n    initial?: ExperimentFormInitial;\n    submitLabel?: string;\n    /** When false, variants can't be added/removed (used when editing an existing experiment). */\n    allowStructureChange?: boolean;\n}\n\nconst ExperimentFormViewInner = observer(function ExperimentFormViewInner({\n    onCancel,\n    onSubmit,\n    initial,\n    submitLabel = \"Create experiment\",\n    allowStructureChange = true\n}: Props) {\n    const { presenter } = useFeature(ExperimentFormPresenterFeature);\n\n    useMemo(() => {\n        presenter.init(initial, { submitLabel, allowStructureChange, onSubmit });\n    }, [presenter]);\n\n    const { vm } = presenter;\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", height: \"100%\" }}>\n            <div style={{ flex: 1, overflowY: \"auto\", padding: 24 }}>\n                <div style={{ marginBottom: 20 }}>\n                    <Input\n                        label=\"Experiment name\"\n                        value={vm.name}\n                        onChange={value => presenter.setName(value)}\n                        placeholder=\"e.g. Homepage CTA test\"\n                    />\n                </div>\n\n                <div style={{ marginBottom: 12 }}>\n                    <Input\n                        label=\"Experiment key\"\n                        value={vm.key}\n                        onChange={value => presenter.setKey(value)}\n                        placeholder=\"homepage-cta-test\"\n                    />\n                </div>\n\n                <div\n                    style={{\n                        display: \"flex\",\n                        gap: 8,\n                        background: \"#f5f5f5\",\n                        borderRadius: 8,\n                        padding: 12,\n                        marginBottom: 28\n                    }}\n                >\n                    <InfoIcon style={{ width: 18, height: 18, flexShrink: 0, marginTop: 2 }} />\n                    <Text size=\"sm\">\n                        This key is the identifier reported to your analytics platform to track this\n                        experiment. Auto-generated from the name — edit it to override.\n                    </Text>\n                </div>\n\n                <div\n                    style={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"space-between\",\n                        marginBottom: 4\n                    }}\n                >\n                    <Text>Variants &amp; traffic split</Text>\n                    <span\n                        style={{\n                            fontSize: 13,\n                            fontWeight: 600,\n                            color: vm.total === 100 ? \"#0f9d58\" : \"#d93025\"\n                        }}\n                    >\n                        Total {vm.total}%\n                    </span>\n                </div>\n                <div style={{ marginBottom: 16 }}>\n                    <Text size=\"sm\">\n                        Each variant is an independent copy of the page. Sliders auto-balance to\n                        100%.\n                    </Text>\n                </div>\n\n                {vm.buckets.map((bucket, index) => (\n                    <VariantSplitRow\n                        key={bucket.id}\n                        name={bucket.name}\n                        variantKey={bucket.key}\n                        description={bucket.description}\n                        isControl={bucket.isControl}\n                        weight={bucket.weight}\n                        variantIndex={vm.buckets.slice(0, index).filter(b => !b.isControl).length}\n                        onNameChange={value => presenter.changeName(index, value)}\n                        onKeyChange={value => presenter.changeKey(index, value)}\n                        onDescriptionChange={value => presenter.changeDescription(index, value)}\n                        onChange={value => presenter.changeWeight(index, value)}\n                        onRemove={\n                            bucket.isControl || !vm.allowStructureChange || vm.variantCount <= 1\n                                ? undefined\n                                : () => presenter.removeVariant(index)\n                        }\n                        removeIcon={<CloseIcon style={{ width: 14, height: 14 }} />}\n                    />\n                ))}\n\n                {vm.allowStructureChange ? (\n                    <div style={{ marginTop: 8 }}>\n                        <Button\n                            variant=\"tertiary\"\n                            icon={<AddIcon />}\n                            text=\"Add variant\"\n                            onClick={() => presenter.addVariant()}\n                        />\n                    </div>\n                ) : null}\n            </div>\n\n            <div\n                style={{\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    gap: 12,\n                    padding: 16,\n                    borderTop: \"1px solid #eee\"\n                }}\n            >\n                <Button variant=\"secondary\" text=\"Cancel\" onClick={onCancel} />\n                <Button\n                    variant=\"primary\"\n                    text={vm.submitLabel}\n                    disabled={!vm.canSubmit}\n                    onClick={() => presenter.submit()}\n                />\n            </div>\n        </div>\n    );\n});\n\nexport const ExperimentFormView = (props: Props) => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ExperimentFormPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <ExperimentFormViewInner {...props} />\n        </DiContainerProvider>\n    );\n};\n"],"names":["ExperimentFormViewInner","observer","onCancel","onSubmit","initial","submitLabel","allowStructureChange","presenter","useFeature","ExperimentFormPresenterFeature","useMemo","vm","Input","value","InfoIcon","Text","bucket","index","VariantSplitRow","b","undefined","CloseIcon","Button","AddIcon","ExperimentFormView","props","container","useContainer","scopedContainer","child","DiContainerProvider"],"mappings":"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"}

package/presentation/experiments/ExperimentForm/components/VariantSplitRow.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface Props {
+    name: string;
+    variantKey: string;
+    description: string;
+    isControl: boolean;
+    weight: number;
+    variantIndex: number;
+    onNameChange: (value: string) => void;
+    onKeyChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onChange: (value: number) => void;
+    onRemove?: () => void;
+    removeIcon: React.ReactNode;
+}
+export declare const VariantSplitRow: ({ name, variantKey, description, isControl, weight, variantIndex, onNameChange, onKeyChange, onDescriptionChange, onChange, onRemove, removeIcon }: Props) => React.JSX.Element;
+export {};

package/presentation/experiments/ExperimentForm/components/VariantSplitRow.js

@@ -0,0 +1,122 @@
+import react from "react";
+import { IconButton, Input } from "@webiny/admin-ui";
+import { bucketColor } from "../../shared/variantColors.js";
+const Field = ({ label, children })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 12
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            color: "#6b7280",
+            marginBottom: 6
+        }
+    }, label), children);
+const VariantSplitRow = ({ name, variantKey, description, isControl, weight, variantIndex, onNameChange, onKeyChange, onDescriptionChange, onChange, onRemove, removeIcon })=>{
+    const color = bucketColor(isControl, variantIndex);
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            border: "1px solid #eee",
+            borderRadius: 10,
+            padding: 16,
+            marginBottom: 12
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: color,
+            flexShrink: 0
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: 600
+        }
+    }, isControl ? "Control" : name || "Variant")), isControl ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 12,
+            color: "#6b7280",
+            background: "#f2f2f2",
+            borderRadius: 6,
+            padding: "2px 8px",
+            whiteSpace: "nowrap"
+        }
+    }, "Current page") : onRemove ? /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: removeIcon,
+        onClick: onRemove
+    }) : null), /*#__PURE__*/ react.createElement(Field, {
+        label: "Name"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: name,
+        onChange: onNameChange,
+        disabled: isControl,
+        placeholder: "Variant name"
+    })), /*#__PURE__*/ react.createElement(Field, {
+        label: "Key"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: variantKey,
+        onChange: onKeyChange,
+        placeholder: "variant-key"
+    })), /*#__PURE__*/ react.createElement(Field, {
+        label: "Description"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: description,
+        onChange: onDescriptionChange,
+        placeholder: "Optional"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            marginTop: 16
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            color: "#6b7280"
+        }
+    }, "Traffic"), /*#__PURE__*/ react.createElement("input", {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1,
+        value: weight,
+        onChange: (event)=>onChange(Number(event.target.value)),
+        style: {
+            flex: 1,
+            accentColor: color
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 44,
+            textAlign: "right",
+            fontWeight: 600,
+            fontSize: 14
+        }
+    }, weight, "%")));
+};
+export { VariantSplitRow };
+
+//# sourceMappingURL=VariantSplitRow.js.map

package/presentation/experiments/ExperimentForm/components/VariantSplitRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/components/VariantSplitRow.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/components/VariantSplitRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Input } from \"@webiny/admin-ui\";\nimport { bucketColor } from \"../../shared/variantColors.js\";\n\ninterface FieldProps {\n    label: string;\n    children: React.ReactNode;\n}\n\nconst Field = ({ label, children }: FieldProps) => {\n    return (\n        <div style={{ marginTop: 12 }}>\n            <div\n                style={{\n                    fontSize: 11,\n                    fontWeight: 600,\n                    letterSpacing: 0.5,\n                    textTransform: \"uppercase\",\n                    color: \"#6b7280\",\n                    marginBottom: 6\n                }}\n            >\n                {label}\n            </div>\n            {children}\n        </div>\n    );\n};\n\ninterface Props {\n    name: string;\n    variantKey: string;\n    description: string;\n    isControl: boolean;\n    weight: number;\n    variantIndex: number;\n    onNameChange: (value: string) => void;\n    onKeyChange: (value: string) => void;\n    onDescriptionChange: (value: string) => void;\n    onChange: (value: number) => void;\n    onRemove?: () => void;\n    removeIcon: React.ReactNode;\n}\n\nexport const VariantSplitRow = ({\n    name,\n    variantKey,\n    description,\n    isControl,\n    weight,\n    variantIndex,\n    onNameChange,\n    onKeyChange,\n    onDescriptionChange,\n    onChange,\n    onRemove,\n    removeIcon\n}: Props) => {\n    const color = bucketColor(isControl, variantIndex);\n\n    return (\n        <div\n            style={{\n                border: \"1px solid #eee\",\n                borderRadius: 10,\n                padding: 16,\n                marginBottom: 12\n            }}\n        >\n            <div\n                style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    gap: 8\n                }}\n            >\n                <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                    <span\n                        style={{\n                            width: 10,\n                            height: 10,\n                            borderRadius: \"50%\",\n                            background: color,\n                            flexShrink: 0\n                        }}\n                    />\n                    <span style={{ fontWeight: 600 }}>\n                        {isControl ? \"Control\" : name || \"Variant\"}\n                    </span>\n                </div>\n                {isControl ? (\n                    <span\n                        style={{\n                            fontSize: 12,\n                            color: \"#6b7280\",\n                            background: \"#f2f2f2\",\n                            borderRadius: 6,\n                            padding: \"2px 8px\",\n                            whiteSpace: \"nowrap\"\n                        }}\n                    >\n                        Current page\n                    </span>\n                ) : onRemove ? (\n                    <IconButton variant=\"ghost\" size=\"sm\" icon={removeIcon} onClick={onRemove} />\n                ) : null}\n            </div>\n\n            <Field label=\"Name\">\n                <Input\n                    value={name}\n                    onChange={onNameChange}\n                    disabled={isControl}\n                    placeholder=\"Variant name\"\n                />\n            </Field>\n\n            <Field label=\"Key\">\n                <Input value={variantKey} onChange={onKeyChange} placeholder=\"variant-key\" />\n            </Field>\n\n            <Field label=\"Description\">\n                <Input value={description} onChange={onDescriptionChange} placeholder=\"Optional\" />\n            </Field>\n\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginTop: 16 }}>\n                <span\n                    style={{\n                        fontSize: 11,\n                        fontWeight: 600,\n                        letterSpacing: 0.5,\n                        textTransform: \"uppercase\",\n                        color: \"#6b7280\"\n                    }}\n                >\n                    Traffic\n                </span>\n                <input\n                    type=\"range\"\n                    min={0}\n                    max={100}\n                    step={1}\n                    value={weight}\n                    onChange={event => onChange(Number(event.target.value))}\n                    style={{ flex: 1, accentColor: color }}\n                />\n                <span style={{ width: 44, textAlign: \"right\", fontWeight: 600, fontSize: 14 }}>\n                    {weight}%\n                </span>\n            </div>\n        </div>\n    );\n};\n"],"names":["Field","label","children","VariantSplitRow","name","variantKey","description","isControl","weight","variantIndex","onNameChange","onKeyChange","onDescriptionChange","onChange","onRemove","removeIcon","color","bucketColor","IconButton","Input","event","Number"],"mappings":";;;AASA,MAAMA,QAAQ,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAc,GACnC,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,WAAW;QAAG;qBACxB,oBAAC;QACG,OAAO;YACH,UAAU;YACV,YAAY;YACZ,eAAe;YACf,eAAe;YACf,OAAO;YACP,cAAc;QAClB;OAECD,QAEJC;AAoBN,MAAMC,kBAAkB,CAAC,EAC5BC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,YAAY,EACZC,WAAW,EACXC,mBAAmB,EACnBC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACN;IACJ,MAAMC,QAAQC,YAAYV,WAAWE;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,QAAQ;YACR,cAAc;YACd,SAAS;YACT,cAAc;QAClB;qBAEA,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,KAAK;QACT;qBAEA,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;qBACxD,oBAAC;QACG,OAAO;YACH,OAAO;YACP,QAAQ;YACR,cAAc;YACd,YAAYO;YACZ,YAAY;QAChB;sBAEJ,oBAAC;QAAK,OAAO;YAAE,YAAY;QAAI;OAC1BT,YAAY,YAAYH,QAAQ,aAGxCG,YAAY,WAAZA,GACG,oBAAC;QACG,OAAO;YACH,UAAU;YACV,OAAO;YACP,YAAY;YACZ,cAAc;YACd,SAAS;YACT,YAAY;QAChB;OACH,kBAGDO,WAAW,WAAXA,GACA,oBAACI,YAAUA;QAAC,SAAQ;QAAQ,MAAK;QAAK,MAAMH;QAAY,SAASD;SACjE,qBAGR,oBAACd,OAAKA;QAAC,OAAM;qBACT,oBAACmB,OAAKA;QACF,OAAOf;QACP,UAAUM;QACV,UAAUH;QACV,aAAY;uBAIpB,oBAACP,OAAKA;QAAC,OAAM;qBACT,oBAACmB,OAAKA;QAAC,OAAOd;QAAY,UAAUM;QAAa,aAAY;uBAGjE,oBAACX,OAAKA;QAAC,OAAM;qBACT,oBAACmB,OAAKA;QAAC,OAAOb;QAAa,UAAUM;QAAqB,aAAY;uBAG1E,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;YAAI,WAAW;QAAG;qBACxE,oBAAC;QACG,OAAO;YACH,UAAU;YACV,YAAY;YACZ,eAAe;YACf,eAAe;YACf,OAAO;QACX;OACH,0BAGD,oBAAC;QACG,MAAK;QACL,KAAK;QACL,KAAK;QACL,MAAM;QACN,OAAOJ;QACP,UAAUY,CAAAA,QAASP,SAASQ,OAAOD,MAAM,MAAM,CAAC,KAAK;QACrD,OAAO;YAAE,MAAM;YAAG,aAAaJ;QAAM;sBAEzC,oBAAC;QAAK,OAAO;YAAE,OAAO;YAAI,WAAW;YAAS,YAAY;YAAK,UAAU;QAAG;OACvER,QAAO;AAK5B"}

package/presentation/experiments/ExperimentForm/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const ExperimentFormPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions/ExperimentFormPresenter.js").IExperimentFormPresenter;
+}, []>;

package/presentation/experiments/ExperimentForm/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { ExperimentFormPresenter } from "./abstractions/ExperimentFormPresenter.js";
+import { ExperimentFormPresenter as external_ExperimentFormPresenter_js_ExperimentFormPresenter } from "./ExperimentFormPresenter.js";
+const ExperimentFormPresenterFeature = createFeature({
+    name: "WebsiteBuilder/ExperimentFormPresenter",
+    register (container) {
+        container.register(external_ExperimentFormPresenter_js_ExperimentFormPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(ExperimentFormPresenter)
+        };
+    }
+});
+export { ExperimentFormPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/experiments/ExperimentForm/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/feature.js","sources":["../../../../src/presentation/experiments/ExperimentForm/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { ExperimentFormPresenter as PresenterAbstraction } from \"./abstractions/ExperimentFormPresenter.js\";\nimport { ExperimentFormPresenter } from \"./ExperimentFormPresenter.js\";\n\nexport const ExperimentFormPresenterFeature = createFeature({\n    name: \"WebsiteBuilder/ExperimentFormPresenter\",\n    register(container) {\n        container.register(ExperimentFormPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(PresenterAbstraction)\n        };\n    }\n});\n"],"names":["ExperimentFormPresenterFeature","createFeature","container","ExperimentFormPresenter","PresenterAbstraction"],"mappings":";;;AAIO,MAAMA,iCAAiCC,cAAc;IACxD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,6DAAyB,gBAAgB;IAChE;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/experiments/ExperimentForm/index.d.ts

@@ -0,0 +1,3 @@
+export { ExperimentFormView } from "./components/ExperimentFormView.js";
+export { ExperimentFormPresenter } from "./abstractions/ExperimentFormPresenter.js";
+export { ExperimentFormPresenterFeature } from "./feature.js";

package/presentation/experiments/ExperimentForm/index.js

@@ -0,0 +1,3 @@
+export { ExperimentFormView } from "./components/ExperimentFormView.js";
+export { ExperimentFormPresenter } from "./abstractions/ExperimentFormPresenter.js";
+export { ExperimentFormPresenterFeature } from "./feature.js";

package/presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.d.ts

@@ -0,0 +1,18 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import type { ExperimentDto, VariantDto } from "../../../features/experiments/index.js";
+import { type IExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+/**
+ * Thin gateway-orchestration data source for the editor-embedded experiments UI: loads a page's
+ * experiments, a single experiment's variants, and the runtime kill-switch state.
+ */
+declare class ExperimentsEditorDataSourceImpl implements IExperimentsEditorDataSource {
+    private readonly gateway;
+    constructor(gateway: ExperimentsGateway.Interface);
+    listExperiments(pageEntryId: string): Promise<ExperimentDto[]>;
+    listVariants(experimentId: string): Promise<VariantDto[]>;
+    getExperimentPaused(experimentEntryId: string): Promise<boolean>;
+}
+export declare const ExperimentsEditorDataSource: typeof ExperimentsEditorDataSourceImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentsEditorDataSource>;
+};
+export {};

package/presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.js

@@ -0,0 +1,25 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+class ExperimentsEditorDataSourceImpl {
+    constructor(gateway){
+        this.gateway = gateway;
+    }
+    async listExperiments(pageEntryId) {
+        return this.gateway.listExperiments(pageEntryId).catch(()=>[]);
+    }
+    async listVariants(experimentId) {
+        return this.gateway.listVariants(experimentId).catch(()=>[]);
+    }
+    async getExperimentPaused(experimentEntryId) {
+        return this.gateway.getExperimentPaused(experimentEntryId).catch(()=>false);
+    }
+}
+const ExperimentsEditorDataSource_ExperimentsEditorDataSource = ExperimentsEditorDataSource.createImplementation({
+    implementation: ExperimentsEditorDataSourceImpl,
+    dependencies: [
+        ExperimentsGateway
+    ]
+});
+export { ExperimentsEditorDataSource_ExperimentsEditorDataSource as ExperimentsEditorDataSource };
+
+//# sourceMappingURL=ExperimentsEditorDataSource.js.map

package/presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.js","sources":["../../../../src/presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.ts"],"sourcesContent":["import { ExperimentsGateway } from \"~/features/experiments/index.js\";\nimport type { ExperimentDto, VariantDto } from \"~/features/experiments/index.js\";\nimport {\n    ExperimentsEditorDataSource as Abstraction,\n    type IExperimentsEditorDataSource\n} from \"./abstractions/ExperimentsEditorDataSource.js\";\n\n/**\n * Thin gateway-orchestration data source for the editor-embedded experiments UI: loads a page's\n * experiments, a single experiment's variants, and the runtime kill-switch state.\n */\nclass ExperimentsEditorDataSourceImpl implements IExperimentsEditorDataSource {\n    constructor(private readonly gateway: ExperimentsGateway.Interface) {}\n\n    async listExperiments(pageEntryId: string): Promise<ExperimentDto[]> {\n        return this.gateway.listExperiments(pageEntryId).catch(() => [] as ExperimentDto[]);\n    }\n\n    async listVariants(experimentId: string): Promise<VariantDto[]> {\n        return this.gateway.listVariants(experimentId).catch(() => [] as VariantDto[]);\n    }\n\n    async getExperimentPaused(experimentEntryId: string): Promise<boolean> {\n        return this.gateway.getExperimentPaused(experimentEntryId).catch(() => false);\n    }\n}\n\nexport const ExperimentsEditorDataSource = Abstraction.createImplementation({\n    implementation: ExperimentsEditorDataSourceImpl,\n    dependencies: [ExperimentsGateway]\n});\n"],"names":["ExperimentsEditorDataSourceImpl","gateway","pageEntryId","experimentId","experimentEntryId","ExperimentsEditorDataSource","Abstraction","ExperimentsGateway"],"mappings":";;AAWA,MAAMA;IACF,YAA6BC,OAAqC,CAAE;aAAvCA,OAAO,GAAPA;IAAwC;IAErE,MAAM,gBAAgBC,WAAmB,EAA4B;QACjE,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAACA,aAAa,KAAK,CAAC,IAAM,EAAE;IACnE;IAEA,MAAM,aAAaC,YAAoB,EAAyB;QAC5D,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAACA,cAAc,KAAK,CAAC,IAAM,EAAE;IACjE;IAEA,MAAM,oBAAoBC,iBAAyB,EAAoB;QACnE,OAAO,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAACA,mBAAmB,KAAK,CAAC,IAAM;IAC3E;AACJ;AAEO,MAAMC,0DAA8BC,4BAAAA,oBAAgC,CAAC;IACxE,gBAAgBN;IAChB,cAAc;QAACO;KAAmB;AACtC"}

package/presentation/experiments/ExperimentsEditor/ExperimentsEditorPresenter.d.ts

@@ -0,0 +1,67 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import type { ExperimentDto, UpdateExperimentInput, VariantContentDto, VariantDto } from "../../../features/experiments/index.js";
+import type { NewExperimentPayload } from "../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+import { type IExperimentsEditorPresenter, type IExperimentsEditorViewModel } from "./abstractions/ExperimentsEditorPresenter.js";
+import { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+declare class ExperimentsEditorPresenterImpl implements IExperimentsEditorPresenter {
+    private readonly gateway;
+    private readonly dataSource;
+    private baselineRevisionId;
+    private pageEntryId;
+    private experiments;
+    private selectedExperimentId;
+    private selectedVariantId;
+    private variants;
+    private paused;
+    private drawerOpen;
+    private editTarget;
+    private loadToken;
+    constructor(gateway: ExperimentsGateway.Interface, dataSource: ExperimentsEditorDataSource.Interface);
+    private get selectedExperiment();
+    private get selectedVariant();
+    private get variantOptions();
+    private get currentBucket();
+    private get runningExperiment();
+    private get switcherItems();
+    get vm(): IExperimentsEditorViewModel;
+    init(pageRevisionId: string): void;
+    reload(): Promise<void>;
+    selectExperiment(id: string | null): void;
+    selectVariant(variantId: string | null): void;
+    /**
+     * On the published (read-only) view, surface the running experiment and keep it selected so the
+     * preview toolbar tracks it. Mirrors the old read-only auto-select effect.
+     */
+    syncReadOnlySelection(isReadOnly: boolean): void;
+    openManage(): void;
+    editExperiment(experiment: ExperimentDto): void;
+    closeDrawer(): void;
+    /**
+     * Load the variants and kill-switch state for the currently selected experiment. A load token
+     * guards against a stale response overwriting a newer selection.
+     */
+    private loadSelectedExperiment;
+    pause(): Promise<void>;
+    resume(): Promise<void>;
+    /**
+     * Activate an experiment. Only one experiment can run on a page at a time, so any other running
+     * experiment (from the same page) is stopped first.
+     */
+    activate(experimentId: string): Promise<ExperimentDto>;
+    deactivate(experimentId: string): Promise<ExperimentDto>;
+    /**
+     * Persist a new experiment: create the experiment, then each variant (whose content the API
+     * copies from the baseline) marked ready, then write the traffic split now that we have the
+     * variant ids. The experiment key is carried in the analytics config.
+     */
+    createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto>;
+    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto>;
+    /** Delete an experiment along with its variants. */
+    deleteExperiment(experimentId: string): Promise<boolean>;
+    getVariant(id: string): Promise<VariantContentDto | null>;
+    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto>;
+}
+export declare const ExperimentsEditorPresenter: typeof ExperimentsEditorPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentsEditorPresenter>;
+};
+export {};