@servicetitan/dte-unlayer 0.122.0 → 0.124.0

package/dist/display-conditions/ConditionGroup.d.ts

@@ -1,9 +1,13 @@
-import { ConditionGroup as ConditionGroupType } from './types';
+import { FormInfo } from '../shared/forms';
+import { ConditionGroup as ConditionGroupType, FormFieldOption } from './types';
 import type { DataPointOption } from './types';
 export interface ConditionGroupProps {
     dataPointOptions: DataPointOption[];
+    formFieldOptions: FormFieldOption[];
+    forms: FormInfo[];
     group: ConditionGroupType;
+    onFormSelect: (formId: number) => void;
     onUpdate: (g: ConditionGroupType) => void;
 }
-export declare function ConditionGroup({ dataPointOptions, group, onUpdate, }: Readonly<ConditionGroupProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionGroup({ dataPointOptions, formFieldOptions, forms, group, onFormSelect, onUpdate, }: Readonly<ConditionGroupProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConditionGroup.d.ts.map

package/dist/display-conditions/ConditionGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionGroup.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAmB,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAChC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,cAAc,CAAC,EAC3B,gBAAgB,EAChB,KAAK,EACL,QAAQ,GACX,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA+D/B"}
+{"version":3,"file":"ConditionGroup.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAChC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,cAAc,CAAC,EAC3B,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,QAAQ,GACX,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAiE/B"}

package/dist/display-conditions/ConditionGroup.js

@@ -4,7 +4,7 @@ import PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';
 import { useCallback } from 'react';
 import { ConditionRow } from './ConditionRow';
 import { defaultCondition } from './constants';
-export function ConditionGroup({ dataPointOptions, group, onUpdate }) {
+export function ConditionGroup({ dataPointOptions, formFieldOptions, forms, group, onFormSelect, onUpdate }) {
     const addCondition = useCallback(()=>{
         const newCondition = {
             ...defaultCondition(),
@@ -37,9 +37,11 @@ export function ConditionGroup({ dataPointOptions, group, onUpdate }) {
     const removeCondition = useCallback((index)=>{
         let next = group.conditions.filter((_, i)=>i !== index);
         if (index === 0 && next.length > 0) {
-            const { logicalOperator: _unusedOp, ...rest } = next[0];
             next = [
-                rest,
+                {
+                    ...next[0],
+                    logicalOperator: undefined
+                },
                 ...next.slice(1)
             ];
         }
@@ -76,7 +78,10 @@ export function ConditionGroup({ dataPointOptions, group, onUpdate }) {
                             canRemove: true,
                             condition: c,
                             dataPointOptions: dataPointOptions,
+                            forms: forms,
+                            formFieldOptions: formFieldOptions,
                             onChange: (next)=>updateCondition(i, next),
+                            onFormSelect: onFormSelect,
                             onRemove: ()=>removeCondition(i)
                         })
                     }, c.id)),

package/dist/display-conditions/ConditionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/display-conditions/ConditionGroup.tsx"],"sourcesContent":["import { Button, Flex } from '@servicetitan/anvil2';\nimport PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';\nimport { useCallback } from 'react';\nimport { ConditionRow } from './ConditionRow';\nimport { defaultCondition } from './constants';\nimport { ConditionGroup as ConditionGroupType, SingleCondition } from './types';\nimport type { DataPointOption } from './types';\n\nexport interface ConditionGroupProps {\n    dataPointOptions: DataPointOption[];\n    group: ConditionGroupType;\n    onUpdate: (g: ConditionGroupType) => void;\n}\n\nexport function ConditionGroup({\n    dataPointOptions,\n    group,\n    onUpdate,\n}: Readonly<ConditionGroupProps>) {\n    const addCondition = useCallback(() => {\n        const newCondition: SingleCondition = {\n            ...defaultCondition(),\n            logicalOperator: 'and',\n        };\n        onUpdate({\n            ...group,\n            conditions: [...group.conditions, newCondition],\n        });\n    }, [group, onUpdate]);\n\n    const updateCondition = useCallback(\n        (index: number, c: SingleCondition) => {\n            const next = [...group.conditions];\n            next[index] = c;\n            onUpdate({ ...group, conditions: next });\n        },\n        [group, onUpdate],\n    );\n\n    const removeCondition = useCallback(\n        (index: number) => {\n            let next = group.conditions.filter((_, i) => i !== index);\n            if (index === 0 && next.length > 0) {\n                const { logicalOperator: _unusedOp, ...rest } = next[0];\n                next = [rest as SingleCondition, ...next.slice(1)];\n            }\n            onUpdate({\n                ...group,\n                conditions: next.length ? next : [defaultCondition()],\n            });\n        },\n        [group, onUpdate],\n    );\n\n    return (\n        <Flex direction=\"column\" gap=\"2\" style={{ width: '100%' }}>\n            <Flex direction=\"column\" gap=\"3\" style={{ width: '100%' }}>\n                {group.conditions.map((c, i) => (\n                    <Flex key={c.id} direction=\"column\" gap=\"3\" style={{ padding: '8px 0' }}>\n                        <ConditionRow\n                            canRemove\n                            condition={c}\n                            dataPointOptions={dataPointOptions}\n                            onChange={next => updateCondition(i, next)}\n                            onRemove={() => removeCondition(i)}\n                        />\n                    </Flex>\n                ))}\n                <Flex justifyContent=\"center\" style={{ paddingTop: 8, width: '100%' }}>\n                    <Button\n                        appearance=\"secondary\"\n                        icon={{ before: PlusIcon }}\n                        size=\"small\"\n                        onClick={addCondition}\n                    >\n                        Add Condition\n                    </Button>\n                </Flex>\n            </Flex>\n        </Flex>\n    );\n}\n"],"names":["Button","Flex","PlusIcon","useCallback","ConditionRow","defaultCondition","ConditionGroup","dataPointOptions","group","onUpdate","addCondition","newCondition","logicalOperator","conditions","updateCondition","index","c","next","removeCondition","filter","_","i","length","_unusedOp","rest","slice","direction","gap","style","width","map","padding","canRemove","condition","onChange","onRemove","id","justifyContent","paddingTop","appearance","icon","before","size","onClick"],"mappings":";AAAA,SAASA,MAAM,EAAEC,IAAI,QAAQ,uBAAuB;AACpD,OAAOC,cAAc,2DAA2D;AAChF,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,gBAAgB,QAAQ,cAAc;AAU/C,OAAO,SAASC,eAAe,EAC3BC,gBAAgB,EAChBC,KAAK,EACLC,QAAQ,EACoB;IAC5B,MAAMC,eAAeP,YAAY;QAC7B,MAAMQ,eAAgC;YAClC,GAAGN,kBAAkB;YACrBO,iBAAiB;QACrB;QACAH,SAAS;YACL,GAAGD,KAAK;YACRK,YAAY;mBAAIL,MAAMK,UAAU;gBAAEF;aAAa;QACnD;IACJ,GAAG;QAACH;QAAOC;KAAS;IAEpB,MAAMK,kBAAkBX,YACpB,CAACY,OAAeC;QACZ,MAAMC,OAAO;eAAIT,MAAMK,UAAU;SAAC;QAClCI,IAAI,CAACF,MAAM,GAAGC;QACdP,SAAS;YAAE,GAAGD,KAAK;YAAEK,YAAYI;QAAK;IAC1C,GACA;QAACT;QAAOC;KAAS;IAGrB,MAAMS,kBAAkBf,YACpB,CAACY;QACG,IAAIE,OAAOT,MAAMK,UAAU,CAACM,MAAM,CAAC,CAACC,GAAGC,IAAMA,MAAMN;QACnD,IAAIA,UAAU,KAAKE,KAAKK,MAAM,GAAG,GAAG;YAChC,MAAM,EAAEV,iBAAiBW,SAAS,EAAE,GAAGC,MAAM,GAAGP,IAAI,CAAC,EAAE;YACvDA,OAAO;gBAACO;mBAA4BP,KAAKQ,KAAK,CAAC;aAAG;QACtD;QACAhB,SAAS;YACL,GAAGD,KAAK;YACRK,YAAYI,KAAKK,MAAM,GAAGL,OAAO;gBAACZ;aAAmB;QACzD;IACJ,GACA;QAACG;QAAOC;KAAS;IAGrB,qBACI,KAACR;QAAKyB,WAAU;QAASC,KAAI;QAAIC,OAAO;YAAEC,OAAO;QAAO;kBACpD,cAAA,MAAC5B;YAAKyB,WAAU;YAASC,KAAI;YAAIC,OAAO;gBAAEC,OAAO;YAAO;;gBACnDrB,MAAMK,UAAU,CAACiB,GAAG,CAAC,CAACd,GAAGK,kBACtB,KAACpB;wBAAgByB,WAAU;wBAASC,KAAI;wBAAIC,OAAO;4BAAEG,SAAS;wBAAQ;kCAClE,cAAA,KAAC3B;4BACG4B,SAAS;4BACTC,WAAWjB;4BACXT,kBAAkBA;4BAClB2B,UAAUjB,CAAAA,OAAQH,gBAAgBO,GAAGJ;4BACrCkB,UAAU,IAAMjB,gBAAgBG;;uBAN7BL,EAAEoB,EAAE;8BAUnB,KAACnC;oBAAKoC,gBAAe;oBAAST,OAAO;wBAAEU,YAAY;wBAAGT,OAAO;oBAAO;8BAChE,cAAA,KAAC7B;wBACGuC,YAAW;wBACXC,MAAM;4BAAEC,QAAQvC;wBAAS;wBACzBwC,MAAK;wBACLC,SAASjC;kCACZ;;;;;;AAOrB"}
+{"version":3,"sources":["../../src/display-conditions/ConditionGroup.tsx"],"sourcesContent":["import { Button, Flex } from '@servicetitan/anvil2';\nimport PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';\nimport { useCallback } from 'react';\nimport { FormInfo } from '../shared/forms';\nimport { ConditionRow } from './ConditionRow';\nimport { defaultCondition } from './constants';\nimport { ConditionGroup as ConditionGroupType, FormFieldOption, SingleCondition } from './types';\nimport type { DataPointOption } from './types';\n\nexport interface ConditionGroupProps {\n    dataPointOptions: DataPointOption[];\n    formFieldOptions: FormFieldOption[];\n    forms: FormInfo[];\n    group: ConditionGroupType;\n    onFormSelect: (formId: number) => void;\n    onUpdate: (g: ConditionGroupType) => void;\n}\n\nexport function ConditionGroup({\n    dataPointOptions,\n    formFieldOptions,\n    forms,\n    group,\n    onFormSelect,\n    onUpdate,\n}: Readonly<ConditionGroupProps>) {\n    const addCondition = useCallback(() => {\n        const newCondition: SingleCondition = {\n            ...defaultCondition(),\n            logicalOperator: 'and',\n        };\n        onUpdate({\n            ...group,\n            conditions: [...group.conditions, newCondition],\n        });\n    }, [group, onUpdate]);\n\n    const updateCondition = useCallback(\n        (index: number, c: SingleCondition) => {\n            const next = [...group.conditions];\n            next[index] = c;\n            onUpdate({ ...group, conditions: next });\n        },\n        [group, onUpdate],\n    );\n\n    const removeCondition = useCallback(\n        (index: number) => {\n            let next = group.conditions.filter((_, i) => i !== index);\n            if (index === 0 && next.length > 0) {\n                next = [{ ...next[0], logicalOperator: undefined }, ...next.slice(1)];\n            }\n            onUpdate({\n                ...group,\n                conditions: next.length ? next : [defaultCondition()],\n            });\n        },\n        [group, onUpdate],\n    );\n\n    return (\n        <Flex direction=\"column\" gap=\"2\" style={{ width: '100%' }}>\n            <Flex direction=\"column\" gap=\"3\" style={{ width: '100%' }}>\n                {group.conditions.map((c, i) => (\n                    <Flex key={c.id} direction=\"column\" gap=\"3\" style={{ padding: '8px 0' }}>\n                        <ConditionRow\n                            canRemove\n                            condition={c}\n                            dataPointOptions={dataPointOptions}\n                            forms={forms}\n                            formFieldOptions={formFieldOptions}\n                            onChange={next => updateCondition(i, next)}\n                            onFormSelect={onFormSelect}\n                            onRemove={() => removeCondition(i)}\n                        />\n                    </Flex>\n                ))}\n                <Flex justifyContent=\"center\" style={{ paddingTop: 8, width: '100%' }}>\n                    <Button\n                        appearance=\"secondary\"\n                        icon={{ before: PlusIcon }}\n                        size=\"small\"\n                        onClick={addCondition}\n                    >\n                        Add Condition\n                    </Button>\n                </Flex>\n            </Flex>\n        </Flex>\n    );\n}\n"],"names":["Button","Flex","PlusIcon","useCallback","ConditionRow","defaultCondition","ConditionGroup","dataPointOptions","formFieldOptions","forms","group","onFormSelect","onUpdate","addCondition","newCondition","logicalOperator","conditions","updateCondition","index","c","next","removeCondition","filter","_","i","length","undefined","slice","direction","gap","style","width","map","padding","canRemove","condition","onChange","onRemove","id","justifyContent","paddingTop","appearance","icon","before","size","onClick"],"mappings":";AAAA,SAASA,MAAM,EAAEC,IAAI,QAAQ,uBAAuB;AACpD,OAAOC,cAAc,2DAA2D;AAChF,SAASC,WAAW,QAAQ,QAAQ;AAEpC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,gBAAgB,QAAQ,cAAc;AAa/C,OAAO,SAASC,eAAe,EAC3BC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACoB;IAC5B,MAAMC,eAAeV,YAAY;QAC7B,MAAMW,eAAgC;YAClC,GAAGT,kBAAkB;YACrBU,iBAAiB;QACrB;QACAH,SAAS;YACL,GAAGF,KAAK;YACRM,YAAY;mBAAIN,MAAMM,UAAU;gBAAEF;aAAa;QACnD;IACJ,GAAG;QAACJ;QAAOE;KAAS;IAEpB,MAAMK,kBAAkBd,YACpB,CAACe,OAAeC;QACZ,MAAMC,OAAO;eAAIV,MAAMM,UAAU;SAAC;QAClCI,IAAI,CAACF,MAAM,GAAGC;QACdP,SAAS;YAAE,GAAGF,KAAK;YAAEM,YAAYI;QAAK;IAC1C,GACA;QAACV;QAAOE;KAAS;IAGrB,MAAMS,kBAAkBlB,YACpB,CAACe;QACG,IAAIE,OAAOV,MAAMM,UAAU,CAACM,MAAM,CAAC,CAACC,GAAGC,IAAMA,MAAMN;QACnD,IAAIA,UAAU,KAAKE,KAAKK,MAAM,GAAG,GAAG;YAChCL,OAAO;gBAAC;oBAAE,GAAGA,IAAI,CAAC,EAAE;oBAAEL,iBAAiBW;gBAAU;mBAAMN,KAAKO,KAAK,CAAC;aAAG;QACzE;QACAf,SAAS;YACL,GAAGF,KAAK;YACRM,YAAYI,KAAKK,MAAM,GAAGL,OAAO;gBAACf;aAAmB;QACzD;IACJ,GACA;QAACK;QAAOE;KAAS;IAGrB,qBACI,KAACX;QAAK2B,WAAU;QAASC,KAAI;QAAIC,OAAO;YAAEC,OAAO;QAAO;kBACpD,cAAA,MAAC9B;YAAK2B,WAAU;YAASC,KAAI;YAAIC,OAAO;gBAAEC,OAAO;YAAO;;gBACnDrB,MAAMM,UAAU,CAACgB,GAAG,CAAC,CAACb,GAAGK,kBACtB,KAACvB;wBAAgB2B,WAAU;wBAASC,KAAI;wBAAIC,OAAO;4BAAEG,SAAS;wBAAQ;kCAClE,cAAA,KAAC7B;4BACG8B,SAAS;4BACTC,WAAWhB;4BACXZ,kBAAkBA;4BAClBE,OAAOA;4BACPD,kBAAkBA;4BAClB4B,UAAUhB,CAAAA,OAAQH,gBAAgBO,GAAGJ;4BACrCT,cAAcA;4BACd0B,UAAU,IAAMhB,gBAAgBG;;uBAT7BL,EAAEmB,EAAE;8BAanB,KAACrC;oBAAKsC,gBAAe;oBAAST,OAAO;wBAAEU,YAAY;wBAAGT,OAAO;oBAAO;8BAChE,cAAA,KAAC/B;wBACGyC,YAAW;wBACXC,MAAM;4BAAEC,QAAQzC;wBAAS;wBACzB0C,MAAK;wBACLC,SAAShC;kCACZ;;;;;;AAOrB"}

package/dist/display-conditions/ConditionGroupsSection.d.ts

@@ -1,14 +1,18 @@
 import type { ReactNode } from 'react';
-import { ConditionGroup as ConditionGroupType } from './types';
+import { FormInfo } from '../shared/forms';
+import { ConditionGroup as ConditionGroupType, FormFieldOption } from './types';
 import type { DataPointOption } from './types';
 export type MatchType = 'all' | 'any';
 export interface ConditionGroupsSectionProps {
     behaviorSection?: ReactNode;
     dataPointOptions: DataPointOption[];
+    formFieldOptions: FormFieldOption[];
+    forms: FormInfo[];
     groups: ConditionGroupType[];
     matchType: MatchType;
+    onFormSelect: (formId: number) => void;
     onMatchTypeChange: (matchType: MatchType) => void;
     onUpdateGroup: (index: number, group: ConditionGroupType) => void;
 }
-export declare function ConditionGroupsSection({ behaviorSection, dataPointOptions, groups, matchType, onMatchTypeChange, onUpdateGroup, }: Readonly<ConditionGroupsSectionProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConditionGroupsSection({ behaviorSection, dataPointOptions, formFieldOptions, forms, groups, matchType, onFormSelect, onMatchTypeChange, onUpdateGroup, }: Readonly<ConditionGroupsSectionProps>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ConditionGroupsSection.d.ts.map

package/dist/display-conditions/ConditionGroupsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionGroupsSection.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IACxC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,sBAAsB,CAAC,EACnC,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,aAAa,GAChB,EAAE,QAAQ,CAAC,2BAA2B,CAAC,kDAoCvC"}
+{"version":3,"file":"ConditionGroupsSection.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IACxC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,sBAAsB,CAAC,EACnC,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,GAChB,EAAE,QAAQ,CAAC,2BAA2B,CAAC,kDAuCvC"}

package/dist/display-conditions/ConditionGroupsSection.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Chip, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';
 import { ConditionGroup } from './ConditionGroup';
-export function ConditionGroupsSection({ behaviorSection, dataPointOptions, groups, matchType, onMatchTypeChange, onUpdateGroup }) {
+export function ConditionGroupsSection({ behaviorSection, dataPointOptions, formFieldOptions, forms, groups, matchType, onFormSelect, onMatchTypeChange, onUpdateGroup }) {
     const firstGroup = groups[0];
     if (!firstGroup) {
         return null;
@@ -66,7 +66,10 @@ export function ConditionGroupsSection({ behaviorSection, dataPointOptions, grou
             behaviorSection,
             /*#__PURE__*/ _jsx(ConditionGroup, {
                 dataPointOptions: dataPointOptions,
+                formFieldOptions: formFieldOptions,
+                forms: forms,
                 group: firstGroup,
+                onFormSelect: onFormSelect,
                 onUpdate: (g)=>onUpdateGroup(0, g)
             })
         ]

package/dist/display-conditions/ConditionGroupsSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"sourcesContent":["import { Chip, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';\nimport type { ReactNode } from 'react';\nimport { ConditionGroup } from './ConditionGroup';\nimport { ConditionGroup as ConditionGroupType } from './types';\nimport type { DataPointOption } from './types';\n\nexport type MatchType = 'all' | 'any';\n\nexport interface ConditionGroupsSectionProps {\n    behaviorSection?: ReactNode;\n    dataPointOptions: DataPointOption[];\n    groups: ConditionGroupType[];\n    matchType: MatchType;\n    onMatchTypeChange: (matchType: MatchType) => void;\n    onUpdateGroup: (index: number, group: ConditionGroupType) => void;\n}\n\nexport function ConditionGroupsSection({\n    behaviorSection,\n    dataPointOptions,\n    groups,\n    matchType,\n    onMatchTypeChange,\n    onUpdateGroup,\n}: Readonly<ConditionGroupsSectionProps>) {\n    const firstGroup = groups[0];\n    if (!firstGroup) {\n        return null;\n    }\n\n    return (\n        <Flex direction=\"column\" gap=\"4\">\n            <Flex direction=\"row\" alignItems=\"center\" gap=\"1\" style={{ flexWrap: 'wrap' }}>\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    When\n                </Text>\n                <SegmentedControl\n                    selected={matchType}\n                    size=\"small\"\n                    onChange={(value: string) => onMatchTypeChange(value as MatchType)}\n                >\n                    <SegmentedControl.Segment value=\"all\">All</SegmentedControl.Segment>\n                    <SegmentedControl.Segment value=\"any\">Any</SegmentedControl.Segment>\n                </SegmentedControl>\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    of the\n                </Text>\n                <Chip label=\"IF\" size=\"small\" />\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    conditions are met\n                </Text>\n            </Flex>\n            {behaviorSection}\n            <ConditionGroup\n                dataPointOptions={dataPointOptions}\n                group={firstGroup}\n                onUpdate={g => onUpdateGroup(0, g)}\n            />\n        </Flex>\n    );\n}\n"],"names":["Chip","Flex","SegmentedControl","Text","ConditionGroup","ConditionGroupsSection","behaviorSection","dataPointOptions","groups","matchType","onMatchTypeChange","onUpdateGroup","firstGroup","direction","gap","alignItems","style","flexWrap","size","variant","fontWeight","selected","onChange","value","Segment","label","group","onUpdate","g"],"mappings":";AAAA,SAASA,IAAI,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,uBAAuB;AAE1E,SAASC,cAAc,QAAQ,mBAAmB;AAelD,OAAO,SAASC,uBAAuB,EACnCC,eAAe,EACfC,gBAAgB,EAChBC,MAAM,EACNC,SAAS,EACTC,iBAAiB,EACjBC,aAAa,EACuB;IACpC,MAAMC,aAAaJ,MAAM,CAAC,EAAE;IAC5B,IAAI,CAACI,YAAY;QACb,OAAO;IACX;IAEA,qBACI,MAACX;QAAKY,WAAU;QAASC,KAAI;;0BACzB,MAACb;gBAAKY,WAAU;gBAAME,YAAW;gBAASD,KAAI;gBAAIE,OAAO;oBAAEC,UAAU;gBAAO;;kCACxE,KAACd;wBAAKe,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;kCAGjE,MAAClB;wBACGmB,UAAUZ;wBACVS,MAAK;wBACLI,UAAU,CAACC,QAAkBb,kBAAkBa;;0CAE/C,KAACrB,iBAAiBsB,OAAO;gCAACD,OAAM;0CAAM;;0CACtC,KAACrB,iBAAiBsB,OAAO;gCAACD,OAAM;0CAAM;;;;kCAE1C,KAACpB;wBAAKe,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;kCAGjE,KAACpB;wBAAKyB,OAAM;wBAAKP,MAAK;;kCACtB,KAACf;wBAAKe,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;;;YAIpEd;0BACD,KAACF;gBACGG,kBAAkBA;gBAClBmB,OAAOd;gBACPe,UAAUC,CAAAA,IAAKjB,cAAc,GAAGiB;;;;AAIhD"}
+{"version":3,"sources":["../../src/display-conditions/ConditionGroupsSection.tsx"],"sourcesContent":["import { Chip, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';\nimport type { ReactNode } from 'react';\nimport { FormInfo } from '../shared/forms';\nimport { ConditionGroup } from './ConditionGroup';\nimport { ConditionGroup as ConditionGroupType, FormFieldOption } from './types';\nimport type { DataPointOption } from './types';\n\nexport type MatchType = 'all' | 'any';\n\nexport interface ConditionGroupsSectionProps {\n    behaviorSection?: ReactNode;\n    dataPointOptions: DataPointOption[];\n    formFieldOptions: FormFieldOption[];\n    forms: FormInfo[];\n    groups: ConditionGroupType[];\n    matchType: MatchType;\n    onFormSelect: (formId: number) => void;\n    onMatchTypeChange: (matchType: MatchType) => void;\n    onUpdateGroup: (index: number, group: ConditionGroupType) => void;\n}\n\nexport function ConditionGroupsSection({\n    behaviorSection,\n    dataPointOptions,\n    formFieldOptions,\n    forms,\n    groups,\n    matchType,\n    onFormSelect,\n    onMatchTypeChange,\n    onUpdateGroup,\n}: Readonly<ConditionGroupsSectionProps>) {\n    const firstGroup = groups[0];\n    if (!firstGroup) {\n        return null;\n    }\n\n    return (\n        <Flex direction=\"column\" gap=\"4\">\n            <Flex direction=\"row\" alignItems=\"center\" gap=\"1\" style={{ flexWrap: 'wrap' }}>\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    When\n                </Text>\n                <SegmentedControl\n                    selected={matchType}\n                    size=\"small\"\n                    onChange={(value: string) => onMatchTypeChange(value as MatchType)}\n                >\n                    <SegmentedControl.Segment value=\"all\">All</SegmentedControl.Segment>\n                    <SegmentedControl.Segment value=\"any\">Any</SegmentedControl.Segment>\n                </SegmentedControl>\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    of the\n                </Text>\n                <Chip label=\"IF\" size=\"small\" />\n                <Text size=\"small\" variant=\"body\" style={{ fontWeight: 'bold' }}>\n                    conditions are met\n                </Text>\n            </Flex>\n            {behaviorSection}\n            <ConditionGroup\n                dataPointOptions={dataPointOptions}\n                formFieldOptions={formFieldOptions}\n                forms={forms}\n                group={firstGroup}\n                onFormSelect={onFormSelect}\n                onUpdate={g => onUpdateGroup(0, g)}\n            />\n        </Flex>\n    );\n}\n"],"names":["Chip","Flex","SegmentedControl","Text","ConditionGroup","ConditionGroupsSection","behaviorSection","dataPointOptions","formFieldOptions","forms","groups","matchType","onFormSelect","onMatchTypeChange","onUpdateGroup","firstGroup","direction","gap","alignItems","style","flexWrap","size","variant","fontWeight","selected","onChange","value","Segment","label","group","onUpdate","g"],"mappings":";AAAA,SAASA,IAAI,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,uBAAuB;AAG1E,SAASC,cAAc,QAAQ,mBAAmB;AAkBlD,OAAO,SAASC,uBAAuB,EACnCC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,iBAAiB,EACjBC,aAAa,EACuB;IACpC,MAAMC,aAAaL,MAAM,CAAC,EAAE;IAC5B,IAAI,CAACK,YAAY;QACb,OAAO;IACX;IAEA,qBACI,MAACd;QAAKe,WAAU;QAASC,KAAI;;0BACzB,MAAChB;gBAAKe,WAAU;gBAAME,YAAW;gBAASD,KAAI;gBAAIE,OAAO;oBAAEC,UAAU;gBAAO;;kCACxE,KAACjB;wBAAKkB,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;kCAGjE,MAACrB;wBACGsB,UAAUb;wBACVU,MAAK;wBACLI,UAAU,CAACC,QAAkBb,kBAAkBa;;0CAE/C,KAACxB,iBAAiByB,OAAO;gCAACD,OAAM;0CAAM;;0CACtC,KAACxB,iBAAiByB,OAAO;gCAACD,OAAM;0CAAM;;;;kCAE1C,KAACvB;wBAAKkB,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;kCAGjE,KAACvB;wBAAK4B,OAAM;wBAAKP,MAAK;;kCACtB,KAAClB;wBAAKkB,MAAK;wBAAQC,SAAQ;wBAAOH,OAAO;4BAAEI,YAAY;wBAAO;kCAAG;;;;YAIpEjB;0BACD,KAACF;gBACGG,kBAAkBA;gBAClBC,kBAAkBA;gBAClBC,OAAOA;gBACPoB,OAAOd;gBACPH,cAAcA;gBACdkB,UAAUC,CAAAA,IAAKjB,cAAc,GAAGiB;;;;AAIhD"}

package/dist/display-conditions/ConditionRow.d.ts

@@ -1,11 +1,15 @@
+import { FormInfo } from '../shared/forms';
 import { SingleCondition } from './types';
-import type { DataPointOption } from './types';
+import type { DataPointOption, FormFieldOption } from './types';
 export interface ConditionRowProps {
     canRemove: boolean;
     condition: SingleCondition;
     dataPointOptions: DataPointOption[];
+    formFieldOptions: FormFieldOption[];
+    forms: FormInfo[];
     onChange: (c: SingleCondition) => void;
+    onFormSelect: (formId: number) => void;
     onRemove: () => void;
 }
-export declare function ConditionRow({ canRemove, condition, dataPointOptions, onChange, onRemove, }: Readonly<ConditionRowProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionRow({ canRemove, condition, dataPointOptions, formFieldOptions, forms, onChange, onFormSelect, onRemove, }: Readonly<ConditionRowProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConditionRow.d.ts.map

package/dist/display-conditions/ConditionRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionRow.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,eAAe,EAA0C,MAAM,SAAS,CAAC;AACpG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAsBD,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,QAAQ,GACX,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA0J7B"}
+{"version":3,"file":"ConditionRow.d.ts","sourceRoot":"","sources":["../../src/display-conditions/ConditionRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAqB,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAoB,eAAe,EAA0C,MAAM,SAAS,CAAC;AACpG,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AA4BD,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,GACX,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA4R7B"}

package/dist/display-conditions/ConditionRow.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Chip, Combobox, Flex, TextField } from '@servicetitan/anvil2';
 import TrashIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { parseFormFieldKey } from '../shared/forms';
 import { NUMBER_OPERATORS, STRING_OPERATORS, VALUE_LESS_OPERATORS } from './types';
 function sanitizeNumericInput(raw) {
     // Allow only a single leading minus and one decimal separator.
@@ -17,12 +18,59 @@ function sanitizeNumericInput(raw) {
     }
     return value;
 }
-export function ConditionRow({ canRemove, condition, dataPointOptions, onChange, onRemove }) {
-    const selectedDataPoint = useMemo(()=>{
-        var _dataPointOptions_find;
-        return (_dataPointOptions_find = dataPointOptions.find((opt)=>opt.fullKey === condition.dataPointKey)) !== null && _dataPointOptions_find !== void 0 ? _dataPointOptions_find : null;
+export function ConditionRow({ canRemove, condition, dataPointOptions, formFieldOptions, forms, onChange, onFormSelect, onRemove }) {
+    const selectedFormFieldMeta = useMemo(()=>parseFormFieldKey(condition.dataPointKey), [
+        condition.dataPointKey
+    ]);
+    const [selectedSourceValue, setSelectedSourceValue] = useState(selectedFormFieldMeta ? `form:${selectedFormFieldMeta.formId}` : 'schema');
+    const sourceOptions = useMemo(()=>[
+            {
+                label: 'Data point',
+                value: 'schema'
+            },
+            ...forms.map((form)=>({
+                    formId: form.id,
+                    label: form.name,
+                    value: `form:${form.id}`
+                }))
+        ], [
+        forms
+    ]);
+    const selectedSource = useMemo(()=>{
+        var _sourceOptions_find, _ref;
+        return (_ref = (_sourceOptions_find = sourceOptions.find((opt)=>opt.value === selectedSourceValue)) !== null && _sourceOptions_find !== void 0 ? _sourceOptions_find : sourceOptions[0]) !== null && _ref !== void 0 ? _ref : null;
     }, [
+        selectedSourceValue,
+        sourceOptions
+    ]);
+    useEffect(()=>{
+        if (selectedFormFieldMeta) {
+            setSelectedSourceValue(`form:${selectedFormFieldMeta.formId}`);
+            return;
+        }
+        if (!condition.dataPointKey) {
+            return;
+        }
+        const hasSchemaMatch = dataPointOptions.some((opt)=>opt.fullKey === condition.dataPointKey);
+        if (hasSchemaMatch) {
+            setSelectedSourceValue('schema');
+        }
+    }, [
+        condition.dataPointKey,
+        dataPointOptions,
+        selectedFormFieldMeta
+    ]);
+    const currentFormId = selectedSource === null || selectedSource === void 0 ? void 0 : selectedSource.formId;
+    const activeDataPointOptions = useMemo(()=>currentFormId ? formFieldOptions.filter((option)=>option.formId === currentFormId) : dataPointOptions, [
+        currentFormId,
         dataPointOptions,
+        formFieldOptions
+    ]);
+    const selectedDataPoint = useMemo(()=>{
+        var _activeDataPointOptions_find;
+        return (_activeDataPointOptions_find = activeDataPointOptions.find((opt)=>opt.fullKey === condition.dataPointKey)) !== null && _activeDataPointOptions_find !== void 0 ? _activeDataPointOptions_find : null;
+    }, [
+        activeDataPointOptions,
         condition.dataPointKey
     ]);
     var _selectedDataPoint_fieldType;
@@ -50,9 +98,7 @@ export function ConditionRow({ canRemove, condition, dataPointOptions, onChange,
         });
     };
     const handleDataPointChange = (item)=>{
-        var _item_fieldType;
-        const nextFieldType = (_item_fieldType = item === null || item === void 0 ? void 0 : item.fieldType) !== null && _item_fieldType !== void 0 ? _item_fieldType : 'string';
-        const nextIsNumber = nextFieldType === 'number';
+        const nextIsNumber = (item === null || item === void 0 ? void 0 : item.fieldType) === 'number';
         const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
         const operatorReset = !nextOperatorItems.some((op)=>op.value === condition.operator);
         var _item_fullKey;
@@ -62,70 +108,54 @@ export function ConditionRow({ canRemove, condition, dataPointOptions, onChange,
             operator: operatorReset ? nextIsNumber ? 'num_eq' : 'is_equal_to' : condition.operator
         });
     };
+    const handleSourceChange = (item)=>{
+        if (!item) {
+            return;
+        }
+        setSelectedSourceValue(item.value);
+        if (!item.formId) {
+            var _dataPointOptions_find;
+            const schemaField = (_dataPointOptions_find = dataPointOptions.find((opt)=>opt.fullKey === condition.dataPointKey)) !== null && _dataPointOptions_find !== void 0 ? _dataPointOptions_find : null;
+            var _schemaField_fieldType;
+            const nextFieldType = (_schemaField_fieldType = schemaField === null || schemaField === void 0 ? void 0 : schemaField.fieldType) !== null && _schemaField_fieldType !== void 0 ? _schemaField_fieldType : 'string';
+            const nextIsNumber = nextFieldType === 'number';
+            const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
+            const operatorReset = !nextOperatorItems.some((op)=>op.value === condition.operator);
+            var _schemaField_fullKey;
+            onChange({
+                ...condition,
+                dataPointKey: (_schemaField_fullKey = schemaField === null || schemaField === void 0 ? void 0 : schemaField.fullKey) !== null && _schemaField_fullKey !== void 0 ? _schemaField_fullKey : '',
+                operator: operatorReset ? nextIsNumber ? 'num_eq' : 'is_equal_to' : condition.operator
+            });
+            return;
+        }
+        onFormSelect(item.formId);
+        const nextFormFieldOptions = formFieldOptions.filter((option)=>option.formId === item.formId);
+        const currentSelected = nextFormFieldOptions.find((opt)=>opt.fullKey === condition.dataPointKey);
+        var _ref;
+        const nextSelected = (_ref = currentSelected !== null && currentSelected !== void 0 ? currentSelected : nextFormFieldOptions[0]) !== null && _ref !== void 0 ? _ref : null;
+        var _nextSelected_fieldType;
+        const nextFieldType = (_nextSelected_fieldType = nextSelected === null || nextSelected === void 0 ? void 0 : nextSelected.fieldType) !== null && _nextSelected_fieldType !== void 0 ? _nextSelected_fieldType : 'string';
+        const nextIsNumber = nextFieldType === 'number';
+        const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
+        const operatorReset = !nextOperatorItems.some((op)=>op.value === condition.operator);
+        var _nextSelected_fullKey;
+        onChange({
+            ...condition,
+            dataPointKey: (_nextSelected_fullKey = nextSelected === null || nextSelected === void 0 ? void 0 : nextSelected.fullKey) !== null && _nextSelected_fullKey !== void 0 ? _nextSelected_fullKey : '',
+            operator: operatorReset ? nextIsNumber ? 'num_eq' : 'is_equal_to' : condition.operator
+        });
+    };
     return /*#__PURE__*/ _jsxs(Flex, {
-        direction: "row",
-        alignItems: "flex-end",
-        gap: "2",
+        direction: "column",
+        gap: "3",
         style: {
-            flexWrap: 'wrap',
-            rowGap: 8,
             width: '100%'
         },
         children: [
             /*#__PURE__*/ _jsx("div", {
                 style: {
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    flexShrink: 0,
-                    padding: '4px 8px'
-                },
-                children: /*#__PURE__*/ _jsx(Chip, {
-                    label: "IF",
-                    size: "small"
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                style: {
-                    flex: '2 1 240px',
-                    minWidth: 200
-                },
-                children: /*#__PURE__*/ _jsxs(Combobox, {
-                    ...{
-                        disableClearSelection: true
-                    },
-                    itemToKey: (item)=>{
-                        var _item_fullKey;
-                        return (_item_fullKey = item === null || item === void 0 ? void 0 : item.fullKey) !== null && _item_fullKey !== void 0 ? _item_fullKey : '';
-                    },
-                    itemToString: (item)=>{
-                        var _item_title;
-                        return (_item_title = item === null || item === void 0 ? void 0 : item.title) !== null && _item_title !== void 0 ? _item_title : '';
-                    },
-                    items: dataPointOptions,
-                    selectedItem: selectedDataPoint,
-                    onChange: handleDataPointChange,
-                    children: [
-                        /*#__PURE__*/ _jsx(Combobox.SelectTrigger, {
-                            label: "Data point",
-                            placeholder: "Select data point...",
-                            size: "small"
-                        }),
-                        /*#__PURE__*/ _jsx(Combobox.Content, {
-                            children: ({ items })=>/*#__PURE__*/ _jsx(Combobox.List, {
-                                    children: items.map((item, i)=>/*#__PURE__*/ _jsx(Combobox.Item, {
-                                            index: i,
-                                            item: item,
-                                            children: item.title
-                                        }, item.fullKey))
-                                })
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                style: {
-                    flex: '1 1 180px',
-                    minWidth: 150
+                    width: '100%'
                 },
                 children: /*#__PURE__*/ _jsxs(Combobox, {
                     ...{
@@ -139,19 +169,13 @@ export function ConditionRow({ canRemove, condition, dataPointOptions, onChange,
                         var _item_label;
                         return (_item_label = item === null || item === void 0 ? void 0 : item.label) !== null && _item_label !== void 0 ? _item_label : '';
                     },
-                    items: operatorItems,
-                    selectedItem: selectedOperator,
-                    onChange: (item)=>{
-                        var _item_value;
-                        return onChange({
-                            ...condition,
-                            operator: (_item_value = item === null || item === void 0 ? void 0 : item.value) !== null && _item_value !== void 0 ? _item_value : 'is_equal_to'
-                        });
-                    },
+                    items: sourceOptions,
+                    selectedItem: selectedSource,
+                    onChange: handleSourceChange,
                     children: [
                         /*#__PURE__*/ _jsx(Combobox.SelectTrigger, {
-                            label: "Condition",
-                            placeholder: "Select...",
+                            label: "Data Type",
+                            placeholder: "Select source...",
                             size: "small"
                         }),
                         /*#__PURE__*/ _jsx(Combobox.Content, {
@@ -166,42 +190,148 @@ export function ConditionRow({ canRemove, condition, dataPointOptions, onChange,
                     ]
                 })
             }),
-            !isValueLess && /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxs(Flex, {
+                direction: "row",
+                alignItems: "flex-end",
+                gap: "2",
                 style: {
-                    flex: '1 1 180px',
-                    minWidth: 150
+                    flexWrap: 'wrap',
+                    rowGap: 8,
+                    width: '100%'
                 },
-                children: /*#__PURE__*/ _jsx(TextField, {
-                    label: "Value",
-                    size: "small",
-                    value: condition.value,
-                    onChange: (e)=>handleValueChange(e.target.value),
-                    placeholder: fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...',
-                    style: {
-                        width: '100%'
-                    },
-                    "aria-label": "Value",
-                    ...fieldType === 'number' && {
-                        inputMode: 'decimal'
-                    }
-                })
-            }),
-            canRemove && /*#__PURE__*/ _jsx("div", {
-                style: {
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    flexShrink: 0,
-                    padding: '4px 8px'
-                },
-                children: /*#__PURE__*/ _jsx(Button, {
-                    appearance: "secondary",
-                    "aria-label": "Remove condition",
-                    icon: {
-                        before: TrashIcon
-                    },
-                    size: "small",
-                    onClick: onRemove
-                })
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            flexShrink: 0,
+                            padding: '4px 8px'
+                        },
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            label: "IF",
+                            size: "small"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            flex: '2 1 240px',
+                            minWidth: 200
+                        },
+                        children: /*#__PURE__*/ _jsxs(Combobox, {
+                            ...{
+                                disableClearSelection: true
+                            },
+                            itemToKey: (item)=>{
+                                var _item_fullKey;
+                                return (_item_fullKey = item === null || item === void 0 ? void 0 : item.fullKey) !== null && _item_fullKey !== void 0 ? _item_fullKey : '';
+                            },
+                            itemToString: (item)=>{
+                                var _item_title;
+                                return (_item_title = item === null || item === void 0 ? void 0 : item.title) !== null && _item_title !== void 0 ? _item_title : '';
+                            },
+                            items: activeDataPointOptions,
+                            selectedItem: selectedDataPoint,
+                            onChange: handleDataPointChange,
+                            children: [
+                                /*#__PURE__*/ _jsx(Combobox.SelectTrigger, {
+                                    label: "Data Point",
+                                    placeholder: currentFormId ? 'Select form field...' : 'Select data point...',
+                                    size: "small"
+                                }),
+                                /*#__PURE__*/ _jsx(Combobox.Content, {
+                                    children: ({ items })=>/*#__PURE__*/ _jsx(Combobox.List, {
+                                            children: items.map((item, i)=>/*#__PURE__*/ _jsx(Combobox.Item, {
+                                                    index: i,
+                                                    item: item,
+                                                    children: item.title
+                                                }, item.fullKey))
+                                        })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            flex: '1 1 180px',
+                            minWidth: 150
+                        },
+                        children: /*#__PURE__*/ _jsxs(Combobox, {
+                            ...{
+                                disableClearSelection: true
+                            },
+                            itemToKey: (item)=>{
+                                var _item_value;
+                                return (_item_value = item === null || item === void 0 ? void 0 : item.value) !== null && _item_value !== void 0 ? _item_value : '';
+                            },
+                            itemToString: (item)=>{
+                                var _item_label;
+                                return (_item_label = item === null || item === void 0 ? void 0 : item.label) !== null && _item_label !== void 0 ? _item_label : '';
+                            },
+                            items: operatorItems,
+                            selectedItem: selectedOperator,
+                            onChange: (item)=>{
+                                var _item_value;
+                                return onChange({
+                                    ...condition,
+                                    operator: (_item_value = item === null || item === void 0 ? void 0 : item.value) !== null && _item_value !== void 0 ? _item_value : 'is_equal_to'
+                                });
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Combobox.SelectTrigger, {
+                                    label: "Condition",
+                                    placeholder: "Select...",
+                                    size: "small"
+                                }),
+                                /*#__PURE__*/ _jsx(Combobox.Content, {
+                                    children: ({ items })=>/*#__PURE__*/ _jsx(Combobox.List, {
+                                            children: items.map((item, i)=>/*#__PURE__*/ _jsx(Combobox.Item, {
+                                                    index: i,
+                                                    item: item,
+                                                    children: item.label
+                                                }, item.value))
+                                        })
+                                })
+                            ]
+                        })
+                    }),
+                    !isValueLess && /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            flex: '1 1 180px',
+                            minWidth: 150
+                        },
+                        children: /*#__PURE__*/ _jsx(TextField, {
+                            label: "Value",
+                            size: "small",
+                            value: condition.value,
+                            onChange: (e)=>handleValueChange(e.target.value),
+                            placeholder: fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...',
+                            style: {
+                                width: '100%'
+                            },
+                            "aria-label": "Value",
+                            ...fieldType === 'number' && {
+                                inputMode: 'decimal'
+                            }
+                        })
+                    }),
+                    canRemove && /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            flexShrink: 0,
+                            padding: '4px 8px'
+                        },
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            appearance: "secondary",
+                            "aria-label": "Remove condition",
+                            icon: {
+                                before: TrashIcon
+                            },
+                            size: "small",
+                            onClick: onRemove
+                        })
+                    })
+                ]
             })
         ]
     });