next: start working on video call links, 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

@@ -22,14 +22,19 @@ export interface Item {
   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"> & {
+  description: ReactNode;
+};
+
 interface Props {
   title: ReactNode;
   description: ReactNode;
@@ -41,13 +46,23 @@ 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,
+        };
+      });
   }, [shareServer, landingPages, dataSource]);
   return (
     <Layout.Content
@@ -80,8 +95,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/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 = [
   {

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

@@ -3,33 +3,39 @@ import { Col, Layout } from "antd";
 import Footer from "components/landing/footer";
 import Head from "components/landing/head";
 import Header from "components/landing/header";
-import A from "components/misc/A";
-import ChatGPTHelp from "components/openai/chatgpt-help";
-import { Customize } from "lib/customize";
-import withCustomize from "lib/with-customize";
-import { VideoItem } from "components/videos";
 import IndexList, { DataSource } from "components/landing/index-list";
+import SocialMediaIconList from "components/landing/social-media-icon-list";
 import { Title } from "components/misc";
+import A from "components/misc/A";
 import SanitizedMarkdown from "components/misc/sanitized-markdown";
-import SocialMediaIconList from "components/landing/social-media-icon-list";
+import ChatGPTHelp from "components/openai/chatgpt-help";
+import { VideoItem } from "components/videos";
+import { Customize, type CustomizeType } from "lib/customize";
+import withCustomize from "lib/with-customize";
 
 const dataSource = [
   {
     link: "/support/new",
     title: "Create a New Support Ticket",
     logo: "medkit",
     hide: (customize) => !customize.zendesk,
-    description: (
+    description: ({ supportVideoCall }: CustomizeType) => (
       <>
         If you are having any trouble or just have a question,{" "}
         <A href="/support/new">
           <b>create a support ticket</b>{" "}
         </A>
-        or{" "}
-        <A href="https://calendly.com/cocalc">
-          <b>book a video chat</b>
-        </A>
-        . You do NOT have to be a paying customer to open a ticket.
+        {supportVideoCall ? (
+          <>
+            or{" "}
+            <A href={supportVideoCall}>
+              <b>book a video chat</b>
+            </A>
+          </>
+        ) : (
+          ""
+        )}
+        . You do NOT have to be a paying customer to contact us!
         <VideoItem
           width={800}
           style={{ margin: "15px 0" }}
@@ -56,7 +62,7 @@ const dataSource = [
   {
     link: "https://calendly.com/cocalc",
     title: "Book a Video Chat",
-    logo: "video",
+    logo: "video-camera",
     description: (
       <>
         Book a{" "}
@@ -130,7 +136,7 @@ const dataSource = [
       </>
     ),
   },
-] as DataSource;
+] as const satisfies DataSource;
 
 export default function Preferences({ customize }) {
   const { support, onCoCalcCom } = customize;

src/packages/util/db-schema/server-settings.ts

@@ -128,4 +128,5 @@ export interface Customize {
   cloudFilesystemsEnabled?: boolean;
   githubProjectId?: string;
   support?: string;
+  supportVideoCall?: string;
 }

src/packages/util/db-schema/site-defaults.ts

@@ -62,6 +62,7 @@ export type SiteSettingsKeys =
   | "imprint"
   | "policies"
   | "support"
+  | "support_video_call"
   | "openai_enabled"
   | "google_vertexai_enabled"
   | "mistral_enabled"
@@ -522,6 +523,14 @@ export const site_settings_conf: SiteSettings = {
     multiline: 5,
     tags: ["Theme"],
   },
+  support_video_call: {
+    name: "Video Call for Support",
+    desc: "Link to a form to book a video call.",
+    default: "https://calendly.com/cocalc/discovery?back=1",
+    clearable: true,
+    show: (conf) => show_theming_vars(conf) && only_cocalc_com(conf),
+    tags: ["Theme"],
+  },
   // ============== END THEMING ============
 
   versions: {