blsmedia/bot
2
0
Fork 0
Code Issues Activity

🚸 Add a better select input

Browse Source 
Also improves other inputs behavior
This commit is contained in:
Baptiste Arnaud
2023-03-03 09:01:11 +01:00
parent a66bfca1ec
commit cc7d7285e5
94 changed files with 1251 additions and 1109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
View File

@@ -49,7 +49,7 @@ test.describe.parallel('Buttons input block', () => {
await page.click('[data-testid="block2-icon"]')
await page.click('text=Multiple choice?')
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.getByPlaceholder('Select a variable').nth(1).click()
await page.getByText('var1').click()
await expect(page.getByText('Collectsvar1')).toBeVisible()

21
apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx
View File

@@ -1,7 +1,7 @@
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
import { ChoiceInputOptions, Variable } from 'models'
import React from 'react'
@@ -29,16 +29,11 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
onCheckChange={handleIsMultipleChange}
/>
{options?.isMultipleChoice && (
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options?.buttonLabel ?? 'Send'}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Button label:"
defaultValue={options?.buttonLabel ?? 'Send'}
onChange={handleButtonLabelChange}
/>
)}
<FormControl>
<FormLabel>

43
apps/builder/src/features/blocks/inputs/date/components/DateInputSettingsBody.tsx
View File

@@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { DateInputOptions, Variable } from 'models'
import React from 'react'
@@ -40,39 +40,24 @@ export const DateInputSettingsBody = ({
onCheckChange={handleHasTimeChange}
/>
{options.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="from">
From label:
</FormLabel>
<Input
id="from"
<>
<TextInput
label="From label:"
defaultValue={options.labels.from}
onChange={handleFromChange}
/>
</Stack>
)}
{options?.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="to">
To label:
</FormLabel>
<Input
id="to"
<TextInput
label="To label:"
defaultValue={options.labels.to}
onChange={handleToChange}
/>
</Stack>
</>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

6
apps/builder/src/features/blocks/inputs/date/date.spec.ts
View File

@@ -32,9 +32,9 @@ test.describe('Date input block', () => {
await page.click(`text=Pick a date...`)
await page.click('text=Is range?')
await page.click('text=With time?')
await page.fill('#from', 'Previous:')
await page.fill('#to', 'After:')
await page.fill('#button', 'Go')
await page.getByLabel('From label:').fill('Previous:')
await page.getByLabel('To label:').fill('After:')
await page.getByLabel('Button label:').fill('Go')
await page.click('text=Restart')
await expect(page.locator(`[data-testid="from-date"]`)).toHaveAttribute(

49
apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettingsBody.tsx
View File

@@ -1,5 +1,5 @@
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
@@ -24,36 +24,21 @@ export const EmailInputSettingsBody = ({
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<Input
id="placeholder"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<Input
id="retry"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<TextInput
label="Retry message:"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

2
apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
View File

@@ -33,7 +33,7 @@ test.describe('Email input block', () => {
'Your email...'
)
await expect(page.locator('text=Your email...')).toBeVisible()
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.fill(
`input[value="${defaultEmailInputOptions.retryMessageContent}"]`,
'Try again bro'

20
apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
View File

@@ -1,10 +1,10 @@
import { FormLabel, HStack, Stack, Text } from '@chakra-ui/react'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { FileInputOptions, Variable } from 'models'
import React from 'react'
import { Input, SmartNumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput, NumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
type Props = {
options: FileInputOptions
@@ -49,7 +49,7 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
onCheckChange={handleMultipleFilesChange}
/>
<HStack>
<SmartNumberInput
<NumberInput
label={'Size limit:'}
defaultValue={options.sizeLimit ?? 10}
onValueChange={handleSizeLimitChange}
@@ -68,21 +68,21 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
withVariableButton={false}
/>
</Stack>
<Input
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
withVariableButton={false}
/>
<Input
<TextInput
label="Clear button label:"
defaultValue={options.labels.clear}
defaultValue={options.labels.clear ?? ''}
onChange={updateClearButtonLabel}
withVariableButton={false}
/>
<Input
<TextInput
label="Skip button label:"
defaultValue={options.labels.skip}
defaultValue={options.labels.skip ?? ''}
onChange={updateSkipButtonLabel}
withVariableButton={false}
/>

40
apps/builder/src/features/blocks/inputs/number/components/NumberInputSettingsBody.tsx
View File

@@ -1,5 +1,5 @@
import { Input, SmartNumberInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput, NumberInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { removeUndefinedFields } from '@/utils/helpers'
import { FormLabel, Stack } from '@chakra-ui/react'
import { NumberInputOptions, Variable } from 'models'
@@ -30,39 +30,29 @@ export const NumberInputSettingsBody = ({
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<Input
id="placeholder"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options?.labels?.button ?? 'Send'}
onChange={handleButtonLabelChange}
/>
</Stack>
<SmartNumberInput
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options?.labels?.button ?? 'Send'}
onChange={handleButtonLabelChange}
/>
<NumberInput
label="Min:"
defaultValue={options.min}
onValueChange={handleMinChange}
withVariableButton={false}
/>
<SmartNumberInput
<NumberInput
label="Max:"
defaultValue={options.max}
onValueChange={handleMaxChange}
withVariableButton={false}
/>
<SmartNumberInput
<NumberInput
label="Step:"
defaultValue={options.step}
onValueChange={handleBlockChange}

4
apps/builder/src/features/blocks/inputs/number/number.spec.ts
View File

@@ -28,9 +28,9 @@ test.describe('Number input block', () => {
await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`)
await page.fill('#placeholder', 'Your number...')
await page.getByLabel('Placeholder:').fill('Your number...')
await expect(page.locator('text=Your number...')).toBeVisible()
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.fill('[role="spinbutton"] >> nth=0', '0')
await page.fill('[role="spinbutton"] >> nth=1', '100')
await page.fill('[role="spinbutton"] >> nth=2', '10')

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

@@ -16,7 +16,7 @@ import React, { ChangeEvent, useState } from 'react'
import { currencies } from './currencies'
import { StripeConfigModal } from './StripeConfigModal'
import { CredentialsDropdown } from '@/features/credentials'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
type Props = {
options: PaymentInputOptions
@@ -105,14 +105,12 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
/>
</Stack>
<HStack>
<Stack>
<Text>Price amount:</Text>
<Input
onChange={handleAmountChange}
defaultValue={options.amount}
placeholder="30.00"
/>
</Stack>
<TextInput
label="Price amount:"
onChange={handleAmountChange}
defaultValue={options.amount ?? ''}
placeholder="30.00"
/>
<Stack>
<Text>Currency:</Text>
<Select
@@ -128,22 +126,18 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
</Select>
</Stack>
</HStack>
<Stack>
<Text>Button label:</Text>
<Input
onChange={handleButtonLabelChange}
defaultValue={options.labels.button}
placeholder="Pay"
/>
</Stack>
<Stack>
<Text>Success message:</Text>
<Input
onChange={handleSuccessLabelChange}
defaultValue={options.labels.success ?? 'Success'}
placeholder="Success"
/>
</Stack>
<TextInput
label="Button label:"
onChange={handleButtonLabelChange}
defaultValue={options.labels.button}
placeholder="Pay"
/>
<TextInput
label="Success message:"
onChange={handleSuccessLabelChange}
defaultValue={options.labels.success ?? 'Success'}
placeholder="Success"
/>
<Accordion allowToggle>
<AccordionItem>
<AccordionButton justifyContent="space-between">
@@ -151,30 +145,24 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} as={Stack} spacing="6">
<Stack>
<Text>Name:</Text>
<Input
defaultValue={options.additionalInformation?.name ?? ''}
onChange={handleNameChange}
placeholder="John Smith"
/>
</Stack>
<Stack>
<Text>Email:</Text>
<Input
defaultValue={options.additionalInformation?.email ?? ''}
onChange={handleEmailChange}
placeholder="john@gmail.com"
/>
</Stack>
<Stack>
<Text>Phone number:</Text>
<Input
defaultValue={options.additionalInformation?.phoneNumber ?? ''}
onChange={handlePhoneNumberChange}
placeholder="+33XXXXXXXXX"
/>
</Stack>
<TextInput
label="Name:"
defaultValue={options.additionalInformation?.name ?? ''}
onChange={handleNameChange}
placeholder="John Smith"
/>
<TextInput
label="Email:"
defaultValue={options.additionalInformation?.email ?? ''}
onChange={handleEmailChange}
placeholder="john@gmail.com"
/>
<TextInput
label="Phone number:"
defaultValue={options.additionalInformation?.phoneNumber ?? ''}
onChange={handlePhoneNumberChange}
placeholder="+33XXXXXXXXX"
/>
</AccordionPanel>
</AccordionItem>
</Accordion>

45
apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings/StripeConfigModal.tsx
View File

@@ -19,7 +19,7 @@ import React, { useState } from 'react'
import { useWorkspace } from '@/features/workspace'
import { omit } from 'utils'
import { useToast } from '@/hooks/useToast'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
import { TextLink } from '@/components/TextLink'
import { createCredentialsQuery } from '@/features/credentials'
@@ -102,14 +102,13 @@ export const StripeConfigModal = ({
<ModalCloseButton />
<ModalBody>
<Stack as="form" spacing={4}>
<FormControl isRequired>
<FormLabel>Account name:</FormLabel>
<Input
onChange={handleNameChange}
placeholder="Typebot"
withVariableButton={false}
/>
</FormControl>
<TextInput
isRequired
label="Account name:"
onChange={handleNameChange}
placeholder="Typebot"
withVariableButton={false}
/>
<Stack>
<FormLabel>
Test keys:{' '}
@@ -118,34 +117,30 @@ export const StripeConfigModal = ({
</MoreInfoTooltip>
</FormLabel>
<HStack>
<FormControl>
<Input
onChange={handleTestPublicKeyChange}
placeholder="pk_test_..."
withVariableButton={false}
/>
</FormControl>
<FormControl>
<Input
onChange={handleTestSecretKeyChange}
placeholder="sk_test_..."
withVariableButton={false}
/>
</FormControl>
<TextInput
onChange={handleTestPublicKeyChange}
placeholder="pk_test_..."
withVariableButton={false}
/>
<TextInput
onChange={handleTestSecretKeyChange}
placeholder="sk_test_..."
withVariableButton={false}
/>
</HStack>
</Stack>
<Stack>
<FormLabel>Live keys:</FormLabel>
<HStack>
<FormControl>
<Input
<TextInput
onChange={handlePublicKeyChange}
placeholder="pk_live_..."
withVariableButton={false}
/>
</FormControl>
<FormControl>
<Input
<TextInput
onChange={handleSecretKeyChange}
placeholder="sk_live_..."
withVariableButton={false}

49
apps/builder/src/features/blocks/inputs/phone/components/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx
View File

@@ -1,5 +1,5 @@
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { PhoneNumberInputOptions, Variable } from 'models'
import React from 'react'
@@ -27,26 +27,16 @@ export const PhoneNumberSettingsBody = ({
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<Input
id="placeholder"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="button">
Default country:
@@ -56,16 +46,11 @@ export const PhoneNumberSettingsBody = ({
countryCode={options.defaultCountryCode}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<Input
id="retry"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>
<TextInput
label="Retry message:"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

4
apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
View File

@@ -28,8 +28,8 @@ test.describe('Phone input block', () => {
await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
await page.click(`text=${defaultPhoneInputOptions.labels.placeholder}`)
await page.fill('#placeholder', '+33 XX XX XX XX')
await page.fill('#button', 'Go')
await page.getByLabel('Placeholder:').fill('+33 XX XX XX XX')
await page.getByLabel('Button label:').fill('Go')
await page.fill(
`input[value="${defaultPhoneInputOptions.retryMessageContent}"]`,
'Try again bro'

72
apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx
View File

@@ -2,9 +2,9 @@ import { FormLabel, Stack } from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { RatingInputOptions, Variable } from 'models'
import React from 'react'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
type RatingInputSettingsProps = {
options: RatingInputOptions
@@ -77,56 +77,36 @@ export const RatingInputSettings = ({
/>
)}
{options.buttonType === 'Icons' && options.customIcon.isEnabled && (
<Stack>
<FormLabel mb="0" htmlFor="svg">
Icon SVG:
</FormLabel>
<Input
id="svg"
defaultValue={options.customIcon.svg}
onChange={handleIconSvgChange}
placeholder="<svg>...</svg>"
/>
</Stack>
<TextInput
label="Icon SVG:"
defaultValue={options.customIcon.svg}
onChange={handleIconSvgChange}
placeholder="<svg>...</svg>"
/>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
{options.buttonType === 'Icons' ? '1' : '0'} label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.left}
onChange={handleLeftLabelChange}
placeholder="Not likely at all"
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
{options.length} label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.right}
onChange={handleRightLabelChange}
placeholder="Extremely likely"
/>
</Stack>
<TextInput
label={`${options.buttonType === 'Icons' ? '1' : '0'} label:`}
defaultValue={options.labels.left}
onChange={handleLeftLabelChange}
placeholder="Not likely at all"
/>
<TextInput
label={`${options.length} label:`}
defaultValue={options.labels.right}
onChange={handleRightLabelChange}
placeholder="Extremely likely"
/>
<SwitchWithLabel
label="One click submit"
moreInfoContent='If enabled, the answer will be submitted as soon as the user clicks on a rating instead of showing the "Send" button.'
initialValue={options.isOneClickSubmitEnabled ?? false}
onCheckChange={handleOneClickSubmitChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

36
apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettingsBody.tsx
View File

@@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { TextInputOptions, Variable } from 'models'
import React from 'react'
@@ -30,26 +30,16 @@ export const TextInputSettingsBody = ({
initialValue={options?.isLong ?? false}
onCheckChange={handleLongChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<Input
id="placeholder"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

4
apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
View File

@@ -28,8 +28,8 @@ test.describe.parallel('Text input block', () => {
await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
await page.fill('#placeholder', 'Your name...')
await page.fill('#button', 'Go')
await page.getByLabel('Placeholder:').fill('Your name...')
await page.getByLabel('Button label:').fill('Go')
await page.click('text=Long text?')
await page.click('text=Restart')

49
apps/builder/src/features/blocks/inputs/url/components/UrlInputSettingsBody.tsx
View File

@@ -1,5 +1,5 @@
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { UrlInputOptions, Variable } from 'models'
import React from 'react'
@@ -24,36 +24,21 @@ export const UrlInputSettingsBody = ({
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<Input
id="placeholder"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<Input
id="retry"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<TextInput
label="Retry message:"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

4
apps/builder/src/features/blocks/inputs/url/url.spec.ts
View File

@@ -30,9 +30,9 @@ test.describe('Url input block', () => {
).toBeDisabled()
await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`)
await page.fill('#placeholder', 'Your URL...')
await page.getByLabel('Placeholder:').fill('Your URL...')
await expect(page.locator('text=Your URL...')).toBeVisible()
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.fill(
`input[value="${defaultUrlInputOptions.retryMessageContent}"]`,
'Try again bro'