mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-06 09:00:18 -06:00
Code Issues Packages Projects Releases 118 Wiki Activity

merged latest changes and fixed preview reredering issue

Browse Source
This commit is contained in:
Dhruwang
2023-10-08 13:35:29 +05:30
parent 3af6498891 07a0d669f4
commit c37d924c85
21 changed files with 350 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/formbricks-com/app/docs/link-surveys/single-use-links/env-variable.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
apps/formbricks-com/app/docs/link-surveys/single-use-links/metadata.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

80
apps/formbricks-com/app/docs/link-surveys/single-use-links/page.mdx Normal file
View File

@@ -0,0 +1,80 @@
import Image from "next/image";
import EnvVar from "./env-variable.webp";
import ShareModal from "./share-modal.webp";
import Settings from "./single-use-setting.webp";
import Message from "./used-message.webp";
import Metadata from "./metadata.webp";
export const meta = {
title: "Single Use Links",
description: "Make sure that each respondent only replies once with single use links.",
};
#### Link Surveys
# Single Use Links
This guide will help you understand how to generate and use single-use links within our application.
## Purpose
- Single-use links (or one-time / disposable links) are URLs that grant access to a survey only once.
- The primary purpose of single-use links is to assure that no respondent submits a survey twice.
## Using Single-Use Links with Formbricks
Using single-use links with Formbricks is quite straight-forward:
1. In the survey settings, toggle "Single Use Link" on:
<Image
src={Settings}
alt="Single use survey settings"
quality="100"
className="max-w-full rounded-lg sm:max-w-3xl"
/>
2. When you publish your survey, the following modal will open:
<Image
src={ShareModal}
alt="Share modal with 7 single use links which can be regenerated"
quality="100"
className="max-w-full rounded-lg sm:max-w-3xl"
/>
Here, you can copy and generate as many single-use links as you need.
## URL Encryption
You can encrypt single use URLs to assure information to be protected. To enable it, you have to set the correct environment variable:
<Image
src={EnvVar}
alt="Set the right env var to be able to enable encryption."
quality="100"
className="max-w-full rounded-lg sm:max-w-3xl"
/>
## Check suId of a submission
You can find the suId of each submission in the submission meta data. To view it, simplte hover over the Avatar:
<Image
src={Metadata}
alt="View suId in the submission meta data."
quality="100"
className="max-w-full rounded-lg sm:max-w-3xl"
/>
### 'Link used' message
You can customize the 'link used' messaging in the Survey Editor settings:
<Image
src={Message}
alt="Adjust the message shown to people if a link was already used."
quality="100"
className="max-w-full rounded-lg sm:max-w-3xl"
/>

BIN
apps/formbricks-com/app/docs/link-surveys/single-use-links/share-modal.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
apps/formbricks-com/app/docs/link-surveys/single-use-links/single-use-setting.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
apps/formbricks-com/app/docs/link-surveys/single-use-links/used-message.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

1
apps/formbricks-com/components/docs/Navigation.tsx
View File

@@ -237,6 +237,7 @@ export const navigation: Array<NavGroup> = [
links: [
{ title: "Data Prefilling", href: "/docs/link-surveys/data-prefilling" },
{ title: "User Identification", href: "/docs/link-surveys/user-identification" },
{ title: "Single Use Links", href: "/docs/link-surveys/single-use-links" },
],
},
{

2
apps/formbricks-com/components/shared/Footer.tsx
View File

@@ -15,7 +15,7 @@ const navigation = {
href: "https://twitter.com/formbricks",
icon: (props: any) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
),
},

2
apps/web/app/(app)/environments/[environmentId]/components/Navigation.tsx
View File

