@tellescope/react-components 1.242.6 → 1.242.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.242.6",
+  "version": "1.242.8",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -36,7 +36,11 @@
     "@types/react-dom": "17.0.18",
     "@types/react-native": "0.65.27",
     "@types/react-window": "1.8.5",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
     "babel-loader": "8.4.1",
+    "eslint": "7.32.0",
+    "eslint-plugin-react": "7.31.11",
     "react-native": "0.68.0",
     "typescript": "4.9.3"
   },
@@ -47,20 +51,16 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.242.6",
-    "@tellescope/sdk": "1.242.6",
-    "@tellescope/types-client": "1.242.6",
-    "@tellescope/types-models": "1.242.6",
-    "@tellescope/types-utilities": "1.242.6",
-    "@tellescope/utilities": "1.242.6",
-    "@tellescope/validation": "1.242.6",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@tellescope/constants": "1.242.8",
+    "@tellescope/sdk": "1.242.8",
+    "@tellescope/types-client": "1.242.8",
+    "@tellescope/types-models": "1.242.8",
+    "@tellescope/types-utilities": "1.242.8",
+    "@tellescope/utilities": "1.242.8",
+    "@tellescope/validation": "1.242.8",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
-    "eslint": "7.32.0",
-    "eslint-plugin-react": "7.31.11",
     "formik": "2.2.9",
     "heic2any": "0.0.4",
     "html-to-draftjs": "1.5.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "738c7a7e146166f3f07b16c50e9fc63877280163",
+  "gitHead": "9e582b9f1cccd317d4f18d1b656473013bc6222c",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -9,14 +9,15 @@ import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/type
 import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
-export const TellescopeFormContainer = ({ businessId, organizationIds, ...props } : { 
-  businessId?: string, 
-  organizationIds?: string[], 
+export const TellescopeFormContainer = ({ businessId, organizationIds, ...props } : {
+  businessId?: string,
+  organizationIds?: string[],
   dontAddContext?: boolean,
-  children: React.ReactNode, 
+  children: React.ReactNode,
   hideBg?: boolean,
   backgroundColor?: string,
   hideLogo?: boolean,
+  logoURL?: string,
   logoHeight?: number,
   language?: string,
   onChangeLanguage?: (l: string) => void,
@@ -35,17 +36,19 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
   )
 }
 
-const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ paperMinHeight=575, children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight, maxWidth }) => {
+const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ paperMinHeight=575, children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoURL, logoHeight, maxWidth }) => {
   const theme = useOrganizationTheme()
 
+  const resolvedLogoURL = logoURL || theme.logoURL
+
   const formContent = (
     <Flex flex={1} column>
       {hideLogo
         ? null
-        : theme.logoURL 
+        : resolvedLogoURL
           ? (
             <Flex alignItems="center" justifyContent={"center"} style={{ height: logoHeight || LOGO_HEIGHT, marginTop: 10 }}>
-              <img src={theme.logoURL} alt={theme.name} style={{ height: logoHeight || LOGO_HEIGHT, maxWidth: 225 }} /> {/* todo: replace with something that resolves better for native */}
+              <img src={resolvedLogoURL} alt={theme.name} style={{ height: logoHeight || LOGO_HEIGHT, maxWidth: 225 }} /> {/* todo: replace with something that resolves better for native */}
             </Flex>
           )
           : (
@@ -801,6 +804,7 @@ const TellescopeFormWithContext: typeof TellescopeForm = (props) => {
   return (
     <TellescopeFormContainer style={props.style} dontAddContext
       hideBg={props.hideBg || props.form?.customization?.hideBg}
+      logoURL={props.form?.customization?.logoURL}
       logoHeight={props.logoHeight}
       backgroundColor={props.backgroundColor}
       hideLogo={props?.customization?.hideLogo}

package/src/Forms/forms.v2.tsx

@@ -9,14 +9,15 @@ import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/type
 import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
-export const TellescopeFormContainerV2 = ({ businessId, organizationIds, ...props } : { 
-  businessId?: string, 
-  organizationIds?: string[], 
+export const TellescopeFormContainerV2 = ({ businessId, organizationIds, ...props } : {
+  businessId?: string,
+  organizationIds?: string[],
   dontAddContext?: boolean,
-  children: React.ReactNode, 
+  children: React.ReactNode,
   hideBg?: boolean,
   backgroundColor?: string,
   hideLogo?: boolean,
+  logoURL?: string,
   logoHeight?: number,
   language?: string,
   onChangeLanguage?: (l: string) => void,
@@ -632,10 +633,10 @@ export const TellescopeSingleQuestionFlowV2: typeof TellescopeFormV2 = ({
 
             {/* V2: Logo below progress bar, left-aligned */}
             {!customization?.hideLogo && (
-              theme?.logoURL
+              (customization?.logoURL || theme?.logoURL)
                 ? (
                   <Flex alignItems="flex-start" style={{ marginBottom: '20px' }}>
-                    <img src={theme.logoURL} alt={theme.name} style={{ height: customization?.logoHeight || LOGO_HEIGHT, maxWidth: 225 }} />
+                    <img src={customization?.logoURL || theme?.logoURL} alt={theme?.name} style={{ height: customization?.logoHeight || LOGO_HEIGHT, maxWidth: 225 }} />
                   </Flex>
                 )
                 : (