fix(editor): 🐛 Custom currency payment input

Dockerfile

@@ -18,6 +18,7 @@ FROM base AS builder
 COPY --from=installer /app/ .
 COPY --from=pruner /app/out/full/ .
 COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.production
+COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.local
 RUN apt-get -qy update && apt-get -qy install openssl
 RUN yarn turbo run build --scope=${SCOPE} --include-dependencies --no-deps
 RUN find . -name node_modules | xargs rm -rf

apps/builder/components/auth/SignInForm.tsx

@@ -14,7 +14,7 @@ import { DividerWithText } from './DividerWithText'
 import { SocialLoginButtons } from './SocialLoginButtons'
 import { useRouter } from 'next/router'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
-import { isEmpty } from 'utils'
+import { isEmpty, isNotEmpty } from 'utils'
 
 const hasNoAuthProvider =
   (isEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) ||
@@ -78,7 +78,7 @@ export const SignInForm = ({
   return (
     <Stack spacing="4" w="330px">
       <SocialLoginButtons />
-      {!isEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) &&
+      {isNotEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) &&
         process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED !== 'true' && (
           <>
             <DividerWithText mt="6">Or with your email</DividerWithText>

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PaymentSettings/PaymentSettings.tsx

@@ -111,11 +111,11 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
           <Text>Currency:</Text>
           <Select
             placeholder="Select option"
-            value={options.currency.toLowerCase()}
+            value={options.currency}
             onChange={handleCurrencyChange}
           >
             {currencies.map((currency) => (
-              <option value={currency.code.toLowerCase()} key={currency.code}>
+              <option value={currency.code} key={currency.code}>
                 {currency.code}
               </option>
             ))}

apps/builder/playwright/tests/inputs/payment.spec.ts

@@ -46,6 +46,7 @@ test.describe('Payment input step', () => {
     await expect(page.locator('text="Secret test key:"')).toBeHidden()
     await expect(page.locator('text="My Stripe Account"')).toBeVisible()
     await page.fill('[placeholder="30.00"] >> nth=-1', '30.00')
+    await page.selectOption('select', 'EUR')
     await page.click('text=Additional information')
     await page.fill('[placeholder="John Smith"]', 'Baptiste')
     await page.fill('[placeholder="john@gmail.com"]', 'baptiste@typebot.io')
@@ -59,15 +60,14 @@ test.describe('Payment input step', () => {
       .locator(`[placeholder="MM / YY"]`)
       .fill('12 / 25')
     await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill('240')
-    await stripePaymentForm(page).locator(`[placeholder="90210"]`).fill('90210')
+    await typebotViewer(page).locator(`text="Pay 30€"`).click()
-    await typebotViewer(page).locator(`text="Pay 30$"`).click()
     await expect(
       typebotViewer(page).locator(`text="Your card was declined."`)
     ).toBeVisible()
     await stripePaymentForm(page)
       .locator(`[placeholder="1234 1234 1234 1234"]`)
       .fill('4242424242424242')
-    await typebotViewer(page).locator(`text="Pay 30$"`).click()
+    await typebotViewer(page).locator(`text="Pay 30€"`).click()
     await expect(typebotViewer(page).locator(`text="Success"`)).toBeVisible()
   })
 })

apps/viewer/pages/api/integrations/stripe/createPaymentIntent.ts

@@ -74,7 +74,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         isPreview && stripeKeys.test?.publicKey
           ? stripeKeys.test.publicKey
           : stripeKeys.live.publicKey,
-      amountLabel: `${amount / 100}${currencySymbols[inputOptions.currency]}`,
+      amountLabel: `${amount / 100}${
+        currencySymbols[inputOptions.currency] ?? inputOptions.currency
+      }`,
     })
   }
   return methodNotAllowed(res)

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 && (
+      {isLoading && <Spinner className="text-white" />}
-        <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>
-      )}
       <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>
+)