@servicetitan/dte-unlayer 0.94.0 → 0.96.0

package/src/display-conditions/ConditionRow.tsx

@@ -0,0 +1,185 @@
+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 { NUMBER_OPERATORS, SingleCondition, STRING_OPERATORS, VALUE_LESS_OPERATORS } from './types';
+import type { DataPointOption } from './types';
+
+export interface ConditionRowProps {
+    canRemove: boolean;
+    condition: SingleCondition;
+    dataPointOptions: DataPointOption[];
+    onChange: (c: SingleCondition) => void;
+    onRemove: () => void;
+}
+
+interface OperatorOption {
+    label: string;
+    value: string;
+}
+
+function sanitizeNumericInput(raw: string): string {
+    // Allow only a single leading minus and one decimal separator.
+    let value = raw.replaceAll(/[^0-9.-]/g, '');
+    const isNegative = value.startsWith('-');
+    value = value.replaceAll('-', '');
+    if (isNegative) {
+        value = `-${value}`;
+    }
+    const firstDot = value.indexOf('.');
+    if (firstDot >= 0) {
+        value = `${value.slice(0, firstDot + 1)}${value.slice(firstDot + 1).replaceAll('.', '')}`;
+    }
+    return value;
+}
+
+export function ConditionRow({
+    canRemove,
+    condition,
+    dataPointOptions,
+    onChange,
+    onRemove,
+}: Readonly<ConditionRowProps>) {
+    const selectedDataPoint = useMemo(
+        () => dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
+        [dataPointOptions, condition.dataPointKey],
+    );
+
+    const fieldType = selectedDataPoint?.fieldType ?? 'string';
+
+    const operatorItems: OperatorOption[] = useMemo(
+        () =>
+            fieldType === 'number'
+                ? ([...NUMBER_OPERATORS] as OperatorOption[])
+                : ([...STRING_OPERATORS] as OperatorOption[]),
+        [fieldType],
+    );
+
+    const selectedOperator = useMemo(
+        () => operatorItems.find(op => op.value === condition.operator) ?? null,
+        [operatorItems, condition.operator],
+    );
+
+    const isValueLess = VALUE_LESS_OPERATORS.includes(condition.operator);
+
+    const handleValueChange = (raw: string) => {
+        const value = fieldType === 'number' ? sanitizeNumericInput(raw) : raw;
+        onChange({ ...condition, value });
+    };
+
+    const handleDataPointChange = (item: DataPointOption | null) => {
+        const nextFieldType = item?.fieldType ?? 'string';
+        const nextIsNumber = nextFieldType === 'number';
+        const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
+        const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
+        onChange({
+            ...condition,
+            dataPointKey: item?.fullKey ?? '',
+            operator: operatorReset
+                ? nextIsNumber
+                    ? 'num_eq'
+                    : 'is_equal_to'
+                : condition.operator,
+        });
+    };
+
+    return (
+        <Flex
+            direction="row"
+            alignItems="flex-end"
+            gap="2"
+            style={{ flexWrap: 'wrap', rowGap: 8, width: '100%' }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    flexShrink: 0,
+                    padding: '6px 12px',
+                }}
+            >
+                <Chip label="IF" size="medium" />
+            </div>
+            <div style={{ flex: '2 1 280px', minWidth: 240 }}>
+                <Combobox
+                    {...({ disableClearSelection: true } as object)}
+                    itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
+                    itemToString={(item: DataPointOption | null) => item?.title ?? ''}
+                    items={dataPointOptions}
+                    selectedItem={selectedDataPoint}
+                    onChange={handleDataPointChange}
+                >
+                    <Combobox.SelectTrigger label="Data point" placeholder="Select data point..." />
+                    <Combobox.Content>
+                        {({ items }: { items: DataPointOption[] }) => (
+                            <Combobox.List>
+                                {items.map((item, i) => (
+                                    <Combobox.Item index={i} item={item} key={item.fullKey}>
+                                        {item.title}
+                                    </Combobox.Item>
+                                ))}
+                            </Combobox.List>
+                        )}
+                    </Combobox.Content>
+                </Combobox>
+            </div>
+            <div style={{ flex: '1 1 220px', minWidth: 180 }}>
+                <Combobox
+                    {...({ disableClearSelection: true } as object)}
+                    itemToKey={(item: OperatorOption | null) => item?.value ?? ''}
+                    itemToString={(item: OperatorOption | null) => item?.label ?? ''}
+                    items={operatorItems}
+                    selectedItem={selectedOperator}
+                    onChange={(item: OperatorOption | null) =>
+                        onChange({
+                            ...condition,
+                            operator: (item?.value ?? 'is_equal_to') as SingleCondition['operator'],
+                        })
+                    }
+                >
+                    <Combobox.SelectTrigger label="Condition" placeholder="Select..." />
+                    <Combobox.Content>
+                        {({ items }: { items: OperatorOption[] }) => (
+                            <Combobox.List>
+                                {items.map((item, i) => (
+                                    <Combobox.Item index={i} item={item} key={item.value}>
+                                        {item.label}
+                                    </Combobox.Item>
+                                ))}
+                            </Combobox.List>
+                        )}
+                    </Combobox.Content>
+                </Combobox>
+            </div>
+            {!isValueLess && (
+                <div style={{ flex: '1 1 220px', minWidth: 180 }}>
+                    <TextField
+                        label="Value"
+                        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' })}
+                    />
+                </div>
+            )}
+            {canRemove && (
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'flex-end',
+                        flexShrink: 0,
+                        padding: '6px 12px',
+                    }}
+                >
+                    <Button
+                        appearance="secondary"
+                        aria-label="Remove condition"
+                        icon={{ before: TrashIcon }}
+                        onClick={onRemove}
+                    />
+                </div>
+            )}
+        </Flex>
+    );
+}

