@tellescope/react-components 1.204.1 → 1.205.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.204.1",
+  "version": "1.205.0",
   "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.205.0",
+    "@tellescope/sdk": "^1.205.0",
+    "@tellescope/types-client": "^1.205.0",
+    "@tellescope/types-models": "^1.205.0",
+    "@tellescope/types-utilities": "^1.205.0",
+    "@tellescope/utilities": "^1.205.0",
+    "@tellescope/validation": "^1.205.0",
     "@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": "2207d17c9959fcef3194f08245f8890817739b4e",
   "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,20 @@ 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,
+      previousTitle: prevFieldStackRef.current[prevFieldStackRef.current.length - 1]?.value?.title || '',
+      status: '' 
+    })
+  }, [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 +1267,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
                 value: 2,
               });
             }
+            emit_gtm_event({ event: 'form_submitted', formId: formResponse.formId, fieldId: '', title: '', status: '', previousTitle: '', })
             updateLocalFormResponse(formResponse.id, formResponse)
             options?.onPreRedirect?.() // in case redirect on success
             options?.onSuccess?.(formResponse)

package/src/Forms/inputs.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, FormCo
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
-import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, user_display_name } from "@tellescope/utilities"
+import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, user_display_name } from "@tellescope/utilities"
 import { DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -2857,6 +2857,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
         && (!m?.data?.entropy || m?.data?.entropy === loaded?.entropy)
       ) {
         onChange(m.data.bookedEventId, field.id)
+        emit_gtm_event({ event: 'form_progress', fieldId: field.id, formId: field.formId, title: field.title, status: "Appointment Booked" })
       }
       if (m?.data?.type === 'CalendarPicker') {
         setHeight(750)
@@ -2873,7 +2874,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
 
     window.addEventListener('message', handleMessage)
     return () => { window.removeEventListener('message', handleMessage) }
-  }, [field?.id, onChange, acknowledgedWarning, value, loaded?.entropy])
+  }, [field?.id, field?.formId, field?.title, onChange, acknowledgedWarning, value, loaded?.entropy])
 
   if (value) {
     return (
@@ -3036,6 +3037,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 +3098,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)