next/support: use "supportVideoCall" in various places, rearrangements, etc.

Author: haraldschilly

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

@@ -62,7 +62,7 @@ export default function Footer() {
     organizationURL,
     enabledPages,
     termsOfServiceURL,
-    account,
+    supportVideoCall,
   } = useCustomize();
 
   const footerColumns: Array<FooterColumn> = [
@@ -140,8 +140,13 @@ export default function Footer() {
         },
         {
           text: "Get a Live Demo",
+          url: supportVideoCall,
+          hide: !enabledPages?.liveDemo || !supportVideoCall,
+        },
+        {
+          text: "Contact Us",
           url: liveDemoUrl("footer"),
-          hide: !account || !enabledPages?.liveDemo,
+          hide: !enabledPages?.support,
         },
       ],
     },

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

@@ -72,7 +72,7 @@ export default function Header(props: Props) {
           }}
         >
           {true || account ? (
-            <LiveDemo context="header" type="primary" />
+            <LiveDemo context="header" btnType="primary" />
           ) : (
             <Button
               type="primary"

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

@@ -1,8 +1,10 @@
 import { Button } from "antd";
-import { useEffect, useState } from "react";
+import type { ButtonType } from "antd/es/button";
+import type { ReactNode } from "react";
 
 import { Icon } from "@cocalc/frontend/components/icon";
 import getSupportUrl from "@cocalc/frontend/support/url";
+import { useCustomize } from "lib/customize";
 
 export function liveDemoUrl(context) {
   return getSupportUrl({
@@ -15,18 +17,20 @@ export function liveDemoUrl(context) {
 
 interface Props {
   context: string;
-  label?;
-  type?;
+  label?: string | ReactNode;
+  btnType?: ButtonType;
 }
 
-export default function LiveDemo({ context, label, type }: Props) {
-  const [href, setHref] = useState<string | undefined>(undefined);
-  useEffect(() => {
-    setHref(liveDemoUrl(context));
-  }, []);
+export default function LiveDemo({ label, btnType }: Props) {
+  const { supportVideoCall } = useCustomize();
+
+  if (!supportVideoCall) {
+    return null;
+  }
+
   return (
-    <Button href={href} type={type}>
-      <Icon name="users" /> {label ?? "Contact Us!"}
+    <Button href={supportVideoCall} type={btnType}>
+      <Icon name="video-camera" /> {label ?? "Book a Demo!"}
     </Button>
   );
 }

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

@@ -8,6 +8,7 @@ import { useRouter } from "next/router";
 import { join } from "path";
 import { CSSProperties, ReactNode } from "react";
 
+import { Icon } from "@cocalc/frontend/components/icon";
 import SSO from "components/auth/sso";
 import { Paragraph } from "components/misc";
 import basePath from "lib/base-path";
@@ -39,6 +40,7 @@ export default function SignIn({ startup, hideFree, style, emphasize }: Props) {
           onClick={() => (window.location.href = join(basePath, "projects"))}
           title={`Open the ${siteName} app and view your projects.`}
           type="primary"
+          icon={<Icon name="edit" />}
         >
           Your {siteName} Projects
         </Button>

src/packages/next/lib/with-customize.ts

@@ -105,7 +105,7 @@ export default async function withCustomize(
     systemActivity: true,
     status: customize.onCoCalcCom,
     termsOfService: !customize.landingPages && !!customize.termsOfServiceURL,
-    liveDemo: customize.isCommercial,
+    liveDemo: !!customize.supportVideoCall && customize.isCommercial,
   };
 
   if (obj == null) {