@servicetitan/dte-pdf-editor 1.86.0 → 1.88.0

package/src/components/field-config-panel/e-sign-date-signed-offset-modal.tsx

@@ -0,0 +1,197 @@
+/**
+ * Why not `DisplayConditionModal`:
+ *
+ * `DisplayConditionModal` manages exactly one `DisplayConditionState` (a show/hide behavior
+ * toggle plus a list of condition groups) for a single field. `ESignDateSignedOffsetSettings` is
+ * a different shape entirely: a *list* of independent `{ days, condition }` rules, with no
+ * show/hide concept at all (`ESignDateSignedOffsetSettingsRule.condition` is "only show" by
+ * contract). The trailing, condition-less "else" row required by that settings type is owned by
+ * `ESignOptionsModal` (its own always-visible "Day offset" field) — this modal only ever manages
+ * the conditioned rules that precede it.
+ *
+ * Instead, this modal follows the same Dialog/Header/Content/Footer structure and reuses the same
+ * building blocks `DisplayConditionModal` is built from: `ConditionGroup`/`ConditionRow` for the
+ * condition-editing UI, `getSchemaDataPointOptions`/`getDocumentFieldsDataPointOptions` for
+ * data-point resolution, and `isValidConditionGroups` extracted from `DisplayConditionModal`.
+ * Nothing ESign-specific was added to any of those shared pieces.
+ */
+import { Button, Chip, Dialog, Flex, NumberField, Text } from '@servicetitan/anvil2';
+import PlusCircleIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { MODAL_CONTENT_MAX_HEIGHT } from '../../constants';
+import type {
+    ESignDateSignedOffsetSettingsFinalRule,
+    ESignDateSignedOffsetSettingsRule,
+    FormFieldsByFormIdI,
+    FormInfo,
+    PdfField,
+    SchemaObject,
+} from '../../interface/types';
+import {
+    addESignOffsetRule,
+    canAddESignOffsetRule,
+    createESignOffsetRule,
+    getDocumentFieldsDataPointOptions,
+    getSchemaDataPointOptions,
+    isValidConditionGroups,
+    updateESignOffsetRule,
+} from '../../utils';
+import { ESignOffsetRuleRow } from './e-sign-offset-rule-row';
+
+export interface ESignDateSignedOffsetModalProps {
+    onClose: () => void;
+    onSave: (
+        state: ESignDateSignedOffsetSettingsRule[],
+        finalRule: ESignDateSignedOffsetSettingsFinalRule,
+    ) => void;
+    initialState: ESignDateSignedOffsetSettingsRule[];
+    finalRule: ESignDateSignedOffsetSettingsFinalRule;
+    schema?: SchemaObject;
+    documentFields?: PdfField[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
+}
+
+export const ESignDateSignedOffsetModal: FC<ESignDateSignedOffsetModalProps> = ({
+    documentFields,
+    finalRule,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    initialState,
+    onClose,
+    onRequestFormFields,
+    onSave,
+    schema,
+}) => {
+    const [rules, setRules] = useState<ESignDateSignedOffsetSettingsRule[]>(
+        initialState.length === 0 ? [createESignOffsetRule()] : initialState,
+    );
+    const [finalRuleDays, setFinalRuleDays] = useState<number>(finalRule.days);
+
+    const mergeTagOptions = useMemo(() => getSchemaDataPointOptions(schema), [schema]);
+
+    const fillableOptions = useMemo(
+        () => getDocumentFieldsDataPointOptions(documentFields),
+        [documentFields],
+    );
+
+    const handleClose = useCallback(() => onClose(), [onClose]);
+
+    const handleSave = useCallback(() => {
+        onSave(rules, { days: finalRuleDays });
+        onClose();
+    }, [finalRuleDays, onClose, onSave, rules]);
+
+    const handleFinalRuleDaysChange = useCallback((days: number | null) => {
+        setFinalRuleDays(Math.max(Math.min(365, days ?? 0), 0));
+    }, []);
+
+    const handleAddRule = useCallback(() => {
+        setRules(prev => addESignOffsetRule(prev));
+    }, []);
+
+    const handleRemoveRule = useCallback((index: number) => {
+        setRules(prev => prev.filter((_, i) => i !== index));
+    }, []);
+
+    const handleUpdateRule = useCallback(
+        (index: number, rule: ESignDateSignedOffsetSettingsRule) => {
+            setRules(prev => updateESignOffsetRule(prev, index, rule));
+        },
+        [],
+    );
+
+    const canSave = useMemo(
+        () =>
+            rules.every(rule =>
+                isValidConditionGroups(rule.condition.groups, {
+                    fillableOptions,
+                    formFieldsByFormId,
+                    mergeTagOptions,
+                }),
+            ),
+        [fillableOptions, formFieldsByFormId, mergeTagOptions, rules],
+    );
+
+    return (
+        <Dialog open onClose={handleClose} size="xlarge">
+            <Dialog.Header>Date Signed Offset Rules</Dialog.Header>
+            <Dialog.Content>
+                <Flex
+                    direction="column"
+                    gap="4"
+                    flex={1}
+                    style={{
+                        maxHeight: MODAL_CONTENT_MAX_HEIGHT,
+                        overflowY: 'auto',
+                    }}
+                >
+                    {rules.length === 0 && (
+                        <Flex justifyContent="center" alignItems="center">
+                            <Text variant="body" size="xlarge" subdued>
+                                Rule not configured yet.
+                            </Text>
+                        </Flex>
+                    )}
+
+                    {rules.map((rule, index) => (
+                        <ESignOffsetRuleRow
+                            key={rule.condition.groups[0]?.id ?? index}
+                            onDelete={() => handleRemoveRule(index)}
+                            fillableOptions={fillableOptions}
+                            formFieldsByFormId={formFieldsByFormId}
+                            formFieldsLoadingFormId={formFieldsLoadingFormId}
+                            forms={forms}
+                            mergeTagOptions={mergeTagOptions}
+                            onChange={next => handleUpdateRule(index, next)}
+                            onRequestFormFields={onRequestFormFields}
+                            rule={rule}
+                            canRemove={rules.length > 1}
+                        />
+                    ))}
+                    <Button
+                        size="small"
+                        appearance="ghost"
+                        icon={{ before: PlusCircleIcon }}
+                        onClick={handleAddRule}
+                        disabled={!canAddESignOffsetRule(rules)}
+                    >
+                        Add Else Condition
+                    </Button>
+
+                    <Flex className="dte-rule-card">
+                        <Flex
+                            alignItems="center"
+                            style={{
+                                padding: '8px 12px',
+                            }}
+                        >
+                            <Chip label="THEN" size="medium" />
+                        </Flex>
+                        <Flex direction="column" gap="1">
+                            <NumberField
+                                size="small"
+                                label="Number of days"
+                                value={finalRuleDays}
+                                onChange={handleFinalRuleDaysChange}
+                                suffix="days"
+                            />
+                            <Text variant="body" size="small" subdued>
+                                days range up to 365
+                            </Text>
+                        </Flex>
+                    </Flex>
+                </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>
+    );
+};

package/src/components/field-config-panel/e-sign-offset-rule-row.tsx

@@ -0,0 +1,91 @@
+import { Chip, Flex, NumberField, Text } from '@servicetitan/anvil2';
+import { FC } from 'react';
+import { defaultCondition, defaultGroup } from '../../constants';
+import type {
+    DataPointOption,
+    ESignDateSignedOffsetSettingsRule,
+    FormFieldsByFormIdI,
+    FormInfo,
+} from '../../interface/types';
+import { ConditionRow } from '../display-conditions/condition-row';
+
+export interface ESignOffsetRuleRowProps {
+    canRemove: boolean;
+    rule: ESignDateSignedOffsetSettingsRule;
+    onChange: (rule: ESignDateSignedOffsetSettingsRule) => void;
+    onDelete: () => void;
+    fillableOptions: DataPointOption[];
+    mergeTagOptions: DataPointOption[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
+}
+
+export const ESignOffsetRuleRow: FC<ESignOffsetRuleRowProps> = ({
+    canRemove,
+    fillableOptions,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    mergeTagOptions,
+    onChange,
+    onDelete,
+    onRequestFormFields,
+    rule,
+}) => {
+    const handleDaysChange = (days: number | null) => {
+        onChange({ ...rule, days: days ?? 0 });
+    };
+
+    const group = rule.condition.groups[0];
+    const condition = group?.conditions[0] ?? defaultCondition();
+
+    const handleConditionChange = (nextCondition: typeof condition) => {
+        onChange({
+            ...rule,
+            condition: {
+                ...rule.condition,
+                groups: [{ ...(group ?? defaultGroup()), conditions: [nextCondition] }],
+            },
+        });
+    };
+
+    return (
+        <Flex direction="column" gap="3" className="dte-rule-card">
+            <ConditionRow
+                canRemove={canRemove}
+                condition={condition}
+                fillableOptions={fillableOptions}
+                formFieldsByFormId={formFieldsByFormId}
+                formFieldsLoadingFormId={formFieldsLoadingFormId}
+                forms={forms}
+                mergeTagOptions={mergeTagOptions}
+                onChange={handleConditionChange}
+                onRemove={onDelete}
+                onRequestFormFields={onRequestFormFields}
+            />
+            <Flex>
+                <Flex
+                    alignItems="center"
+                    style={{
+                        padding: '8px 12px',
+                    }}
+                >
+                    <Chip label="THEN" size="medium" />
+                </Flex>
+                <Flex direction="column" gap="1">
+                    <NumberField
+                        label="Number of days"
+                        value={rule.days}
+                        onChange={handleDaysChange}
+                        suffix="days"
+                    />
+                    <Text variant="body" size="small" subdued>
+                        days range up to 365
+                    </Text>
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+};

package/src/components/field-config-panel/e-sign-options-modal.tsx

@@ -0,0 +1,112 @@
+import { Button, Flex, NumberField } from '@servicetitan/anvil2';
+import AddIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+import { FC, Fragment, useState } from 'react';
+import {
+    ESignDateSignedOffsetSettings,
+    ESignDateSignedOffsetSettingsFinalRule,
+    ESignDateSignedOffsetSettingsRule,
+    FormFieldsByFormIdI,
+    FormInfo,
+    PdfField,
+    SchemaObject,
+} from '../../interface/types';
+import { ESignDateRulesSummary } from './e-sign-date-rules-summary';
+import { ESignDateSignedOffsetModal } from './e-sign-date-signed-offset-modal';
+
+interface ESignOptionsModalProps {
+    initialState: ESignDateSignedOffsetSettings;
+    onSave: (state: ESignDateSignedOffsetSettings) => void;
+    schema?: SchemaObject;
+    documentFields?: PdfField[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
+}
+
+export const ESignOptionsModal: FC<ESignOptionsModalProps> = ({
+    documentFields,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    initialState,
+    onRequestFormFields,
+    onSave,
+    schema,
+}) => {
+    const [open, setOpen] = useState(false);
+    /*
+     * `rules` is a tuple: zero or more conditioned rules followed by exactly one condition-less
+     * final rule (enforced by `ESignDateSignedOffsetSettings['rules']`). Slicing/indexing a
+     * variadic tuple widens to the member union, so the split needs one explicit, deliberate cast.
+     */
+    const ruleWithOutCondition = initialState.rules[
+        initialState.rules.length - 1
+    ] as ESignDateSignedOffsetSettingsFinalRule;
+    const rulesWithConditions = initialState.rules.slice(
+        0,
+        -1,
+    ) as ESignDateSignedOffsetSettingsRule[];
+
+    const handleDaysChange = (days: number | null) => {
+        onSave({
+            rules: [...rulesWithConditions, { days: Math.max(Math.min(365, days ?? 0), 0) }],
+        });
+    };
+
+    const handleSaveRules = (
+        rules: ESignDateSignedOffsetSettingsRule[],
+        finalRule: ESignDateSignedOffsetSettingsFinalRule,
+    ) => {
+        onSave({ rules: [...rules, finalRule] });
+    };
+
+    return (
+        <Fragment>
+            {rulesWithConditions.length === 0 ? (
+                <Flex gap={1} direction="column" justifyContent="space-between">
+                    <NumberField
+                        size="small"
+                        label="Number of days"
+                        value={ruleWithOutCondition.days}
+                        onChange={handleDaysChange}
+                        suffix="days"
+                        width="100%"
+                    />
+
+                    <Button
+                        appearance="ghost"
+                        size="small"
+                        icon={AddIcon}
+                        onClick={() => setOpen(true)}
+                        style={{ color: '#0265DC' }}
+                    >
+                        Set Date Rule
+                    </Button>
+                </Flex>
+            ) : (
+                <ESignDateRulesSummary
+                    documentFields={documentFields}
+                    onEdit={() => setOpen(true)}
+                    rulesWithConditions={rulesWithConditions}
+                    schema={schema}
+                    elseDays={ruleWithOutCondition.days}
+                />
+            )}
+            {open && (
+                <ESignDateSignedOffsetModal
+                    onClose={() => setOpen(false)}
+                    onSave={handleSaveRules}
+                    documentFields={documentFields}
+                    finalRule={ruleWithOutCondition}
+                    formFieldsByFormId={formFieldsByFormId}
+                    formFieldsLoadingFormId={formFieldsLoadingFormId}
+                    forms={forms}
+                    initialState={rulesWithConditions}
+                    onRequestFormFields={onRequestFormFields}
+                    schema={schema}
+                />
+            )}
+        </Fragment>
+    );
+};

package/src/components/field-config-panel/field-config-panel.tsx

@@ -1,7 +1,8 @@
-import { Button, Checkbox, Combobox, Flex, Textarea, TextField } from '@servicetitan/anvil2';
+import { Button, Checkbox, Flex, SelectFieldSync, Textarea, TextField } from '@servicetitan/anvil2';
 import { FC, useMemo } from 'react';
-import { E_SIGN_FIELD_TYPE_OPTIONS, FIELD_FONT_SIZE_OPTIONS } from '../../constants';
+import { FIELD_FONT_SIZE_OPTIONS } from '../../constants';
 import {
+    ESignDateSignedOffsetSettings,
     ESignFieldType,
     FieldTypeEnum,
     type FormFieldsByFormIdI,
@@ -19,6 +20,7 @@ import {
     supportsFieldFontSize,
 } from '../../utils';
 import { DisplayCondition } from '../display-conditions/display-condition';
+import { ESignOptionsModal } from './e-sign-options-modal';
 import { FormulaGenerator } from './formula-generator';
 import { TableConfigs } from './table-configs';
 
@@ -56,39 +58,53 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
 }) => {
     const recipientOptions = useMemo(
         () =>
-            field.type === FieldTypeEnum.fillable
+            (field.type === FieldTypeEnum.fillable
                 ? getFillableFieldsRecipients(recipients)
-                : recipients,
+                : recipients
+            ).map(recipient => ({ id: recipient.name, label: recipient.displayName })),
         [recipients, field.type],
     );
 
     const selectedRecipient = useMemo(
-        () => recipientOptions.find(recipient => recipient.name === field.recipient) ?? null,
+        () => recipientOptions.find(option => option.id === field.recipient) ?? null,
         [recipientOptions, field.recipient],
     );
 
     const isRadioGroupSibling = (documentField: PdfField) =>
         documentField.subType === 'radio' && documentField.path === field.path;
 
-    const handleRecipientChange = (item: RecipientInfo | null) => {
+    const isDateSignedOffsetSibling = (documentField: PdfField) =>
+        documentField.type === FieldTypeEnum.eSign &&
+        documentField.subType === ESignFieldType.dateSignedOffset;
+
+    const handleDateSignedOffsetSave = (data: ESignDateSignedOffsetSettings) => {
+        if (onMatchingFieldsConfigChange) {
+            onMatchingFieldsConfigChange(isDateSignedOffsetSibling, { data });
+            return;
+        }
+
+        onFieldConfigChange({ data });
+    };
+
+    const handleRecipientChange = (item: { id: string; label: string } | null) => {
         if (!item) {
             return;
         }
 
         let path = field.path;
         if (field.type === FieldTypeEnum.eSign) {
-            path = generateESignPath(item.name, field.subType as ESignFieldType);
+            path = generateESignPath(item.id, field.subType as ESignFieldType);
         }
         if (field.type === FieldTypeEnum.fillable) {
             const pathName =
                 field.subType === 'radio' && field.path
                     ? parseFillablePathName(field.path)
                     : field.id;
-            path = generateFillablePath(item.name, pathName);
+            path = generateFillablePath(item.id, pathName);
         }
 
         const updates = {
-            recipient: item.name,
+            recipient: item.id,
             path,
         };
 
@@ -105,31 +121,25 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         onFieldConfigChange(updates);
     };
 
-    const selectedESignFieldType = useMemo(
-        () => E_SIGN_FIELD_TYPE_OPTIONS.find(option => option.id === field.subType) ?? null,
-        [field],
-    );
+    const showFontSizeControl = supportsFieldFontSize(field);
 
-    const handleESignFieldTypeChange = (item: { id: ESignFieldType; name: string } | null) => {
-        if (item) {
-            onFieldConfigChange({
-                subType: item.id,
-                path: generateESignPath(field.recipient!, item.id),
-            });
-        }
-    };
+    const fontSizeOptions = useMemo(
+        () => FIELD_FONT_SIZE_OPTIONS.map(size => ({ id: size, label: size.toString() })),
+        [],
+    );
 
-    const showFontSizeControl = supportsFieldFontSize(field);
+    const selectedFontSize = useMemo(
+        () => fontSizeOptions.find(option => option.id === getFieldFontSize(field)) ?? null,
+        [fontSizeOptions, field],
+    );
 
-    const handleFontSizeChange = (item: number | null) => {
-        if (item) {
-            onFieldConfigChange({
-                styles: {
-                    ...field.styles,
-                    fontSize: item,
-                },
-            });
-        }
+    const handleFontSizeChange = (item: { id: number; label: string }) => {
+        onFieldConfigChange({
+            styles: {
+                ...field.styles,
+                fontSize: item.id,
+            },
+        });
     };
 
     const handleRadioGroupNameChange = (groupName: string) => {
@@ -184,47 +194,14 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 />
             )}
             {(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (
-                <Combobox
-                    items={recipientOptions}
-                    itemToString={item => item?.displayName ?? ''}
-                    onChange={handleRecipientChange}
-                    selectedItem={selectedRecipient}
-                    filterOptions={{ keys: ['displayName'] }}
-                >
-                    <Combobox.SearchField placeholder="" label="Recipient" />
-                    <Combobox.Content>
-                        {({ items }) => (
-                            <Combobox.List>
-                                {items.map((item, i) => (
-                                    <Combobox.Item key={item.name} item={item} index={i}>
-                                        {item.displayName}
-                                    </Combobox.Item>
-                                ))}
-                            </Combobox.List>
-                        )}
-                    </Combobox.Content>
-                </Combobox>
-            )}
-            {field.type === FieldTypeEnum.eSign && (
-                <Combobox
-                    items={E_SIGN_FIELD_TYPE_OPTIONS}
-                    itemToString={item => item?.name ?? ''}
-                    onChange={handleESignFieldTypeChange}
-                    selectedItem={selectedESignFieldType}
-                >
-                    <Combobox.SearchField label="Field Type" />
-                    <Combobox.Content>
-                        {({ items }) => (
-                            <Combobox.List>
-                                {items.map((item, i) => (
-                                    <Combobox.Item key={item.id} item={item} index={i}>
-                                        {item.name}
-                                    </Combobox.Item>
-                                ))}
-                            </Combobox.List>
-                        )}
-                    </Combobox.Content>
-                </Combobox>
+                <SelectFieldSync
+                    label="Recipient"
+                    disableClearButton
+                    options={recipientOptions}
+                    value={selectedRecipient}
+                    onSelectedOptionChange={handleRecipientChange}
+                    filter={{ keys: ['label'] }}
+                />
             )}
             {field.type !== FieldTypeEnum.generic && (
                 <TextField label="Data Path" value={field.path} disabled />
@@ -271,31 +248,33 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
             )}
 
             {showFontSizeControl && (
-                <Combobox
-                    items={FIELD_FONT_SIZE_OPTIONS}
-                    itemToString={item => item?.toString() ?? ''}
-                    onChange={handleFontSizeChange}
-                    selectedItem={getFieldFontSize(field)}
-                >
-                    <Combobox.SearchField label="Font Size" />
-                    <Combobox.Content>
-                        {({ items }) => (
-                            <Combobox.List>
-                                {items.map((item, i) => (
-                                    <Combobox.Item key={item} item={item} index={i}>
-                                        {item}
-                                    </Combobox.Item>
-                                ))}
-                            </Combobox.List>
-                        )}
-                    </Combobox.Content>
-                </Combobox>
+                <SelectFieldSync
+                    label="Font Size"
+                    disableClearButton
+                    options={fontSizeOptions}
+                    value={selectedFontSize}
+                    onSelectedOptionChange={handleFontSizeChange}
+                />
             )}
 
             {field.type === FieldTypeEnum.generic && field.subType === 'table' && (
                 <TableConfigs field={field} onFieldConfigChange={onFieldConfigChange} />
             )}
 
+            {field.type === FieldTypeEnum.eSign &&
+                field.subType === ESignFieldType.dateSignedOffset && (
+                    <ESignOptionsModal
+                        initialState={field.data as ESignDateSignedOffsetSettings}
+                        onSave={handleDateSignedOffsetSave}
+                        documentFields={documentFields}
+                        formFieldsByFormId={formFieldsByFormId}
+                        formFieldsLoadingFormId={formulaLoadingFormId}
+                        forms={forms}
+                        onRequestFormFields={onRequestFormFields}
+                        schema={dataModel}
+                    />
+                )}
+
             {!hideConditionalLogic && (
                 <DisplayCondition
                     onSave={onFieldConfigChange}

package/src/components/field-sidebar/e-sign-field-type-list.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import { E_SIGN_FIELD_TYPES } from '../../constants';
 import { type FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
@@ -10,18 +10,15 @@ interface ESignFieldTypeListProps {
 
 export const ESignFieldTypeList: FC<ESignFieldTypeListProps> = ({ onDragEnd, onDragStart }) => {
     return (
-        <Fragment>
-            {E_SIGN_FIELD_TYPES.map(fieldOption => {
-                const key = `${fieldOption.type}-${fieldOption.path ?? fieldOption.label}`;
-                return (
-                    <FieldType
-                        key={key}
-                        label={fieldOption.label}
-                        onDragEnd={onDragEnd}
-                        onDragStart={() => onDragStart(fieldOption)}
-                    />
-                );
-            })}
-        </Fragment>
+        <div className="dte-field-type-items-wrapper">
+            {E_SIGN_FIELD_TYPES.map(fieldOption => (
+                <FieldType
+                    key={fieldOption.subType}
+                    label={fieldOption.label}
+                    onDragEnd={onDragEnd}
+                    onDragStart={() => onDragStart(fieldOption)}
+                />
+            ))}
+        </div>
     );
 };