feat(react,react-components): survey support, Survey Popover component (#605)

* feat(react,js,react-components,js-components): survey

* feat: survey-component

* feat: question types

* feat: survey block type

* feat: design

* feat: more design

* feat: end screen question

* feat: even more design

* feat: rename open option to other option

* feat: rating options, refactor

* feat: design tweaks, switch to session storage

* feat: disabled continue button

* feat: end screen auto submit

* fix: other option spacebar

* feat: min max rating scale

* fix: submit other option

* feat: survey submit url

* fix: click and conditions

* feat: drop empty question answer

* feat: survey trigger

* @flows/react@1.21.1-canary.0

* @flows/react-components@2.7.1-canary.0

* feat: survey blockStateId

* feat: page targeting and tour trigger tests

* feat: jsdoc

* feat: jsdoc improvements

* feat: survey prop jsdoc

* feat: feedback improvements

* fix: css

* fix: remove running surveys

---------

Co-authored-by: Ondřej Pešička <77627332+OPesicka@users.noreply.github.com>
Co-authored-by: flows-bot[bot] <170794745+flows-bot[bot]@users.noreply.github.com>

Author: 3 people

pnpm-lock.yaml

@@ -17,7 +17,7 @@
     "react-router": "^7.12.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.59.0",
     "@types/node": "^24",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

workspaces/e2e/package.json

@@ -21,6 +21,7 @@ import { HashRouter, Link, Route, Routes } from "react-router";
 
 import * as components from "@flows/react-components";
 import * as tourComponents from "@flows/react-components/tour";
+import * as surveyComponents from "@flows/react-components/survey";
 import "@flows/react-components/index.css";
 import type { LanguageOption } from "@flows/shared";
 
@@ -150,6 +151,7 @@ createRoot(document.getElementById("root")!).render(
         apiUrl={apiUrl}
         components={{ ...components, Card, BlockTrigger, StateMemory, Action }}
         tourComponents={{ ...tourComponents, Card, Action }}
+        surveyComponents={{ ...surveyComponents }}
         LinkComponent={enableLinkComponent ? LinkComponent : undefined}
       >
         <Routes>

workspaces/e2e/pages/react.tsx

@@ -63,6 +63,37 @@ const slotTourBlock: TourStep = {
   slotId: "my-slot",
 };
 
+const getSurvey = ({
+  page_targeting_operator,
+  page_targeting_values,
+}: {
+  page_targeting_operator?: string;
+  page_targeting_values?: string[];
+}): Block => ({
+  id: randomUUID(),
+  workflowId: randomUUID(),
+  type: "survey",
+  componentType: "BasicsV2SurveyPopover",
+  data: {},
+  exitNodes: ["complete", "cancel"],
+  slottable: false,
+  survey: {
+    id: randomUUID(),
+    blockStateId: randomUUID(),
+    questions: [
+      {
+        id: "question-1",
+        type: "freeform",
+        title: "Hello",
+        description: "Question",
+        optional: true,
+      },
+    ],
+  },
+  page_targeting_operator,
+  page_targeting_values,
+});
+
 const run = (packageName: string) => {
   test(`${packageName} - should work with query params`, async ({ page }) => {
     const block: Block = {
@@ -399,6 +430,51 @@ const run = (packageName: string) => {
     await page.goto(`/${packageName}.html`);
     await expect(page.getByText("Workflow block", { exact: true })).toBeHidden();
   });
+
+  test.describe("survey", () => {
+    test.skip(packageName !== "react", "Survey page-targeting coverage is only available in React");
+
+    test(`${packageName} - should show survey without page targeting`, async ({ page }) => {
+      await mockBlocksEndpoint(page, [getSurvey({})]);
+      await page.goto(`/${packageName}.html`);
+      await expect(page.getByText("Hello", { exact: true })).toBeVisible();
+    });
+
+    test(`${packageName} - should not show survey with incorrect page targeting`, async ({
+      page,
+    }) => {
+      await mockBlocksEndpoint(
+        page,
+        [getSurvey({ page_targeting_operator: "contains", page_targeting_values: ["/wrong"] })],
+      );
+      await page.goto(`/${packageName}.html`);
+      await expect(page.getByText("Hello", { exact: true })).toBeHidden();
+    });
+
+    test(`${packageName} - should show survey with correct page targeting`, async ({ page }) => {
+      await mockBlocksEndpoint(page, [
+        getSurvey({
+          page_targeting_operator: "contains",
+          page_targeting_values: [`/${packageName}.html`],
+        }),
+      ]);
+      await page.goto(`/${packageName}.html`);
+      await expect(page.getByText("Hello", { exact: true })).toBeVisible();
+    });
+
+    test(`${packageName} - should show survey with query params`, async ({ page }) => {
+      await mockBlocksEndpoint(page, [
+        getSurvey({
+          page_targeting_operator: "contains",
+          page_targeting_values: [`/${packageName}.html?param=value`],
+        }),
+      ]);
+      await page.goto(`/${packageName}.html`);
+      await expect(page.getByText("Hello", { exact: true })).toBeHidden();
+      await page.goto(`/${packageName}.html?param=value`);
+      await expect(page.getByText("Hello", { exact: true })).toBeVisible();
+    });
+  });
 };
 
 run("js");