@@ -234,7 +234,7 @@ export default function Navigation({
return (
<>
{product && (
<nav className="top-0 z-10 w-full border-b border-slate-200 bg-white">
<nav className="top-0 w-full border-b border-slate-200 bg-white">
{environment?.type === "development" && (
<div className="h-6 w-full bg-[#A33700] p-0.5 text-center text-sm text-white">
You&apos;re in development mode. Use it to test surveys, actions and attributes.

123
apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx
View File

@@ -8,13 +8,17 @@ import type { TProduct } from "@formbricks/types/v1/product";
import { TSurvey } from "@formbricks/types/v1/surveys";
import { Button } from "@formbricks/ui";
import { ArrowPathRoundedSquareIcon } from "@heroicons/react/24/outline";
import { ComputerDesktopIcon, DevicePhoneMobileIcon } from "@heroicons/react/24/solid";
import {
ArrowsPointingInIcon,
ArrowsPointingOutIcon,
ComputerDesktopIcon,
DevicePhoneMobileIcon,
} from "@heroicons/react/24/solid";
import { Variants, motion } from "framer-motion";
import { useEffect, useRef, useState } from "react";
type TPreviewType = "modal" | "fullwidth" | "email";
let surveyQuestionLengthTemp;
interface PreviewSurveyProps {
survey: TSurvey | Survey;
setActiveQuestionId: (id: string | null) => void;
@@ -24,6 +28,67 @@ interface PreviewSurveyProps {
environment: TEnvironment;
}
let surveyNameTemp;
const previewParentContainerVariant: Variants = {
expanded: {
position: "fixed",
height: "100%",
width: "100%",
backgroundColor: "rgba(0, 0, 0, 0.4)",
backdropFilter: "blur(15px)",
left: 0,
top: 0,
zIndex: 1040,
transition: {
ease: "easeIn",
duration: 0.001,
},
},
shrink: {
display: "none",
position: "fixed",
backgroundColor: "rgba(0, 0, 0, 0.0)",
backdropFilter: "blur(0px)",
transition: {
duration: 0,
},
zIndex: -1,
},
};
const previewScreenVariants: Variants = {
expanded: {
right: "5%",
bottom: "2%",
width: "90%",
height: "90%",
zIndex: 1050,
boxShadow: "0px 4px 5px 4px rgba(169, 169, 169, 0.25)",
transition: {
ease: "easeInOut",
duration: 0.3,
},
},
expanded_with_fixed_positioning: {
zIndex: 1050,
position: "fixed",
right: "5%",
bottom: "5%",
width: "90%",
height: "90%",
transition: {
ease: "easeOut",
duration: 0.2,
},
},
shrink: {
display: "relative",
width: ["83.33%"],
height: ["95%"],
},
};
export default function PreviewSurvey({
setActiveQuestionId,
activeQuestionId,
@@ -33,8 +98,10 @@ export default function PreviewSurvey({
environment,
}: PreviewSurveyProps) {
const [isModalOpen, setIsModalOpen] = useState(true);
const [isFullScreenPreview, setIsFullScreenPreview] = useState(false);
const [widgetSetupCompleted, setWidgetSetupCompleted] = useState(false);
const [previewMode, setPreviewMode] = useState("desktop");
const [previewPosition, setPreviewPosition] = useState("relative");
const ContentRef = useRef<HTMLDivElement | null>(null);
const { productOverwrites } = survey || {};
@@ -62,13 +129,14 @@ export default function PreviewSurvey({
}
}, [activeQuestionId, survey.type, survey, setActiveQuestionId]);
// this useEffect is fo refreshing the survey preview only if user is switching between templates on survey templates page and hence we are checking for survey.id === "someUniqeId1" which is a common Id for all templates
useEffect(() => {
if (survey.questions.length !== surveyQuestionLengthTemp) {
if (survey.name !== surveyNameTemp && survey.id === "someUniqueId1") {
resetQuestionProgress();
surveyQuestionLengthTemp = survey.questions.length;
surveyNameTemp = survey.name;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [survey.questions.length]);
}, [survey]);
function resetQuestionProgress() {
let storePreviewMode = previewMode;
@@ -98,7 +166,22 @@ export default function PreviewSurvey({
return (
<div className="flex h-full w-full flex-col items-center justify-items-center">
<div className="relative flex h-[95%] max-h-[95%] w-5/6 items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
<motion.div
variants={previewParentContainerVariant}
className="fixed hidden h-[95%] w-5/6"
animate={isFullScreenPreview ? "expanded" : "shrink"}
/>
<motion.div
layout
variants={previewScreenVariants}
animate={
isFullScreenPreview
? previewPosition === "relative"
? "expanded"
: "expanded_with_fixed_positioning"
: "shrink"
}
className="relative flex h-[95] max-h-[95%] w-5/6 items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
{previewMode === "mobile" && (
<>
<div className="absolute right-0 top-0 m-2">
@@ -152,7 +235,26 @@ export default function PreviewSurvey({
</div>
<p className="ml-4 flex w-full justify-between font-mono text-sm text-slate-400">
{previewType === "modal" ? "Your web app" : "Preview"}
<ResetProgressButton resetQuestionProgress={resetQuestionProgress} />
<div className="flex items-center">
{isFullScreenPreview ? (
<ArrowsPointingInIcon
className="mr-2 h-4 w-4 cursor-pointer"
onClick={() => {
setIsFullScreenPreview(false);
setPreviewPosition("relative");
}}
/>
) : (
<ArrowsPointingOutIcon
className="mr-2 h-4 w-4 cursor-pointer"
onClick={() => {
setIsFullScreenPreview(true);
setTimeout(() => setPreviewPosition("fixed"), 300);
}}
/>
)}
<ResetProgressButton resetQuestionProgress={resetQuestionProgress} />
</div>
</p>
</div>
@@ -172,7 +274,7 @@ export default function PreviewSurvey({
/>
</Modal>
) : (
<div className="flex flex-grow flex-col overflow-y-auto" ref={ContentRef}>
<div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
<div className="flex w-full flex-grow flex-col items-center justify-center bg-white p-4 py-6">
<div className="w-full max-w-md">
<SurveyInline
@@ -189,7 +291,8 @@ export default function PreviewSurvey({
)}
</div>
)}
</div>
</motion.div>
{/* for toggling between mobile and desktop mode */}
<div className="mt-2 flex rounded-full border-2 border-slate-300 p-1">
<TabOption

15
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/LinkModalButton.tsx
View File

@@ -7,7 +7,6 @@ import { useState } from "react";
import clsx from "clsx";
import { TProduct } from "@formbricks/types/v1/product";
import ShareEmbedSurvey from "./ShareEmbedSurvey";
import LinkSingleUseSurveyModal from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/LinkSingleUseSurveyModal";
import { TProfile } from "@formbricks/types/v1/profile";
interface LinkSurveyShareButtonProps {
@@ -16,7 +15,6 @@ interface LinkSurveyShareButtonProps {
surveyBaseUrl: string;
product: TProduct;
profile: TProfile;
singleUseIds?: string[];
}
export default function LinkSurveyShareButton({
@@ -25,7 +23,6 @@ export default function LinkSurveyShareButton({
surveyBaseUrl,
product,
profile,
singleUseIds,
}: LinkSurveyShareButtonProps) {
const [showLinkModal, setShowLinkModal] = useState(false);
const isSingleUse = survey.singleUse?.enabled ?? false;
@@ -38,15 +35,19 @@ export default function LinkSurveyShareButton({
"border border-slate-300 bg-white px-2 hover:bg-slate-100 focus:bg-slate-100 lg:px-6",
className
)}
onClick={() => setShowLinkModal(true)}>
onClick={() => {
setShowLinkModal(true);
}}>
<ShareIcon className="h-5 w-5" />
</Button>
{showLinkModal && isSingleUse && singleUseIds ? (
<LinkSingleUseSurveyModal
{showLinkModal && isSingleUse ? (
<ShareEmbedSurvey
survey={survey}
open={showLinkModal}
setOpen={setShowLinkModal}
singleUseIds={singleUseIds}
product={product}
surveyBaseUrl={surveyBaseUrl}
profile={profile}
/>
) : (
<ShareEmbedSurvey

149
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/LinkSingleUseSurveyModal.tsx
View File

@@ -1,35 +1,47 @@
"use client";
import { Button, Dialog, DialogContent } from "@formbricks/ui";
import { TSurvey } from "@formbricks/types/v1/surveys";
import { ArrowPathIcon, CheckIcon } from "@heroicons/react/24/outline";
import { CheckCircleIcon, DocumentDuplicateIcon, EyeIcon } from "@heroicons/react/24/solid";
import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { generateSingleUseIdAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/actions";
import { truncateMiddle } from "@/lib/utils";
import { cn } from "@formbricks/lib/cn";
import { useRouter } from "next/navigation";
import { TSurvey } from "@formbricks/types/v1/surveys";
import { Button } from "@formbricks/ui";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
import { DocumentDuplicateIcon, EyeIcon } from "@heroicons/react/24/solid";
import { useEffect, useRef, useState } from "react";
import toast from "react-hot-toast";
interface LinkSingleUseSurveyModalProps {
survey: TSurvey;
open: boolean;
setOpen: (open: boolean) => void;
singleUseIds: string[];
surveyBaseUrl: string;
}
export default function LinkSingleUseSurveyModal({
survey,
open,
setOpen,
singleUseIds,
}: LinkSingleUseSurveyModalProps) {
const defaultSurveyUrl = `${window.location.protocol}//${window.location.host}/s/${survey.id}`;
export default function LinkSingleUseSurveyModal({ survey, surveyBaseUrl }: LinkSingleUseSurveyModalProps) {
const [singleUseIds, setSingleUseIds] = useState<string[] | null>(null);
useEffect(() => {
fetchSingleUseIds();
}, [survey.singleUse?.isEncrypted]);
const fetchSingleUseIds = async () => {
const ids = await generateSingleUseIds(survey.singleUse?.isEncrypted ?? false);
setSingleUseIds(ids);
};
const generateSingleUseIds = async (isEncrypted: boolean) => {
const promises = Array(7)
.fill(null)
.map(() => generateSingleUseIdAction(isEncrypted));
const ids = await Promise.all(promises);
return ids;
};
const defaultSurveyUrl = `${surveyBaseUrl}/${survey.id}`;
const [selectedSingleUseIds, setSelectedSingleIds] = useState<number[]>([]);
const linkTextRef = useRef<HTMLDivElement>(null);
const router = useRouter();
const handleLinkOnClick = (index: number) => {
if (!singleUseIds) return;
setSelectedSingleIds([...selectedSingleUseIds, index]);
const surveyUrl = `${defaultSurveyUrl}?suId=${singleUseIds[index]}`;
navigator.clipboard.writeText(surveyUrl);
@@ -37,41 +49,54 @@ export default function LinkSingleUseSurveyModal({
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="bottom-0 max-w-sm bg-white p-4 sm:bottom-auto sm:max-w-xl sm:p-6">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-teal-100">
<CheckIcon className="h-6 w-6 text-teal-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-semibold leading-6 text-gray-900">Your survey is ready!</h3>
<div className="mt-4">
<p className="text-sm text-gray-500">
Here are 5 single use links to let people answer your survey:
</p>
<div ref={linkTextRef}>
{singleUseIds.map((singleUseId, index) => {
const isSelected = selectedSingleUseIds.includes(index);
return (
<div
key={singleUseId}
className={cn(
"row relative mt-3 flex max-w-full cursor-pointer items-center justify-between overflow-auto rounded-lg border border-slate-300 bg-slate-50 px-8 py-4 text-left text-slate-800 transition-all duration-200 ease-in-out hover:border-slate-500",
isSelected && "border-slate-200 text-slate-400 hover:border-slate-200"
)}
onClick={() => {
if (!isSelected) {
handleLinkOnClick(index);
}
}}>
<span>{truncateMiddle(`${defaultSurveyUrl}?suId=${singleUseId}`, 48)}</span>
{isSelected ? (
<CheckCircleIcon className="ml-4 h-4 w-4" />
) : (
<DocumentDuplicateIcon className="ml-4 h-4 w-4" />
)}
</div>
);
})}
<>
{singleUseIds && (
<div className="w-full">
<div className="flex justify-end">
<Button
variant="darkCTA"
title="Preview survey"
aria-label="Preview survey"
className="flex w-fit justify-center"
href={`${defaultSurveyUrl}?suId=${singleUseIds[0]}&preview=true`}
target="_blank"
EndIcon={EyeIcon}>
Preview Survey
</Button>
</div>
<div className="my-4 border-t border-slate-300 pb-2 pt-4">
<p className="mb-3 font-semibold text-slate-800">Single Use Links</p>
<div ref={linkTextRef} className="min flex flex-col space-y-4">
{singleUseIds &&
singleUseIds.map((singleUseId, index) => {
const isSelected = selectedSingleUseIds.includes(index);
return (
<div className="flex h-fit justify-center p-0">
<div
key={singleUseId}
className={cn(
"row relative flex w-full cursor-pointer items-center justify-between overflow-hidden rounded-lg border border-slate-300 bg-white px-6 py-2 text-left text-slate-800 transition-all duration-200 ease-in-out hover:border-slate-500",
isSelected && "border-slate-200 text-slate-400 hover:border-slate-200"
)}
onClick={() => {
if (!isSelected) {
handleLinkOnClick(index);
}
}}>
<span>{truncateMiddle(`${defaultSurveyUrl}?suId=${singleUseId}`, 48)}</span>
</div>
<div className="ml-2 min-h-full">
<Button
variant="secondary"
className="m-0 my-0 h-full w-full overflow-hidden whitespace-pre text-center"
onClick={() => handleLinkOnClick(index)}>
{isSelected ? "Copied" : " Copy "}
</Button>
</div>
</div>
);
})}
</div>
</div>
<div className="mt-4 flex flex-col justify-center gap-2 sm:flex-row sm:justify-end">
@@ -81,7 +106,7 @@ export default function LinkSingleUseSurveyModal({
aria-label="Generate new single-use survey link"
className="flex justify-center"
onClick={() => {
router.refresh();
fetchSingleUseIds();
setSelectedSingleIds([]);
toast.success("New survey links generated!");
}}
@@ -102,21 +127,11 @@ export default function LinkSingleUseSurveyModal({
aria-label="Copy all survey links to clipboard"
className="flex justify-center"
EndIcon={DocumentDuplicateIcon}>
Copy 5 URLs
</Button>
<Button
variant="darkCTA"
title="Preview survey"
aria-label="Preview survey"
className="flex justify-center"
href={`${defaultSurveyUrl}?suId=${singleUseIds[0]}&preview=true`}
target="_blank"
EndIcon={EyeIcon}>
Preview
Copy all URLs
</Button>
</div>
</div>
</DialogContent>
</Dialog>
)}
</>
);
}

22
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
View File

@@ -3,6 +3,7 @@
import LinkTab from "./shareEmbedTabs/LinkTab";
import EmailTab from "./shareEmbedTabs/EmailTab";
import WebpageTab from "./shareEmbedTabs/WebpageTab";
import LinkSingleUseSurveyModal from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/LinkSingleUseSurveyModal";
import { useMemo, useState } from "react";
import { TProduct } from "@formbricks/types/v1/product";
import { TSurvey } from "@formbricks/types/v1/surveys";
@@ -19,7 +20,6 @@ interface ShareEmbedSurveyProps {
product: TProduct;
profile: TProfile;
}
export default function ShareEmbedSurvey({
survey,
open,
@@ -29,14 +29,24 @@ export default function ShareEmbedSurvey({
profile,
}: ShareEmbedSurveyProps) {
const surveyUrl = useMemo(() => surveyBaseUrl + survey.id, [survey]);
const isSingleUseLinkSurvey = survey.singleUse?.enabled;
const { email } = profile;
const { brandColor } = product;
const tabs = [
{ id: "link", label: `${isSingleUseLinkSurvey ? "Single Use Links" : "Share the Link"}`, icon: LinkIcon },
{ id: "email", label: "Embed in an Email", icon: EnvelopeIcon },
{ id: "webpage", label: "Embed in a Web Page", icon: CodeBracketIcon },
];
const [activeId, setActiveId] = useState(tabs[0].id);
const componentMap = {
link: <LinkTab surveyUrl={surveyUrl} survey={survey} brandColor={brandColor} />,
link: isSingleUseLinkSurvey ? (
<LinkSingleUseSurveyModal survey={survey} surveyBaseUrl={surveyBaseUrl} />
) : (
<LinkTab surveyUrl={surveyUrl} survey={survey} brandColor={brandColor} />
),
email: <EmailTab survey={survey} surveyUrl={surveyUrl} email={email} brandColor={brandColor} />,
webpage: <WebpageTab surveyUrl={surveyUrl} />,
};
@@ -99,9 +109,3 @@ export default function ShareEmbedSurvey({
</Dialog>
);
}
const tabs = [
{ id: "link", label: "Share the Link", icon: LinkIcon },
{ id: "email", label: "Embed in an Email", icon: EnvelopeIcon },
{ id: "webpage", label: "Embed in a Web Page", icon: CodeBracketIcon },
];

29
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage.tsx
View File

@@ -7,7 +7,6 @@ import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import ShareEmbedSurvey from "./ShareEmbedSurvey";
import { TProduct } from "@formbricks/types/v1/product";
import LinkSingleUseSurveyModal from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/LinkSingleUseSurveyModal";
import { TEnvironment } from "@formbricks/types/v1/environment";
import { TProfile } from "@formbricks/types/v1/profile";
@@ -26,10 +25,7 @@ export default function SuccessMessage({
surveyBaseUrl,
product,
profile,
singleUseIds,
}: SummaryMetadataProps) {
const isSingleUse = survey.singleUse?.enabled ?? false;
const searchParams = useSearchParams();
const [showLinkModal, setShowLinkModal] = useState(false);
const [confetti, setConfetti] = useState(false);
@@ -60,23 +56,14 @@ export default function SuccessMessage({
return (
<>
{showLinkModal && isSingleUse && singleUseIds ? (
<LinkSingleUseSurveyModal
survey={survey}
open={showLinkModal}
setOpen={setShowLinkModal}
singleUseIds={singleUseIds}
/>
) : (
<ShareEmbedSurvey
survey={survey}
open={showLinkModal}
setOpen={setShowLinkModal}
surveyBaseUrl={surveyBaseUrl}
product={product}
profile={profile}
/>
)}
<ShareEmbedSurvey
survey={survey}
open={showLinkModal}
setOpen={setShowLinkModal}
surveyBaseUrl={surveyBaseUrl}
product={product}
profile={profile}
/>
{confetti && <Confetti />}
</>
);

3
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx
View File

@@ -23,7 +23,6 @@ interface SummaryPageProps {
surveyId: string;
responses: TResponse[];
surveyBaseUrl: string;
singleUseIds?: string[];
product: TProduct;
profile: TProfile;
environmentTags: TTag[];
@@ -35,7 +34,6 @@ const SummaryPage = ({
surveyId,
responses,
surveyBaseUrl,
singleUseIds,
product,
profile,
environmentTags,
@@ -61,7 +59,6 @@ const SummaryPage = ({
survey={survey}
surveyId={surveyId}
surveyBaseUrl={surveyBaseUrl}
singleUseIds={singleUseIds}
product={product}
profile={profile}
/>

7
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/actions.ts Normal file
View File

@@ -0,0 +1,7 @@
"use server";
import { generateSurveySingleUseId } from "@/lib/singleUseSurveys";
export async function generateSingleUseIdAction(isEncrypted: boolean): Promise<string> {
const singleUseId = generateSurveySingleUseId(isEncrypted);
return singleUseId;
}

16
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx
View File

@@ -9,17 +9,8 @@ import { getEnvironment } from "@formbricks/lib/environment/service";
import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
import { getTagsByEnvironmentId } from "@formbricks/lib/tag/service";
import { getServerSession } from "next-auth";
import { generateSurveySingleUseId } from "@/lib/singleUseSurveys";
import { getProfile } from "@formbricks/lib/profile/service";
const generateSingleUseIds = (isEncrypted: boolean) => {
return Array(5)
.fill(null)
.map(() => {
return generateSurveySingleUseId(isEncrypted);
});
};
export default async function Page({ params }) {
const session = await getServerSession(authOptions);
if (!session) {
@@ -30,12 +21,6 @@ export default async function Page({ params }) {
getAnalysisData(params.surveyId, params.environmentId),
getEnvironment(params.environmentId),
]);
const isSingleUseSurvey = survey.singleUse?.enabled ?? false;
let singleUseIds: string[] | undefined = undefined;
if (isSingleUseSurvey) {
singleUseIds = generateSingleUseIds(survey.singleUse?.isEncrypted ?? false);
}
if (!environment) {
throw new Error("Environment not found");
@@ -62,7 +47,6 @@ export default async function Page({ params }) {
survey={survey}
surveyId={params.surveyId}
surveyBaseUrl={SURVEY_BASE_URL}
singleUseIds={isSingleUseSurvey ? singleUseIds : undefined}
product={product}
profile={profile}
environmentTags={tags}

5
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/SummaryHeader.tsx
View File

@@ -33,7 +33,6 @@ interface SummaryHeaderProps {
surveyBaseUrl: string;
product: TProduct;
profile: TProfile;
singleUseIds?: string[];
}
const SummaryHeader = ({
surveyId,
@@ -42,7 +41,6 @@ const SummaryHeader = ({
surveyBaseUrl,
product,
profile,
singleUseIds,
}: SummaryHeaderProps) => {
const router = useRouter();
@@ -61,7 +59,6 @@ const SummaryHeader = ({
<LinkSurveyShareButton
survey={survey}
surveyBaseUrl={surveyBaseUrl}
singleUseIds={singleUseIds}
product={product}
profile={profile}
/>
@@ -93,7 +90,6 @@ const SummaryHeader = ({
surveyBaseUrl={surveyBaseUrl}
product={product}
profile={profile}
singleUseIds={singleUseIds}
/>
<DropdownMenuSeparator />
</>
@@ -181,7 +177,6 @@ const SummaryHeader = ({
surveyBaseUrl={surveyBaseUrl}
product={product}
profile={profile}
singleUseIds={singleUseIds}
/>
</div>
);

3
apps/web/package.json
View File

@@ -32,7 +32,8 @@
"@t3-oss/env-nextjs": "^0.7.0",
"bcryptjs": "^2.4.3",
"encoding": "^0.1.13",
"eslint-config-next": "^13.5.4",
"eslint-config-next": "^13.5.3",
"framer-motion": "10.16.4",
"googleapis": "^126.0.1",
"jsonwebtoken": "^9.0.2",
"lodash": "^4.17.21",

2
megaprompt.md
View File

@@ -1,6 +1,6 @@
Forget all previous instructions. You are the coding assistant "Formbricks Assistant".
- You help programmers find a solution to their questions and coding challenges. You give very brief an concise answers unless I the user prompt you to elaborate.
- You help programmers find a solution to their questions and coding challenges. You give very brief and concise answers unless I the user prompt you to elaborate.
- Formbricks is the open-source go-to solution for in-product micro-surveys that is supercharging our users product experience!
- Formbricks uses Typescript, Next.Js, Next-auth, Prisma, TailwindCss, Radix UI
- When you are asked to generate documentation please have a playful but succinct writing style and return everything in escaped markdown.

79
pnpm-lock.yaml generated
View File

@@ -28,7 +28,7 @@ importers:
version: 3.12.7
turbo:
specifier: latest
version: 1.10.15
version: 1.10.12
apps/demo:
dependencies:
@@ -287,8 +287,11 @@ importers:
specifier: ^0.1.13
version: 0.1.13
eslint-config-next:
specifier: ^13.5.4
specifier: ^13.5.3
version: 13.5.4(eslint@8.50.0)(typescript@5.2.2)
framer-motion:
specifier: 10.16.4
version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
googleapis:
specifier: ^126.0.1
version: 126.0.1(encoding@0.1.13)
@@ -456,7 +459,7 @@ importers:
version: 9.0.0(eslint@8.50.0)
eslint-config-turbo:
specifier: latest
version: 1.10.15(eslint@8.50.0)
version: 1.10.12(eslint@8.50.0)
eslint-plugin-react:
specifier: 7.33.2
version: 7.33.2(eslint@8.50.0)
@@ -12530,13 +12533,13 @@ packages:
resolution: {integrity: sha512-NB/L/1Y30qyJcG5xZxCJKW/+bqyj+llbcCwo9DEz8bESIP0SLTOQ8T1DWCCFc+wJ61AMEstj4511PSScqMMfCw==}
dev: true
/eslint-config-turbo@1.10.15(eslint@8.50.0):
resolution: {integrity: sha512-76mpx2x818JZE26euen14utYcFDxOahZ9NaWA+6Xa4pY2ezVKVschuOxS96EQz3o3ZRSmcgBOapw/gHbN+EKxQ==}
/eslint-config-turbo@1.10.12(eslint@8.50.0):
resolution: {integrity: sha512-z3jfh+D7UGYlzMWGh+Kqz++hf8LOE96q3o5R8X4HTjmxaBWlLAWG+0Ounr38h+JLR2TJno0hU9zfzoPNkR9BdA==}
peerDependencies:
eslint: '>6.6.0'
dependencies:
eslint: 8.50.0
eslint-plugin-turbo: 1.10.15(eslint@8.50.0)
eslint-plugin-turbo: 1.10.12(eslint@8.50.0)
dev: true
/eslint-import-resolver-node@0.3.9:
@@ -12742,8 +12745,8 @@ packages:
semver: 6.3.1
string.prototype.matchall: 4.0.8
/eslint-plugin-turbo@1.10.15(eslint@8.50.0):
resolution: {integrity: sha512-Tv4QSKV/U56qGcTqS/UgOvb9HcKFmWOQcVh3HEaj7of94lfaENgfrtK48E2CckQf7amhKs1i+imhCsNCKjkQyA==}
/eslint-plugin-turbo@1.10.12(eslint@8.50.0):
resolution: {integrity: sha512-uNbdj+ohZaYo4tFJ6dStRXu2FZigwulR1b3URPXe0Q8YaE7thuekKNP+54CHtZPH9Zey9dmDx5btAQl9mfzGOw==}
peerDependencies:
eslint: '>6.6.0'
dependencies:
@@ -19720,23 +19723,6 @@ packages:
postcss: 8.4.27
yaml: 2.3.1
/postcss-load-config@4.0.1(postcss@8.4.31):
resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
engines: {node: '>= 14'}
peerDependencies:
postcss: '>=8.0.9'
ts-node: '>=9.0.0'
peerDependenciesMeta:
postcss:
optional: true
ts-node:
optional: true
dependencies:
lilconfig: 2.1.0
postcss: 8.4.31
yaml: 2.3.1
dev: true
/postcss-loader@4.3.0(postcss@8.4.27)(webpack@4.46.0):
resolution: {integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==}
engines: {node: '>= 10.13.0'}
@@ -24177,7 +24163,7 @@ packages:
execa: 5.1.1
globby: 11.1.0
joycon: 3.1.1
postcss-load-config: 4.0.1(postcss@8.4.31)
postcss-load-config: 4.0.1(postcss@8.4.27)
resolve-from: 5.0.0
rollup: 3.29.4
source-map: 0.8.0-beta.0
@@ -24233,64 +24219,65 @@ packages:
dependencies:
safe-buffer: 5.2.1
/turbo-darwin-64@1.10.15:
resolution: {integrity: sha512-Sik5uogjkRTe1XVP9TC2GryEMOJCaKE2pM/O9uLn4koQDnWKGcLQv+mDU+H+9DXvKLnJnKCD18OVRkwK5tdpoA==}
/turbo-darwin-64@1.10.12:
resolution: {integrity: sha512-vmDfGVPl5/aFenAbOj3eOx3ePNcWVUyZwYr7taRl0ZBbmv2TzjRiFotO4vrKCiTVnbqjQqAFQWY2ugbqCI1kOQ==}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/turbo-darwin-arm64@1.10.15:
resolution: {integrity: sha512-xwqyFDYUcl2xwXyGPmHkmgnNm4Cy0oNzMpMOBGRr5x64SErS7QQLR4VHb0ubiR+VAb8M+ECPklU6vD1Gm+wekg==}
/turbo-darwin-arm64@1.10.12:
resolution: {integrity: sha512-3JliEESLNX2s7g54SOBqqkqJ7UhcOGkS0ywMr5SNuvF6kWVTbuUq7uBU/sVbGq8RwvK1ONlhPvJne5MUqBCTCQ==}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/turbo-linux-64@1.10.15:
resolution: {integrity: sha512-dM07SiO3RMAJ09Z+uB2LNUSkPp3I1IMF8goH5eLj+d8Kkwoxd/+qbUZOj9RvInyxU/IhlnO9w3PGd3Hp14m/nA==}
/turbo-linux-64@1.10.12:
resolution: {integrity: sha512-siYhgeX0DidIfHSgCR95b8xPee9enKSOjCzx7EjTLmPqPaCiVebRYvbOIYdQWRqiaKh9yfhUtFmtMOMScUf1gg==}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/turbo-linux-arm64@1.10.15:
resolution: {integrity: sha512-MkzKLkKYKyrz4lwfjNXH8aTny5+Hmiu4SFBZbx+5C0vOlyp6fV5jZANDBvLXWiDDL4DSEAuCEK/2cmN6FVH1ow==}
/turbo-linux-arm64@1.10.12:
resolution: {integrity: sha512-K/ZhvD9l4SslclaMkTiIrnfcACgos79YcAo4kwc8bnMQaKuUeRpM15sxLpZp3xDjDg8EY93vsKyjaOhdFG2UbA==}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/turbo-windows-64@1.10.15:
resolution: {integrity: sha512-3TdVU+WEH9ThvQGwV3ieX/XHebtYNHv9HARHauPwmVj3kakoALkpGxLclkHFBLdLKkqDvmHmXtcsfs6cXXRHJg==}
/turbo-windows-64@1.10.12:
resolution: {integrity: sha512-7FSgSwvktWDNOqV65l9AbZwcoueAILeE4L7JvjauNASAjjbuzXGCEq5uN8AQU3U5BOFj4TdXrVmO2dX+lLu8Zg==}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/turbo-windows-arm64@1.10.15:
resolution: {integrity: sha512-l+7UOBCbfadvPMYsX08hyLD+UIoAkg6ojfH+E8aud3gcA1padpjCJTh9gMpm3QdMbKwZteT5uUM+wyi6Rbbyww==}
/turbo-windows-arm64@1.10.12:
resolution: {integrity: sha512-gCNXF52dwom1HLY9ry/cneBPOKTBHhzpqhMylcyvJP0vp9zeMQQkt6yjYv+6QdnmELC92CtKNp2FsNZo+z0pyw==}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/turbo@1.10.15:
resolution: {integrity: sha512-mKKkqsuDAQy1wCCIjCdG+jOCwUflhckDMSRoeBPcIL/CnCl7c5yRDFe7SyaXloUUkt4tUR0rvNIhVCcT7YeQpg==}
/turbo@1.10.12:
resolution: {integrity: sha512-WM3+jTfQWnB9W208pmP4oeehZcC6JQNlydb/ZHMRrhmQa+htGhWLCzd6Q9rLe0MwZLPpSPFV2/bN5egCLyoKjQ==}
hasBin: true
requiresBuild: true
optionalDependencies:
turbo-darwin-64: 1.10.15
turbo-darwin-arm64: 1.10.15
turbo-linux-64: 1.10.15
turbo-linux-arm64: 1.10.15
turbo-windows-64: 1.10.15
turbo-windows-arm64: 1.10.15
turbo-darwin-64: 1.10.12
turbo-darwin-arm64: 1.10.12
turbo-linux-64: 1.10.12
turbo-linux-arm64: 1.10.12
turbo-windows-64: 1.10.12
turbo-windows-arm64: 1.10.12
dev: true
/tw-to-css@0.0.11: