feat: Recall functionality by Dhruwang · Pull Request #1789 · formbricks/formbricks

Dhruwang · 2023-12-18T05:00:56Z

What does this PR do?

Fixes #1673

recall.mp4

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?

Type @ into question headline box and select the recall question

Checklist

Required

Appreciated

If a UI change was made: Added a screen recording or screenshots to this PR
Updated the Formbricks Docs if changes were necessary

…call

vercel · 2023-12-18T05:01:04Z

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

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Jan 17, 2024 1:25pm
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Jan 17, 2024 1:25pm

github-actions · 2023-12-18T05:01:10Z

Thank you for following the naming conventions for pull request titles! 🙏

review-agent-prime · 2023-12-18T05:02:58Z

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx

Consider using the useCallback hook for the event handlers to avoid unnecessary re-rendering of the components. This will improve the performance of your application.
Create Issue
See the diff
Checkout the fix

    const handleInputChange = useCallback((inputType: TSurveyOpenTextQuestionInputType) => {
      const updatedAttributes = {
        inputType: inputType,
        placeholder: getPlaceholderByInputType(inputType),
        longAnswer: inputType === "text" ? question.longAnswer : false,
      };
      updateQuestion(questionIdx, updatedAttributes);
    }, [question.longAnswer, questionIdx, updateQuestion]);

git fetch origin && git checkout -b ReviewBot/Impro-59912zj origin/ReviewBot/Impro-59912zj

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecallQuestionSelect.tsx

Consider destructuring the properties of the objects to improve the readability of your code.
Create Issue
See the diff
Checkout the fix

    const { environmentId, questions } = localSurvey;

git fetch origin && git checkout -b ReviewBot/Impro-4awb89n origin/ReviewBot/Impro-4awb89n

packages/surveys/src/components/questions/CTAQuestion.tsx

Consider validating the URL before opening it in a new tab to prevent any potential security risks.
Create Issue
See the diff
Checkout the fix

    if (question.buttonExternal && question.buttonUrl && isValidURL(question.buttonUrl)) {
      window?.open(question.buttonUrl, "_blank")?.focus();
    }

git fetch origin && git checkout -b ReviewBot/Impro-xr97qem origin/ReviewBot/Impro-xr97qem

packages/surveys/src/components/general/Survey.tsx

Consider breaking down the getNextQuestionId function into smaller, more manageable functions. This will make the code easier to read and maintain.
Create Issue
See the diff
Checkout the fix

    const getNextQuestionId = (data: TResponseData, isFromPrefilling: Boolean = false): string => {
      const questions = survey.questions;
      const responseValue = data[questionId];

      if (questionId === "start") {
        if (!isFromPrefilling) {
          return questions[0]?.id || "end";
        } else {
          currIdx = 0;
          currQues = questions[0];
        }
      }
      if (currIdx === -1) throw new Error("Question not found");

      if (currQues?.logic && currQues?.logic.length > 0) {
        for (let logic of currQues.logic) {
          if (!logic.destination) continue;

          if (evaluateCondition(logic, responseValue)) {
            return logic.destination;
          }
        }
      }
      return questions[currIdx + 1]?.id || "end";
    }

git fetch origin && git checkout -b ReviewBot/Impro-flx62rf origin/ReviewBot/Impro-flx62rf

Consider using the useCallback hook to memoize the onSubmit function. This will prevent unnecessary re-rendering of the component when the function is passed as a prop to child components.
Create Issue
See the diff
Checkout the fix

    const onSubmit = useCallback((responseData: TResponseData, ttc: TResponseTtc, isFromPrefilling: Boolean = false) => {
      const questionId = Object.keys(responseData)[0];
      setLoadingElement(true);
      const nextQuestionId = getNextQuestionId(responseData, isFromPrefilling);
      const finished = nextQuestionId === "end";
      onResponse({ data: responseData, ttc, finished });
      if (finished) {
        onFinished();
      }
      setQuestionId(nextQuestionId);
      // add to history
      setHistory([...history, questionId]);
      setLoadingElement(false);
      onActiveQuestionChange(nextQuestionId);
    }, [getNextQuestionId, onResponse, onFinished, setQuestionId, setHistory, setLoadingElement, onActiveQuestionChange]);

git fetch origin && git checkout -b ReviewBot/Impro-rmqdas3 origin/ReviewBot/Impro-rmqdas3

Consider renaming the variable 'ttc' to a more descriptive name. This will make the code easier to understand for other developers.
Create Issue
See the diff
Checkout the fix

    const [responseTime, setResponseTime] = useState<TResponseTtc>({});

