⚡ (rating) Add start number option in Rating block
This commit is contained in:
@ -17,7 +17,9 @@ export const RatingInputContent = ({ variableId, block }: Props) => {
|
||||
) : (
|
||||
<Text noOfLines={1} pr="6">
|
||||
{t('blocks.inputs.rating.from.label')}{' '}
|
||||
{block.options?.buttonType === 'Icons' ? 1 : 0}{' '}
|
||||
{block.options?.buttonType === 'Icons'
|
||||
? 1
|
||||
: block.options?.startsAt ?? defaultRatingInputOptions.startsAt}{' '}
|
||||
{t('blocks.inputs.rating.to.label')}{' '}
|
||||
{block.options?.length ?? defaultRatingInputOptions.length}
|
||||
</Text>
|
||||
|
@ -3,7 +3,7 @@ import { DropdownList } from '@/components/DropdownList'
|
||||
import { RatingInputBlock, Variable } from '@typebot.io/schemas'
|
||||
import React from 'react'
|
||||
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
|
||||
import { TextInput } from '@/components/inputs'
|
||||
import { NumberInput, TextInput } from '@/components/inputs'
|
||||
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
|
||||
import { defaultRatingInputOptions } from '@typebot.io/schemas/features/blocks/inputs/rating/constants'
|
||||
import { useTranslate } from '@tolgee/react'
|
||||
@ -46,11 +46,15 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
|
||||
const handleOneClickSubmitChange = (isOneClickSubmitEnabled: boolean) =>
|
||||
onOptionsChange({ ...options, isOneClickSubmitEnabled })
|
||||
|
||||
const updateStartsAt = (startsAt: number | `{{${string}}}` | undefined) =>
|
||||
onOptionsChange({ ...options, startsAt })
|
||||
|
||||
const length = options?.length ?? defaultRatingInputOptions.length
|
||||
const isOneClickSubmitEnabled =
|
||||
options?.isOneClickSubmitEnabled ??
|
||||
defaultRatingInputOptions.isOneClickSubmitEnabled
|
||||
|
||||
const buttonType = options?.buttonType ?? defaultRatingInputOptions.buttonType
|
||||
return (
|
||||
<Stack spacing={4}>
|
||||
<Stack>
|
||||
@ -71,13 +75,20 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
|
||||
<DropdownList
|
||||
onItemSelect={handleTypeChange}
|
||||
items={['Icons', 'Numbers'] as const}
|
||||
currentItem={
|
||||
options?.buttonType ?? defaultRatingInputOptions.buttonType
|
||||
}
|
||||
currentItem={buttonType}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
{options?.buttonType === 'Icons' && (
|
||||
{buttonType === 'Numbers' && (
|
||||
<NumberInput
|
||||
defaultValue={options?.startsAt ?? defaultRatingInputOptions.startsAt}
|
||||
onValueChange={updateStartsAt}
|
||||
label="Starts at"
|
||||
direction="row"
|
||||
/>
|
||||
)}
|
||||
|
||||
{buttonType === 'Icons' && (
|
||||
<SwitchWithLabel
|
||||
label={t('blocks.inputs.rating.settings.customIcon.label')}
|
||||
initialValue={
|
||||
@ -87,7 +98,7 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
|
||||
onCheckChange={handleCustomIconCheck}
|
||||
/>
|
||||
)}
|
||||
{options?.buttonType === 'Icons' && options.customIcon?.isEnabled && (
|
||||
{buttonType === 'Icons' && options?.customIcon?.isEnabled && (
|
||||
<TextInput
|
||||
label={t('blocks.inputs.rating.settings.iconSVG.label')}
|
||||
defaultValue={options.customIcon.svg}
|
||||
@ -97,7 +108,10 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
|
||||
)}
|
||||
<TextInput
|
||||
label={t('blocks.inputs.rating.settings.rateLabel.label', {
|
||||
rate: options?.buttonType === 'Icons' ? '1' : '0',
|
||||
rate:
|
||||
buttonType === 'Icons'
|
||||
? '1'
|
||||
: options?.startsAt ?? defaultRatingInputOptions.startsAt,
|
||||
})}
|
||||
defaultValue={options?.labels?.left}
|
||||
onChange={handleLeftLabelChange}
|
||||
|
@ -15946,6 +15946,14 @@
|
||||
"length": {
|
||||
"type": "number"
|
||||
},
|
||||
"startsAt": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "number"
|
||||
},
|
||||
{}
|
||||
]
|
||||
},
|
||||
"labels": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
|
@ -6231,6 +6231,14 @@
|
||||
"length": {
|
||||
"type": "number"
|
||||
},
|
||||
"startsAt": {
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "number"
|
||||
},
|
||||
{}
|
||||
]
|
||||
},
|
||||
"labels": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
|
@ -252,6 +252,25 @@ export const parseInput =
|
||||
case InputBlockType.DATE: {
|
||||
return parseDateInput(state)(block)
|
||||
}
|
||||
case InputBlockType.RATING: {
|
||||
const parsedBlock = deepParseVariables(
|
||||
state.typebotsQueue[0].typebot.variables
|
||||
)({
|
||||
...block,
|
||||
prefilledValue: getPrefilledInputValue(
|
||||
state.typebotsQueue[0].typebot.variables
|
||||
)(block),
|
||||
})
|
||||
return {
|
||||
...parsedBlock,
|
||||
options: {
|
||||
...parsedBlock.options,
|
||||
startsAt: isNotEmpty(parsedBlock.options?.startsAt as string)
|
||||
? Number(parsedBlock.options?.startsAt)
|
||||
: undefined,
|
||||
},
|
||||
}
|
||||
}
|
||||
default: {
|
||||
return deepParseVariables(state.typebotsQueue[0].typebot.variables)({
|
||||
...block,
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@typebot.io/js",
|
||||
"version": "0.2.40",
|
||||
"version": "0.2.41",
|
||||
"description": "Javascript library to display typebots on your website",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
|
@ -45,7 +45,10 @@ export const RatingForm = (props: Props) => {
|
||||
defaultRatingInputOptions.length) +
|
||||
((props.block.options?.buttonType ??
|
||||
defaultRatingInputOptions.buttonType) === 'Numbers'
|
||||
? 1
|
||||
? -(
|
||||
((props.block.options?.startsAt as number | undefined) ??
|
||||
defaultRatingInputOptions.startsAt) - 1
|
||||
)
|
||||
: 0)
|
||||
)
|
||||
)}
|
||||
@ -58,7 +61,8 @@ export const RatingForm = (props: Props) => {
|
||||
idx() +
|
||||
((props.block.options?.buttonType ??
|
||||
defaultRatingInputOptions.buttonType) === 'Numbers'
|
||||
? 0
|
||||
? (props.block.options?.startsAt as number | undefined) ??
|
||||
defaultRatingInputOptions.startsAt
|
||||
: 1)
|
||||
}
|
||||
onClick={handleClick}
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@typebot.io/nextjs",
|
||||
"version": "0.2.40",
|
||||
"version": "0.2.41",
|
||||
"description": "Convenient library to display typebots on your Next.js website",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@typebot.io/react",
|
||||
"version": "0.2.40",
|
||||
"version": "0.2.41",
|
||||
"description": "Convenient library to display typebots on your React app",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
|
@ -7,6 +7,7 @@ export const defaultRatingInputOptions = {
|
||||
labels: {
|
||||
button: defaultButtonLabel,
|
||||
},
|
||||
startsAt: 0,
|
||||
customIcon: { isEnabled: false },
|
||||
isOneClickSubmitEnabled: false,
|
||||
} as const satisfies RatingInputBlock['options']
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { z } from '../../../../zod'
|
||||
import { variableStringSchema } from '../../../utils'
|
||||
import { optionBaseSchema, blockBaseSchema } from '../../shared'
|
||||
import { InputBlockType } from '../constants'
|
||||
|
||||
@ -6,6 +7,7 @@ export const ratingInputOptionsSchema = optionBaseSchema.merge(
|
||||
z.object({
|
||||
buttonType: z.literal('Icons').or(z.literal('Numbers')).optional(),
|
||||
length: z.number().optional(),
|
||||
startsAt: z.number().or(variableStringSchema).optional(),
|
||||
labels: z
|
||||
.object({
|
||||
left: z.string().optional(),
|
||||
|
Reference in New Issue
Block a user