package/src/display-conditions/DisplayConditionModal.tsx

@@ -0,0 +1,231 @@
+import { Button, Combobox, Dialog, Flex, Text } from '@servicetitan/anvil2';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ConditionGroupsSection } from './ConditionGroupsSection';
+import { defaultGroup, defaultState, MODAL_CONTENT_MAX_HEIGHT } from './constants';
+import { DisplayConditionRequest, onDisplayCondition } from './displayConditionController';
+import { buildUnlayerDisplayCondition, parseUnlayerDisplayCondition } from './nunjucks';
+import { getSchemaDataPointOptions } from './schemaDataPoints';
+import { ConditionGroup as ConditionGroupType, DisplayBehavior } from './types';
+
+const BEHAVIOR_OPTIONS = [
+    { label: 'Show', value: 'show' },
+    { label: 'Hide', value: 'hide' },
+] as const;
+const NUMERIC_VALUE_RE = /^-?(?:\d+\.?\d*|\.\d+)$/;
+
+type BehaviorOption = (typeof BEHAVIOR_OPTIONS)[number];
+
+export interface DisplayConditionModalProps {
+    schema?: import('../shared/schema').SchemaObject;
+}
+
+export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
+    const [request, setRequest] = useState<DisplayConditionRequest | null>(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [state, setState] = useState(defaultState);
+
+    const dataPointOptions = useMemo(() => getSchemaDataPointOptions(props.schema), [props.schema]);
+
+    const portalTarget = useMemo(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.body;
+    }, []);
+
+    useEffect(() => {
+        return onDisplayCondition(nextRequest => {
+            setRequest(nextRequest);
+            const existing = nextRequest.data;
+            const parsed = parseUnlayerDisplayCondition(existing);
+            setState(parsed ?? defaultState());
+            setIsOpen(true);
+        });
+    }, []);
+
+    const handleClose = useCallback(() => {
+        if (request) {
+            request.done(request.data ?? null);
+            setRequest(null);
+        }
+        setIsOpen(false);
+    }, [request]);
+
+    const handleSave = useCallback(() => {
+        if (!request) {
+            return;
+        }
+        const condition = buildUnlayerDisplayCondition(state);
+        if (condition) {
+            request.done(condition);
+        } else {
+            request.done(null);
+        }
+        setRequest(null);
+        setIsOpen(false);
+    }, [request, state]);
+
+    const updateGroup = useCallback((index: number, group: ConditionGroupType) => {
+        setState(prev => {
+            const next = [...prev.groups];
+            next[index] = group;
+            return { ...prev, groups: next };
+        });
+    }, []);
+
+    const removeGroup = useCallback((index: number) => {
+        setState(prev => ({
+            ...prev,
+            groups: (() => {
+                const nextGroups = prev.groups.filter((_, i) => i !== index);
+                if (nextGroups.length === 0) {
+                    return [defaultGroup()];
+                }
+                if (index === 0) {
+                    const { logicalOperator: unusedOp, ...firstGroup } = nextGroups[0];
+                    return [firstGroup, ...nextGroups.slice(1)];
+                }
+                return nextGroups;
+            })(),
+        }));
+    }, []);
+
+    const addGroup = useCallback(() => {
+        setState(prev => ({
+            ...prev,
+            groups: [...prev.groups, { ...defaultGroup(), logicalOperator: 'and' }],
+        }));
+    }, []);
+
+    const selectedBehavior = useMemo(
+        () => BEHAVIOR_OPTIONS.find(opt => opt.value === state.behavior) ?? BEHAVIOR_OPTIONS[0],
+        [state.behavior],
+    );
+
+    const handleBehaviorChange = useCallback((item: BehaviorOption | null) => {
+        if (item) {
+            setState(prev => ({ ...prev, behavior: item.value as DisplayBehavior }));
+        }
+    }, []);
+
+    const canSave = useMemo(() => {
+        for (const group of state.groups) {
+            for (const condition of group.conditions) {
+                if (!condition.dataPointKey) {
+                    return false;
+                }
+                if (condition.operator === 'is_empty' || condition.operator === 'is_not_empty') {
+                    continue;
+                }
+                const trimmedValue = condition.value.trim();
+                if (!trimmedValue) {
+                    return false;
+                }
+                const fieldType =
+                    dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey)
+                        ?.fieldType ?? 'string';
+                if (fieldType === 'number' && !NUMERIC_VALUE_RE.test(trimmedValue)) {
+                    return false;
+                }
+            }
+        }
+        return state.groups.length > 0;
+    }, [dataPointOptions, state.groups]);
+
+    if (!portalTarget || !isOpen) {
+        return null;
+    }
+
+    return createPortal(
+        <Dialog open={isOpen} onClose={handleClose} size="xlarge">
+            <Dialog.Header>Rules and Conditions</Dialog.Header>
+            <Dialog.Content>
+                <Flex
+                    direction="column"
+                    gap="6"
+                    style={{
+                        maxHeight: MODAL_CONTENT_MAX_HEIGHT,
+                        overflowY: 'auto',
+                        width: '100%',
+                    }}
+                >
+                    <Flex
+                        direction="column"
+                        gap="3"
+                        style={{
+                            borderBottom: '1px solid #e0e0e0',
+                            paddingBottom: 16,
+                        }}
+                    >
+                        <Text size="medium" variant="body" style={{ fontWeight: 'bold' }}>
+                            When conditions are met:
+                        </Text>
+                        <Flex
+                            direction="row"
+                            alignItems="center"
+                            gap="3"
+                            style={{ flexWrap: 'wrap' }}
+                        >
+                            <Text size="small" subdued variant="body">
+                                Select to show or hide selected component.
+                            </Text>
+                            <div style={{ width: 160 }}>
+                                <Combobox
+                                    {...({ disableClearSelection: true } as object)}
+                                    itemToKey={(item: BehaviorOption | null) => item?.value ?? ''}
+                                    itemToString={(item: BehaviorOption | null) =>
+                                        item?.label ?? ''
+                                    }
+                                    items={[...BEHAVIOR_OPTIONS]}
+                                    selectedItem={selectedBehavior}
+                                    onChange={handleBehaviorChange}
+                                >
+                                    <Combobox.SelectTrigger
+                                        label="Behavior"
+                                        placeholder="Select..."
+                                    />
+                                    <Combobox.Content>
+                                        {({ items }: { items: BehaviorOption[] }) => (
+                                            <Combobox.List>
+                                                {items.map((item, i) => (
+                                                    <Combobox.Item
+                                                        index={i}
+                                                        item={item}
+                                                        key={item.value}
+                                                    >
+                                                        {item.label}
+                                                    </Combobox.Item>
+                                                ))}
+                                            </Combobox.List>
+                                        )}
+                                    </Combobox.Content>
+                                </Combobox>
+                            </div>
+                        </Flex>
+                    </Flex>
+                    <ConditionGroupsSection
+                        dataPointOptions={dataPointOptions}
+                        groups={state.groups}
+                        onAddGroup={addGroup}
+                        onRemoveGroup={removeGroup}
+                        onUpdateGroup={updateGroup}
+                    />
+                    {!canSave && (
+                        <Text size="small" subdued variant="body">
+                            Complete each condition before saving. Data point and value are
+                            required, and numeric fields must contain a valid number.
+                        </Text>
+                    )}
+                </Flex>
+            </Dialog.Content>
+            <Dialog.Footer sticky>
+                <Dialog.CancelButton onClick={handleClose}>Cancel</Dialog.CancelButton>
+                <Button appearance="primary" disabled={!canSave} onClick={handleSave}>
+                    Save Changes
+                </Button>
+            </Dialog.Footer>
+        </Dialog>,
+        portalTarget,
+    );
+};

