@tellescope/react-components 1.171.1 → 1.172.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.171.1",
+  "version": "1.172.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.171.1",
-    "@tellescope/sdk": "^1.171.1",
-    "@tellescope/types-client": "^1.171.1",
-    "@tellescope/types-models": "^1.171.1",
-    "@tellescope/types-utilities": "^1.171.1",
-    "@tellescope/utilities": "^1.171.1",
-    "@tellescope/validation": "^1.171.1",
+    "@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": "6909a4e4706eae5a624b226e781893775d20bb42",
+  "gitHead": "91a22b59bb059b03006713f1c20d9746850bfe53",
   "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

@@ -1415,6 +1415,26 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
       })
       .catch(console.error)
     }
+
+    const cbSaveField = fields.find(f => f.id === fieldId && (f.type === 'Chargebee'))
+    if (cbSaveField && typeof value === 'object' && (formResponseId || accessCode)) {
+      session.api.form_responses.save_field_response({
+        accessCode,
+        formResponseId,
+        response: {
+          answer: {
+            type: cbSaveField.type as "Chargebee",
+            value,
+          } as any,
+          fieldId: cbSaveField.id,
+          fieldTitle: cbSaveField.title,
+          externalId: cbSaveField.externalId,
+          fieldDescription: cbSaveField.description,
+          fieldHtmlDescription: cbSaveField.htmlDescription,
+        },
+      })
+      .catch(console.error)
+    }
   }, [fields])
 
   const onAddFile = useCallback((blobs?: FileBlob | FileBlob[], fieldId=activeField.value.id) => {

package/src/Forms/inputs.tsx

@@ -3312,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 (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)} 
+    />
+  )
+}

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) => {