⚡ (payment) Add address in payment input

apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx

@@ -0,0 +1,97 @@
+import {
+  Stack,
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+} from '@chakra-ui/react'
+import React from 'react'
+import { TextInput } from '@/components/inputs'
+import { PaymentAddress } from '@typebot.io/schemas'
+
+type Props = {
+  address: PaymentAddress
+  onAddressChange: (address: PaymentAddress) => void
+}
+
+export const PaymentAddressSettings = ({ address, onAddressChange }: Props) => {
+  const updateCountry = (country: string) =>
+    onAddressChange({
+      ...address,
+      country,
+    })
+
+  const updateLine1 = (line1: string) =>
+    onAddressChange({
+      ...address,
+      line1,
+    })
+
+  const updateLine2 = (line2: string) =>
+    onAddressChange({
+      ...address,
+      line2,
+    })
+
+  const updateCity = (city: string) =>
+    onAddressChange({
+      ...address,
+      city,
+    })
+
+  const updateState = (state: string) =>
+    onAddressChange({
+      ...address,
+      state,
+    })
+
+  const updatePostalCode = (postalCode: string) =>
+    onAddressChange({
+      ...address,
+      postalCode,
+    })
+
+  return (
+    <Accordion allowToggle>
+      <AccordionItem>
+        <AccordionButton justifyContent="space-between">
+          Address
+          <AccordionIcon />
+        </AccordionButton>
+        <AccordionPanel py={4} as={Stack} spacing="4">
+          <TextInput
+            label="Country:"
+            defaultValue={address?.country ?? ''}
+            onChange={updateCountry}
+          />
+          <TextInput
+            label="Line 1:"
+            defaultValue={address?.line1 ?? ''}
+            onChange={updateLine1}
+          />
+          <TextInput
+            label="Line 2:"
+            defaultValue={address?.line2 ?? ''}
+            onChange={updateLine2}
+          />
+          <TextInput
+            label="City:"
+            defaultValue={address?.city ?? ''}
+            onChange={updateCity}
+          />
+          <TextInput
+            label="State:"
+            defaultValue={address?.state ?? ''}
+            onChange={updateState}
+          />
+          <TextInput
+            label="Postal code:"
+            defaultValue={address?.postalCode ?? ''}
+            onChange={updatePostalCode}
+          />
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}

apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx

@@ -11,13 +11,18 @@ import {
   AccordionPanel,
 } from '@chakra-ui/react'
 import { DropdownList } from '@/components/DropdownList'
-import { PaymentInputOptions, PaymentProvider } from '@typebot.io/schemas'
+import {
+  PaymentAddress,
+  PaymentInputOptions,
+  PaymentProvider,
+} from '@typebot.io/schemas'
 import React, { ChangeEvent } from 'react'
 import { currencies } from '../currencies'
 import { StripeConfigModal } from './StripeConfigModal'
 import { CredentialsDropdown } from '@/features/credentials/components/CredentialsDropdown'
 import { TextInput } from '@/components/inputs'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { PaymentAddressSettings } from './PaymentAddressSettings'
 
 type Props = {
   options: PaymentInputOptions
@@ -90,6 +95,12 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
       additionalInformation: { ...options.additionalInformation, description },
     })
 
+  const updateAddress = (address: PaymentAddress) =>
+    onOptionsChange({
+      ...options,
+      additionalInformation: { ...options.additionalInformation, address },
+    })
+
   return (
     <Stack spacing={4}>
       <Stack>
@@ -152,7 +163,7 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
             Additional information
             <AccordionIcon />
           </AccordionButton>
-          <AccordionPanel pb={4} as={Stack} spacing="6">
+          <AccordionPanel py={4} as={Stack} spacing="6">
             <TextInput
               label="Description:"
               defaultValue={options.additionalInformation?.description ?? ''}
@@ -177,6 +188,10 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
               onChange={updatePhoneNumber}
               placeholder="+33XXXXXXXXX"
             />
+            <PaymentAddressSettings
+              address={options.additionalInformation?.address}
+              onAddressChange={updateAddress}
+            />
           </AccordionPanel>
         </AccordionItem>
       </Accordion>

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

@@ -61,6 +61,11 @@ export const StripePaymentForm = (props: Props) => {
             name: props.options.additionalInformation?.name,
             email: props.options.additionalInformation?.email,
             phone: props.options.additionalInformation?.phoneNumber,
+            address: {
+              ...props.options.additionalInformation?.address,
+              postal_code:
+                props.options.additionalInformation?.address?.postalCode,
+            },
           },
         },
       },

packages/schemas/features/blocks/inputs/payment/schemas.ts

@@ -14,6 +14,15 @@ export type CreditCardDetails = {
   cvc: string
 }
 
+const addressSchema = z.object({
+  country: z.string().optional(),
+  line1: z.string().optional(),
+  line2: z.string().optional(),
+  state: z.string().optional(),
+  city: z.string().optional(),
+  postalCode: z.string().optional(),
+})
+
 export const paymentInputOptionsSchema = optionBaseSchema.merge(
   z.object({
     provider: z.nativeEnum(PaymentProvider),
@@ -27,6 +36,7 @@ export const paymentInputOptionsSchema = optionBaseSchema.merge(
         name: z.string().optional(),
         email: z.string().optional(),
         phoneNumber: z.string().optional(),
+        address: addressSchema.optional(),
       })
       .optional(),
     credentialsId: z.string().optional(),
@@ -76,3 +86,6 @@ export type PaymentInputRuntimeOptions = z.infer<
   typeof paymentInputRuntimeOptionsSchema
 >
 export type StripeCredentials = z.infer<typeof stripeCredentialsSchema>
+export type PaymentAddress = NonNullable<
+  PaymentInputOptions['additionalInformation']
+>['address']