@tellescope/react-components 1.204.2 → 1.205.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.204.2",
+  "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.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",
+    "@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": "375efe3ae17613832fc10b212b0c3d2fce0a31cd",
+  "gitHead": "2207d17c9959fcef3194f08245f8890817739b4e",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/hooks.tsx

@@ -596,7 +596,14 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     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 })
+    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) 
@@ -1260,7 +1267,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
                 value: 2,
               });
             }
-            emit_gtm_event({ event: 'form_submitted', formId: formResponse.formId })
+            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 (