chore: Introduce unified survey UI package @formbricks/surveys #698

mattinannt · 2023-08-15T15:04:51Z

What does this PR do?

Introduce unified survey UI package @formbricks/surveys

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
Enhancement (small improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change adds a new database migration
This change requires a documentation update

How should this be tested?

View and test survey preview in templates view
View and test survey preview in survey editor

…FOR-836

vercel · 2023-08-15T15:04:56Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 10, 2023 5:06am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Sep 10, 2023 5:06am

…FOR-836

github-actions · 2023-09-07T09:53:36Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`74.11 KB` (🟢 16 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

github-actions · 2023-09-07T12:37:08Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`74.11 KB` (🟢 16 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

github-actions · 2023-09-07T14:06:14Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

ShubhamPalriwala · 2023-09-08T07:28:45Z

Looks solid 💯

A few bugs that I encountered:

Adding an "Other" option does not show in the Survey Preview in both Single Select and Multi Select:
https://www.loom.com/share/d3ca4ed0982c4d278335b4691b99f71a
Deleting all questions throws me this errror:
The Progress Bar is not accurate:
https://www.loom.com/share/4acae29af76f4e11aa2e30597e323f6e
On clicking "Back" button in the 3rd question gives me this error:
Call to Action question editor when selected to link to external link, has a very small URL option (it's the same currently as well on Prod):
Smileys on Survey Preview in Phone mode go out of bounds when selected 10
Cannot select Smileys in Rating question
https://www.loom.com/share/bd7093a02df341daaac73c2c2acd22fc
In In-app surveys, the 1st question got 2 answers from the same UserID which is weird :// I tried to reproduce it but couldn't
Okay, same for the link surveys as above but instead of 2, I got 10 ://

Screen recording for the above 2 in detailed responses page:
https://www.loom.com/share/00e6122d61724d528bf7afc6bdbf0bcf

On setting the userId from URL, I can see the userId in the people/userId tab:
but in the responses summary, I see the internalID, is this how it should be?
Again I witnessed multiple first question responses:

Error logs on viewing the /responses/[responseId] page:

@formbricks/web:go: - wait compiling /api/v1/client/responses/[responseId]/route (client and server)...
@formbricks/web:go: - wait compiling /api/pipeline/route (client and server)...
@formbricks/web:go: - event compiled client and server successfully in 5.5s (11349 modules)
@formbricks/web:go: [next-auth][warn][EXPERIMENTAL_API]
@formbricks/web:go: `getServerSession` is used in a React Server Component.
@formbricks/web:go: https://next-auth.js.org/configuration/nextjs#getServerSession}
@formbricks/web:go: https://next-auth.js.org/warnings#EXPERIMENTAL_API
@formbricks/web:go: ZodError: [
@formbricks/web:go:   {
@formbricks/web:go:     "code": "invalid_union",
@formbricks/web:go:     "unionErrors": [
@formbricks/web:go:       {
@formbricks/web:go:         "issues": [
@formbricks/web:go:           {
@formbricks/web:go:             "code": "invalid_type",
@formbricks/web:go:             "expected": "string",
@formbricks/web:go:             "received": "date",
@formbricks/web:go:             "path": [
@formbricks/web:go:               "response",
@formbricks/web:go:               "data",
@formbricks/web:go:               "gvf0r8xwyy1fvfk6pcrzu97p"
@formbricks/web:go:             ],
@formbricks/web:go:             "message": "Expected string, received date"
@formbricks/web:go:           }
@formbricks/web:go:         ],
@formbricks/web:go:         "name": "ZodError"
@formbricks/web:go:       },
@formbricks/web:go:       {
@formbricks/web:go:         "issues": [
@formbricks/web:go:           {
@formbricks/web:go:             "code": "invalid_type",
@formbricks/web:go:             "expected": "number",
@formbricks/web:go:             "received": "date",
@formbricks/web:go:             "path": [
@formbricks/web:go:               "response",
@formbricks/web:go:               "data",
@formbricks/web:go:               "gvf0r8xwyy1fvfk6pcrzu97p"
@formbricks/web:go:             ],
@formbricks/web:go:             "message": "Expected number, received date"
@formbricks/web:go:           }
@formbricks/web:go:         ],
@formbricks/web:go:         "name": "ZodError"
@formbricks/web:go:       },
@formbricks/web:go:       {
@formbricks/web:go:         "issues": [
@formbricks/web:go:           {
@formbricks/web:go:             "code": "invalid_type",
@formbricks/web:go:             "expected": "array",
@formbricks/web:go:             "received": "date",
@formbricks/web:go:             "path": [
@formbricks/web:go:               "response",
@formbricks/web:go:               "data",
@formbricks/web:go:               "gvf0r8xwyy1fvfk6pcrzu97p"
@formbricks/web:go:             ],
@formbricks/web:go:             "message": "Expected array, received date"
@formbricks/web:go:           }
@formbricks/web:go:         ],
@formbricks/web:go:         "name": "ZodError"
@formbricks/web:go:       }
@formbricks/web:go:     ],
@formbricks/web:go:     "path": [
@formbricks/web:go:       "response",
@formbricks/web:go:       "data",
@formbricks/web:go:       "gvf0r8xwyy1fvfk6pcrzu97p"
@formbricks/web:go:     ],
@formbricks/web:go:     "message": "Invalid input"
@formbricks/web:go:   }
@formbricks/web:go: ]
@formbricks/web:go:     at Object.get error [as error] (webpack-internal:///(sc_server)/../../node_modules/.pnpm/zod@3.21.4/node_modules/zod/lib/index.mjs:615:31)
@formbricks/web:go:     at POST (webpack-internal:///(sc_server)/./app/api/pipeline/route.ts:33:39)
@formbricks/web:go:     at runMicrotasks (<anonymous>)
@formbricks/web:go:     at processTicksAndRejections (node:internal/process/task_queues:96:5)
@formbricks/web:go:     at async eval (webpack-internal:///(sc_server)/../../node_modules/.pnpm/next@13.4.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:253:37) {
@formbricks/web:go:   issues: [
@formbricks/web:go:     {
@formbricks/web:go:       code: 'invalid_union',
@formbricks/web:go:       unionErrors: [Array],
@formbricks/web:go:       path: [Array],
@formbricks/web:go:       message: 'Invalid input'
@formbricks/web:go:     }
@formbricks/web:go:   ],
@formbricks/web:go:   addIssue: [Function (anonymous)],
@formbricks/web:go:   addIssues: [Function (anonymous)],
@formbricks/web:go:   errors: [
@formbricks/web:go:     {
@formbricks/web:go:       code: 'invalid_union',
@formbricks/web:go:       unionErrors: [Array],
@formbricks/web:go:       path: [Array],
@formbricks/web:go:       message: 'Invalid input'
@formbricks/web:go:     }
@formbricks/web:go:   ]
@formbricks/web:go: }

Multiple responses again ://
NPS answers are not visible in the summary page:
Okay this time, this is how it send responses from a link survey:
https://www.loom.com/share/dbe7f87592b6491596ba2041ebaf6c01
Possibly due to weird responses and their count, the summary metrics are also flaky:

Please let me know if you need any other info/context! I have it running locally

github-actions · 2023-09-10T04:03:19Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`74.11 KB` (🟢 16 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

github-actions · 2023-09-10T04:56:42Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

mattinannt · 2023-09-10T05:03:44Z

Issues mentioned above are fixed 😊
Zod error will be solved in a separate ticket. Ready for merge.

github-actions · 2023-09-10T05:08:13Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

github-actions · 2023-09-10T05:20:49Z

📦 Next.js Bundle Analysis for @formbricks/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`74.1 KB` (6 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

…ricks#698) * add vite survey package * add renderSurvey method * add all survey components * First working version of renderSurvey * integrate survey package into survey preview * add survey modal functionality to formbricks-surveys * fix build errors and add new template types * add response queue * add simple formbricks-js integration * add local state management for surveys * add local storage to multiple choice and open text questions * add local state to other question types, layout fixes * Fix modal close button, clean js package code * add new calculate progress function * fix progressbar on thankyou card * fix churn survey branching in demo product * use tsup to bundle @formbricks/js * update survey positioning in link surveys * fix preview reset button in link survey * change logic for progress bar * update progressbar logic * update spacing * add conditional autofocus / disable for iframe * add userId to link survey * integrated email verification * moved token verification and reading to server component * ran pnpm format * added question prefilling * ran pnpm format * Moved question prefilling logic to Link Survey * Refactor types * centralize survey package props, fix build errors * fix userId in link survey * fix survey closed message * add redirect on complete, fix bugs * smaller bugfixes * smaller bugfixes * fix bugs * fix build errors * remove logs --------- Co-authored-by: Johannes <johannes@formbricks.com> Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

mattinannt added 8 commits August 7, 2023 13:57

add vite survey package

cd500a2

add renderSurvey method

b3103c8

Merge branch 'main' of github.com:formbricks/formbricks into feature/…

1d3206c

…FOR-836

add all survey components

e1f3c42

First working version of renderSurvey

e53c386

merge latest changes from main

539b737

integrate survey package into survey preview

14c9683

add survey modal functionality to formbricks-surveys

09c7d7f

mattinannt self-assigned this Aug 15, 2023

vercel bot had a problem deploying to Preview – formbricks-cloud August 15, 2023 15:07 Failure

fix build errors and add new template types

7fcee39

vercel bot deployed to Preview – formbricks-cloud August 15, 2023 15:42 View deployment

mattinannt added 2 commits August 16, 2023 11:24

Merge branch 'main' of github.com:formbricks/formbricks into feature/…

8a9cdcc

…FOR-836

add response queue

0d9ce27

vercel bot deployed to Preview – formbricks-cloud August 16, 2023 15:10 View deployment

add simple formbricks-js integration

43f269d

vercel bot had a problem deploying to Preview – formbricks-cloud August 16, 2023 15:36 Failure

mattinannt mentioned this pull request Aug 17, 2023

[CAL-2362] implement cal.com embeds in formbricks.com calcom/cal.com#10811

Closed

mattinannt added 2 commits August 18, 2023 08:50

add local state management for surveys

1b6910e

add local storage to multiple choice and open text questions

d395a65

vercel bot deployed to Preview – formbricks-cloud August 20, 2023 11:51 View deployment

add local state to other question types, layout fixes

affb30e

mattinannt requested a review from jobenjada August 20, 2023 16:21

vercel bot deployed to Preview – formbricks-cloud August 20, 2023 16:25 View deployment

Fix modal close button, clean js package code

4abf1f3

jobenjada assigned jobenjada and unassigned mattinannt Aug 22, 2023

vercel bot deployed to Preview – formbricks-cloud August 22, 2023 08:20 View deployment

add new calculate progress function

b8ab71d

fix userId in link survey

31dba1f

vercel bot deployed to Preview – formbricks-cloud September 7, 2023 09:48 View deployment

fix survey closed message

380e2b5

vercel bot had a problem deploying to Preview – formbricks-cloud September 7, 2023 12:28 Failure

add redirect on complete, fix bugs

7837310

vercel bot had a problem deploying to Preview – formbricks-cloud September 7, 2023 13:58 Failure

mattinannt requested a review from ShubhamPalriwala September 7, 2023 14:41

mattinannt added 2 commits September 9, 2023 12:31

smaller bugfixes

4fde3fe

smaller bugfixes

e07f3ba

vercel bot had a problem deploying to Preview – formbricks-cloud September 10, 2023 03:53 Failure

fix bugs

70f565d

vercel bot had a problem deploying to Preview – formbricks-cloud September 10, 2023 04:45 Failure

mattinannt added 2 commits September 10, 2023 13:59

fix build errors

65829c6

remove logs

8fe9d75

mattinannt removed the do-not-merge/work-in-progress label Sep 10, 2023

vercel bot deployed to Preview – formbricks-cloud September 10, 2023 05:06 View deployment

mattinannt merged commit 0a08d7d into main Sep 10, 2023
7 checks passed

mattinannt deleted the feature/FOR-836 branch September 10, 2023 05:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Introduce unified survey UI package @formbricks/surveys #698

chore: Introduce unified survey UI package @formbricks/surveys #698

mattinannt commented Aug 15, 2023

vercel bot commented Aug 15, 2023 •

edited

github-actions bot commented Sep 7, 2023

github-actions bot commented Sep 7, 2023

github-actions bot commented Sep 7, 2023

ShubhamPalriwala commented Sep 8, 2023

github-actions bot commented Sep 10, 2023

github-actions bot commented Sep 10, 2023

mattinannt commented Sep 10, 2023

github-actions bot commented Sep 10, 2023

github-actions bot commented Sep 10, 2023

chore: Introduce unified survey UI package @formbricks/surveys #698

chore: Introduce unified survey UI package @formbricks/surveys #698

Conversation

mattinannt commented Aug 15, 2023

What does this PR do?

Type of change

How should this be tested?

vercel bot commented Aug 15, 2023 • edited

github-actions bot commented Sep 7, 2023

📦 Next.js Bundle Analysis for @formbricks/web

⚠️ Global Bundle Size Increased

github-actions bot commented Sep 7, 2023

📦 Next.js Bundle Analysis for @formbricks/web

⚠️ Global Bundle Size Increased

github-actions bot commented Sep 7, 2023

📦 Next.js Bundle Analysis for @formbricks/web

ShubhamPalriwala commented Sep 8, 2023

github-actions bot commented Sep 10, 2023

📦 Next.js Bundle Analysis for @formbricks/web

⚠️ Global Bundle Size Increased

github-actions bot commented Sep 10, 2023

📦 Next.js Bundle Analysis for @formbricks/web

mattinannt commented Sep 10, 2023

github-actions bot commented Sep 10, 2023

📦 Next.js Bundle Analysis for @formbricks/web

github-actions bot commented Sep 10, 2023

📦 Next.js Bundle Analysis for @formbricks/web

⚠️ Global Bundle Size Increased

vercel bot commented Aug 15, 2023 •

edited