⚡ (paymentInput) Handle Stripe redirection

Closes #631

packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx

@@ -54,7 +54,7 @@ export const FileUploadForm = (props: Props) => {
     setIsUploading(true)
     const urls = await uploadFiles({
       basePath: `${props.context.apiHost ?? guessApiHost()}/api/typebots/${
-        props.context.typebotId
+        props.context.typebot.id
       }/blocks/${props.block.id}`,
       files: [
         {
@@ -79,7 +79,7 @@ export const FileUploadForm = (props: Props) => {
     setIsUploading(true)
     const urls = await uploadFiles({
       basePath: `${props.context.apiHost ?? guessApiHost()}/api/typebots/${
-        props.context.typebotId
+        props.context.typebot.id
       }/blocks/${props.block.id}`,
       files: files.map((file) => ({
         file: file,

packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx

@@ -4,6 +4,10 @@ import type { Stripe, StripeElements } from '@stripe/stripe-js'
 import { BotContext } from '@/types'
 import type { PaymentInputOptions, RuntimeOptions } from '@typebot.io/schemas'
 import { loadStripe } from '@/lib/stripe'
+import {
+  removePaymentInProgressFromStorage,
+  setPaymentInProgressInStorage,
+} from '../helpers/paymentInProgressStorage'
 
 type Props = {
   context: BotContext
@@ -51,11 +55,14 @@ export const StripePaymentForm = (props: Props) => {
 
     setIsLoading(true)
 
+    setPaymentInProgressInStorage({
+      sessionId: props.context.sessionId,
+      typebot: props.context.typebot,
+    })
     const { error, paymentIntent } = await stripe.confirmPayment({
       elements,
       confirmParams: {
-        // TO-DO: Handle redirection correctly.
-        return_url: props.context.apiHost,
+        return_url: window.location.href,
         payment_method_data: {
           billing_details: {
             name: props.options.additionalInformation?.name,
@@ -71,6 +78,7 @@ export const StripePaymentForm = (props: Props) => {
       },
       redirect: 'if_required',
     })
+    removePaymentInProgressFromStorage()
 
     setIsLoading(false)
     if (error?.type === 'validation_error') return

packages/embeds/js/src/features/blocks/inputs/payment/helpers/paymentInProgressStorage.ts

@@ -0,0 +1,15 @@
+import { BotContext } from '@/types'
+
+export const setPaymentInProgressInStorage = (state: {
+  sessionId: string
+  typebot: BotContext['typebot']
+}) => {
+  sessionStorage.setItem('typebotPaymentInProgress', JSON.stringify(state))
+}
+
+export const getPaymentInProgressInStorage = () =>
+  sessionStorage.getItem('typebotPaymentInProgress')
+
+export const removePaymentInProgressFromStorage = () => {
+  sessionStorage.removeItem('typebotPaymentInProgress')
+}

packages/embeds/js/src/features/bubble/components/Bubble.tsx

@@ -13,6 +13,7 @@ import { PreviewMessage, PreviewMessageProps } from './PreviewMessage'
 import { isDefined } from '@typebot.io/lib'
 import { BubbleParams } from '../types'
 import { Bot, BotProps } from '../../../components/Bot'
+import { getPaymentInProgressInStorage } from '@/features/blocks/inputs/payment/helpers/paymentInProgressStorage'
 
 export type BubbleProps = BotProps &
   BubbleParams & {
@@ -51,6 +52,8 @@ export const Bubble = (props: BubbleProps) => {
     const autoShowDelay = bubbleProps.autoShowDelay
     const previewMessageAutoShowDelay =
       bubbleProps.previewMessage?.autoShowDelay
+    const paymentInProgress = getPaymentInProgressInStorage()
+    if (paymentInProgress) openBot()
     if (isDefined(autoShowDelay)) {
       setTimeout(() => {
         openBot()

packages/embeds/js/src/features/popup/components/Popup.tsx

@@ -11,6 +11,7 @@ import { CommandData } from '../../commands'
 import { isDefined, isNotDefined } from '@typebot.io/lib'
 import { PopupParams } from '../types'
 import { Bot, BotProps } from '../../../components/Bot'
+import { getPaymentInProgressInStorage } from '@/features/blocks/inputs/payment/helpers/paymentInProgressStorage'
 
 export type PopupProps = BotProps &
   PopupParams & {
@@ -41,7 +42,8 @@ export const Popup = (props: PopupProps) => {
   )
 
   onMount(() => {
-    if (popupProps.defaultOpen) openBot()
+    const paymentInProgress = getPaymentInProgressInStorage()
+    if (popupProps.defaultOpen || paymentInProgress) openBot()
     window.addEventListener('message', processIncomingEvent)
     const autoShowDelay = popupProps.autoShowDelay
     if (isDefined(autoShowDelay)) {