diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx new file mode 100644 index 000000000..8ac42b738 --- /dev/null +++ b/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 ( + + + + Address + + + + + + + + + + + + + ) +} diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx index a6d11e85f..dfc5eb87c 100644 --- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx +++ b/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 ( @@ -152,7 +163,7 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => { Additional information - + { onChange={updatePhoneNumber} placeholder="+33XXXXXXXXX" /> + diff --git a/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx b/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx index 5b0f09b38..c73de18cb 100644 --- a/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx +++ b/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, + }, }, }, }, diff --git a/packages/schemas/features/blocks/inputs/payment/schemas.ts b/packages/schemas/features/blocks/inputs/payment/schemas.ts index 829801cfc..e50578f81 100644 --- a/packages/schemas/features/blocks/inputs/payment/schemas.ts +++ b/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 +export type PaymentAddress = NonNullable< + PaymentInputOptions['additionalInformation'] +>['address']