@tellescope/react-components 1.148.1 → 1.150.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.148.1",
+  "version": "1.150.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -45,15 +45,15 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
     "@reduxjs/toolkit": "^1.6.2",
-    "@stripe/react-stripe-js": "^2.1.0",
+    "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.148.0",
-    "@tellescope/sdk": "^1.148.1",
-    "@tellescope/types-client": "^1.148.0",
-    "@tellescope/types-models": "^1.148.0",
-    "@tellescope/types-utilities": "^1.148.0",
-    "@tellescope/utilities": "^1.148.0",
-    "@tellescope/validation": "^1.148.0",
+    "@tellescope/constants": "^1.150.0",
+    "@tellescope/sdk": "^1.150.0",
+    "@tellescope/types-client": "^1.150.0",
+    "@tellescope/types-models": "^1.150.0",
+    "@tellescope/types-utilities": "^1.150.0",
+    "@tellescope/utilities": "^1.150.0",
+    "@tellescope/validation": "^1.150.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -80,7 +80,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": "e557342a6982e69ee08124c95003163cb5f9a4ba",
+  "gitHead": "1746b2c4cfc5907edd752c62b9bb65befc9ac3dc",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -21,9 +21,9 @@ import heic2any from "heic2any"
 import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
 import LanguageIcon from '@mui/icons-material/Language';
 
-import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js'; 
-import { CheckCircleOutline, Delete, Edit, PropaneSharp } from "@mui/icons-material"
+import { CheckCircleOutline, Delete, Edit } from "@mui/icons-material"
 
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
   <Grid container alignItems="center" justifyContent={"center"} wrap="nowrap" spacing={1}>
@@ -1420,6 +1420,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
   const session = useResolvedSession()
   const [clientSecret, setClientSecret] = useState('')
   const [businessName, setBusinessName] = useState('')
+  const [isCheckout, setIsCheckout] = useState(false)
   const [stripePromise, setStripePromise] = useState<ReturnType<typeof loadStripe>>()
   const [, { findById: findProduct }] = useProducts({ dontFetch: true })
 
@@ -1432,7 +1433,8 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     fetchRef.current = true
 
     session.api.form_responses.stripe_details({ fieldId: field.id })
-    .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId }) => {
+    .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout }) => {
+      setIsCheckout(!!isCheckout)
       setClientSecret(clientSecret)
       setStripePromise(loadStripe(publishableKey, { stripeAccount }))
       setBusinessName(businessName)
@@ -1448,7 +1450,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
 
   if (value) {
     return (
-      <Grid container alignItems="center" wrap="nowrap">
+      <Grid container alignItems="center" wrap="nowrap">
         <CheckCircleOutline color="success" />
 
         <Typography sx={{ ml: 1, fontSize: 20 }}>
@@ -1458,6 +1460,16 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     )
   }
   if (!(clientSecret && stripePromise)) return <LinearProgress />
+  if (isCheckout && stripePromise) return (
+    <EmbeddedCheckoutProvider stripe={stripePromise}
+      options={{ 
+        clientSecret, 
+        onComplete: () => onChange('Completed checkout', field.id),        
+      }}
+    >
+      <EmbeddedCheckout />
+    </EmbeddedCheckoutProvider>
+  )
   return (
     <Elements stripe={stripePromise} options={{
       clientSecret,