mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 18:30:32 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

update feedback button, snappy waitlist

Browse Source
This commit is contained in:
knugget
2023-01-26 14:23:26 +01:00
parent bbe573ec6f
commit 6cbd58bc2d
4 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/formbricks-com/components/engine/SurveyPage.tsx
View File

@@ -94,6 +94,7 @@ export function SurveyPage({
setSubmission(updatedSubmission);
try {
sendToFormbricks(data);
await waitForAnimation(400);
setSubmittingPage(false);
onSubmit(updatedSubmission);
plausible(`waitlistSubmitPage-${page.id}`);
@@ -103,6 +104,9 @@ export function SurveyPage({
}
};
// set timeout promise
const waitForAnimation = (ms: number) => new Promise((res) => setTimeout(res, ms));
const handleSubmitElement = () => {
if (page.config?.autoSubmit && page.elements.length == 1) {
formRef.current?.requestSubmit();
@@ -116,7 +120,9 @@ export function SurveyPage({
{page.elements.map((element) => {
const ElementComponent = element.component;
return (
<div key={element.id} className={clsx(submittingPage && "animate-pulse")}>
<div
key={element.id}
className={clsx(submittingPage && "animate-[pulse_0.8s_ease-out_infinite]")}>
{element.name ? (
<ElementComponent
element={element}

8
apps/formbricks-com/components/shared/FeedbackButton.tsx
View File

@@ -49,8 +49,8 @@ export default function FeedbackButton() {
};`}</Script>
<div
className={clsx(
"xs:right-0 xs:top-1/2 xs:w-[26rem] xs:-translate-y-1/2 xs:h-[22rem] fixed bottom-0 z-50 h-96 w-full transition-transform duration-500 ease-in-out",
isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-[21.2rem] translate-y-[21rem]"
"xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-fit w-full transition-all duration-500 ease-in-out",
isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-full xs:-mr-1 translate-y-full"
)}>
<div
className="xs:flex-row flex h-full flex-col"
@@ -59,7 +59,7 @@ export default function FeedbackButton() {
}}
ref={feedbackRef}>
<button
className="bg-brand-dark xs:-rotate-90 xs:-mr-7 xs:my-auto z-30 mx-auto -mb-2 max-h-16 w-32 rounded p-4 font-medium text-white"
className="xs:-rotate-90 xs:top-1/2 xs:-left-[5.75rem] xs:-translate-y-1/2 xs:-translate-x-0 xs:w-32 xs:p-4 bg-brand-dark absolute left-1/2 w-28 -translate-x-1/2 -translate-y-full rounded-t-lg p-3 font-medium text-white"
onClick={() => {
if (!isOpen) {
plausible("openFeedback");
@@ -73,7 +73,7 @@ export default function FeedbackButton() {
{isOpen ? "Close" : "Feedback"}
</button>
<div
className="z-40 h-full w-full overflow-hidden rounded-lg bg-[#f8fafc] shadow-lg"
className="xs:rounded-bl-lg xs:rounded-tr-none h-full w-full overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg bg-slate-50 shadow-lg"
id="formbricks-feedback-wrapper"></div>
</div>
</div>

2
apps/formbricks-com/pages/waitlist.tsx
View File

@@ -52,7 +52,7 @@ const WaitlistPage = () => (
process.env.NODE_ENV === "production" ? "https://app.formbricks.com" : "http://localhost:3000"
}
formId={
process.env.NODE_ENV === "production" ? "cld37mt2i0000ld08p9q572bc" : "cld2xwo2r000cu0mdkju2nj96"
process.env.NODE_ENV === "production" ? "cld37mt2i0000ld08p9q572bc" : "cldd3mrbs0007u0w0g2m6verd"
}
survey={{
config: {

8
apps/web/src/components/FeedbackButton.tsx
View File

@@ -67,8 +67,8 @@ export function FeedbackButton() {
<div
className={clsx(
"xs:right-0 xs:top-1/2 xs:w-[26rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-96 w-full transition-transform duration-500 ease-in-out",
isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-[21.3rem] translate-y-[21.5rem]"
"xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-fit w-full transition-all duration-500 ease-in-out",
isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-full xs:-mr-1 translate-y-full"
)}>
<div
className="xs:flex-row flex h-full flex-col"
@@ -77,7 +77,7 @@ export function FeedbackButton() {
}}
ref={feedbackRef}>
<button
className="bg-brand xs:-rotate-90 xs:-mr-8 xs:my-auto z-30 mx-auto -mb-1 max-h-16 w-32 rounded-t p-3 text-sm font-medium text-white"
className="xs:-rotate-90 xs:top-1/2 xs:-left-[5.75rem] xs:-translate-y-1/2 xs:-translate-x-0 xs:w-32 xs:p-4 bg-brand-dark absolute left-1/2 w-28 -translate-x-1/2 -translate-y-full rounded-t-lg p-3 font-medium text-white"
onClick={() => {
if (!isOpen) {
if (window) {
@@ -90,7 +90,7 @@ export function FeedbackButton() {
{isOpen ? "Close" : "Feedback"}
</button>
<div
className="z-40 h-full w-full overflow-hidden rounded-l-lg bg-[#f8fafc] shadow-lg"
className="xs:rounded-bl-lg xs:rounded-tr-none h-full w-full overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg bg-slate-50 shadow-lg"
id="formbricks-feedback-wrapper"></div>
</div>
</div>