package/src/display-conditions/SeparatorWithChip.tsx

@@ -0,0 +1,14 @@
+import { Chip, Divider } from '@servicetitan/anvil2';
+
+export interface SeparatorWithChipProps {
+    label: string;
+    color?: string;
+}
+
+export function SeparatorWithChip({ color = '#94a3b8', label }: Readonly<SeparatorWithChipProps>) {
+    return (
+        <Divider alignContent="center" spacing="2">
+            <Chip label={label} size="small" color={color} />
+        </Divider>
+    );
+}

package/src/display-conditions/constants.ts

@@ -0,0 +1,22 @@
+import { ConditionGroup, DisplayConditionState, SingleCondition } from './types';
+
+export const generateId = () => Math.random().toString(36).slice(2, 11);
+
+export const defaultCondition = (): SingleCondition => ({
+    dataPointKey: '',
+    id: generateId(),
+    operator: 'is_equal_to',
+    value: '',
+});
+
+export const defaultGroup = (): ConditionGroup => ({
+    conditions: [defaultCondition()],
+    id: generateId(),
+});
+
+export const defaultState = (): DisplayConditionState => ({
+    behavior: 'show',
+    groups: [defaultGroup()],
+});
+
+export const MODAL_CONTENT_MAX_HEIGHT = '70vh';

