@tellescope/react-components 1.244.1 → 1.244.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.244.1",
+  "version": "1.244.2",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.244.1",
-    "@tellescope/sdk": "1.244.1",
-    "@tellescope/types-client": "1.244.1",
-    "@tellescope/types-models": "1.244.1",
-    "@tellescope/types-utilities": "1.244.1",
-    "@tellescope/utilities": "1.244.1",
-    "@tellescope/validation": "1.244.1",
+    "@tellescope/constants": "1.244.2",
+    "@tellescope/sdk": "1.244.2",
+    "@tellescope/types-client": "1.244.2",
+    "@tellescope/types-models": "1.244.2",
+    "@tellescope/types-utilities": "1.244.2",
+    "@tellescope/utilities": "1.244.2",
+    "@tellescope/validation": "1.244.2",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -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": "a650ed3f130600bb7a191723532154011b30b6df",
+  "gitHead": "5ad5ce97e10db02b2ee7a8d129f00c4f29704069",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -326,7 +326,7 @@ export const QuestionForField = ({
           <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} responses={responses} enduser={enduser} />
         )
         : field.type === 'Chargebee' ? (
-          <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />
+          <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} responses={responses} />
         )
         : field.type === 'stringLong' ? (
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} form={form} />

package/src/Forms/forms.v2.tsx

@@ -336,7 +336,7 @@ export const QuestionForField = ({
           <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} responses={responses} enduser={enduser} />
         )
         : field.type === 'Chargebee' ? (
-          <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />
+          <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} responses={responses} />
         )
         : field.type === 'stringLong' ? (
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} form={form} error={!!validationMessage && (!['A response is required', 'A value must be checked', 'A file is required', 'Enter a valid phone number', 'Insurer is required'].includes(validationMessage) || value.touched)} />

package/src/Forms/hooks.tsx

@@ -701,6 +701,10 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
                           )
                         : f.type === 'Related Contacts'
                           ? (f.isOptional ? [] : [{ relationships: f?.options?.relatedContactTypes?.length === 1 ? [{ type: f.options.relatedContactTypes[0] as EnduserRelationship['type'], id: ''! } ] : [] }])
+                          : (f.type === 'date' && f.options?.prefillCurrentDate)
+                            ? new Date()
+                          : (f.type === 'dateString' && f.options?.prefillCurrentDate)
+                            ? mm_dd_yyyy(new Date())
                           : '' as any // null flag that the response was not filled out
           )
         ),

package/src/Forms/inputs.tsx

@@ -5176,22 +5176,30 @@ export const RichTextInput = ({ field, value, onChange }: FormInputProps<'Rich T
   <WYSIWYG stopEnterPropagation initialHTML={value} onChange={v => onChange(v, field.id)} style={{ width: '100%' }} editorStyle={{ width: '100%' }} />
 )
 
