next: make video call links configurable, typing, and emphasize sign up/in on index page

Author: haraldschilly

src/packages/database/settings/customize.ts

@@ -77,6 +77,7 @@ export default async function getCustomize(
       imprint: settings.imprint,
       policies: settings.policies,
       support: settings.support,
+      supportVideoCall: settings.support_video_call,
 
       // Is important for invite emails, password reset, etc. (e.g., so we can construct a url to our site).
       // This *can* start with http:// to explicitly use http instead of https, and can end

src/packages/next/components/landing/content.tsx

@@ -224,7 +224,7 @@ export default function Content(props: Props) {
                 }
               />
             </div>
-            <SignIn startup={startup ?? title} hideFree={true} />
+            <SignIn startup={startup ?? title} hideFree={true} emphasize />
           </Space>
         </Col>
         <Col sm={14} xs={24}>

src/packages/next/components/landing/index-list.tsx

@@ -15,21 +15,27 @@ import { MAX_WIDTH } from "lib/config";
 import useCustomize, { CustomizeType } from "lib/use-customize";
 
 export interface Item {
-  link: string;
+  link: string | ((customize: CustomizeType) => string | undefined);
   linkText?: ReactNode;
   title: ReactNode;
   logo: IconName | StaticImageData;
   logoBackground?: string; // #color
   image?: StaticImageData;
   imageWidth?: string;
-  description: ReactNode;
+  description: ReactNode | ((customize: CustomizeType) => ReactNode);
   shareServer?: boolean; // only show if the share server is enabled
   landingPages?: boolean; // only show if landing pages are enabled.
   hide?: (customize: CustomizeType) => boolean; // if returns true, then this item will be hidden.
 }
 
 export type DataSource = Item[];
 
+// replaces the description attribute by {description: ReactNode}
+type ItemProcessed = Omit<Item, "description" | "link"> & {
+  description: ReactNode;
+  link: string;
+};
+
 interface Props {
   title: ReactNode;
   description: ReactNode;
@@ -41,13 +47,27 @@ interface Props {
 export default function IndexList({ title, description, dataSource }: Props) {
   const customize = useCustomize();
   const { shareServer, landingPages } = customize;
-  const filteredDataSource = useMemo(() => {
-    return dataSource.filter((item) => {
-      if (item.shareServer && !shareServer) return false;
-      if (item.landingPages && !landingPages) return false;
-      if (item.hide?.(customize)) return false;
-      return true;
-    });
+  const filteredDataSource: ItemProcessed[] = useMemo(() => {
+    return dataSource
+      .filter((item) => {
+        if (item.shareServer && !shareServer) return false;
+        if (item.landingPages && !landingPages) return false;
+        if (item.hide?.(customize)) return false;
+        return true;
+      })
+      .map((item) => {
+        return {
+          ...item,
+          description:
+            typeof item.description === "function"
+              ? item.description(customize)
+              : item.description,
+          link:
+            typeof item.link === "function"
+              ? item.link(customize) ?? ""
+              : item.link,
+        };
+      });
   }, [shareServer, landingPages, dataSource]);
   return (
     <Layout.Content
@@ -80,8 +100,8 @@ export default function IndexList({ title, description, dataSource }: Props) {
   );
 }
 
-function DataList({ dataSource }: { dataSource: Item[] }) {
-  function renderItem(item): ReactNode {
+function DataList({ dataSource }: { dataSource: ItemProcessed[] }) {
+  function renderItem(item: ItemProcessed): ReactNode {
     const icon = (
       <div>
         {isValidElement(item.logo) ? (

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

@@ -1,8 +1,9 @@
-import getSupportUrl from "@cocalc/frontend/support/url";
 import { Button } from "antd";
-import { Icon } from "@cocalc/frontend/components/icon";
 import { useEffect, useState } from "react";
 
+import { Icon } from "@cocalc/frontend/components/icon";
+import getSupportUrl from "@cocalc/frontend/support/url";
+
 export function liveDemoUrl(context) {
   return getSupportUrl({
     subject: "Contact Us!",

src/packages/next/components/landing/sign-in.tsx

@@ -17,6 +17,7 @@ interface Props {
   startup?: ReactNode; // customize the button, e.g. "Start Jupyter Now".
   hideFree?: boolean;
   style?: React.CSSProperties;
+  emphasize?: boolean;
 }
 
 const STYLE: CSSProperties = {
@@ -25,7 +26,7 @@ const STYLE: CSSProperties = {
   marginBottom: "0",
 } as const;
 
-export default function SignIn({ startup, hideFree, style }: Props) {
+export default function SignIn({ startup, hideFree, style, emphasize }: Props) {
   const { anonymousSignup, siteName, account, emailSignup } = useCustomize();
   style = { ...STYLE, ...style };
   const router = useRouter();
@@ -55,6 +56,7 @@ export default function SignIn({ startup, hideFree, style }: Props) {
             style={{ margin: "10px" }}
             title={"Create a new account."}
             onClick={() => router.push("/auth/sign-up")}
+            type={emphasize ? "primary" : undefined}
           >
             Sign Up
           </Button>
@@ -65,6 +67,7 @@ export default function SignIn({ startup, hideFree, style }: Props) {
               "Either create a new account or sign into an existing account."
             }
             onClick={() => router.push("/auth/sign-in")}
+            type={emphasize ? "primary" : undefined}
           >
             Sign In
           </Button>

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

@@ -10,6 +10,7 @@ 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";
@@ -19,14 +20,14 @@ import ChatGPTHelp from "components/openai/chatgpt-help";
 import CodeMirror from "components/share/codemirror";
 import Loading from "components/share/loading";
 import SiteName from "components/share/site-name";
+import { VideoItem } from "components/videos";
 import apiPost from "lib/api/post";
 import { MAX_WIDTH } from "lib/config";
 import { useCustomize } from "lib/customize";
 import getBrowserInfo from "./browser-info";
 import RecentFiles from "./recent-files";
 import { Type } from "./tickets";
 import { NoZendesk } from "./util";
-import { VideoItem } from "components/videos";
 
 const CHATGPT_DISABLED = true;
 const MIN_BODY_LENGTH = 16;
@@ -43,19 +44,26 @@ export type Type = "problem" | "question" | "task" | "purchase" | "chat";
 
 function stringToType(s?: any): Type {
   if (
-    s == "problem" ||
-    s == "question" ||
-    s == "task" ||
-    s == "purchase" ||
-    s == "chat"
+    s === "problem" ||
+    s === "question" ||
+    s === "task" ||
+    s === "purchase" ||
+    s === "chat"
   )
     return s;
   return "problem"; // default;
 }
 
 export default function Create() {
-  const { account, onCoCalcCom, helpEmail, openaiEnabled, siteName, zendesk } =
-    useCustomize();
+  const {
+    account,
+    onCoCalcCom,
+    helpEmail,
+    openaiEnabled,
+    siteName,
+    zendesk,
+    supportVideoCall,
+  } = useCustomize();
   const router = useRouter();
   // The URL the user was viewing when they requested support.
   // This could easily be blank, but if it is set it can be useful.
@@ -131,6 +139,50 @@ export default function Create() {
     );
   }
 
+  function renderChat() {
+    if (type === "chat" && supportVideoCall) {
+      return (
+        <h1 style={{ textAlign: "center" }}>
+          <b>
+            <A href={supportVideoCall}>Book a Video Chat...</A>
+          </b>
+        </h1>
+      );
+    }
+    if (type !== "chat") {
+      return (
+        <>
+          <b>
+            <Status
+              done={body && body.length >= MIN_BODY_LENGTH && hasRequired}
+            />{" "}
+            Description
+          </b>
+          <div
+            style={{
+              marginLeft: "30px",
+              borderLeft: "1px solid lightgrey",
+              paddingLeft: "15px",
+            }}
+          >
+            {type == "problem" && <Problem onChange={setBody} />}
+            {type == "question" && (
+              <Question onChange={setBody} defaultValue={body} />
+            )}
+            {type == "purchase" && (
+              <Purchase
+                onChange={setBody}
+                defaultValue={body}
+                showExtra={showExtra}
+              />
+            )}
+            {type == "task" && <Task onChange={setBody} />}
+          </div>
+        </>
+      );
+    }
+  }
+
   return (
     <Layout.Content style={{ backgroundColor: "white" }}>
       <div
@@ -157,10 +209,15 @@ export default function Create() {
                 {helpEmail ? (
                   <>
                     You can also email us directly at{" "}
-                    <A href={`mailto:${helpEmail}`}>{helpEmail}</A> or{" "}
-                    <A href="https://calendly.com/cocalc/discovery">
-                      book a demo or discovery call
-                    </A>
+                    <A href={`mailto:${helpEmail}`}>{helpEmail}</A>{" "}
+                    {supportVideoCall ? (
+                      <>
+                        or{" "}
+                        <A href={supportVideoCall}>
+                          book a demo or discovery call
+                        </A>
+                      </>
+                    ) : undefined}
                     .
                   </>
                 ) : undefined}
@@ -242,43 +299,7 @@ export default function Create() {
                 <br />
               </>
             )}
-            {type == "chat" && (
-              <h1 style={{ textAlign: "center" }}>
-                <b>
-                  <A href="https://calendly.com/cocalc">Book a Video Chat...</A>
-                </b>
-              </h1>
-            )}
-            {type != "chat" && (
-              <>
-                <b>
-                  <Status
-                    done={body && body.length >= MIN_BODY_LENGTH && hasRequired}
-                  />{" "}
-                  Description
-                </b>
-                <div
-                  style={{
-                    marginLeft: "30px",
-                    borderLeft: "1px solid lightgrey",
-                    paddingLeft: "15px",
-                  }}
-                >
-                  {type == "problem" && <Problem onChange={setBody} />}
-                  {type == "question" && (
-                    <Question onChange={setBody} defaultValue={body} />
-                  )}
-                  {type == "purchase" && (
-                    <Purchase
-                      onChange={setBody}
-                      defaultValue={body}
-                      showExtra={showExtra}
-                    />
-                  )}
-                  {type == "task" && <Task onChange={setBody} />}
-                </div>
-              </>
-            )}
+            {renderChat()}
           </VSpace>
 
           <div style={{ textAlign: "center", marginTop: "30px" }}>
@@ -302,16 +323,16 @@ export default function Create() {
                 {submitting
                   ? "Submitting..."
                   : success
-                    ? "Thank you for creating a ticket"
-                    : submitError
-                      ? "Close the error box to try again"
-                      : !isValidEmailAddress(email)
-                        ? "Enter Valid Email Address above"
-                        : !subject
-                          ? "Enter Subject above"
-                          : (body ?? "").length < MIN_BODY_LENGTH
-                            ? `Describe your ${type} in detail above`
-                            : "Create Support Ticket"}
+                  ? "Thank you for creating a ticket"
+                  : submitError
+                  ? "Close the error box to try again"
+                  : !isValidEmailAddress(email)
+                  ? "Enter Valid Email Address above"
+                  : !subject
+                  ? "Enter Subject above"
+                  : (body ?? "").length < MIN_BODY_LENGTH
+                  ? `Describe your ${type} in detail above`
+                  : "Create Support Ticket"}
               </Button>
             )}
             {submitting && <Loading style={{ fontSize: "32pt" }} />}

src/packages/next/lib/customize.ts

@@ -70,6 +70,7 @@ interface Customize extends ServerCustomize {
   computeServersEnabled?: boolean; // backend configured to run on external compute servers
   enabledPages?: EnabledPageTree; // tree structure which specifies supported routes for this install
   support?: string; // HTML/MD to replace the generic support pages
+  supportVideoCall?: string;
 }
 
 const CustomizeContext = createContext<Partial<Customize>>({});

src/packages/next/pages/pricing/index.tsx

@@ -3,14 +3,15 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+import { Layout } from "antd";
+
 import Footer from "components/landing/footer";
 import Head from "components/landing/head";
 import Header from "components/landing/header";
 import IndexList, { DataSource } from "components/landing/index-list";
 import A from "components/misc/A";
 import { Customize } from "lib/customize";
 import withCustomize from "lib/with-customize";
-import { Layout } from "antd";
 
 const dataSource: DataSource = [
   {