package/src/display-conditions/displayConditionController.ts

@@ -0,0 +1,42 @@
+export interface DisplayConditionRequest {
+    data: any;
+    done: (condition: any) => void;
+}
+
+type Listener = (request: DisplayConditionRequest) => void;
+
+const DISPLAY_CONDITION_EVENT = 'dte:display-condition';
+const displayConditionEvents = new EventTarget();
+let activeListeners = 0;
+
+export const onDisplayCondition = (listener: Listener) => {
+    const handler = (event: Event) => {
+        const detail = (event as CustomEvent<DisplayConditionRequest>).detail;
+        if (!detail) {
+            return;
+        }
+        listener(detail);
+    };
+
+    activeListeners += 1;
+    displayConditionEvents.addEventListener(DISPLAY_CONDITION_EVENT, handler as EventListener);
+
+    return () => {
+        activeListeners = Math.max(0, activeListeners - 1);
+        displayConditionEvents.removeEventListener(
+            DISPLAY_CONDITION_EVENT,
+            handler as EventListener,
+        );
+    };
+};
+
+export const emitDisplayCondition = (request: DisplayConditionRequest) => {
+    if (activeListeners === 0) {
+        request.done(request.data);
+        return;
+    }
+
+    displayConditionEvents.dispatchEvent(
+        new CustomEvent<DisplayConditionRequest>(DISPLAY_CONDITION_EVENT, { detail: request }),
+    );
+};