git fetch origin && git checkout -b ReviewBot/Impro-np1jx2z origin/ReviewBot/Impro-np1jx2z

packages/lib/utils/recall.ts

The same regular expression pattern is used in multiple places. It would be more readable and maintainable to define it once and reuse it.
Create Issue
See the diff
Checkout the fix

    const RECALL_PATTERN = /recall:([A-Za-z0-9]+)/;
    const FALLBACK_PATTERN = /fallback:(\S*)/;
    const RECALL_INFO_PATTERN = /recall:([A-Za-z0-9]+)\/fallback:(\S*)/;
    ...

git fetch origin && git checkout -b ReviewBot/Impro-snj1cfx origin/ReviewBot/Impro-snj1cfx

review-agent-prime · 2023-12-18T05:03:04Z

...pp)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecallQuestionSelect.tsx

+};
+
+export default function RecallQuestionSelect({
+  currentQuestionIdx,


Destructuring the properties of the 'localSurvey' object to improve the readability of the code.

Suggested change

currentQuestionIdx,

const { environmentId, questions } = localSurvey;

review-agent-prime · 2023-12-18T05:03:19Z

packages/lib/utils/recall.ts

+import { TSurvey } from "@formbricks/types/surveys";
+
+export function extractId(text: string) {
+  const pattern = /recall:([A-Za-z0-9]+)/;
+  const match = text.match(pattern);
+  if (match && match[1]) {
+    return match[1];
+  } else {
+    return null;
+  }
+}
+
+export function extractIds(text: string) {
+  const pattern = /recall:([A-Za-z0-9]+)/g;
+  const matches = text.match(pattern);
+  if (!matches) {
+    return [];
+  }
+  return matches
+    .map((match) => {
+      const matchPattern = /recall:([A-Za-z0-9]+)/;
+      const idMatch = match.match(matchPattern);
+      return idMatch ? idMatch[1] : null;
+    })
+    .filter((id) => id !== null);
+}
+
+export function extractFallbackValue(text: string): string {
+  const pattern = /fallback:(\S*)/;
+  const match = text.match(pattern);
+  if (match && match[1]) {
+    return match[1];
+  } else {
+    return "";
+  }
+}
+
+export function extractRecallInfo(headline: string): string | null {
+  const pattern = /recall:([A-Za-z0-9]+)\/fallback:(\S*)/;
+  const match = headline.match(pattern);
+  return match ? match[0] : null;
+}
+
+export const checkForRecall = (headline: string, survey: TSurvey) => {
+  let newHeadline = headline;
+  if (!headline.includes("recall:")) return headline;
+  while (newHeadline.includes("recall:")) {
+    const recallInfo = extractRecallInfo(newHeadline);
+    if (recallInfo) {
+      const questionId = extractId(recallInfo);
+      newHeadline = newHeadline.replace(
+        recallInfo,
+        `@${survey.questions.find((question) => question.id === questionId)?.headline}`
+      );
+    }
+  }
+  return newHeadline;
+};
+
+export function findRecallInfoById(text: string, id: string): string | null {
+  const pattern = new RegExp(`recall:${id}\\/fallback:(\\S*)`, "g");
+  const match = text.match(pattern);
+  return match ? match[0] : null;
+}


Defining the regular expression patterns once and reusing them in the code to improve readability and maintainability.

Suggested change

import { TSurvey } from "@formbricks/types/surveys";

export function extractId(text: string) {

const pattern = /recall:([A-Za-z0-9]+)/;

const match = text.match(pattern);

if (match && match[1]) {

return match[1];

} else {

return null;

}

}

export function extractIds(text: string) {

const pattern = /recall:([A-Za-z0-9]+)/g;

const matches = text.match(pattern);

if (!matches) {

return [];

}

return matches

.map((match) => {

const matchPattern = /recall:([A-Za-z0-9]+)/;

const idMatch = match.match(matchPattern);

return idMatch ? idMatch[1] : null;

})

.filter((id) => id !== null);

}

export function extractFallbackValue(text: string): string {

const pattern = /fallback:(\S*)/;

const match = text.match(pattern);

if (match && match[1]) {

return match[1];

} else {

return "";

}

}

export function extractRecallInfo(headline: string): string | null {

const pattern = /recall:([A-Za-z0-9]+)\/fallback:(\S*)/;

const match = headline.match(pattern);

return match ? match[0] : null;

}

export const checkForRecall = (headline: string, survey: TSurvey) => {

let newHeadline = headline;

if (!headline.includes("recall:")) return headline;

while (newHeadline.includes("recall:")) {

const recallInfo = extractRecallInfo(newHeadline);

if (recallInfo) {

const questionId = extractId(recallInfo);

newHeadline = newHeadline.replace(

recallInfo,

`@${survey.questions.find((question) => question.id === questionId)?.headline}`

);

}

}

return newHeadline;

};

export function findRecallInfoById(text: string, id: string): string | null {

const pattern = new RegExp(`recall:${id}\\/fallback:(\\S*)`, "g");

const match = text.match(pattern);

return match ? match[0] : null;

}

const RECALL_PATTERN = /recall:([A-Za-z0-9]+)/;

const RECALL_PATTERN_GLOBAL = /recall:([A-Za-z0-9]+)/g;

const FALLBACK_PATTERN = /fallback:(\S*)/;

const RECALL_INFO_PATTERN = /recall:([A-Za-z0-9]+)\/fallback:(\S*)/;

export function extractId(text: string) {

const match = text.match(RECALL_PATTERN);

...

}

export function extractIds(text: string) {

const matches = text.match(RECALL_PATTERN_GLOBAL);

...

const idMatch = match.match(RECALL_PATTERN);

...

}

export function extractFallbackValue(text: string): string {

const match = text.match(FALLBACK_PATTERN);

...

}

export function extractRecallInfo(headline: string): string | null {

const match = headline.match(RECALL_INFO_PATTERN);

...

}

export function findRecallInfoById(text: string, id: string): string | null {

const pattern = new RegExp(`recall:${id}\/fallback:(\S*)`, "g");

...

}

jobenjada · 2023-12-19T00:00:15Z

Hey Dru!

Super cool what you've built with so few lines of code 😍 💪 Here is my feedback:

On click on "Edit fallback" I got this error:

Pls add a bit of padding-x and a space between the @ and the question text:

Also, add a bit of margin-x here:

Edit fallback button behavior

This button behaves a bit odd. It appears when it should, like here when you hover with the mouse over the question field or the pop out:

Its hard to reach because it disappears when you leave the text area with the cursor. So you have to move along the text area to the far right to then move down to click it.

Can we move it into this bubble and display it on bubble hover? And then open the fallback editor on bubble click?

That would be much more intuitive and solve the hover issues :)

When there are two recalled questions, only display the fallback settings for the one where the user clicked on the bubble:

Filter list if question was already added: I can add the same info twice

Enable for descriptions and question type File Upload as well :)