-export const ChargeebeeInput = ({ field, value, onChange, setCustomerId }: FormInputProps<'Chargebee'> & { 
+export const ChargeebeeInput = ({ field, value, onChange, setCustomerId, responses }: FormInputProps<'Chargebee'> & {
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
 }) => {
   const session = useResolvedSession()
   const [url, setUrl] = useState('')
   const [error, setError] = useState('')
+  const [verifying, setVerifying] = useState(false)
 
   const [loadCount, setLoadCount] = useState(0)
 
+  const collectOnly = !!field.options?.chargebeeCollectPaymentMethodOnly
+
   const fetchRef = useRef(false)
   useEffect(() => {
     if (fetchRef.current) return
     fetchRef.current = true
-    
-    session.api.form_responses.chargebee_details({ fieldId: field.id })
-    .then(({ url }) => setUrl(url))
+
+    const addressResponse = responses?.find(r => r.answer?.type === 'Address' && r.answer?.value)
+    const billingAddress = addressResponse?.answer?.type === 'Address' && addressResponse?.answer?.value
+      ? addressResponse.answer.value as { addressLineOne?: string, addressLineTwo?: string, city?: string, state?: string, zipCode?: string }
+      : undefined
+
+    session.api.form_responses.chargebee_details({ fieldId: field.id, billingAddress })
+    .then(({ url }) => setUrl(url ?? ''))
     .catch(setError)
   }, [session])
 
@@ -5204,22 +5212,58 @@ export const ChargeebeeInput = ({ field, value, onChange, setCustomerId }: FormI
     onChange({ url }, field.id)
   }, [loadCount, url])
 
+  const handleVerify = async () => {
+    setVerifying(true)
+    setError('')
+    try {
+      const { hasPaymentMethod } = await session.api.form_responses.chargebee_details({ fieldId: field.id, verify: true })
+      if (hasPaymentMethod) {
+        onChange({ url: 'verified' }, field.id)
+      } else {
+        setError('No payment method found. Please add a card and try again.')
+      }
+    } catch (err: any) {
+      setError(err?.message ?? 'Failed to verify payment method')
+    } finally {
+      setVerifying(false)
+    }
+  }
+
   if (value || loadCount === 2) {
     return (
       <Grid container alignItems="center" wrap="nowrap">
         <CheckCircleOutline color="success" />
 
         <Typography sx={{ ml: 1, fontSize: 20 }}>
-          Your purchase was successful
+          {collectOnly
+            ? 'Your payment method was saved successfully'
+            : 'Your purchase was successful'
+          }
         </Typography>
       </Grid>
     )
   }
-  if (error && typeof error === 'string') return <Typography color="error">{error}</Typography>
   if (!url) return <LinearProgress />
   return (
-    <iframe src={url} title="Checkout" style={{ border: 'none', width: '100%', height: 700 }} 
-      onLoad={() => setLoadCount(l => l + 1)} 
-    />
+    <>
+      <iframe src={url} title="Checkout" style={{ border: 'none', width: '100%', height: 700 }}
+        onLoad={() => setLoadCount(l => l + 1)}
+      />
+      {collectOnly && !field.isOptional &&
+        <Grid container direction="column" alignItems="center" spacing={1} sx={{ mt: 1 }}>
+          <Grid item>
+            <LoadingButton variant="contained" onClick={handleVerify} submitting={verifying} submitText="Done" />
+          </Grid>
+          {error && typeof error === 'string' &&
+            <Grid item>
+              <Typography color="error">{error}</Typography>
+            </Grid>
+          }
+        </Grid>
+      }
+      {!collectOnly && error && typeof error === 'string' &&
+        <Typography color="error">{error}</Typography>
+      }
+    </>
   )
 }

package/src/Forms/inputs.v2.tsx

@@ -2654,50 +2654,5 @@ export const RichTextInput = ({ field, value, onChange }: FormInputProps<'Rich T
   <WYSIWYG stopEnterPropagation initialHTML={value} onChange={v => onChange(v, field.id)} style={{ width: '100%' }} editorStyle={{ width: '100%' }} />
 )
 
-export const ChargeebeeInput = ({ field, value, onChange, setCustomerId }: FormInputProps<'Chargebee'> & { 
-  setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
-}) => {
-  const session = useResolvedSession()
-  const [url, setUrl] = useState('')
-  const [error, setError] = useState('')
-
-  const [loadCount, setLoadCount] = useState(0)
-
-  const fetchRef = useRef(false)
-  useEffect(() => {
-    if (fetchRef.current) return
-    fetchRef.current = true
-    
-    session.api.form_responses.chargebee_details({ fieldId: field.id })
-    .then(({ url }) => setUrl(url))
-    .catch(setError)
-  }, [session])
-
-  const loadAnswerRef = useRef(false)
-  useEffect(() => {
-    if (loadCount !== 2) return
-    if (loadAnswerRef.current) return
-    loadAnswerRef.current = true
-
-    onChange({ url }, field.id)
-  }, [loadCount, url])
-
-  if (value || loadCount === 2) {
-    return (
-      <Grid container alignItems="center" wrap="nowrap">
-        <CheckCircleOutline color="success" />
-
-        <Typography sx={{ ml: 1, fontSize: 20 }}>
-          Your purchase was successful
-        </Typography>
-      </Grid>
-    )
-  }
-  if (error && typeof error === 'string') return <Typography color="error">{error}</Typography>
-  if (!url) return <LinearProgress />
-  return (
-    <iframe src={url} title="Checkout" style={{ border: 'none', width: '100%', height: 700 }} 
-      onLoad={() => setLoadCount(l => l + 1)} 
-    />
-  )
-}
+// Re-export from V1 to follow DRY principles
+export { ChargeebeeInput } from './inputs'