2
0

(rating) Add start number option in Rating block

This commit is contained in:
Baptiste Arnaud
2024-02-06 17:01:53 +01:00
parent 5a7ec5c921
commit 3e2533b934
11 changed files with 71 additions and 13 deletions

View File

@ -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>

View File

@ -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}

View File

@ -15946,6 +15946,14 @@
"length": {
"type": "number"
},
"startsAt": {
"anyOf": [
{
"type": "number"
},
{}
]
},
"labels": {
"type": "object",
"properties": {

View File

@ -6231,6 +6231,14 @@
"length": {
"type": "number"
},
"startsAt": {
"anyOf": [
{
"type": "number"
},
{}
]
},
"labels": {
"type": "object",
"properties": {

View File

@ -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,

View File

@ -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",

View File

@ -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}

View File

@ -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",

View File

@ -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",

View File

@ -7,6 +7,7 @@ export const defaultRatingInputOptions = {
labels: {
button: defaultButtonLabel,
},
startsAt: 0,
customIcon: { isEnabled: false },
isOneClickSubmitEnabled: false,
} as const satisfies RatingInputBlock['options']

View File

@ -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(),