Deleting behaviour: Remove the whole bubble instead of unlinking it and displaying the question text

So if you hit backspace, just remove the bubble.

Resolve bubbleception

Recalling questions which are recalling questions leads to tiny UI mess:

Any ideas on how to solve that? 🤔 I think it doesnt make sense to have it in the bubble itself

With a lot of questions, the UI breaks:

and the icons are getting smaller and smaller:

Add space between two values when two values are chosen in multi select:

Filter out questions of the following types from the list of questions to recall from: Picture Choice, Call to Action, Consent, File Upload.

Question Type Date: Formatting

This is a recalled date:

Can we reformat that to "12th of December, 2023" (or similar) ? Just to increase readability.

Seems like a lot but mostly tweaking! Great work Dru, really impressed with this 😍 💪

…call

…o recall

…call

mattinannt · 2024-01-16T15:22:40Z

@Dhruwang I'm currently making the final testing. The whole feature looks and works pretty great! 😊💪
There was only one issue I identified:

The recall information in the thank you card isn't working:
https://github.com/formbricks/formbricks/assets/675065/41726b33-317c-47a8-b527-9453c1c4388c

Can you please check and fix that? If this is fixed we are ready to merge this 😊💪

jobenjada · 2024-01-16T22:57:18Z

Added little hint as placeholder:

Dhruwang · 2024-01-17T05:47:12Z

@mattinannt , have fixed the issue with thank you card 😊

mattinannt

@Dhruwang thanks for the changes; works great! 😊
So cool that we finally finished this feature after so many months and different attempts. great job! 👏👏

mattinannt · 2024-01-17T10:25:31Z

@Dhruwang there seems to be one issue left with the e2e tests. Can you please check what's going on there? 😊

…o recall

Dhruwang added 10 commits December 11, 2023 18:29

added recall functionality

54f8fcb

tweaks

fd0f144

fix: regex

35f88f5

added support for mutiple recall

8a0f050

made refactors

1bb7890

Merge branch 'main' of https://github.com/Dhruwang/formbricks into re…

68f90d3

…call

tweaks

ae2f21d

removed console logs

6609065

fix: falback issue

b327e48

tweaks

9b98614

