@tellescope/react-components 1.171.0 → 1.172.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.171.0",
+  "version": "1.172.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.171.0",
-    "@tellescope/sdk": "^1.171.0",
-    "@tellescope/types-client": "^1.171.0",
-    "@tellescope/types-models": "^1.171.0",
-    "@tellescope/types-utilities": "^1.171.0",
-    "@tellescope/utilities": "^1.171.0",
-    "@tellescope/validation": "^1.171.0",
+    "@tellescope/constants": "^1.172.0",
+    "@tellescope/sdk": "^1.172.0",
+    "@tellescope/types-client": "^1.172.0",
+    "@tellescope/types-models": "^1.172.0",
+    "@tellescope/types-utilities": "^1.172.0",
+    "@tellescope/utilities": "^1.172.0",
+    "@tellescope/validation": "^1.172.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": "a9948a5ee7adeab6f1c4c56c5f7c67ab21b951be",
+  "gitHead": "b415f876ba14e2e77c7ff8d0265e5667b68c6335",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddressInput, AllergiesInput, AppointmentBookingInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
+import { AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -161,6 +161,7 @@ export const QuestionForField = ({
   const Signature = customInputs?.['signature'] ?? SignatureInput 
   const MultipleChoice = customInputs?.['multiple_choice'] ?? MultipleChoiceInput 
   const Stripe = customInputs?.['Stripe'] ?? StripeInput 
+  const Chargebee = customInputs?.['Chargebee'] ?? ChargeebeeInput 
   const File = customInputs?.['file'] ?? FileInput 
   const Files = customInputs?.['files'] ?? FilesInput 
   const Ranking = customInputs?.['ranking'] ?? RankingInput
@@ -287,6 +288,9 @@ export const QuestionForField = ({
         : field.type === 'Stripe' ? (
           <Stripe field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
         )
+        : field.type === 'Chargebee' ? (
+          <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />
+        )
         : 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/hooks.tsx

@@ -1290,7 +1290,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
   }, [activeField, validateField, uploadingFiles])
 
   const autoAdvanceRef = useRef(false)
-  const goToNextField = useCallback(() => {
+  const goToNextField = useCallback((answer?: FormResponseValue['answer']) => {
     if (!currentValue) return
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 
@@ -1313,7 +1313,10 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
       session.api.form_responses.save_field_response({
         accessCode,
         formResponseId,
-        response: currentValue,
+        response: {
+          ...currentValue,
+          answer: answer || currentValue.answer
+        },
       })
       .catch(console.error)
     }

package/src/Forms/inputs.tsx

@@ -3073,7 +3073,9 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
       goToPreviousField?.()
     } else {
       onChange(field.title, field.id)
-      goToNextField?.()
+      console.log('going to next field for hidden value', field.title, !!goToNextField)
+      // pass value that is set after above onChange
+      goToNextField?.({ type: 'Hidden Value', value: field.title })
     }
   }, [value, onChange, field, goToNextField, goToPreviousField, isSinglePage])
 
@@ -3310,4 +3312,52 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
 
 export const RichTextInput = ({ field, value, onChange }: FormInputProps<'Rich Text'>) => (
   <WYSIWYG 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 (error && typeof error === 'string') return <Typography color="error">{error}</Typography>
+  if (!url) return <LinearProgress />
+  if (loadCount === 2) {
+    return (
+      <Grid container alignItems="center" wrap="nowrap">
+        <CheckCircleOutline color="success" />
+
+        <Typography sx={{ ml: 1, fontSize: 20 }}>
+          Your purchase was successful
+        </Typography>
+      </Grid>
+    )
+  }
+  return (
+    <iframe src={url} title="Checkout" style={{ border: 'none', width: '100%', height: 700 }} 
+      onLoad={() => setLoadCount(l => l + 1)} 
+    />
+  )
+}

package/src/Forms/types.ts

@@ -1,9 +1,8 @@
-import { AnswerForType } from "@tellescope/types-models";
+import { AnswerForType, FormResponseValue } from "@tellescope/types-models";
 import { DatabaseRecord, Enduser, Form, FormField } from "@tellescope/types-client";
 import { FileBlob, TreeNode } from "@tellescope/types-utilities";
 import { JSXElementConstructor } from "react";
 import { Response } from "./hooks";
-import { FileUploadHandler } from "../inputs";
 
 export type FormFieldNode = TreeNode<FormField>
 
@@ -24,7 +23,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   enduserId?: string,
   enduser?: Partial<Enduser>
   goToPreviousField?: () => void, 
-  goToNextField?: () => void, 
+  goToNextField?: (response?: FormResponseValue['answer']) => void, 
   isPreviousDisabled?: () => boolean,
   formResponseId?: string,
   rootResponseId?: string,

package/src/controls.tsx

@@ -206,6 +206,8 @@ interface DownloadButton {
   Icon?: typeof DownloadIcon
   label?: string,
   preferInBrowser?: boolean,
+  offsetX?: number,
+  offsetY?: number,
 }
 
 export const DownloadFileIconButton = ({ preferInBrowser, publicURL, secureName, label="Download File", Icon=DownloadIcon, onDownload, onError, ...props }: DownloadButton) => {