@servicetitan/dte-unlayer 0.157.0 → 0.159.0

package/src/e-sign-offset/ESignDateSignedOffsetModal.tsx

@@ -43,6 +43,7 @@ export function ESignDateSignedOffsetModal({
     const [request, setRequest] = useState<ESignOffsetRequest | null>(null);
     const [rules, setRules] = useState<ESignDateSignedOffsetRule[]>([]);
     const [finalDays, setFinalDays] = useState(0);
+    const [hasClearedRules, setHasClearedRules] = useState(false);
     const { formFieldOptions, forms, isFieldDataLoading, loadForms, requestFormFields } =
         useConditionForms({ onConditionFormSelect, onConditionalsOpen });
 
@@ -64,37 +65,44 @@ export function ESignDateSignedOffsetModal({
             loadForms(initialRules.flatMap(rule => rule.condition.groups));
             setRules(initialRules);
             setFinalDays(nextFinalDays);
+            setHasClearedRules(false);
             setRequest(nextRequest);
         });
     }, [loadForms]);
 
-    const canSave = useMemo(() => {
-        if (isFieldDataLoading) {
-            return false;
-        }
-
-        return rules.every(rule => {
+    const isCompleteRule = useCallback(
+        (rule: ESignDateSignedOffsetRule) => {
             const condition = getESignOffsetRuleCondition(rule);
             const fieldType =
                 allFieldOptions.find(option => option.fullKey === condition?.dataPointKey)
                     ?.fieldType ?? 'string';
 
             return isCompleteESignOffsetCondition(condition, fieldType);
-        });
-    }, [allFieldOptions, isFieldDataLoading, rules]);
+        },
+        [allFieldOptions],
+    );
+
+    /*
+     * As in BYOD: "Clear Rules" shows once there is something to clear, and leaves one empty rule
+     * that is saved as no rules until it is filled in.
+     */
+    const hasConfiguredRules = rules.some(isCompleteRule);
+    const shouldSaveNoRules = hasClearedRules && !hasConfiguredRules;
+    const canSave = !isFieldDataLoading && (shouldSaveNoRules || rules.every(isCompleteRule));
 
     const handleClose = useCallback(() => {
         setRequest(null);
     }, []);
 
     const handleSave = useCallback(() => {
-        request?.done(buildESignOffsetSettings(rules, finalDays));
+        request?.done(buildESignOffsetSettings(shouldSaveNoRules ? [] : rules, finalDays));
         setRequest(null);
-    }, [finalDays, request, rules]);
+    }, [finalDays, request, rules, shouldSaveNoRules]);
 
     const handleClearRules = useCallback(() => {
-        setRules([]);
+        setRules([createESignOffsetRule()]);
         setFinalDays(0);
+        setHasClearedRules(true);
     }, []);
 
     const handleAddRule = useCallback(() => {
@@ -173,7 +181,7 @@ export function ESignDateSignedOffsetModal({
                     gap="3"
                     style={{ width: '100%' }}
                 >
-                    {rules.length > 0 && (
+                    {(hasConfiguredRules || rules.length > 1) && (
                         <Button appearance="ghost" onClick={handleClearRules}>
                             Clear Rules
                         </Button>

package/src/e-sign-offset/ESignOffsetRuleRow.tsx

@@ -14,12 +14,15 @@ export interface ESignOffsetDaysFieldProps {
     chipLabel: string;
     days: number;
     onChange: (days: number) => void;
+    /** As in BYOD: small in the final card, the condition row's size inside a rule card. */
+    size?: 'small' | 'medium';
 }
 
 export function ESignOffsetDaysField({
     chipLabel,
     days,
     onChange,
+    size = 'small',
 }: Readonly<ESignOffsetDaysFieldProps>) {
     return (
         <Flex>
@@ -28,7 +31,7 @@ export function ESignOffsetDaysField({
             </Flex>
             <NumberField
                 label="Number of days"
-                size="small"
+                size={size}
                 value={days}
                 minValue={0}
                 maxValue={MAX_E_SIGN_OFFSET_DAYS}
@@ -79,7 +82,8 @@ export function ESignOffsetRuleRow({
 
     return (
         <Card background="strong" padding="small">
-            <Flex direction="column" gap="3">
+            {/* A `Card` lays its children out in a row: take its full width, as BYOD's rule card does. */}
+            <Flex direction="column" gap="3" flex={1}>
                 <ConditionRow
                     canRemove
                     condition={condition}
@@ -94,6 +98,7 @@ export function ESignOffsetRuleRow({
                     chipLabel="THEN"
                     days={rule.days}
                     onChange={handleDaysChange}
+                    size="medium"
                 />
             </Flex>
         </Card>