review-agent-prime bot reviewed Dec 18, 2023

View reviewed changes

Dhruwang assigned jobenjada Dec 18, 2023

Merge branch 'main' into recall

de95233

UI tweaks

28ce651

jobenjada self-requested a review December 19, 2023 00:26

Dhruwang and others added 10 commits December 19, 2023 14:38

Merge branch 'main' of https://github.com/Dhruwang/formbricks into re…

933c3e9

…call

adds recall to description

2f67105

adds recall to description

d3c45ee

Merge branch 'main' of https://github.com/Dhruwang/formbricks into re…

5b5c6c8

…call

minor fixes

b0a9ac4

Merge branch 'main' into recall

345e51f

added some padding to recall bubble

f65e24a

Merge branch 'recall' of https://github.com/formbricks/formbricks int…

6883c04

…o recall

fix: description issue

5cf92af

resolved issues

79911a0

Dhruwang added 3 commits January 14, 2024 11:47

Merge branch 'main' of https://github.com/Dhruwang/formbricks into re…

cde9ae8

…call

added useMemo and some refactors

ada7efb

removed console logs

795bea3

Dhruwang requested a review from mattinannt January 15, 2024 11:30

Dhruwang and others added 2 commits January 16, 2024 10:03

Enwrapped recall info under #

1716c58

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

4c6d88e

jobenjada and others added 2 commits January 16, 2024 16:47

Merge branch 'main' into recall

447b3bc

add placeholder text with hint

0b10948

fix: recall issue for thank you card

725a7fa

mattinannt approved these changes Jan 17, 2024

View reviewed changes

mattinannt added this pull request to the merge queue Jan 17, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 17, 2024

Merge branch 'main' into recall

2e982c6

Merge branch 'main' into recall

d9d7146

mattinannt enabled auto-merge January 17, 2024 10:37

mattinannt added this pull request to the merge queue Jan 17, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 17, 2024

mattinannt and others added 3 commits January 17, 2024 12:35

Merge branch 'main' into recall

bd9bfd7

fix: e2e errors

be6feb0

Merge branch 'recall' of https://github.com/formbricks/formbricks int…

f4e9ab5

…o recall

mattinannt enabled auto-merge January 17, 2024 13:29

mattinannt added this pull request to the merge queue Jan 17, 2024

Merged via the queue into main with commit f280063 Jan 17, 2024

mattinannt deleted the recall branch January 17, 2024 13:44

ShubhamPalriwala mentioned this pull request Feb 1, 2024

[FormTribe 🔥][1250 Points] Recall information #884

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Recall functionality #1789

feat: Recall functionality #1789
mattinannt merged 50 commits intomainfrom
recall

Dhruwang commented Dec 18, 2023

Uh oh!

vercel bot commented Dec 18, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Dec 18, 2023 •

edited

Loading

Uh oh!

review-agent-prime bot commented Dec 18, 2023

Uh oh!

review-agent-prime bot Dec 18, 2023

Uh oh!

review-agent-prime bot Dec 18, 2023

Uh oh!

jobenjada commented Dec 19, 2023 •

edited

Loading

Uh oh!

mattinannt commented Jan 16, 2024

Uh oh!

jobenjada commented Jan 16, 2024

Uh oh!

Dhruwang commented Jan 17, 2024

Uh oh!

mattinannt left a comment

Uh oh!

Uh oh!

mattinannt commented Jan 17, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	currentQuestionIdx,
	const { environmentId, questions } = localSurvey;

Conversation

Dhruwang commented Dec 18, 2023

What does this PR do?

Type of change

How should this be tested?

Checklist

Required

Appreciated

Uh oh!

vercel bot commented Dec 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

review-agent-prime bot commented Dec 18, 2023

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecallQuestionSelect.tsx

packages/surveys/src/components/questions/CTAQuestion.tsx

packages/surveys/src/components/general/Survey.tsx

packages/lib/utils/recall.ts

Uh oh!

review-agent-prime bot Dec 18, 2023

Choose a reason for hiding this comment

Uh oh!

review-agent-prime bot Dec 18, 2023

Choose a reason for hiding this comment

Uh oh!

jobenjada commented Dec 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattinannt commented Jan 16, 2024

Uh oh!

jobenjada commented Jan 16, 2024

Uh oh!

Dhruwang commented Jan 17, 2024

Uh oh!

mattinannt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mattinannt commented Jan 17, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel bot commented Dec 18, 2023 •

edited

Loading

github-actions bot commented Dec 18, 2023 •

edited

Loading

jobenjada commented Dec 19, 2023 •

edited

Loading