From 3e2533b93463dbe013b0298a2b73f17023ea72c7 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Tue, 6 Feb 2024 17:01:53 +0100
Subject: [PATCH] :zap: (rating) Add start number option in Rating block

---
 .../rating/components/RatingInputContent.tsx  |  4 ++-
 .../rating/components/RatingInputSettings.tsx | 28 ++++++++++++++-----
 apps/docs/openapi/builder.json                |  8 ++++++
 apps/docs/openapi/viewer.json                 |  8 ++++++
 packages/bot-engine/executeGroup.ts           | 19 +++++++++++++
 packages/embeds/js/package.json               |  2 +-
 .../inputs/rating/components/RatingForm.tsx   |  8 ++++--
 packages/embeds/nextjs/package.json           |  2 +-
 packages/embeds/react/package.json            |  2 +-
 .../blocks/inputs/rating/constants.ts         |  1 +
 .../features/blocks/inputs/rating/schema.ts   |  2 ++
 11 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx
index 9d8b233fe..9ddb535ec 100644
--- a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx
+++ b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx
@@ -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>
diff --git a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx
index 42ecb0e4b..20c34af85 100644
--- a/apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx
@@ -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}
diff --git a/apps/docs/openapi/builder.json b/apps/docs/openapi/builder.json
index e92bd4b9c..6036e251c 100644
--- a/apps/docs/openapi/builder.json
+++ b/apps/docs/openapi/builder.json
@@ -15946,6 +15946,14 @@
               "length": {
                 "type": "number"
               },
+              "startsAt": {
+                "anyOf": [
+                  {
+                    "type": "number"
+                  },
+                  {}
+                ]
+              },
               "labels": {
                 "type": "object",
                 "properties": {
diff --git a/apps/docs/openapi/viewer.json b/apps/docs/openapi/viewer.json
index cc4cc8562..679f4215b 100644
--- a/apps/docs/openapi/viewer.json
+++ b/apps/docs/openapi/viewer.json
@@ -6231,6 +6231,14 @@
               "length": {
                 "type": "number"
               },
+              "startsAt": {
+                "anyOf": [
+                  {
+                    "type": "number"
+                  },
+                  {}
+                ]
+              },
               "labels": {
                 "type": "object",
                 "properties": {
diff --git a/packages/bot-engine/executeGroup.ts b/packages/bot-engine/executeGroup.ts
index 304fa1d88..911c7190b 100644
--- a/packages/bot-engine/executeGroup.ts
+++ b/packages/bot-engine/executeGroup.ts
@@ -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,
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 4eedac705..d6fcb8691 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -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",
diff --git a/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx b/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
index 34cc6a52a..91cbba120 100644
--- a/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
@@ -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}
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 64b18d118..bbe3b1f90 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 013cca657..dc74e62e0 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -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",
diff --git a/packages/schemas/features/blocks/inputs/rating/constants.ts b/packages/schemas/features/blocks/inputs/rating/constants.ts
index 01ab6af2d..83ace3e07 100644
--- a/packages/schemas/features/blocks/inputs/rating/constants.ts
+++ b/packages/schemas/features/blocks/inputs/rating/constants.ts
@@ -7,6 +7,7 @@ export const defaultRatingInputOptions = {
   labels: {
     button: defaultButtonLabel,
   },
+  startsAt: 0,
   customIcon: { isEnabled: false },
   isOneClickSubmitEnabled: false,
 } as const satisfies RatingInputBlock['options']
diff --git a/packages/schemas/features/blocks/inputs/rating/schema.ts b/packages/schemas/features/blocks/inputs/rating/schema.ts
index 61e1796bd..f7be1edbd 100644
--- a/packages/schemas/features/blocks/inputs/rating/schema.ts
+++ b/packages/schemas/features/blocks/inputs/rating/schema.ts
@@ -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(),