feat: Replace 'Show survey to % of users' slider (#2719)

Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>

apps/docs/app/global/show-survey-to-percent-of-users/page.mdx

@@ -43,7 +43,7 @@ Set up this feature to control how many users see your survey, using a simple sl
 4. **Adjust User Visibility Percentage**:
 
    - Find the **`Show Survey to % of Users`** toggle. Enable it.
-   - Use the slider to select the desired percentage (from 1% to 100%) of users to whom the survey will be shown.
+   - Enter the desired percentage (from 0.01% to 100%) of users to whom the survey will be shown.
 
    {" "}
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx

@@ -101,7 +101,23 @@ export const WhenToSendCard = ({
   };
 
   const handleRandomizerInput = (e) => {
-    const updatedSurvey = { ...localSurvey, displayPercentage: parseInt(e.target.value) };
+    let value: number | null = null;
+
+    if (e.target.value !== "") {
+      value = parseFloat(e.target.value);
+
+      if (Number.isNaN(value)) {
+        value = 1;
+      }
+
+      if (value < 0.01) value = 0.01;
+      if (value > 100) value = 100;
+
+      // Round value to two decimal places. eg: 10.555(and higher like 10.556) -> 10.56 and 10.554(and lower like 10.553) ->10.55
+      value = Math.round(value * 100) / 100;
+    }
+
+    const updatedSurvey = { ...localSurvey, displayPercentage: value };
     setLocalSurvey(updatedSurvey);
   };
 
@@ -294,22 +310,21 @@ export const WhenToSendCard = ({
               title="Show survey to % of users"
               description="Only display the survey to a subset of the users"
               childBorder={true}>
-              <div className="w-full">
-                <div className="flex flex-col justify-center rounded-lg border bg-slate-50 p-6">
-                  <h3 className="mb-4 text-sm font-semibold text-slate-700">
-                    Show to {localSurvey.displayPercentage}% of targeted users
-                  </h3>
-                  <input
+              <label htmlFor="small-range" className="cursor-pointer p-4">
+                <p className="text-sm font-semibold text-slate-700">
+                  Show to {localSurvey.displayPercentage}% of targeted users
+                  <Input
                     id="small-range"
-                    type="range"
-                    min="1"
+                    type="number"
+                    step="0.01"
+                    min="0.01"
                     max="100"
-                    value={localSurvey.displayPercentage ?? 50}
+                    value={localSurvey.displayPercentage ?? ""}
                     onChange={handleRandomizerInput}
-                    className="range-sm mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-slate-200 dark:bg-slate-700"
+                    className="mx-2 inline w-20 bg-white text-center text-sm"
                   />
-                </div>
-              </div>
+                </p>
+              </label>
             </AdvancedOptionToggle>
           </div>
         </Collapsible.CollapsibleContent>

packages/database/migrations/20240603130103_display_percentage_to_decimal/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Survey" ALTER COLUMN "displayPercentage" SET DATA TYPE DECIMAL(65,30);

packages/database/schema.prisma

@@ -312,7 +312,7 @@ model Survey {
   verifyEmail       Json?
   pin               String?
   resultShareKey    String?          @unique
-  displayPercentage Int?
+  displayPercentage Decimal?
   languages         SurveyLanguage[]
 
   @@index([environmentId, updatedAt])

packages/js-core/src/app/lib/widget.ts

@@ -27,7 +27,7 @@ export const setIsSurveyRunning = (value: boolean) => {
 };
 
 const shouldDisplayBasedOnPercentage = (displayPercentage: number) => {
-  const randomNum = Math.floor(Math.random() * 100) + 1;
+  const randomNum = Math.floor(Math.random() * 10000) / 100;
   return randomNum <= displayPercentage;
 };
 

packages/js-core/src/website/lib/widget.ts

@@ -25,7 +25,7 @@ export const setIsSurveyRunning = (value: boolean) => {
 };
 
 const shouldDisplayBasedOnPercentage = (displayPercentage: number) => {
-  const randomNum = Math.floor(Math.random() * 100) + 1;
+  const randomNum = Math.floor(Math.random() * 10000) / 100;
   return randomNum <= displayPercentage;
 };
 

packages/lib/survey/service.ts

@@ -499,6 +499,7 @@ export const updateSurvey = async (updatedSurvey: TSurvey): Promise<TSurvey> =>
     // @ts-expect-error
     const modifiedSurvey: TSurvey = {
       ...prismaSurvey, // Properties from prismaSurvey
+      displayPercentage: Number(prismaSurvey.displayPercentage) || null,
       segment: surveySegment,
     };
 

packages/lib/survey/utils.ts

@@ -18,6 +18,7 @@ export const transformPrismaSurvey = (surveyPrisma: any): TSurvey => {
 
   const transformedSurvey: TSurvey = {
     ...surveyPrisma,
+    displayPercentage: Number(surveyPrisma.displayPercentage) || null,
     segment,
   };
 

packages/types/surveys.ts

@@ -494,7 +494,7 @@ export const ZSurvey = z.object({
   verifyEmail: ZSurveyVerifyEmail.nullable(),
   pin: z.string().nullish(),
   resultShareKey: z.string().nullable(),
-  displayPercentage: z.number().min(1).max(100).nullable(),
+  displayPercentage: z.number().min(0.01).max(100).nullable(),
   languages: z.array(ZSurveyLanguage),
 });
 
@@ -521,7 +521,7 @@ export const ZSurveyInput = z.object({
   verifyEmail: ZSurveyVerifyEmail.optional(),
   pin: z.string().nullish(),
   resultShareKey: z.string().nullish(),
-  displayPercentage: z.number().min(1).max(100).nullish(),
+  displayPercentage: z.number().min(0.01).max(100).nullish(),
   triggers: z.array(z.object({ actionClass: ZActionClass })).optional(),
 });