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,9 +25,21 @@ export const SendButton = ({
         props.className
       }
     >
-      {isLoading && (
+      {isLoading && <Spinner className="text-white" />}
+      <span className={'xs:flex ' + (disableIcon ? '' : 'hidden')}>
+        {label}
+      </span>
+      <SendIcon
+        className={'send-icon flex ' + (disableIcon ? 'hidden' : 'xs:hidden')}
+      />
+    </button>
+  )
+}
+
+export const Spinner = (props: SVGProps<SVGSVGElement>) => (
   <svg
-          className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+    {...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"
@@ -46,13 +58,4 @@ export const SendButton = ({
       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>
-      <SendIcon
-        className={'send-icon flex ' + (disableIcon ? 'hidden' : 'xs:hidden')}
-      />
-    </button>
-  )
-}
+)