🐛 (billing) Collect tax ID manually before checkout

This allows Typebot to always display a company name on invoices.

apps/builder/src/components/inputs/Select.tsx

@@ -23,21 +23,30 @@ import { ChevronDownIcon, CloseIcon } from '../icons'
 
 const dropdownCloseAnimationDuration = 300
 
-type Item = string | { icon?: JSX.Element; label: string; value: string }
+type Item =
+  | string
+  | {
+      icon?: JSX.Element
+      label: string
+      value: string
+      extras?: Record<string, unknown>
+    }
 
-type Props = {
+type Props<T extends Item> = {
+  isPopoverMatchingInputWidth?: boolean
   selectedItem?: string
-  items: Item[]
+  items: T[]
   placeholder?: string
-  onSelect?: (value: string | undefined) => void
+  onSelect?: (value: string | undefined, item?: T) => void
 }
 
-export const Select = ({
+export const Select = <T extends Item>({
+  isPopoverMatchingInputWidth = true,
   selectedItem,
   placeholder,
   items,
   onSelect,
-}: Props) => {
+}: Props<T>) => {
   const focusedItemBgColor = useColorModeValue('gray.200', 'gray.700')
   const selectedItemBgColor = useColorModeValue('blue.50', 'blue.400')
   const [isTouched, setIsTouched] = useState(false)
@@ -87,20 +96,22 @@ export const Select = ({
     setInputValue(e.target.value)
   }
 
-  const handleItemClick = (item: Item) => () => {
+  const handleItemClick = (item: T) => () => {
     if (!isTouched) setIsTouched(true)
     setInputValue(getItemLabel(item))
-    onSelect?.(getItemValue(item))
+    onSelect?.(getItemValue(item), item)
     setKeyboardFocusIndex(undefined)
     closeDropwdown()
   }
 
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
+      e.preventDefault()
       handleItemClick(filteredItems[keyboardFocusIndex])()
       return setKeyboardFocusIndex(undefined)
     }
     if (e.key === 'ArrowDown') {
+      e.preventDefault()
       if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
       if (keyboardFocusIndex === filteredItems.length - 1)
         return setKeyboardFocusIndex(0)
@@ -111,6 +122,7 @@ export const Select = ({
       return setKeyboardFocusIndex(keyboardFocusIndex + 1)
     }
     if (e.key === 'ArrowUp') {
+      e.preventDefault()
       if (keyboardFocusIndex === 0 || keyboardFocusIndex === undefined)
         return setKeyboardFocusIndex(filteredItems.length - 1)
       itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
@@ -140,7 +152,8 @@ export const Select = ({
       <Popover
         isOpen={isOpen}
         initialFocusRef={inputRef}
-        matchWidth
+        matchWidth={isPopoverMatchingInputWidth}
+        placement="bottom-start"
         offset={[0, 1]}
         isLazy
       >
@@ -150,7 +163,7 @@ export const Select = ({
               pos="absolute"
               pb={2}
               // We need absolute positioning the overlay match the underlying input
-              pt="8.5px"
+              pt="8px"
               pl="17px"
               pr={selectedItem ? 16 : 8}
               w="full"
@@ -173,7 +186,7 @@ export const Select = ({
               onBlur={resetIsTouched}
               onChange={handleInputChange}
               onFocus={onOpen}
-              onKeyDown={handleKeyUp}
+              onKeyDown={handleKeyDown}
               pr={selectedItem ? 16 : undefined}
             />
 

apps/builder/src/components/inputs/TextInput.tsx

@@ -9,7 +9,14 @@ import {
   InputProps,
 } from '@chakra-ui/react'
 import { Variable } from 'models'
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import React, {
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { env } from 'utils'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
@@ -29,23 +36,27 @@ export type TextInputProps = {
   'autoComplete' | 'onFocus' | 'onKeyUp' | 'type' | 'autoFocus'
 >
 
-export const TextInput = ({
-  type,
-  defaultValue,
-  debounceTimeout = 1000,
-  label,
-  moreInfoTooltip,
-  withVariableButton = true,
-  isRequired,
-  placeholder,
-  autoComplete,
-  isDisabled,
-  autoFocus,
-  onChange: _onChange,
-  onFocus,
-  onKeyUp,
-}: TextInputProps) => {
+export const TextInput = forwardRef(function TextInput(
+  {
+    type,
+    defaultValue,
+    debounceTimeout = 1000,
+    label,
+    moreInfoTooltip,
+    withVariableButton = true,
+    isRequired,
+    placeholder,
+    autoComplete,
+    isDisabled,
+    autoFocus,
+    onChange: _onChange,
+    onFocus,
+    onKeyUp,
+  }: TextInputProps,
+  ref
+) {
   const inputRef = useRef<HTMLInputElement | null>(null)
+  useImperativeHandle(ref, () => inputRef.current)
   const [isTouched, setIsTouched] = useState(false)
   const [localValue, setLocalValue] = useState<string>(defaultValue ?? '')
   const [carretPosition, setCarretPosition] = useState<number>(
@@ -128,4 +139,4 @@ export const TextInput = ({
       )}
     </FormControl>
   )
-}
+})

apps/builder/src/features/billing/api/procedures/createCheckoutSession.ts

@@ -27,6 +27,12 @@ export const createCheckoutSession = authenticatedProcedure
       returnUrl: z.string(),
       additionalChats: z.number(),
       additionalStorage: z.number(),
+      vat: z
+        .object({
+          type: z.string(),
+          value: z.string(),
+        })
+        .optional(),
     })
   )
   .output(
@@ -37,6 +43,7 @@ export const createCheckoutSession = authenticatedProcedure
   .mutation(
     async ({
       input: {
+        vat,
         email,
         company,
         workspaceId,
@@ -72,10 +79,22 @@ export const createCheckoutSession = authenticatedProcedure
         apiVersion: '2022-11-15',
       })
 
+      await prisma.user.updateMany({
+        where: {
+          id: user.id,
+        },
+        data: {
+          company,
+        },
+      })
+
       const customer = await stripe.customers.create({
         email,
         name: company,
         metadata: { workspaceId },
+        tax_id_data: vat
+          ? [vat as Stripe.CustomerCreateParams.TaxIdDatum]
+          : undefined,
       })
 
       const session = await stripe.checkout.sessions.create({
@@ -85,14 +104,11 @@ export const createCheckoutSession = authenticatedProcedure
         customer: customer.id,
         customer_update: {
           address: 'auto',
-          name: 'auto',
+          name: 'never',
         },
         mode: 'subscription',
         metadata: { workspaceId, plan, additionalChats, additionalStorage },
         currency,
-        tax_id_collection: {
-          enabled: true,
-        },
         billing_address_collection: 'required',
         automatic_tax: { enabled: true },
         line_items: parseSubscriptionItems(

apps/builder/src/features/billing/components/ChangePlanForm/ChangePlanForm.tsx

@@ -10,6 +10,7 @@ import { guessIfUserIsEuropean } from 'utils/pricing'
 import { Workspace } from 'models'
 import { PreCheckoutModal, PreCheckoutModalProps } from '../PreCheckoutModal'
 import { useState } from 'react'
+import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
 
 type Props = {
   workspace: Pick<Workspace, 'id' | 'stripeId' | 'plan'>
@@ -77,12 +78,14 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
   return (
     <Stack spacing={6}>
       {!workspace.stripeId && (
-        <PreCheckoutModal
-          selectedSubscription={preCheckoutPlan}
-          existingEmail={user?.email ?? undefined}
-          existingCompany={user?.company ?? undefined}
-          onClose={() => setPreCheckoutPlan(undefined)}
-        />
+        <ParentModalProvider>
+          <PreCheckoutModal
+            selectedSubscription={preCheckoutPlan}
+            existingEmail={user?.email ?? undefined}
+            existingCompany={user?.company ?? undefined}
+            onClose={() => setPreCheckoutPlan(undefined)}
+          />
+        </ParentModalProvider>
       )}
       <HStack alignItems="stretch" spacing="4" w="full">
         <StarterPlanContent

apps/builder/src/features/billing/components/PreCheckoutModal.tsx

@@ -1,8 +1,13 @@
 import { TextInput } from '@/components/inputs'
+import { Select } from '@/components/inputs/Select'
+import { useParentModal } from '@/features/graph'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 import {
   Button,
+  FormControl,
+  FormLabel,
+  HStack,
   Modal,
   ModalBody,
   ModalContent,
@@ -12,6 +17,7 @@ import {
 import { useRouter } from 'next/router'
 import React, { FormEvent, useState } from 'react'
 import { isDefined } from 'utils'
+import { taxIdTypes } from '../taxIdTypes'
 
 export type PreCheckoutModalProps = {
   selectedSubscription:
@@ -28,12 +34,22 @@ export type PreCheckoutModalProps = {
   onClose: () => void
 }
 
+const vatCodeLabels = taxIdTypes.map((taxIdType) => ({
+  label: `${taxIdType.emoji} ${taxIdType.name} (${taxIdType.code})`,
+  value: taxIdType.type,
+  extras: {
+    placeholder: taxIdType.placeholder,
+  },
+}))
+
 export const PreCheckoutModal = ({
   selectedSubscription,
   existingCompany,
   existingEmail,
   onClose,
 }: PreCheckoutModalProps) => {
+  const { ref } = useParentModal()
+  const vatValueInputRef = React.useRef<HTMLInputElement>(null)
   const router = useRouter()
   const { showToast } = useToast()
   const { mutate: createCheckoutSession, isLoading: isCreatingCheckout } =
@@ -51,7 +67,12 @@ export const PreCheckoutModal = ({
   const [customer, setCustomer] = useState({
     company: existingCompany ?? '',
     email: existingEmail ?? '',
+    vat: {
+      type: undefined as string | undefined,
+      value: '',
+    },
   })
+  const [vatValuePlaceholder, setVatValuePlaceholder] = useState('')
 
   const updateCustomerCompany = (company: string) => {
     setCustomer((customer) => ({ ...customer, company }))
@@ -61,23 +82,53 @@ export const PreCheckoutModal = ({
     setCustomer((customer) => ({ ...customer, email }))
   }
 
-  const createCustomer = (e: FormEvent) => {
+  const updateVatType = (
+    type: string | undefined,
+    vatCode?: (typeof vatCodeLabels)[number]
+  ) => {
+    setCustomer((customer) => ({
+      ...customer,
+      vat: {
+        ...customer.vat,
+        type,
+      },
+    }))
+    setVatValuePlaceholder(vatCode?.extras?.placeholder ?? '')
+    vatValueInputRef.current?.focus()
+  }
+
+  const updateVatValue = (value: string) => {
+    setCustomer((customer) => ({
+      ...customer,
+      vat: {
+        ...customer.vat,
+        value,
+      },
+    }))
+  }
+
+  const goToCheckout = (e: FormEvent) => {
     e.preventDefault()
     if (!selectedSubscription) return
+    const { email, company, vat } = customer
     createCheckoutSession({
       ...selectedSubscription,
-      email: customer.email,
-      company: customer.company,
+      email,
+      company,
       returnUrl: window.location.href,
+      vat:
+        vat.value && vat.type
+          ? { type: vat.type, value: vat.value }
+          : undefined,
     })
   }
 
   return (
     <Modal isOpen={isDefined(selectedSubscription)} onClose={onClose}>
       <ModalOverlay />
-      <ModalContent>
+      <ModalContent ref={ref}>
         <ModalBody py="8">
-          <Stack as="form" onSubmit={createCustomer} spacing="4">
+          <Stack as="form" spacing="4" onSubmit={goToCheckout}>
             <TextInput
               isRequired
               label="Company name"
@@ -95,6 +146,25 @@ export const PreCheckoutModal = ({
               withVariableButton={false}
               debounceTimeout={0}
             />
+            <FormControl>
+              <FormLabel>Tax ID</FormLabel>
+              <HStack>
+                <Select
+                  placeholder="ID type"
+                  items={vatCodeLabels}
+                  isPopoverMatchingInputWidth={false}
+                  onSelect={updateVatType}
+                />
+                <TextInput
+                  ref={vatValueInputRef}
+                  onChange={updateVatValue}
+                  withVariableButton={false}
+                  debounceTimeout={0}
+                  placeholder={vatValuePlaceholder}
+                />
+              </HStack>
+            </FormControl>
+
             <Button
               type="submit"
               isLoading={isCreatingCheckout}