fix(@dpc-sdp/ripple-tide-landing-page): prepend ids to avoid clashes …

…with other forms
dpc-sdp · Jun 27, 2023 · 8844210 · 8844210
1 parent e388878
commit 8844210
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 29 deletions.
diff --git a/...es/ripple-tide-landing-page/mapping/components/webforms/webform-conditional-logic.test.ts b/...es/ripple-tide-landing-page/mapping/components/webforms/webform-conditional-logic.test.ts
@@ -391,4 +391,23 @@ describe('getConditionals', () => {
       expect(getConditionals(input)).toEqual(expected)
     })
   })
+
+  it('prefixes inputs', () => {
+    const input = {
+      formId: 'test_id',
+      '#states': {
+        required: {
+          ':input[name="input_a"]': {
+            checked: true
+          }
+        }
+      }
+    }
+
+    const expected = {
+      required: '$isChecked($get(test_id_input_a).value, "true")'
+    }
+
+    expect(getConditionals(input)).toEqual(expected)
+  })
 })
diff --git a/packages/ripple-tide-landing-page/mapping/components/webforms/webform-conditional-logic.ts b/packages/ripple-tide-landing-page/mapping/components/webforms/webform-conditional-logic.ts
@@ -21,11 +21,14 @@ interface NormalisedRule {
 /**
  * Extract model name "check_a" from a rule ":input[name=\"check_a\"]"
  * @param {String} rule :input[name=\"check_a\"]
+ * @param {String} prefix string to prepend to the name
  */
-const getNameFromSelector = (rule: string): string => {
+const getNameFromSelector = (rule: string, prefix: string): string => {
   const start = rule.indexOf('"') + 1
   const end = rule.indexOf('"', start + 1)
-  return rule.substr(start, end - start)
+  const name = rule.substr(start, end - start)
+
+  return prefix ? `${prefix}_${name}` : name
 }
 
 /**
@@ -45,9 +48,10 @@ const getFirstObjectKey = (obj): string => {
  * Returns an object representing a piece of logic
  * @param {Object} ruleObject the parent object that contains the selector
  * @param {String} selector a field selector e.g. ':input[name=\"check_a\"]' or ':input[name=\"check_a[option]\"]'
+ * @param {String} prefix used to prepend the fieldName
  */
-function convertSelectorToOperand(ruleObject, selector): Operand {
-  let fieldName = getNameFromSelector(selector)
+function convertSelectorToOperand(ruleObject, selector, prefix): Operand {
+  let fieldName = getNameFromSelector(selector, prefix)
   const triggerType = getFirstObjectKey(ruleObject[selector])
   let triggerValue = triggerType ? ruleObject[selector][triggerType] : null
 
@@ -67,8 +71,9 @@ function convertSelectorToOperand(ruleObject, selector): Operand {
  * Rules may be an {object} or [array (with operator)].
  * This will output a test object.
  * @param {Object} rulesObject webform rules object
+ * @param {String} prefix optional prefix to scope rules to a form
  */
-const normaliseRule = (rulesObject): NormalisedRule => {
+const normaliseRule = (rulesObject, prefix = null): NormalisedRule => {
   const rulesType = Array.isArray(rulesObject) ? 'array' : typeof rulesObject
   let operator: LogicOperator = 'and'
   const operands: Operand[] = []
@@ -79,7 +84,7 @@ const normaliseRule = (rulesObject): NormalisedRule => {
       rulesObject.forEach((item) => {
         if (typeof item === 'object') {
           const selector = getFirstObjectKey(item)
-          operands.push(convertSelectorToOperand(item, selector))
+          operands.push(convertSelectorToOperand(item, selector, prefix))
         } else {
           operator = item
         }
@@ -88,7 +93,7 @@ const normaliseRule = (rulesObject): NormalisedRule => {
     case 'object':
       // Used for 'and' operator.
       Object.getOwnPropertyNames(rulesObject).forEach((selector) => {
-        operands.push(convertSelectorToOperand(rulesObject, selector))
+        operands.push(convertSelectorToOperand(rulesObject, selector, prefix))
       })
       break
     default:
@@ -165,7 +170,7 @@ export const getConditionals = (
 
   return (Object.keys(states || {}) as SupportedStates[]).reduce(
     (result, state: SupportedStates) => {
-      const rule = normaliseRule(states[state])
+      const rule = normaliseRule(states[state], field?.formId)
       const expression = toFormkitExpression(rule)
 
       switch (state) {

diff --git a/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-address.ts b/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-address.ts
@@ -1,6 +1,6 @@
 import { camelCase } from 'lodash-es'
 
-export const getAdvancedAddressMapping = (fieldKey, field) => {
+export const getAdvancedAddressMapping = (fieldKey, field, formId) => {
   const overrides = field['#field_overrides'] || {}
 
   const isAddressRequired = field['#required']
@@ -16,7 +16,7 @@ export const getAdvancedAddressMapping = (fieldKey, field) => {
 
   const defaultValues = field['#default_value'] || {}
 
-  const getFieldId = (name) => `${fieldKey}.${name}`
+  const getFieldId = (name) => `${formId}_${fieldKey}_${name}`
   const isFieldVisible = (name) => overrides[camelCase(name)] !== 'hidden'
   const hasRequiredOverride = (name) =>
     overrides[camelCase(name)] === 'required'

diff --git a/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts
@@ -29,17 +29,20 @@ const getFormSchemaFromMapping = async (
 ): Promise<FormKitSchemaNode[]> => {
   const elements: ITideFormElement[] = webform?.elements || []
   const fields: any[] = []
+  const formId = webform?.drupal_internal__id
 
-  for (const [fieldKey, field] of Object.entries(elements)) {
+  for (const [fieldKey, fieldData] of Object.entries(elements)) {
     let mappedField
+    const field = { ...fieldData, formId }
+    const fieldID = `${formId}_${fieldKey}`
 
     switch (field['#type']) {
       case 'hidden':
         mappedField = {
           $formkit: 'hidden',
           key: fieldKey,
           name: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           value: field['#default_value']
         }
         break
@@ -51,7 +54,7 @@ const getFormSchemaFromMapping = async (
           label: field['#title'],
           disabled: field['#disabled'],
           placeholder: field['#placeholder'],
-          id: fieldKey,
+          id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
           ...getValidationAndConditionals(field),
@@ -67,7 +70,7 @@ const getFormSchemaFromMapping = async (
           label: field['#title'],
           disabled: field['#disabled'],
           placeholder: field['#placeholder'],
-          id: fieldKey,
+          id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
           ...getValidationAndConditionals(field),
@@ -82,7 +85,7 @@ const getFormSchemaFromMapping = async (
           label: field['#title'],
           disabled: field['#disabled'],
           placeholder: field['#placeholder'],
-          id: fieldKey,
+          id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
           min: field['#min'],
@@ -100,7 +103,7 @@ const getFormSchemaFromMapping = async (
           label: field['#title'],
           disabled: field['#disabled'],
           placeholder: field['#placeholder'],
-          id: fieldKey,
+          id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
           ...getValidationAndConditionals(field),
@@ -115,7 +118,7 @@ const getFormSchemaFromMapping = async (
           label: field['#title'],
           disabled: field['#disabled'],
           placeholder: field['#placeholder'],
-          id: fieldKey,
+          id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
           ...getValidationAndConditionals(field),
@@ -126,7 +129,7 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormTextarea',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           label: field['#title'],
           disabled: field['#disabled'],
@@ -142,7 +145,7 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormDate',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           label: field['#title'],
           disabled: field['#disabled'],
@@ -156,7 +159,7 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormCheckbox',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           disabled: field['#disabled'],
           label: field['#help_title'],
@@ -170,7 +173,7 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormCheckbox',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           disabled: field['#disabled'],
           // TODO: It's not clear what field we should be using for the 'label' here because it's a new requirement, setting as 'help title' for now
@@ -185,7 +188,7 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormDropdown',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           disabled: field['#disabled'],
           placeholder: field['#empty_option'],
@@ -209,15 +212,15 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormRadioGroup',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           disabled: field['#disabled'],
           label: field['#title'],
           help: field['#description'],
           options: Object.entries(field['#options'] || {}).map(
             ([value, label]) => {
               return {
-                id: `${fieldKey}_${value}`,
+                id: value,
                 value,
                 label
               }
@@ -231,15 +234,15 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormCheckboxGroup',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           disabled: field['#disabled'],
           label: field['#title'],
           help: field['#description'],
           options: Object.entries(field['#options'] || {}).map(
             ([value, label]) => {
               return {
-                id: `${fieldKey}_${value}`,
+                id: value,
                 value,
                 label
               }
@@ -256,7 +259,7 @@ const getFormSchemaFromMapping = async (
         mappedField = {
           $formkit: 'RplFormDropdown',
           key: fieldKey,
-          id: fieldKey,
+          id: fieldID,
           name: fieldKey,
           disabled: field['#disabled'],
           placeholder: field['#placeholder'],
@@ -276,7 +279,7 @@ const getFormSchemaFromMapping = async (
         break
       }
       case 'address':
-        mappedField = getAdvancedAddressMapping(fieldKey, field)
+        mappedField = getAdvancedAddressMapping(fieldKey, field, formId)
         break
       case 'webform_markup':
         mappedField = {
@@ -317,7 +320,7 @@ const getFormSchemaFromMapping = async (
           name: 'submit',
           variant: 'filled',
           label: field['#submit__label'],
-          id: fieldKey,
+          id: fieldID,
           displayResetButton: !!webform?.settings?.form_reset,
           ...getValidationAndConditionals(field),
           ...getInputIcons(field)