⚡ (payment) Add description option on Stripe input

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

@@ -28,68 +28,74 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
   const { workspace } = useWorkspace()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const handleProviderChange = (provider: PaymentProvider) => {
+  const updateProvider = (provider: PaymentProvider) => {
     onOptionsChange({
       ...options,
       provider,
     })
   }
 
-  const handleCredentialsSelect = (credentialsId?: string) => {
+  const updateCredentials = (credentialsId?: string) => {
     onOptionsChange({
       ...options,
       credentialsId,
     })
   }
 
-  const handleAmountChange = (amount?: string) =>
+  const updateAmount = (amount?: string) =>
     onOptionsChange({
       ...options,
       amount,
     })
 
-  const handleCurrencyChange = (e: ChangeEvent<HTMLSelectElement>) =>
+  const updateCurrency = (e: ChangeEvent<HTMLSelectElement>) =>
     onOptionsChange({
       ...options,
       currency: e.target.value,
     })
 
-  const handleNameChange = (name: string) =>
+  const updateName = (name: string) =>
     onOptionsChange({
       ...options,
       additionalInformation: { ...options.additionalInformation, name },
     })
 
-  const handleEmailChange = (email: string) =>
+  const updateEmail = (email: string) =>
     onOptionsChange({
       ...options,
       additionalInformation: { ...options.additionalInformation, email },
     })
 
-  const handlePhoneNumberChange = (phoneNumber: string) =>
+  const updatePhoneNumber = (phoneNumber: string) =>
     onOptionsChange({
       ...options,
       additionalInformation: { ...options.additionalInformation, phoneNumber },
     })
 
-  const handleButtonLabelChange = (button: string) =>
+  const updateButtonLabel = (button: string) =>
     onOptionsChange({
       ...options,
       labels: { ...options.labels, button },
     })
 
-  const handleSuccessLabelChange = (success: string) =>
+  const updateSuccessLabel = (success: string) =>
     onOptionsChange({
       ...options,
       labels: { ...options.labels, success },
     })
 
+  const updateDescription = (description: string) =>
+    onOptionsChange({
+      ...options,
+      additionalInformation: { ...options.additionalInformation, description },
+    })
+
   return (
     <Stack spacing={4}>
       <Stack>
         <Text>Provider:</Text>
         <DropdownList
-          onItemSelect={handleProviderChange}
+          onItemSelect={updateProvider}
           items={Object.values(PaymentProvider)}
           currentItem={options.provider}
         />
@@ -101,15 +107,15 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
             type="stripe"
             workspaceId={workspace.id}
             currentCredentialsId={options.credentialsId}
-            onCredentialsSelect={handleCredentialsSelect}
+            onCredentialsSelect={updateCredentials}
             onCreateNewClick={onOpen}
           />
         )}
       </Stack>
       <HStack>
         <TextInput
           label="Price amount:"
-          onChange={handleAmountChange}
+          onChange={updateAmount}
           defaultValue={options.amount ?? ''}
           placeholder="30.00"
         />
@@ -118,7 +124,7 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
           <Select
             placeholder="Select option"
             value={options.currency}
-            onChange={handleCurrencyChange}
+            onChange={updateCurrency}
           >
             {currencies.map((currency) => (
               <option value={currency.code} key={currency.code}>
@@ -130,13 +136,13 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
       </HStack>
       <TextInput
         label="Button label:"
-        onChange={handleButtonLabelChange}
+        onChange={updateButtonLabel}
         defaultValue={options.labels.button}
         placeholder="Pay"
       />
       <TextInput
         label="Success message:"
-        onChange={handleSuccessLabelChange}
+        onChange={updateSuccessLabel}
         defaultValue={options.labels.success ?? 'Success'}
         placeholder="Success"
       />
@@ -147,22 +153,28 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pb={4} as={Stack} spacing="6">
+            <TextInput
+              label="Description:"
+              defaultValue={options.additionalInformation?.description ?? ''}
+              onChange={updateDescription}
+              placeholder="A digital product"
+            />
             <TextInput
               label="Name:"
               defaultValue={options.additionalInformation?.name ?? ''}
-              onChange={handleNameChange}
+              onChange={updateName}
               placeholder="John Smith"
             />
             <TextInput
               label="Email:"
               defaultValue={options.additionalInformation?.email ?? ''}
-              onChange={handleEmailChange}
+              onChange={updateEmail}
               placeholder="john@gmail.com"
             />
             <TextInput
               label="Phone number:"
               defaultValue={options.additionalInformation?.phoneNumber ?? ''}
-              onChange={handlePhoneNumberChange}
+              onChange={updatePhoneNumber}
               placeholder="+33XXXXXXXXX"
             />
           </AccordionPanel>
@@ -172,7 +184,7 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
       <StripeConfigModal
         isOpen={isOpen}
         onClose={onClose}
-        onNewCredentials={handleCredentialsSelect}
+        onNewCredentials={updateCredentials}
       />
     </Stack>
   )

apps/viewer/src/features/blocks/inputs/payment/computePaymentInputRuntimeOptions.ts

@@ -57,6 +57,7 @@ const createStripePaymentIntent =
       amount,
       currency: options.currency,
       receipt_email: receiptEmail === '' ? undefined : receiptEmail,
+      description: options.additionalInformation?.description,
       automatic_payment_methods: {
         enabled: true,
       },

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

@@ -23,6 +23,7 @@ export const paymentInputOptionsSchema = optionBaseSchema.merge(
     }),
     additionalInformation: z
       .object({
+        description: z.string().optional(),
         name: z.string().optional(),
         email: z.string().optional(),
         phoneNumber: z.string().optional(),