add some video chat links

Author: williamstein

src/packages/next/components/landing/social-media-icon-list.tsx

@@ -20,20 +20,16 @@ const ICON_MAP: Record<SocialMediaType, IconName> = {
   [SocialMediaType.LINKEDIN]: "linkedin-filled",
   [SocialMediaType.TWITTER]: "twitter",
   [SocialMediaType.YOUTUBE]: "youtube-filled",
-}
+};
 
 export interface SocialMediaIconListProps {
   links: Partial<Record<SocialMediaType, string>>;
   iconFontSize?: number;
   style?: React.CSSProperties;
 }
 
-const SocialMediaIconList = (props: SocialMediaIconListProps) => {
-  const {
-    links,
-    iconFontSize = 12,
-    style = {}
-  } = props;
+export default function SocialMediaIconList(props: SocialMediaIconListProps) {
+  const { links, iconFontSize = 12, style = {} } = props;
 
   return (
     <Flex
@@ -42,9 +38,11 @@ const SocialMediaIconList = (props: SocialMediaIconListProps) => {
       style={{
         fontSize: `${iconFontSize}px`,
         ...style,
-      }}>
-      {
-        Object.keys(links).sort().map((mediaType: SocialMediaType) => (
+      }}
+    >
+      {Object.keys(links)
+        .sort()
+        .map((mediaType: SocialMediaType) => (
           <a
             key={mediaType}
             href={links[mediaType]}
@@ -53,12 +51,12 @@ const SocialMediaIconList = (props: SocialMediaIconListProps) => {
               color: COLORS.GRAY,
             }}
           >
-            <Icon name={ICON_MAP[mediaType]} style={{ margin: `0 ${iconFontSize/2}px` }}/>
+            <Icon
+              name={ICON_MAP[mediaType]}
+              style={{ margin: `0 ${iconFontSize / 2}px` }}
+            />
           </a>
-        ))
-      }
+        ))}
     </Flex>
   );
 }
-
-export default SocialMediaIconList;

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

@@ -66,7 +66,7 @@ function SupportTimeline({ tickets }) {
     v.push(
       <Timeline.Item key={ticket.id} color={statusToColor(ticket.status)}>
         <Ticket ticket={ticket} />
-      </Timeline.Item>
+      </Timeline.Item>,
     );
   }
   return <Timeline>{v}</Timeline>;
@@ -182,6 +182,7 @@ const TYPE_COLOR: { [name in Type]: string } = {
   question: "blue",
   task: "orange",
   purchase: "green",
+  chat: "purple",
 };
 
 export function Type({ status, type }: { status?: string; type: Type }) {

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

@@ -11,6 +11,7 @@ import { VideoItem } from "components/videos";
 import IndexList, { DataSource } from "components/landing/index-list";
 import { Title } from "components/misc";
 import SanitizedMarkdown from "components/misc/sanitized-markdown";
+import SocialMediaIconList from "components/landing/social-media-icon-list";
 
 const dataSource = [
   {
@@ -22,10 +23,13 @@ const dataSource = [
       <>
         If you are having any trouble or just have a question,{" "}
         <A href="/support/new">
-          <b>create a support ticket</b>
+          <b>create a support ticket</b>{" "}
         </A>
-        . You do NOT have to be a paying customer to open a ticket, though we
-        prioritize customer requests.
+        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.
         <VideoItem
           width={800}
           style={{ margin: "15px 0" }}
@@ -49,6 +53,20 @@ const dataSource = [
       </>
     ),
   },
+  {
+    link: "https://calendly.com/cocalc",
+    title: "Book a Video Chat",
+    logo: "video",
+    description: (
+      <>
+        Book a{" "}
+        <A href="https://calendly.com/cocalc">
+          <b>video chat</b>
+        </A>
+        .
+      </>
+    ),
+  },
   {
     link: "/support/chatgpt",
     title: "ChatGPT Suppport",
@@ -80,8 +98,16 @@ const dataSource = [
         <A href="https://groups.google.com/forum/?fromgroups#!forum/cocalc">
           post to the mailing list.{" "}
         </A>
-        We also have <A href="https://twitter.com/cocalc_com">a Twitter feed</A>{" "}
-        and <A href="https://about.cocalc.com/cocalcs-blog/">a blog</A>.
+        <SocialMediaIconList
+          links={{
+            facebook: "https://www.facebook.com/CoCalcOnline",
+            github: "https://github.com/sagemathinc/cocalc",
+            linkedin: "https://www.linkedin.com/company/sagemath-inc./",
+            twitter: "https://twitter.com/cocalc_com",
+            youtube: "https://www.youtube.com/c/SagemathCloud",
+          }}
+          iconFontSize={20}
+        />
       </>
     ),
   },