fix #7647 -- add to the support page a way to require certain placeholders to be filled in before allowing submission

Author: williamstein

src/packages/frontend/support/url.ts

@@ -11,6 +11,7 @@ export interface Options {
   type?: "problem" | "question" | "task" | "purchase";
   hideExtra?: boolean;
   context?: string; // additional context
+  required?: string; // if required is a string, then the user MUST change the body of the input
 }
 
 export default function getURL(options: Options = {}) {
@@ -24,14 +25,20 @@ export default function getURL(options: Options = {}) {
       options.url = "";
     }
   }
-  // Note that this is a 2K limit on URL lengths, so the body had better
-  // not be too large (or it gets truncated).
-  return encodeURI(
-    supportURL +
-      `?hideExtra=${options.hideExtra}&url=${options.url}&type=${
-        options.type ?? ""
-      }&subject=${options.subject ?? ""}&body=${options.body ?? ""}&context=${
-        options.context ?? ""
-      }`,
-  );
+
+  const params = {
+    hideExtra: options.hideExtra,
+    url: options.url,
+    type: options.type ?? "",
+    subject: options.subject ?? "",
+    body: options.body ?? "",
+    required: options.required ?? "",
+    context: options.context ?? "",
+  };
+
+  const queryParams = Object.keys(params)
+    .map((key) => `${key}=${encodeURIComponent(params[key] as string)}`)
+    .join("&");
+
+  return `${supportURL}?${queryParams}`;
 }

src/packages/next/components/landing/live-demo.tsx

@@ -7,10 +7,11 @@ export function liveDemoUrl(context) {
   return getSupportUrl({
     subject: "Live Demo Request",
     type: "question",
-    body: `I would like to request a live demo on CoCalc!\n\nWHEN IS A GOOD TIME (include timezone!):\n\n\nTELLS US AS MUCH AS YOU CAN ABOUT YOUR INTENDED USE OF COCALC:\n\n`,
+    body: `I would like to request a live demo on CoCalc!\n\nWHEN IS A GOOD TIME (include timezone!): [REQUIRED]\n\nTELLS US AS MUCH AS YOU CAN ABOUT YOUR INTENDED USE OF COCALC: [REQUIRED]\n\n`,
     hideExtra: true,
     context,
     url: "",
+    required: "[REQUIRED]",
   });
 }
 

src/packages/next/components/support/create.tsx

@@ -10,7 +10,6 @@ import {
 } from "antd";
 import { useRouter } from "next/router";
 import { ReactNode, useRef, useState } from "react";
-
 import { Icon } from "@cocalc/frontend/components/icon";
 import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
@@ -62,6 +61,7 @@ export default function Create() {
   const [body, setBody] = useState<string>(
     router.query.body ? `${router.query.body}` : "",
   );
+  const required = router.query.required ? `${router.query.required}` : "";
   const [subject, setSubject] = useState<string>(
     router.query.subject ? `${router.query.subject}` : "",
   );
@@ -72,14 +72,19 @@ export default function Create() {
 
   const showExtra = router.query.hideExtra != "true";
 
+  // hasRequired means "has the required information", which
+  // means that body does NOT have required in it!
+  const hasRequired = !required || !body.includes(required);
+
   const submittable = useRef<boolean>(false);
   submittable.current = !!(
     !submitting &&
     !submitError &&
     !success &&
     isValidEmailAddress(email) &&
     subject &&
-    (body ?? "").length >= MIN_BODY_LENGTH
+    (body ?? "").length >= MIN_BODY_LENGTH &&
+    hasRequired
   );
 
   if (!zendesk) {
@@ -217,7 +222,7 @@ export default function Create() {
               </>
             )}
             <b>
-              <Status done={body && body.length >= MIN_BODY_LENGTH} />{" "}
+              <Status done={body && body.length >= MIN_BODY_LENGTH && hasRequired} />{" "}
               Description
             </b>
             <div
@@ -241,14 +246,16 @@ export default function Create() {
               {type == "task" && <Task onChange={setBody} />}
             </div>
           </VSpace>
-          <p style={{ marginTop: "30px" }}>
-            After submitting this, you'll receive a link, which you should save
-            until you receive a confirmation email. You can also{" "}
-            <A href="/support/tickets">check the status of your tickets here</A>
-            .
-          </p>
 
           <div style={{ textAlign: "center", marginTop: "30px" }}>
+            {!hasRequired && (
+              <Alert
+                showIcon
+                style={{ margin: "15px 30px" }}
+                type="error"
+                description={`You must replace the text '${required}' everywhere above with the requested information.`}
+              />
+            )}
             <Button
               shape="round"
               size="large"
@@ -308,6 +315,11 @@ export default function Create() {
             )}
           </div>
         </form>
+        <p style={{ marginTop: "30px" }}>
+          After submitting this, you'll receive a link, which you should save
+          until you receive a confirmation email. You can also{" "}
+          <A href="/support/tickets">check the status of your tickets here</A>.
+        </p>
       </div>
     </Layout.Content>
   );