fix(editor): 🐛 Custom currency payment input

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/PaymentForm/StripePaymentForm.tsx

@@ -4,7 +4,7 @@ import { Elements } from '@stripe/react-stripe-js'
 import { createPaymentIntent } from 'services/stripe'
 import { useTypebot } from 'contexts/TypebotContext'
 import { PaymentInputOptions, Variable } from 'models'
-import { SendButton } from '../SendButton'
+import { SendButton, Spinner } from '../SendButton'
 import { useFrame } from 'react-frame-component'
 import { initStripe } from '../../../../../../lib/stripe'
 import { parseVariables } from 'services/variable'
@@ -43,7 +43,7 @@ export const StripePaymentForm = ({ options, onSuccess }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  if (!stripe || !clientSecret) return <></>
+  if (!stripe || !clientSecret) return <Spinner className="text-blue-500" />
   return (
     <Elements stripe={stripe} options={{ clientSecret }}>
       <CheckoutForm

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/SendButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { SVGProps } from 'react'
 import { SendIcon } from '../../../../assets/icons'
 
 type SendButtonProps = {
@@ -25,28 +25,7 @@ export const SendButton = ({
         props.className
       }
     >
-      {isLoading && (
-        <svg
-          className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          ></circle>
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-      )}
+      {isLoading && <Spinner className="text-white" />}
       <span className={'xs:flex ' + (disableIcon ? '' : 'hidden')}>
         {label}
       </span>
@@ -56,3 +35,27 @@ export const SendButton = ({
     </button>
   )
 }
+
+export const Spinner = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    className={'animate-spin -ml-1 mr-3 h-5 w-5 ' + props.className}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+)