Feature/#41 unpublish forms (#59)

* #41: Display message for unpublished forms

* #41: Add publish/unpublish GUI

* #41: Revamp UI and add 'closed' parameter

* change indigo color of access-switch to red

* update live-form on republish, show error message to user in frontend  when form unpublished

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

components/builder/Builder.tsx

@@ -1,5 +1,6 @@
 import EditorJS from "@editorjs/editorjs";
 import {
+  CogIcon,
   DocumentAddIcon,
   EyeIcon,
   PaperAirplaneIcon,
@@ -16,6 +17,7 @@ import SecondNavBar from "../layout/SecondNavBar";
 import Loading from "../Loading";
 import LoadingModal from "../LoadingModal";
 import ShareModal from "./ShareModal";
+import SettingsModal from "./SettingsModal";
 let Editor = dynamic(() => import("../editorjs/Editor"), {
   ssr: false,
 });
@@ -27,6 +29,7 @@ export default function Builder({ formId }) {
   const { noCodeForm, isLoadingNoCodeForm, mutateNoCodeForm } =
     useNoCodeForm(formId);
   const [openShareModal, setOpenShareModal] = useState(false);
+  const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const [loading, setLoading] = useState(false);
 
   const addPage = () => {
@@ -63,12 +66,17 @@ export default function Builder({ formId }) {
     setLoading(true);
     setTimeout(async () => {
       const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
+      const firstPublish = newNoCodeForm.published ? false : true;
       newNoCodeForm.blocks = newNoCodeForm.blocksDraft;
       newNoCodeForm.published = true;
       await persistNoCodeForm(newNoCodeForm);
       mutateNoCodeForm(newNoCodeForm);
       setLoading(false);
-      toast("Your changes are now public 🎉");
+      toast(
+        firstPublish
+          ? "Your form is now published 🎉"
+          : "Your changes are now published 🎉"
+      );
     }, 500);
   };
 
@@ -100,6 +108,12 @@ export default function Builder({ formId }) {
       Icon: ShareIcon,
       label: "Share",
     },
+    {
+      id: "settings",
+      onClick: () => setOpenSettingsModal(true),
+      Icon: CogIcon,
+      label: "Settings",
+    },
   ];
 
   if (isLoadingNoCodeForm || isLoadingForm) {
@@ -129,6 +143,11 @@ export default function Builder({ formId }) {
         setOpen={setOpenShareModal}
         formId={formId}
       />
+      <SettingsModal
+        open={openSettingsModal}
+        setOpen={setOpenSettingsModal}
+        formId={formId}
+      />
       <LoadingModal isLoading={loading} />
     </>
   );

components/builder/SettingsModal.tsx

@@ -0,0 +1,138 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { Dialog, Switch, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import { TailSpin } from "react-loader-spinner";
+import { persistNoCodeForm, useNoCodeForm } from "../../lib/noCodeForm";
+import Loading from "../Loading";
+import { XIcon } from "@heroicons/react/outline";
+import { toast } from "react-toastify";
+import { classNames } from "../../lib/utils";
+
+export default function SettingsModal({ open, setOpen, formId }) {
+  const { noCodeForm, isLoadingNoCodeForm, mutateNoCodeForm } =
+    useNoCodeForm(formId);
+  const [loading, setLoading] = useState(false);
+
+  const toggleClose = async () => {
+    setLoading(true);
+    setTimeout(async () => {
+      const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
+      newNoCodeForm.closed = !noCodeForm.closed;
+      await persistNoCodeForm(newNoCodeForm);
+      mutateNoCodeForm(newNoCodeForm);
+      setLoading(false);
+      toast(
+        newNoCodeForm.closed
+          ? "Your form is now closed for submissions "
+          : "Your form is now open for submissions 🎉"
+      );
+    }, 500);
+  };
+
+  if (isLoadingNoCodeForm) {
+    return <Loading />;
+  }
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:max-w-4xl sm:w-full sm:p-6">
+                <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                    onClick={() => setOpen(false)}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XIcon className="w-6 h-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="px-4 py-5 sm:p-6">
+                  <div className="mb-4">
+                    <h1 className="text-2xl font-medium leading-6 text-gray-900">
+                      Settings
+                    </h1>
+                  </div>
+                  <h3 className="text-lg font-medium leading-6 text-gray-900">
+                    Access
+                  </h3>
+                  <div className="w-full mt-2 text-sm text-gray-500">
+                    <Switch.Group
+                      as="div"
+                      className="flex items-center justify-between w-full"
+                    >
+                      <span className="flex flex-col flex-grow">
+                        <Switch.Label
+                          as="span"
+                          className="text-sm font-medium text-gray-900"
+                          passive={true}
+                        >
+                          Close form for new submissions?
+                        </Switch.Label>
+                        <Switch.Description
+                          as="span"
+                          className="text-sm text-gray-500"
+                        >
+                          Your form is currently{" "}
+                          <span className="font-bold">
+                            {noCodeForm.closed ? "closed" : "open"}
+                          </span>{" "}
+                          for submissions.
+                        </Switch.Description>
+                      </span>
+                      {loading ? (
+                        <TailSpin color="#1f2937" height={30} width={30} />
+                      ) : (
+                        <Switch
+                          checked={noCodeForm.closed}
+                          onChange={() => toggleClose()}
+                          className={classNames(
+                            noCodeForm.closed ? "bg-red-600" : "bg-gray-200",
+                            "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                          )}
+                        >
+                          <span
+                            aria-hidden="true"
+                            className={classNames(
+                              noCodeForm.closed
+                                ? "translate-x-5"
+                                : "translate-x-0",
+                              "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+                            )}
+                          />
+                        </Switch>
+                      )}
+                    </Switch.Group>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

pages/api/forms/[id]/nocodeform/index.ts

@@ -42,7 +42,7 @@ export default async function handle(
   // Required fields in body: -
   // Optional fields in body: title, published, finishedOnboarding, elements, elementsDraft
   else if (req.method === "POST") {
-    const { id, createdAt, blocks, blocksDraft, published } = req.body;
+    const { id, createdAt, blocks, blocksDraft, published, closed } = req.body;
     const data = {
       id,
       createdAt,
@@ -50,6 +50,7 @@ export default async function handle(
       blocksDraft,
       formId,
       published,
+      closed,
       updatedAt: new Date(),
     };
     // create or update record

pages/api/public/forms/[id]/nocodeform/index.ts

@@ -17,6 +17,7 @@ export default async function handle(
       select: {
         id: true,
         published: true,
+        closed: true,
         blocks: true,
       },
     });

pages/f/[id].tsx

@@ -4,14 +4,15 @@ import Loading from "../../components/Loading";
 import MessagePage from "../../components/MessagePage";
 import { useNoCodeFormPublic } from "../../lib/noCodeForm";
 import { useRouter } from "next/router";
+import Image from "next/image";
 
-export default function Share({}) {
+export default function NoCodeFormPublic() {
   const router = useRouter();
   const formId = router.query.id.toString();
   const { noCodeForm, isLoadingNoCodeForm, isErrorNoCodeForm } =
     useNoCodeFormPublic(formId);
 
-  if (isErrorNoCodeForm) {
+  if (isErrorNoCodeForm || !noCodeForm?.published) {
     return (
       <MessagePage text="Form not found. Are you sure this is the right URL?" />
     );
@@ -23,7 +24,32 @@ export default function Share({}) {
 
   return (
     <BaseLayoutUnauthorized title="snoopForms">
-      <App formId={formId} blocks={noCodeForm.blocks} />
+      {noCodeForm.closed ? (
+        <div className="flex min-h-screen bg-ui-gray-light">
+          <div className="flex flex-col justify-center flex-1 px-4 py-12 mx-auto sm:px-6 lg:flex-none lg:px-20 xl:px-24">
+            <div className="w-full max-w-sm p-8 mx-auto lg:w-96">
+              <div>
+                <Image
+                  src="/img/snoopforms-logo.svg"
+                  alt="snoopForms logo"
+                  width={500}
+                  height={89}
+                />
+              </div>
+              <div className="mt-8">
+                <h1 className="mb-4 font-bold text-center leading-2">
+                  Form closed!
+                </h1>
+                <p className="text-center">
+                  This form is closed for any further submissions.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <App formId={formId} blocks={noCodeForm.blocks} />
+      )}
     </BaseLayoutUnauthorized>
   );
 }

prisma/migrations/20220816150326_add_closed_property_to_nocode_form/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "NoCodeForm" ADD COLUMN     "closed" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -39,6 +39,7 @@ model NoCodeForm {
   blocks              Json      @default("[]")
   blocksDraft         Json      @default("[]")
   published           Boolean   @default(false)
+  closed              Boolean   @default(false)
 }
 
 model Pipeline {