From 9f2487cabfda65ba724fe7b2fa401356e8ff813d Mon Sep 17 00:00:00 2001 From: Matti Nannt Date: Wed, 8 Feb 2023 19:29:30 +0100 Subject: [PATCH] Add a PMF demo dashboard at /demo (#195) * add pmf demo page with sample submissions * add customer demo view --- .../components/feedback/FeedbackModal.tsx | 1 - apps/web/next.config.js | 9 + .../customers/SingleCustomerPage.tsx | 9 +- .../src/components/forms/pmf/PMFTimeline.tsx | 4 +- .../forms/pmf/SuperhumanApproach.tsx | 13 +- .../integrations/IntegrationSurveys.tsx | 3 - apps/web/src/components/layout/LayoutDemo.tsx | 118 ++++++ .../src/demo-data/customers-demo-customer.ts | 387 ++++++++++++++++++ apps/web/src/demo-data/customers.ts | 16 + .../demo-data/forms-demo-pmf-submissions.ts | 5 + apps/web/src/demo-data/forms-demo-pmf.ts | 124 ++++++ .../src/demo-data/pipelines-demo-pipeline.ts | 15 + apps/web/src/demo-data/pipelines.ts | 17 + apps/web/src/demo-data/pmf-submissions.ts | 83 ++++ apps/web/src/lib/demo.ts | 20 + apps/web/src/lib/utils.ts | 6 + .../customers/[customerId]/index.tsx | 10 + .../[organisationId]/forms/[formId]/index.tsx | 10 + packages/charts/src/charts/Pie.tsx | 11 +- 19 files changed, 843 insertions(+), 18 deletions(-) create mode 100644 apps/web/src/components/layout/LayoutDemo.tsx create mode 100644 apps/web/src/demo-data/customers-demo-customer.ts create mode 100644 apps/web/src/demo-data/customers.ts create mode 100644 apps/web/src/demo-data/forms-demo-pmf-submissions.ts create mode 100644 apps/web/src/demo-data/forms-demo-pmf.ts create mode 100644 apps/web/src/demo-data/pipelines-demo-pipeline.ts create mode 100644 apps/web/src/demo-data/pipelines.ts create mode 100644 apps/web/src/demo-data/pmf-submissions.ts create mode 100644 apps/web/src/lib/demo.ts create mode 100644 apps/web/src/pages/demo/organisations/[organisationId]/customers/[customerId]/index.tsx create mode 100644 apps/web/src/pages/demo/organisations/[organisationId]/forms/[formId]/index.tsx diff --git a/apps/demo/components/feedback/FeedbackModal.tsx b/apps/demo/components/feedback/FeedbackModal.tsx index 715861cfca..4812dbb4b1 100644 --- a/apps/demo/components/feedback/FeedbackModal.tsx +++ b/apps/demo/components/feedback/FeedbackModal.tsx @@ -140,7 +140,6 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb }, body: JSON.stringify(body), }); - console.log("submission sent!"); e.target.reset(); setFeedbackSent(true); }}> diff --git a/apps/web/next.config.js b/apps/web/next.config.js index ce624e9629..79c3ee35a7 100644 --- a/apps/web/next.config.js +++ b/apps/web/next.config.js @@ -45,6 +45,15 @@ const nextConfig = { }, ]; }, + async redirects() { + return [ + { + source: "/demo", + destination: "/demo/organisations/demo-organisation/forms/demo-pmf", + permanent: false, + }, + ]; + }, }; if (process.env.NEXT_PUBLIC_SENTRY_DSN) { diff --git a/apps/web/src/components/customers/SingleCustomerPage.tsx b/apps/web/src/components/customers/SingleCustomerPage.tsx index 99c5691d92..36d2469174 100644 --- a/apps/web/src/components/customers/SingleCustomerPage.tsx +++ b/apps/web/src/components/customers/SingleCustomerPage.tsx @@ -7,7 +7,6 @@ import { convertDateTimeString, onlyUnique, parseUserAgent } from "@/lib/utils"; import { BackIcon } from "@formbricks/ui"; import { InboxIcon } from "@heroicons/react/24/outline"; import clsx from "clsx"; -import Link from "next/link"; import { useRouter } from "next/router"; import { useMemo } from "react"; import EmptyPageFiller from "../EmptyPageFiller"; @@ -39,12 +38,10 @@ export default function SingleCustomerPage() { return (
- +

{customer.email}

diff --git a/apps/web/src/components/forms/pmf/PMFTimeline.tsx b/apps/web/src/components/forms/pmf/PMFTimeline.tsx index aa5eb31ba7..a4e3fccb82 100644 --- a/apps/web/src/components/forms/pmf/PMFTimeline.tsx +++ b/apps/web/src/components/forms/pmf/PMFTimeline.tsx @@ -136,7 +136,9 @@ export default function PMFTimeline({ submissions }) { {submission.customerEmail ? ( + href={`${form.id.startsWith("demo") ? "/demo" : ""}/organisations/${ + router.query.organisationId + }/customers/${submission.customerEmail}`}> {submission.customerEmail} ) : ( diff --git a/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx b/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx index 8b5a850d27..2520092d5c 100644 --- a/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx +++ b/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx @@ -7,13 +7,14 @@ import { useForm } from "@/lib/forms"; import { getOptionLabelMap, useSubmissions } from "@/lib/submissions"; import { Pie } from "@formbricks/charts"; import { NotDisappointedIcon, SomewhatDisappointedIcon, VeryDisappointedIcon } from "@formbricks/ui"; -import { InformationCircleIcon } from "@heroicons/react/20/solid"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/router"; import { useMemo, useState } from "react"; import FilterNavigation from "../shared/FilterNavigation"; +const limitFields = ["userSegment"]; + export default function SegmentResults() { const router = useRouter(); const [filteredSubmissions, setFilteredSubmissions] = useState([]); @@ -61,7 +62,7 @@ export default function SegmentResults() {

Tutorials

@@ -113,7 +114,9 @@ export default function SegmentResults() {
-

@@ -171,7 +174,9 @@ export default function SegmentResults() {

-

diff --git a/apps/web/src/components/integrations/IntegrationSurveys.tsx b/apps/web/src/components/integrations/IntegrationSurveys.tsx index 0a7143d516..9440b10f23 100644 --- a/apps/web/src/components/integrations/IntegrationSurveys.tsx +++ b/apps/web/src/components/integrations/IntegrationSurveys.tsx @@ -29,9 +29,6 @@ export const DataInSurvey = () => { process.env.NODE_ENV === "production" ? "cldvn1r6x0002s00gnw01lj40" : "cldvkpx11000019a0aoucngcb" } customer={{ email: session.user.email }} - onFinished={({ submission }) => { - console.log(submission); - }} schema={{ config: { progressBar: false, diff --git a/apps/web/src/components/layout/LayoutDemo.tsx b/apps/web/src/components/layout/LayoutDemo.tsx new file mode 100644 index 0000000000..1740b62437 --- /dev/null +++ b/apps/web/src/components/layout/LayoutDemo.tsx @@ -0,0 +1,118 @@ +"use client"; + +import AvatarPlaceholder from "@/images/avatar-placeholder.png"; +import { Disclosure, Menu, Transition } from "@headlessui/react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; +import Head from "next/head"; +import Image from "next/image"; +import Link from "next/link"; +import { Fragment } from "react"; +import { ToastContainer } from "react-toastify"; +import { Logo } from "../Logo"; + +export default function LayoutDemo({ children }) { + return ( + <> + + Formbricks + + +

+ + {({ open }) => ( + <> +
+
+
+
+ + + +
+
+
+ {/* */} + + {/* Profile dropdown */} + +
+ + Open user menu + Avatar placeholder + +
+ + +
+

Signed in as

+

Demo

+
+ + + +
+
+ {/* Mobile menu button */} + + Open main menu + {open ? ( + +
+
+
+ + +
+
+
+ profile picture +
+
+
Demo User
+
demo@formbricks.com
+
+ {/* */} +
+
+ + + )} + + +
{children}
+ +
+ + ); +} diff --git a/apps/web/src/demo-data/customers-demo-customer.ts b/apps/web/src/demo-data/customers-demo-customer.ts new file mode 100644 index 0000000000..b45e8393e8 --- /dev/null +++ b/apps/web/src/demo-data/customers-demo-customer.ts @@ -0,0 +1,387 @@ +const output = { + email: "user@example.com", + createdAt: "2023-02-03T12:20:58.516Z", + updatedAt: "2023-02-03T12:20:58.516Z", + organisationId: "cldoc9md4000119204dn8i5td", + data: { + name: "John", + }, + submissions: [ + { + id: "cldoi02dh000619vitjyq89n0", + createdAt: "2023-02-03T12:24:00.774Z", + updatedAt: "2023-02-03T12:24:35.356Z", + finished: true, + archived: false, + formId: "cldohxjrl000519viwe8i9d39", + customerEmail: "test@crowd.dev", + customerOrganisationId: "cldoc9md4000119204dn8i5td", + data: { + improvement: "Make it possible to add a note to a transaction", + mainBenefit: "The best is that I can get a quick overview of all my transactions", + userSegment: "founder", + disappointment: "veryDisappointed", + selfSegmentation: "other founders", + }, + meta: { + userAgent: + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36", + }, + form: { + id: "cldohxjrl000519viwe8i9d39", + createdAt: "2023-02-03T12:22:03.346Z", + updatedAt: "2023-02-03T12:22:03.346Z", + type: "pmf", + label: "PMF Demo", + organisationId: "cldoc9md4000119204dn8i5td", + schema: { + pages: [ + { + id: "disappointmentPage", + config: { + autoSubmit: true, + }, + elements: [ + { + id: "disappointment", + name: "disappointment", + type: "radio", + label: "How disappointed would you be if you could no longer use our service?", + options: [ + { + label: "Very disappointed", + value: "veryDisappointed", + }, + { + label: "Somewhat disappointed", + value: "somewhatDisappointed", + }, + { + label: "Not disappointed", + value: "notDisappointed", + }, + ], + }, + ], + }, + { + id: "mainBenefitPage", + elements: [ + { + id: "mainBenefit", + name: "mainBenefit", + type: "text", + label: "What is the main benefit you receive from our service?", + }, + ], + }, + { + id: "userSegmentPage", + config: { + autoSubmit: true, + }, + elements: [ + { + id: "userSegment", + name: "userSegment", + type: "radio", + label: "What is your job title?", + options: [ + { + label: "Founder", + value: "founder", + }, + { + label: "Executive", + value: "executive", + }, + { + label: "Product Manager", + value: "productManager", + }, + { + label: "Product Owner", + value: "productOwner", + }, + { + label: "Software Engineer", + value: "softwareEngineer", + }, + ], + }, + ], + }, + { + id: "improvementPage", + elements: [ + { + id: "improvement", + name: "improvement", + type: "text", + label: "How can we improve our service for you?", + }, + ], + }, + { + id: "selfSegmentationPage", + elements: [ + { + id: "selfSegmentation", + name: "selfSegmentation", + type: "text", + label: "What type of people would benefit most from using our service?", + }, + ], + }, + { + id: "thankYouPage", + elements: [ + { + id: "thankYou", + name: "thankYou", + type: "html", + }, + ], + endScreen: true, + }, + ], + config: {}, + schemaVersion: 1, + }, + }, + }, + { + id: "cldohw5qs000119vi6sv59odw", + createdAt: "2023-02-03T12:20:58.516Z", + updatedAt: "2023-02-03T12:20:58.516Z", + finished: true, + archived: false, + formId: "cldohpx4t000019vijzlf8mgn", + customerEmail: "user@example.com", + customerOrganisationId: "cldoc9md4000119204dn8i5td", + data: { + message: "Really love your new design. Great job guys!", + pageUrl: "http://localhost:3002/feedback-widget", + feedbackType: "compliment", + }, + meta: { + userAgent: + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36", + }, + form: { + id: "cldohpx4t000019vijzlf8mgn", + createdAt: "2023-02-03T12:16:07.422Z", + updatedAt: "2023-02-03T12:16:07.422Z", + type: "feedback", + label: "Feedback Form Demo", + organisationId: "cldoc9md4000119204dn8i5td", + schema: { + pages: [ + { + id: "feedbackTypePage", + elements: [ + { + name: "feedbackType", + type: "radio", + label: "What's on your mind?", + options: [ + { + label: "Idea", + value: "idea", + }, + { + label: "Compliment", + value: "compliment", + }, + { + label: "Bug", + value: "bug", + }, + ], + }, + ], + }, + { + id: "messagePage", + elements: [ + { + name: "message", + type: "textarea", + label: "What's your feedback?", + }, + ], + }, + { + id: "thankYouPage", + elements: [ + { + name: "thankYou", + type: "html", + }, + ], + endScreen: true, + }, + ], + config: {}, + schemaVersion: 1, + }, + }, + }, + { + id: "cldohwtyr000319viwrymradt", + createdAt: "2023-02-03T12:21:29.908Z", + updatedAt: "2023-02-03T12:21:29.908Z", + finished: true, + archived: false, + formId: "cldohpx4t000019vijzlf8mgn", + customerEmail: "user@example.com", + customerOrganisationId: "cldoc9md4000119204dn8i5td", + data: { + message: "Maybe you can add a mobile app so I can check my account balance on the go 😊", + pageUrl: "http://localhost:3002/feedback-widget", + feedbackType: "idea", + }, + meta: { + userAgent: + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36", + }, + form: { + id: "cldohpx4t000019vijzlf8mgn", + createdAt: "2023-02-03T12:16:07.422Z", + updatedAt: "2023-02-03T12:16:07.422Z", + type: "feedback", + label: "Feedback Form Demo", + organisationId: "cldoc9md4000119204dn8i5td", + schema: { + pages: [ + { + id: "feedbackTypePage", + elements: [ + { + name: "feedbackType", + type: "radio", + label: "What's on your mind?", + options: [ + { + label: "Idea", + value: "idea", + }, + { + label: "Compliment", + value: "compliment", + }, + { + label: "Bug", + value: "bug", + }, + ], + }, + ], + }, + { + id: "messagePage", + elements: [ + { + name: "message", + type: "textarea", + label: "What's your feedback?", + }, + ], + }, + { + id: "thankYouPage", + elements: [ + { + name: "thankYou", + type: "html", + }, + ], + endScreen: true, + }, + ], + config: {}, + schemaVersion: 1, + }, + }, + }, + { + id: "cldohx4lk000419vilwqzfcnk", + createdAt: "2023-02-03T12:21:43.688Z", + updatedAt: "2023-02-03T12:21:43.688Z", + finished: true, + archived: false, + formId: "cldohpx4t000019vijzlf8mgn", + customerEmail: "user@example.com", + customerOrganisationId: "cldoc9md4000119204dn8i5td", + data: { + message: 'I get a blank page after clicking on "my profile"', + pageUrl: "http://localhost:3002/feedback-widget", + feedbackType: "bug", + }, + meta: { + userAgent: + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36", + }, + form: { + id: "cldohpx4t000019vijzlf8mgn", + createdAt: "2023-02-03T12:16:07.422Z", + updatedAt: "2023-02-03T12:16:07.422Z", + type: "feedback", + label: "Feedback Form Demo", + organisationId: "cldoc9md4000119204dn8i5td", + schema: { + pages: [ + { + id: "feedbackTypePage", + elements: [ + { + name: "feedbackType", + type: "radio", + label: "What's on your mind?", + options: [ + { + label: "Idea", + value: "idea", + }, + { + label: "Compliment", + value: "compliment", + }, + { + label: "Bug", + value: "bug", + }, + ], + }, + ], + }, + { + id: "messagePage", + elements: [ + { + name: "message", + type: "textarea", + label: "What's your feedback?", + }, + ], + }, + { + id: "thankYouPage", + elements: [ + { + name: "thankYou", + type: "html", + }, + ], + endScreen: true, + }, + ], + config: {}, + schemaVersion: 1, + }, + }, + }, + ], +}; + +export default output; diff --git a/apps/web/src/demo-data/customers.ts b/apps/web/src/demo-data/customers.ts new file mode 100644 index 0000000000..7c71f6f65d --- /dev/null +++ b/apps/web/src/demo-data/customers.ts @@ -0,0 +1,16 @@ +const output = [ + { + email: "user@example.com", + createdAt: "2023-02-03T12:20:58.516Z", + updatedAt: "2023-02-03T12:20:58.516Z", + organisationId: "demo-organisation", + data: { + name: "Matti", + }, + _count: { + submissions: 5, + }, + }, +]; + +export default output; diff --git a/apps/web/src/demo-data/forms-demo-pmf-submissions.ts b/apps/web/src/demo-data/forms-demo-pmf-submissions.ts new file mode 100644 index 0000000000..5f540b8d37 --- /dev/null +++ b/apps/web/src/demo-data/forms-demo-pmf-submissions.ts @@ -0,0 +1,5 @@ +import { getPmfSubmissions } from "./pmf-submissions"; + +const output = getPmfSubmissions(); + +export default output; diff --git a/apps/web/src/demo-data/forms-demo-pmf.ts b/apps/web/src/demo-data/forms-demo-pmf.ts new file mode 100644 index 0000000000..e686ebc4d0 --- /dev/null +++ b/apps/web/src/demo-data/forms-demo-pmf.ts @@ -0,0 +1,124 @@ +const output = { + id: "demo-pmf", + createdAt: "2023-02-03T12:22:03.346Z", + updatedAt: "2023-02-03T12:22:03.346Z", + type: "pmf", + label: "PMF Demo", + organisationId: "demo-organisation", + schema: { + pages: [ + { + id: "disappointmentPage", + config: { + autoSubmit: true, + }, + elements: [ + { + id: "disappointment", + name: "disappointment", + type: "radio", + label: "How disappointed would you be if you could no longer use our service?", + options: [ + { + label: "Very disappointed", + value: "veryDisappointed", + }, + { + label: "Somewhat disappointed", + value: "somewhatDisappointed", + }, + { + label: "Not disappointed", + value: "notDisappointed", + }, + ], + }, + ], + }, + { + id: "mainBenefitPage", + elements: [ + { + id: "mainBenefit", + name: "mainBenefit", + type: "text", + label: "What is the main benefit you receive from our service?", + }, + ], + }, + { + id: "userSegmentPage", + config: { + autoSubmit: true, + }, + elements: [ + { + id: "userSegment", + name: "userSegment", + type: "radio", + label: "What is your job title?", + options: [ + { + label: "Founder", + value: "founder", + }, + { + label: "Executive", + value: "executive", + }, + { + label: "Product Manager", + value: "productManager", + }, + { + label: "Product Owner", + value: "productOwner", + }, + { + label: "Software Engineer", + value: "softwareEngineer", + }, + ], + }, + ], + }, + { + id: "improvementPage", + elements: [ + { + id: "improvement", + name: "improvement", + type: "text", + label: "How can we improve our service for you?", + }, + ], + }, + { + id: "selfSegmentationPage", + elements: [ + { + id: "selfSegmentation", + name: "selfSegmentation", + type: "text", + label: "What type of people would benefit most from using our service?", + }, + ], + }, + { + id: "thankYouPage", + elements: [ + { + id: "thankYou", + name: "thankYou", + type: "html", + }, + ], + endScreen: true, + }, + ], + config: {}, + schemaVersion: 1, + }, +}; + +export default output; diff --git a/apps/web/src/demo-data/pipelines-demo-pipeline.ts b/apps/web/src/demo-data/pipelines-demo-pipeline.ts new file mode 100644 index 0000000000..c6c1d2fe8e --- /dev/null +++ b/apps/web/src/demo-data/pipelines-demo-pipeline.ts @@ -0,0 +1,15 @@ +const output = { + id: "pmf-demo-pipeline-1", + createdAt: "2023-02-08T10:52:47.877Z", + updatedAt: "2023-02-08T10:52:47.877Z", + label: "email", + type: "emailNotification", + events: ["submissionFinished"], + formId: "demo-pmf", + enabled: true, + config: { + email: "mail@example.com", + }, +}; + +export default output; diff --git a/apps/web/src/demo-data/pipelines.ts b/apps/web/src/demo-data/pipelines.ts new file mode 100644 index 0000000000..0659ca3787 --- /dev/null +++ b/apps/web/src/demo-data/pipelines.ts @@ -0,0 +1,17 @@ +const output = [ + { + id: "demo-pipeline", + createdAt: "2023-02-08T10:52:47.877Z", + updatedAt: "2023-02-08T10:52:47.877Z", + label: "email", + type: "emailNotification", + events: ["submissionFinished"], + formId: "demo-pmf", + enabled: true, + config: { + email: "mail@example.com", + }, + }, +]; + +export default output; diff --git a/apps/web/src/demo-data/pmf-submissions.ts b/apps/web/src/demo-data/pmf-submissions.ts new file mode 100644 index 0000000000..720e823f16 --- /dev/null +++ b/apps/web/src/demo-data/pmf-submissions.ts @@ -0,0 +1,83 @@ +const improvements = [ + "Please provide a mobile app so I can check my account balance on the go", + "Make it possible to archive old transactions", + "Make it possible to add a note to a transaction", + "A mobile app would be awesome", + "I would like to be able to add a note to a transaction", + "I would like to be able to archive old transactions", + "I think a cool feature would be if I could organize my transactions into categories", +]; + +const mainBenefits = [ + "I like that I can see my account balance", + "I like that I can see my transactions at a glance", + "getting a notification when I receive money", + "Seeing all my transactions in one place", + "I like that I can see my account balance", + "Totally love the notifications when I receive money", + "The best is that I can get an overview of all my transactions", + "Love the notifications when I receive money", + "The notifications when I receive money are great", +]; + +const userSegments = ["founder", "executive", "productManager", "productOwner", "softwareEngineer"]; + +const disappointments = [ + "veryDisappointed", + "veryDisappointed", + "veryDisappointed", + "somewhatDisappointed", + "somewhatDisappointed", + "notDisappointed", +]; + +const selfSegmentations = [ + "Founders", + "Executives", + "Product Managers", + "Product Owners", + "Software Engineers", + "Designers", + "Other founders", + "Other executives", + "Other product managers", + "Other product owners", + "My befriended software engineers", + "My befriended designers", + "My befriended founders", + "I think other founders would like this", + "I think other executives would like this", + "I think other product managers would like this", +]; + +export const getPmfSubmissions = () => { + const submissions = []; + for (let i = 0; i < 28; i++) { + submissions.push({ + id: `demo-pmf-submission-${i}`, + createdAt: "2023-02-08T11:04:04.084Z", + updatedAt: "2023-02-08T11:04:09.752Z", + finished: true, + archived: false, + formId: "demo-pmf", + customerEmail: "user@example.com", + customerOrganisationId: "demo-organisation", + data: { + improvement: getRandomItem(improvements), + mainBenefit: getRandomItem(mainBenefits), + userSegment: getRandomItem(userSegments), + disappointment: getRandomItem(disappointments), + selfSegmentation: getRandomItem(selfSegmentations), + }, + meta: { + userAgent: + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36", + }, + }); + } + return submissions; +}; + +function getRandomItem(items) { + return items[Math.floor(Math.random() * items.length)]; +} diff --git a/apps/web/src/lib/demo.ts b/apps/web/src/lib/demo.ts new file mode 100644 index 0000000000..195c514ea1 --- /dev/null +++ b/apps/web/src/lib/demo.ts @@ -0,0 +1,20 @@ +export const demoEndpoints = { + "/api/organisations/demo-organisation/forms/demo-pmf": { + file: "forms-demo-pmf.ts", + }, + "/api/organisations/demo-organisation/forms/demo-pmf/submissions": { + file: "forms-demo-pmf-submissions.ts", + }, + "/api/organisations/demo-organisation/forms/demo-pmf/pipelines": { + file: "pipelines.ts", + }, + "/api/organisations/demo-organisation/forms/demo-pmf/pipelines/demo-pipeline": { + file: "pipelines-demo-pipeline.ts", + }, + "/api/organisations/demo-organisation/customers": { + file: "customers.ts", + }, + "/api/organisations/demo-organisation/customers/user@example.com": { + file: "customers-demo-customer.ts", + }, +}; diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts index 260be2fa8b..3e1601aaf0 100644 --- a/apps/web/src/lib/utils.ts +++ b/apps/web/src/lib/utils.ts @@ -2,8 +2,14 @@ import crypto from "crypto"; import intlFormat from "date-fns/intlFormat"; import { formatDistance } from "date-fns"; import platform from "platform"; +import { demoEndpoints } from "./demo"; export const fetcher = async (url) => { + if (url in demoEndpoints) { + const { file } = demoEndpoints[url]; + const { default: data } = await import(`../demo-data/${file}`); + return data; + } const res = await fetch(url); // If the status code is not in the range 200-299, diff --git a/apps/web/src/pages/demo/organisations/[organisationId]/customers/[customerId]/index.tsx b/apps/web/src/pages/demo/organisations/[organisationId]/customers/[customerId]/index.tsx new file mode 100644 index 0000000000..7a6cdebd4f --- /dev/null +++ b/apps/web/src/pages/demo/organisations/[organisationId]/customers/[customerId]/index.tsx @@ -0,0 +1,10 @@ +import SingleCustomerPage from "@/components/customers/SingleCustomerPage"; +import LayoutDemo from "@/components/layout/LayoutDemo"; + +export default function Demo() { + return ( + + + + ); +} diff --git a/apps/web/src/pages/demo/organisations/[organisationId]/forms/[formId]/index.tsx b/apps/web/src/pages/demo/organisations/[organisationId]/forms/[formId]/index.tsx new file mode 100644 index 0000000000..50daa02189 --- /dev/null +++ b/apps/web/src/pages/demo/organisations/[organisationId]/forms/[formId]/index.tsx @@ -0,0 +1,10 @@ +import PMFPage from "@/components/forms/pmf/PMFPage"; +import LayoutDemo from "@/components/layout/LayoutDemo"; + +export default function Demo() { + return ( + + + + ); +} diff --git a/packages/charts/src/charts/Pie.tsx b/packages/charts/src/charts/Pie.tsx index 03bb9035f3..84d03505f6 100644 --- a/packages/charts/src/charts/Pie.tsx +++ b/packages/charts/src/charts/Pie.tsx @@ -70,7 +70,7 @@ function FbPie({ color, submissions, schema, fieldName }: Props) { return ( <> - + {/* */} cx ? "start" : "end"} dominantBaseline="central"> - {/* + + {/* // @ts-ignore */} - {data[index].name} ({Math.round((value / data.length) * 100)}%) + {data[index].name} + + + ({Math.round((value / submissions.length) * 100)}%) + ); }}