Merge branch 'main' of github.com:snoopForms/snoopforms

apps/formbricks-com/pages/blog/weekly-update-091222/index.mdx

@@ -0,0 +1,103 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
+import { Callout } from "@/components/shared/Callout";
+import NewsletterSignup from "@/components/shared/NewsletterSignup";
+
+import HQ1 from "./hq-1.webp";
+import HQAPI from "./hq-api.webp";
+import HQOverview from "./hq-overview.webp";
+import HQSummary from "./hq-summary.webp";
+import NPS1 from "../launch-formbricks-hq/NPS-filled-out.webp";
+import NPS2 from "../launch-formbricks-hq/NPS-feedback-summary.webp";
+
+export const meta = {
+  title: "Weekly Summary - 9th Dec 2022",
+  description:
+    "We launched the Formbricks HQ - and with it our Cloud offering is back! Apart from that, we’re building use cases to get you the insights that you need.",
+  date: "2022-12-09",
+};
+
+_We launched the Formbricks HQ - and with it our Cloud offering is back! Apart from that, we’re building use cases to get you the insights that you need. But let’s look at it 👇_
+
+<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
+
+### Highlights
+
+- We launched [Formbricks HQ](https://hq.formbricks.com) 🤸
+- Native NPS survey use case built 📊
+- YC Interview Round 2 coming up 🍊
+
+##
+
+# Formbricks HQ is live!
+
+<Image src={HQ1} alt="Formbricks HQ Screenshot" className="rounded-lg" />
+
+The Formbricks HQ - and with it the Formbricks Cloud - is here. What is it and what can you do with it?
+
+Let’s find out:
+
+- Pipe data from any type of form to the API
+- View submissions
+- Forward submissions via Email
+- Forward submissions via Webhook
+
+Here is an [in-depth comparison to a similar tool](/vs-formspree), which is not open source.
+
+Have a look:
+
+<Image src={HQAPI} alt="Formbricks HQ Screenshot" className="rounded-lg" />
+After you created a form you get an API to POST any form data to.
+
+<Image src={HQOverview} alt="Formbricks HQ Screenshot" className="rounded-lg" />
+If you send a [schema](/docs/formbricks-hq/schema) along, Formbricks HQ will chart your data.
+
+<Image src={HQSummary} alt="Formbricks HQ Screenshot" className="rounded-lg" />
+You can also view all submissions in a table.
+
+## How are Formbricks and snoopForms different?
+
+In our Discord we were asked how Formbricks and the first iteration called _snoopForms_ are different. In a nutshell:
+
+**Formbricks is more modular **and** more specific.**
+
+How is that possible? And why are you building it that way?
+
+After we launched snoopforms, a typical monolythic solution, we found that engineers took it apart to build use cases different to what we had in mind. Which is great! We decided to do two things:
+
+1. Build a modular infrastructure to allow maximum flexibility for engineers
+2. Build more specific use cases on top of it to move closer to the Job To Be Done
+
+In practice, this means that instead of building “one solution for all use cases” (which is what Typeform is) we are building a set of LEGOs for engineers to build **specific solutions for specific problems.** Examples are Bug Report Forms, Feature Request Widgets, Docs Feedback or User Polling - to name a few.
+
+The beauty of open source is that you are able to build exactly what you need, natively integrated into your app.
+
+##
+
+# Native NPS Survey build with Formbricks
+
+After live user polling, we’ve dogfooded our own tech to build an NPS survey natively. We wrote more about it in our launch blog post yesterday. Check it out for all the details, here is a sneak peak:
+
+<div className="grid md:grid-cols-2 gap-1">
+  <div>
+    <Image src={NPS1} alt="NPS natively embedded into app" className="rounded-lg" />
+  </div>
+  <div>
+    <Image src={NPS2} alt="Results summary" className="rounded-lg" />
+  </div>
+</div>
+
+[Here is a detailed description of how we built it.](/blog/weekly-update-021222)
+
+##
+
+# YC Interview Round 2
+
+YC isn’t done with us yet. They invited is for a second interview early next week. Let’s see if we can convince a different set of partners of the potential of Formbricks 🤞 Keep you posted!
+
+### Until then, enjoy your weekend!
+
+<NewsletterSignup />
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/get-started.tsx

@@ -44,7 +44,10 @@ export default function GetStartedPage() {
               <p>All enterprise features included</p>
             </div>
           </div>
-          <Button disabled className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
+          <Button
+            className="mt-7 w-full justify-center text-center font-bold"
+            variant="highlight"
+            onClick={() => router.push("https://hq.formbricks.com")}>
             Start FREE on Formbricks Cloud
           </Button>
         </div>
@@ -73,7 +76,7 @@ export default function GetStartedPage() {
           </div>
           <Button
             className="mt-7 w-full justify-center text-center font-bold"
-            variant="highlight"
+            variant="secondary"
             onClick={() => router.push("/discord")}>
             Sign up for beta test
           </Button>

apps/formbricks-com/pages/react-form-library.tsx

@@ -127,7 +127,7 @@ const ReactFormBuilderPage = () => (
             </dt>
           </div>
         ))}
-        <a href="mailto:johannes@formbricks.com">
+        <a href="https://github.com/formbricks/formbricks/issues/new/choose">
           <div className="mx-auto flex max-w-sm items-center transition delay-100 duration-200 ease-in-out hover:scale-105">
             <PlusIcon
               className="text-brand-dark dark:text-brand-lightml-4 h-6 w-6 md:ml-5"

apps/hq/src/components/customers/CustomersPage.tsx

@@ -23,7 +23,7 @@ export default function FormsPage() {
   }
 
   if (isErrorCustomers || isErrorTeam) {
-    return <div>Error loading ressources. Maybe you don&lsquo;t have enough access rights</div>;
+    return <div>Error loading ressources. Maybe you don&lsquo;t have enough access rights.</div>;
   }
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
@@ -34,6 +34,9 @@ export default function FormsPage() {
             {team.name}
           </span>
         </h1>
+        <p className="mt-4 text-slate-600">
+          Pass a customerID with each submission and get an overview of all submissions per customer.
+        </p>
       </header>
       {customers.length === 0 ? (
         <EmptyPageFiller

apps/hq/src/components/forms/FormOverviewPage.tsx

@@ -109,129 +109,137 @@ export default function FormOverviewPage() {
 
         {activeTab.id === "overview" ? (
           <div>
-            <div>
-              <div className="mt-4 mb-12 text-sm text-gray-600">
-                <p className="text-slate-700">
-                  To get started post your submission to the Formbricks HQ capture endpoint. All submissions
-                  are stored in Formbricks HQ and can be viewed here.
-                  <br /> <br />
-                  If you want to get notified when a submission is made you can also set up a webhook or email
-                  notifications in{" "}
-                  <Link
-                    href={`/app/teams/${router.query.teamId}/forms/${router.query.formId}/pipelines`}
-                    className="underline">
-                    Pipelines
-                  </Link>
-                  .<br />
-                  <br />
-                  Optionally you can set a schema for your form. This schema tells Formbricks HQ more about
-                  the structure of your form and enables better form evaluation, e.g. displays the correct
-                  labels for your form fields in the Formbricks HQ UI insted of the fieldName or filters data
-                  that doesn&apos;t match the schema. The easiest way to get started with a schema is to used
-                  our react library because it handles schema creation and sending to Formbricks HQ
-                  automatically.
-                  <br /> To learn more about the schema please check out our{" "}
-                  <Link href="https://formbricks.com/docs/formbricks-hq/schema">docs</Link>.
-                </p>
-              </div>
-
-              <div>
-                <label htmlFor="formId" className="block text-base text-slate-800">
-                  Your form ID
-                </label>
-                <div className="mt-3 w-96">
-                  <input
-                    id="formId"
-                    type="text"
-                    className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
-                    value={form.id}
-                    disabled
-                  />
-
-                  <Button
-                    variant="secondary"
-                    className="mt-2 w-full justify-center"
-                    onClick={() => {
-                      navigator.clipboard.writeText(form.id);
-                      toast("Copied form ID to clipboard");
-                    }}>
-                    copy
-                  </Button>
-                </div>
-              </div>
-              <hr className="my-6" />
-              <div className="max-w-2xl">
-                <label htmlFor="formId" className="block text-base text-slate-800">
-                  Capture POST Url:
-                </label>
-                <div className="mt-3">
-                  <div className="mt-1 flex rounded-md shadow-sm">
-                    <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500  sm:text-sm">
-                      POST
-                    </span>
+            <div className="grid grid-cols-5 gap-8 py-4">
+              <div className="col-span-3">
+                <div>
+                  <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
+                    Your form ID
+                  </label>
+                  <div className="mt-3 w-96">
                     <input
-                      id="captureUrl"
+                      id="formId"
                       type="text"
-                      className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
-                      value={`${window.location.protocol}//${window.location.host}/capture/forms/${form.id}/submissions`}
+                      className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
+                      value={form.id}
                       disabled
                     />
-                  </div>
 
-                  <Button
-                    variant="secondary"
-                    className="mt-2 w-full justify-center"
-                    onClick={() => {
-                      navigator.clipboard.writeText(form.id);
-                      toast("Copied form url to clipboard");
-                    }}>
-                    copy
-                  </Button>
+                    <Button
+                      variant="secondary"
+                      className="mt-2 w-full justify-center"
+                      onClick={() => {
+                        navigator.clipboard.writeText(form.id);
+                        toast("Copied form ID to clipboard");
+                      }}>
+                      copy
+                    </Button>
+                  </div>
                 </div>
+
+                <div className="max-w-2xl py-6">
+                  <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
+                    Capture POST Url:
+                  </label>
+                  <div className="mt-3">
+                    <div className="mt-1 flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500  sm:text-sm">
+                        POST
+                      </span>
+                      <input
+                        id="captureUrl"
+                        type="text"
+                        className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+                        value={`${window.location.protocol}//${window.location.host}/capture/forms/${form.id}/submissions`}
+                        disabled
+                      />
+                    </div>
+
+                    <Button
+                      variant="secondary"
+                      className="mt-2 w-full justify-center"
+                      onClick={() => {
+                        navigator.clipboard.writeText(form.id);
+                        toast("Copied form url to clipboard");
+                      }}>
+                      copy
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="col-span-2  text-sm text-gray-600">
+                <h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
+                <ol className="list-decimal leading-8 text-slate-700">
+                  <li>POST a submission to the capture endpoint.</li>
+                  <li>
+                    View submission under{" "}
+                    <Link
+                      href={`/app/teams/${router.query.teamId}/forms/${router.query.formId}/submissions`}
+                      className="underline">
+                      Submissions
+                    </Link>{" "}
+                    tab.
+                  </li>
+                  <li>
+                    Get notified or pipe submission data to a different tool in the{" "}
+                    <Link
+                      href={`/app/teams/${router.query.teamId}/forms/${router.query.formId}/pipelines`}
+                      className="underline">
+                      Pipelines
+                    </Link>{" "}
+                    tab.
+                  </li>
+                  <li>
+                    For a summary of form data a schema is required. Learn all about schemas in our{" "}
+                    <Link
+                      target="_blank"
+                      href="https://formbricks.com/docs/formbricks-hq/schema"
+                      className="underline">
+                      docs
+                    </Link>
+                    .
+                  </li>
+                </ol>
               </div>
             </div>
           </div>
         ) : activeTab.id === "api" ? (
-          <div className="mt-5">
-            <p className="my-3 text-sm text-gray-600">
-              You can send submissions directly to Formbricks HQ via our API. The API doesn&apos;t need any
-              authentication and can also called in the users browser.
-            </p>
-            <hr className="my-8" />
-            <div className="max-w-2xl">
-              <label htmlFor="formId" className="block text-base text-slate-800">
-                Capture POST Url:
-              </label>
-              <div className="mt-3">
-                <div className="mt-1 flex rounded-md shadow-sm">
-                  <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500  sm:text-sm">
-                    POST
-                  </span>
-                  <input
-                    id="captureUrl"
-                    type="text"
-                    className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
-                    value={`${window.location.protocol}//${window.location.host}/capture/forms/${form.id}/submissions`}
-                    disabled
-                  />
-                </div>
+          <div>
+            <div className="grid grid-cols-5 gap-8 py-4">
+              <div className="col-span-3">
+                <div>
+                  <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
+                    Capture POST Url:
+                  </label>
+                  <div className="mt-3">
+                    <div className="mt-1 flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500  sm:text-sm">
+                        POST
+                      </span>
+                      <input
+                        id="captureUrl"
+                        type="text"
+                        className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+                        value={`${window.location.protocol}//${window.location.host}/capture/forms/${form.id}/submissions`}
+                        disabled
+                      />
+                    </div>
 
-                <Button
-                  variant="secondary"
-                  className="mt-2 w-full justify-center"
-                  onClick={() => {
-                    navigator.clipboard.writeText(form.id);
-                    toast("Copied form url to clipboard");
-                  }}>
-                  copy
-                </Button>
-              </div>
-            </div>
-            <hr className="my-8" />
-            <div className="rounded-md bg-black p-8 text-sm font-light text-gray-200">
-              <pre>
-                <code className="language-js whitespace-pre-wrap">
-                  {`{
+                    <Button
+                      variant="secondary"
+                      className="mt-2 w-full justify-center"
+                      onClick={() => {
+                        navigator.clipboard.writeText(form.id);
+                        toast("Copied form url to clipboard");
+                      }}>
+                      copy
+                    </Button>
+                  </div>
+                </div>
+                <div className="mt-4 rounded-md bg-black p-4 font-light text-gray-200 first-letter:text-sm">
+                  <pre>
+                    <code className="language-js whitespace-pre-wrap">
+                      {`{
 "customerId": "user@example.com", /* optional */
 "data": {
   "firstname": "John",
@@ -239,23 +247,32 @@ export default function FormOverviewPage() {
   "feedback": "I like the app very much"
   }
 }`}
-                </code>
-              </pre>
+                    </code>
+                  </pre>
+                </div>
+              </div>
+              <div className="col-span-2  text-sm text-gray-600">
+                <h3 className="block pb-4 text-lg font-semibold text-slate-800">Quick Tips</h3>
+                <p className="font-bold">Authentication</p>
+                <p className="my-3 text-sm text-gray-600">
+                  Via the API you can send submissions directly to Formbricks HQ. The API doesn&apos;t need
+                  any authentication and can also be called in the users browser.
+                </p>
+                <p className="pt-3 font-bold">CustomerId</p>
+                <p className="my-3 text-sm text-gray-600">
+                  You can pass along a customer ID to identify the respondent. This allows you to attribute
+                  submissions of several surveys to the same respondent.
+                </p>
+              </div>
             </div>
           </div>
         ) : activeTab.id === "react" ? (
-          <div className="mt-5">
-            <p className="my-3 text-sm text-gray-600">
-              The best way to send submissions to Formbricks HQ in React is our simple to use{" "}
-              <Link target="_blank" href="https://www.npmjs.com/package/@formbricks/react">
-                React Library
-              </Link>
-              because it also creates and sends a schema to Formbricks HQ.
-            </p>
-            <div className="rounded-md bg-black p-8 text-sm font-light text-gray-200">
-              <pre>
-                <code className="language-js whitespace-pre-wrap">
-                  {`import { Form, Text, Email, Checkbox, Submit, sendToHq } from "@formbricks/react";
+          <div>
+            <div className="mt-5 grid grid-cols-5 gap-8">
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
+                <pre>
+                  <code className="language-js whitespace-pre-wrap">
+                    {`import { Form, Text, Email, Checkbox, Submit, sendToHq } from "@formbricks/react";
 import "@formbricks/react/styles.css";
 
 export default function WaitlistForm() {
@@ -278,17 +295,29 @@ return (
 </Form>
 );
 }`}
-                </code>
-              </pre>
+                  </code>
+                </pre>
+              </div>
+              <div className="col-span-2">
+                <h3 className="block text-lg font-semibold text-slate-800">Formbricks React</h3>
+                <p className="my-3 text-sm text-gray-600">
+                  The best way to send submissions to Formbricks HQ in React is{" "}
+                  <Link
+                    target="_blank"
+                    className="underline"
+                    href="https://www.npmjs.com/package/@formbricks/react">
+                    Formbricks React.
+                  </Link>{" "}
+                  It makes form creation easy and automatically creates a schema to get a full picture of your
+                  data in the Summary tab.
+                </p>
+              </div>
             </div>
-            <p className="my-3 text-sm text-gray-600">
-              But you can also use the default React Form functionality (or another form library) to send the
-              submissions to Formbricks HQ.
-            </p>
-            <div className="rounded-md bg-black p-8 text-sm font-light text-gray-200">
-              <pre>
-                <code className="language-js whitespace-pre-wrap">
-                  {`<form
+            <div className="mt-5 grid grid-cols-5 gap-8">
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
+                <pre>
+                  <code className="language-js whitespace-pre-wrap">
+                    {`<form
 onSubmit={({ data }) => {
   fetch("${window.location.protocol}//${window.location.host}/capture/forms/${form.id}/submissions", {
     method: "POST",
@@ -300,20 +329,25 @@ onSubmit={({ data }) => {
 }}>
 {/* YOUR FORM */}
 </form>`}
-                </code>
-              </pre>
+                  </code>
+                </pre>
+              </div>
+              <div className="col-span-2">
+                <h3 className="block text-lg font-semibold text-slate-800">Standard React Forms</h3>
+                <p className="my-3 text-sm text-gray-600">
+                  You can also use the default React Form functionality (or another form library) to send the
+                  submissions to Formbricks HQ.
+                </p>
+              </div>
             </div>
           </div>
         ) : activeTab.id === "vue" ? (
-          <div className="mt-5">
-            {" "}
-            <p className="my-3 text-sm text-gray-600">
-              To send a submission in Vue.Js you can use the default form functionality.
-            </p>
-            <div className="rounded-md bg-black p-8 text-sm font-light text-gray-200">
-              <pre>
-                <code className="language-js whitespace-pre-wrap">
-                  {`<template>
+          <div>
+            <div className="mt-5 grid grid-cols-5 gap-8">
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
+                <pre>
+                  <code className="language-js whitespace-pre-wrap">
+                    {`<template>
   <form @submit.prevent="submitForm">
     <label>
       <span>Email</span>
@@ -347,15 +381,22 @@ export default {
   },
 }
 </script>`}
-                </code>
-              </pre>
+                  </code>
+                </pre>
+              </div>
+              <div className="col-span-2">
+                <h3 className="block text-lg font-semibold text-slate-800">Standard Vue Forms</h3>
+                <p className="my-3 text-sm text-gray-600">
+                  You can also use the default Vue form functionality to send submissions to Formbricks HQ.
+                </p>
+              </div>
             </div>
           </div>
         ) : null}
 
         {/* <div className="mt-16">
           <h2 className="text-xl font-bold text-slate-800">Code your form</h2>
-          <div className="mt-4 mb-12">
+          <div className="">
             <p className="text-slate-800">
               Build your form with the code library of your choice. Manage your data in this dashboard.
             </p>

apps/hq/src/components/forms/FormsList.tsx

@@ -101,7 +101,7 @@ export default function FormsList({ teamId }) {
                                             onClick={() => {
                                               if (
                                                 confirm(
-                                                  "Are you sure you want to delete this form? This also deletes all submissions that are captures with this form. This action cannot be undone."
+                                                  "Are you sure you want to delete this form? This also deletes all submissions that are captured with this form. This action cannot be undone."
                                                 )
                                               ) {
                                                 deleteFormAction(form, formIdx);

apps/hq/src/components/forms/pipelines/PipelinesPage.tsx

@@ -152,7 +152,7 @@ export default function PipelinesPage({}) {
       </header>
       <div className="my-4">
         <p className="text-slate-800">
-          Pipe your data exactly where you need it. Add conditions for variable data piping.
+          Pipe your data to third party tools. Setup email notifications for new submissions.
         </p>
       </div>
       {pipelines.length > 0 ? (

apps/hq/src/components/forms/summary/SummaryPage.tsx

@@ -61,20 +61,17 @@ export default function SummaryPage() {
               <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
             </div>
             <div className="ml-3">
-              <h3 className="text-sm font-medium text-yellow-800">This form doesn&apos;t have a schema </h3>
+              <h3 className="text-sm font-medium text-yellow-800">No schema detected for this form.</h3>
               <div className="mt-2 text-sm text-yellow-700">
-                <p>
-                  Formbricks HQ needs a schema of your form to display a summary. Learn more about the schema
-                  and how you can add one in our docs.
-                </p>
+                <p>To summarize your data Formbricks HQ needs a schema of your form.</p>
               </div>
               <div className="mt-4">
                 <div className="-mx-2 -my-1.5 flex">
                   <Link
                     target="_blank"
                     href="https://formbricks.com/docs/formbricks-hq/schema"
-                    className="rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 focus:ring-offset-yellow-50">
-                    View docs
+                    className="rounded-md bg-yellow-100 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 focus:ring-offset-yellow-50">
+                    Setup schema
                   </Link>
                 </div>
               </div>

apps/hq/src/components/layout/LayoutWrapperTeam.tsx

@@ -27,12 +27,12 @@ export default function LayoutWrapperTeam({ children }) {
         icon: UsersIcon,
         current: pathname.includes("/customers"),
       },
-      {
+      /*     {
         name: "Settings",
-        href: `/app/teams/${router.query.teamId}/<settings>`,
+        href: `/app/teams/${router.query.teamId}/settings`,
         icon: Cog8ToothIcon,
         current: pathname.includes("/settings"),
-      },
+      }, */
     ],
     [router.query, pathname]
   );