@tellescope/react-components 1.204.1 → 1.204.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.204.1",
+  "version": "1.204.2",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.204.1",
-    "@tellescope/sdk": "^1.204.1",
-    "@tellescope/types-client": "^1.204.1",
-    "@tellescope/types-models": "^1.204.1",
-    "@tellescope/types-utilities": "^1.204.1",
-    "@tellescope/utilities": "^1.204.1",
-    "@tellescope/validation": "^1.204.1",
+    "@tellescope/constants": "^1.204.2",
+    "@tellescope/sdk": "^1.204.2",
+    "@tellescope/types-client": "^1.204.2",
+    "@tellescope/types-models": "^1.204.2",
+    "@tellescope/types-utilities": "^1.204.2",
+    "@tellescope/utilities": "^1.204.2",
+    "@tellescope/validation": "^1.204.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "bf08d1f48c4e7939f6e4e246a2ba84189f0e68db",
+  "gitHead": "375efe3ae17613832fc10b212b0c3d2fce0a31cd",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/hooks.tsx

@@ -9,7 +9,7 @@ import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
-import { append_current_utm_params, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
+import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -538,6 +538,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   const [repeats, setRepeats] = useState({} as Record<string, string | number>)
 
   const gaEventRef = useRef({} as Record<string, boolean>)
+  const gtmEventRef = useRef({} as Record<string, boolean>)
 
   let goBackURL = ''
   try {
@@ -591,6 +592,13 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     });
   }, [ga4measurementId, activeField])
 
+  useEffect(() => {
+    if (gtmEventRef.current[activeField.value.id]) return
+    gtmEventRef.current[activeField.value.id] = true
+
+    emit_gtm_event({ event: 'form_progress', formId: activeField.value.formId, fieldId: activeField.value.id, title: activeField.value.title })
+  }, [activeField])
+
   // placeholders for initial fields, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fieldInitRef = useRef('')
   const initializeFields = useCallback(() => (
@@ -1252,6 +1260,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
                 value: 2,
               });
             }
+            emit_gtm_event({ event: 'form_submitted', formId: formResponse.formId })
             updateLocalFormResponse(formResponse.id, formResponse)
             options?.onPreRedirect?.() // in case redirect on success
             options?.onSuccess?.(formResponse)

package/src/Forms/inputs.tsx

@@ -3036,6 +3036,23 @@ export const HeightInput = ({ field, value={} as any, onChange, ...props }: Form
   </Grid>
 )
 
+export const include_current_url_parameters_if_templated = (url: string ) => {
+  try {
+    // get parameters from the current URL, and replace all values where {{URL_PARAM.paramName}} is used
+    const params = new URL(window.location.href).searchParams
+    return url.replace(/{{URL_PARAM\.(.*?)}}/g, (_, paramName) => {
+      const value = params.get(paramName)
+      console.log(paramName, value)
+      if (value === null) return ''
+      return value
+    })
+
+  } catch(err) {
+    console.error(err)
+  }
+  return url
+}
+
 export const RedirectInput = ({ enduserId, groupId, groupInsance, rootResponseId, formResponseId, field, submit, value={} as any, onChange, responses, enduser, ...props }: FormInputProps<'Redirect'>) => {
   const session = useResolvedSession()
 
@@ -3080,13 +3097,15 @@ export const RedirectInput = ({ enduserId, groupId, groupInsance, rootResponseId
         if (!field.options?.redirectExternalUrl) { return }
 
         window.location.href = (
-          replace_enduser_template_values(
-            field.options.redirectExternalUrl, 
-            {
-              ...session.userInfo as any,
-              id: eId, email, fname, lname, state, phone, 
-            }
-          )
+          include_current_url_parameters_if_templated(
+            replace_enduser_template_values(
+              field.options.redirectExternalUrl, 
+              {
+                ...session.userInfo as any,
+                id: eId, email, fname, lname, state, phone, 
+              }
+            )
+          )  
         )
       })
       .catch(console.error)