@tellescope/react-components 1.230.0 → 1.230.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.230.0",
+  "version": "1.230.1",
   "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.230.0",
-    "@tellescope/sdk": "1.230.0",
-    "@tellescope/types-client": "1.230.0",
-    "@tellescope/types-models": "1.230.0",
-    "@tellescope/types-utilities": "1.230.0",
-    "@tellescope/utilities": "1.230.0",
-    "@tellescope/validation": "1.230.0",
+    "@tellescope/constants": "1.230.1",
+    "@tellescope/sdk": "1.230.1",
+    "@tellescope/types-client": "1.230.1",
+    "@tellescope/types-models": "1.230.1",
+    "@tellescope/types-utilities": "1.230.1",
+    "@tellescope/utilities": "1.230.1",
+    "@tellescope/validation": "1.230.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -83,7 +83,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": "1b1aa59aee4b8ee1610bc292143e2a2cd08f6ed3",
+  "gitHead": "0dca02b5fe32a3244d8e0a5a31ed1dd6652341c8",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.v2.tsx

@@ -44,8 +44,24 @@ const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({
   const finalBgColor = shouldUseCustomBg ? backgroundColor : '#F4F3FA'
 
   return (
-    <Flex flex={1} column alignItems="center" style={{ backgroundColor: finalBgColor, overflow: 'hidden', paddingTop: 40, paddingBottom: 40, ...style }}>
-      <Flex flex={1} column style={{ padding: '0 20px', maxWidth: maxWidth ?? 650, minWidth: 250, width: '100%', height: '100%' }}>
+    <Flex flex={1} column alignItems="center" style={{
+      backgroundColor: finalBgColor,
+      overflow: 'auto',
+      paddingTop: window.innerWidth < 600 ? 20 : 40,
+      paddingBottom: window.innerWidth < 600 ? 20 : 40,
+      ...style
+    }}>
+      <Flex flex={1} column style={{
+        padding: window.innerWidth < 600 ? '0 12px' : '0 20px',
+        maxWidth: maxWidth ?? 650,
+        minWidth: 250,
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        ...(window.innerWidth < 600 ? {
+          paddingBottom: '80px' // Extra bottom padding on mobile to keep button above Safari navigation
+        } : {})
+      }}>
         {language && onChangeLanguage &&
           <Flex style={{ marginTop: 22 }}>
             <LanguageSelect value={language} onChange={onChangeLanguage} />

package/src/Forms/index.ts

@@ -6,4 +6,5 @@ export * from "./types";
 export * from "./localization";
 
 // V2 Forms exports
-export { TellescopeFormV2, TellescopeFormContainerV2, TellescopeSingleQuestionFlowV2 } from "./forms.v2";
+export { TellescopeFormV2, TellescopeFormContainerV2, TellescopeSingleQuestionFlowV2 } from "./forms.v2";
+export { defaultInputProps as inputPropsV2 } from "./inputs.v2";

package/src/Forms/inputs.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormContr
 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, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, 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, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -1898,7 +1898,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
                       ${(priceAmount / 100).toFixed(2)} {priceCurrency.toUpperCase()}
                       {product.currentPrice?.isSubscription && (
                         <Typography component="span" variant="caption" sx={{ ml: 0.5 }}>
-                          /month
+                          {format_stripe_subscription_interval(product.currentPrice?.interval, product.currentPrice?.interval_count)}
                         </Typography>
                       )}
                     </Typography>

package/src/Forms/inputs.v2.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormContr
 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, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, 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, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -1561,6 +1561,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       marginBottom: '12px',
                       cursor: 'pointer',
                       backgroundColor: 'transparent',
+                      boxSizing: 'border-box',
                       '&:hover': {
                         backgroundColor: (theme: any) => `${theme.palette.primary.main}14`,
                       },
@@ -1614,7 +1615,8 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       display: 'flex',
                       alignItems: 'center',
                       cursor: 'pointer',
-                      width: '100%'
+                      width: '100%',
+                      boxSizing: 'border-box'
                     }}
                     onClick={(e) => {
                       // Don't trigger selection if clicking on the expand button
@@ -1911,7 +1913,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
                       ${(priceAmount / 100).toFixed(2)} {priceCurrency.toUpperCase()}
                       {product.currentPrice?.isSubscription && (
                         <Typography component="span" variant="caption" sx={{ ml: 0.5 }}>
-                          /month
+                          {format_stripe_subscription_interval(product.currentPrice?.interval, product.currentPrice?.interval_count)}
                         </Typography>
                       )}
                     </Typography>