From 35c16637115ac4a76bf6cf9906e6b57d753b7794 Mon Sep 17 00:00:00 2001 From: Bernardo Anderson Date: Sat, 7 Feb 2026 19:37:40 -0600 Subject: [PATCH 1/4] CP-12034 - Update Docuseal fields if they have default names --- app/javascript/template_builder/area.vue | 13 ++- app/javascript/template_builder/builder.vue | 12 +- .../default_field_highlight.js | 108 ++++++++++++++++++ app/javascript/template_builder/field.vue | 13 ++- 4 files changed, 143 insertions(+), 3 deletions(-) create mode 100644 app/javascript/template_builder/default_field_highlight.js diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue index 8d53b67a..32667158 100644 --- a/app/javascript/template_builder/area.vue +++ b/app/javascript/template_builder/area.vue @@ -162,7 +162,8 @@ ref="touchValueTarget" class="flex h-full w-full field-area" dir="auto" - :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']" + :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center', fieldHighlightClasses]" + :style="fieldHighlightStyles" @click="focusValueInput" > 1) { return false diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue index be439d14..e8024ddc 100644 --- a/app/javascript/template_builder/builder.vue +++ b/app/javascript/template_builder/builder.vue @@ -350,8 +350,9 @@ import MobileFields from './mobile_fields' import FieldSubmitter from './field_submitter' import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments } from '@tabler/icons-vue' import { v4 } from 'uuid' -import { ref, computed, toRaw } from 'vue' +import { ref, computed, toRaw, watch } from 'vue' import * as i18n from './i18n' +import { countDefaultFieldNames } from './default_field_highlight' export default { name: 'TemplateBuilder', components: { @@ -780,6 +781,15 @@ export default { this.pendingFieldAttachmentUuids.push(item.attachment_uuid) } }) + + watch(() => this.template.fields, (fields) => { + const hasDefaultFields = countDefaultFieldNames(fields) > 0 + + window.parent.postMessage({ + type: 'DOCUSEAL_BUILDER_HAVE_DEFAULT_FIELDS', + value: hasDefaultFields + }, '*') + }, { deep: true, immediate: true }) }, unmounted () { document.removeEventListener('keyup', this.onKeyUp) diff --git a/app/javascript/template_builder/default_field_highlight.js b/app/javascript/template_builder/default_field_highlight.js new file mode 100644 index 00000000..94bf894e --- /dev/null +++ b/app/javascript/template_builder/default_field_highlight.js @@ -0,0 +1,108 @@ +/** + * Default Field Name Highlighting + * + * This module provides utilities for detecting and highlighting fields with default names. + * Default names follow the pattern "[Field Type] Field [Number]" (e.g., "Text Field 1", "Signature Field 2") + * or "[Field Type] [Number]" for headings (e.g., "Heading 1", "Heading 2") + */ + +/** + * Regular expression to match default field names + * Matches patterns like: + * - "Text Field 1", "Text Field 2", etc. + * - "Signature Field 1", "Signature Field 2", etc. + * - "Heading 1", "Heading 2", etc. + * - "Initials Field 1", "Initials Field 2", etc. + * - "Date Field 1", "Date Field 2", etc. + * - "Number Field 1", "Number Field 2", etc. + * - "Image Field 1", "Image Field 2", etc. + * - "File Field 1", "File Field 2", etc. + * - "Select Field 1", "Select Field 2", etc. + * - "Checkbox Field 1", "Checkbox Field 2", etc. + * - "Multiple Field 1", "Multiple Field 2", etc. + * - "Radio Field 1", "Radio Field 2", etc. + * - "Cells Field 1", "Cells Field 2", etc. + * - "Stamp Field 1", "Stamp Field 2", etc. + * - "Payment Field 1", "Payment Field 2", etc. + * - "Phone Field 1", "Phone Field 2", etc. + * - "Verify ID Field 1", "Verify ID Field 2", etc. + */ +export const DEFAULT_FIELD_NAME_REGEX = /^(Text|Signature|Initials|Date|Number|Image|File|Select|Checkbox|Multiple|Radio|Cells|Stamp|Payment|Phone|Verify ID).*?\s+\d+$|^Heading\s+\d+$/i + +/** + * Check if a field name is a default name + * @param {string} fieldName - The field name to check + * @returns {boolean} True if the field name matches the default pattern + */ +export function isDefaultFieldName(fieldName) { + if (!fieldName || typeof fieldName !== 'string' || fieldName.trim() === '') { + return true + } + if (isDefault) { + // console.log(`DocuSeal: Found default field "${fieldName}"`) + } + return isDefault +} + +/** + * Get the CSS classes for highlighting a default-named field + * @returns {string} CSS classes for indigo highlighting + */ +export function getDefaultFieldHighlightClasses() { + return '!border-indigo-500 !bg-indigo-100' +} + +/** + * Get the inline styles for highlighting a default-named field + * @returns {Object} Inline styles for indigo highlighting + */ +export function getDefaultFieldHighlightStyles() { + return { + borderWidth: '3px', + borderStyle: 'solid' + } +} + +/** + * Get the tooltip message for default-named fields + * @returns {string} Tooltip message explaining why the field is highlighted + */ +export function getDefaultFieldTooltipMessage() { + return 'This field has a default name. Please rename it to something more descriptive for a better form filling experience.' +} + +/** + * Get the warning message for templates with default-named fields + * @param {number} count - Number of fields with default names + * @returns {string} Warning message + */ +export function getDefaultFieldWarningMessage(count) { + if (count === 1) { + return 'You have 1 field with a default name. Please rename it to something more descriptive for a better form filling experience.' + } + return `You have ${count} fields with default names. Please rename them to something more descriptive for a better form filling experience.` +} + +/** + * Count fields with default names + * @param {Array} fields - Array of field objects + * @returns {number} Count of fields with default names + */ +export function countDefaultFieldNames(fields) { + if (!Array.isArray(fields)) { + return 0 + } + return fields.filter(field => isDefaultFieldName(field.name)).length +} + +/** + * Get all fields with default names + * @param {Array} fields - Array of field objects + * @returns {Array} Array of fields with default names + */ +export function getDefaultFieldNames(fields) { + if (!Array.isArray(fields)) { + return [] + } + return fields.filter(field => isDefaultFieldName(field.name)) +} diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue index 8f71f418..4ac1ccac 100644 --- a/app/javascript/template_builder/field.vue +++ b/app/javascript/template_builder/field.vue @@ -4,7 +4,8 @@ >
{ acc[item.attachment_uuid] = index From 436be74ffba90736d2a4491cb11eb30991a5564c Mon Sep 17 00:00:00 2001 From: Bernardo Anderson Date: Sat, 7 Feb 2026 20:08:16 -0600 Subject: [PATCH 2/4] CP-12034 - Fix undefined issue --- app/javascript/template_builder/default_field_highlight.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/javascript/template_builder/default_field_highlight.js b/app/javascript/template_builder/default_field_highlight.js index 94bf894e..df171ad9 100644 --- a/app/javascript/template_builder/default_field_highlight.js +++ b/app/javascript/template_builder/default_field_highlight.js @@ -38,9 +38,7 @@ export function isDefaultFieldName(fieldName) { if (!fieldName || typeof fieldName !== 'string' || fieldName.trim() === '') { return true } - if (isDefault) { - // console.log(`DocuSeal: Found default field "${fieldName}"`) - } + const isDefault = DEFAULT_FIELD_NAME_REGEX.test(fieldName) return isDefault } From 82f528cf127d6565c43285b11ab19f0722390841 Mon Sep 17 00:00:00 2001 From: Bernardo Anderson Date: Sat, 7 Feb 2026 20:12:34 -0600 Subject: [PATCH 3/4] CP-12034 - ESlint updates --- .../template_builder/default_field_highlight.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/javascript/template_builder/default_field_highlight.js b/app/javascript/template_builder/default_field_highlight.js index df171ad9..672c945e 100644 --- a/app/javascript/template_builder/default_field_highlight.js +++ b/app/javascript/template_builder/default_field_highlight.js @@ -1,6 +1,6 @@ /** * Default Field Name Highlighting - * + * * This module provides utilities for detecting and highlighting fields with default names. * Default names follow the pattern "[Field Type] Field [Number]" (e.g., "Text Field 1", "Signature Field 2") * or "[Field Type] [Number]" for headings (e.g., "Heading 1", "Heading 2") @@ -34,7 +34,7 @@ export const DEFAULT_FIELD_NAME_REGEX = /^(Text|Signature|Initials|Date|Number|I * @param {string} fieldName - The field name to check * @returns {boolean} True if the field name matches the default pattern */ -export function isDefaultFieldName(fieldName) { +export function isDefaultFieldName (fieldName) { if (!fieldName || typeof fieldName !== 'string' || fieldName.trim() === '') { return true } @@ -46,7 +46,7 @@ export function isDefaultFieldName(fieldName) { * Get the CSS classes for highlighting a default-named field * @returns {string} CSS classes for indigo highlighting */ -export function getDefaultFieldHighlightClasses() { +export function getDefaultFieldHighlightClasses () { return '!border-indigo-500 !bg-indigo-100' } @@ -54,7 +54,7 @@ export function getDefaultFieldHighlightClasses() { * Get the inline styles for highlighting a default-named field * @returns {Object} Inline styles for indigo highlighting */ -export function getDefaultFieldHighlightStyles() { +export function getDefaultFieldHighlightStyles () { return { borderWidth: '3px', borderStyle: 'solid' @@ -65,7 +65,7 @@ export function getDefaultFieldHighlightStyles() { * Get the tooltip message for default-named fields * @returns {string} Tooltip message explaining why the field is highlighted */ -export function getDefaultFieldTooltipMessage() { +export function getDefaultFieldTooltipMessage () { return 'This field has a default name. Please rename it to something more descriptive for a better form filling experience.' } @@ -74,7 +74,7 @@ export function getDefaultFieldTooltipMessage() { * @param {number} count - Number of fields with default names * @returns {string} Warning message */ -export function getDefaultFieldWarningMessage(count) { +export function getDefaultFieldWarningMessage (count) { if (count === 1) { return 'You have 1 field with a default name. Please rename it to something more descriptive for a better form filling experience.' } @@ -86,7 +86,7 @@ export function getDefaultFieldWarningMessage(count) { * @param {Array} fields - Array of field objects * @returns {number} Count of fields with default names */ -export function countDefaultFieldNames(fields) { +export function countDefaultFieldNames (fields) { if (!Array.isArray(fields)) { return 0 } @@ -98,7 +98,7 @@ export function countDefaultFieldNames(fields) { * @param {Array} fields - Array of field objects * @returns {Array} Array of fields with default names */ -export function getDefaultFieldNames(fields) { +export function getDefaultFieldNames (fields) { if (!Array.isArray(fields)) { return [] } From d243719c2c928bcf8ec48d5848b6d26595f04c02 Mon Sep 17 00:00:00 2001 From: Bernardo Anderson Date: Wed, 11 Feb 2026 12:01:34 -0600 Subject: [PATCH 4/4] CP-12034 - Update colors --- app/javascript/application.scss | 2 +- app/javascript/template_builder/default_field_highlight.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/application.scss b/app/javascript/application.scss index 4c705821..f830fe31 100644 --- a/app/javascript/application.scss +++ b/app/javascript/application.scss @@ -131,7 +131,7 @@ label.primary-button { :root { --tooltip-color: black; - --employee-color: #FFD687; + --employee-color: #fed7aa; --manager-color: #D6E4FD; } diff --git a/app/javascript/template_builder/default_field_highlight.js b/app/javascript/template_builder/default_field_highlight.js index 672c945e..0cf270bc 100644 --- a/app/javascript/template_builder/default_field_highlight.js +++ b/app/javascript/template_builder/default_field_highlight.js @@ -47,7 +47,7 @@ export function isDefaultFieldName (fieldName) { * @returns {string} CSS classes for indigo highlighting */ export function getDefaultFieldHighlightClasses () { - return '!border-indigo-500 !bg-indigo-100' + return '!border-yellow-500 !bg-yellow-200' } /**