next/support/new: make the "chat" info more stand out and remove the note about submitted tickets for chats

haraldschilly · haraldschilly · commit 72ec7deec16f · 2025-05-15T15:44:39.000+02:00
diff --git a/src/packages/next/components/auth/sign-up.tsx b/src/packages/next/components/auth/sign-up.tsx
@@ -3,12 +3,13 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Alert, Button, Checkbox, Input } from "antd";
+import { Alert, Button, Checkbox, Divider, Input } from "antd";
 import { CSSProperties, useEffect, useRef, useState } from "react";
 import {
   GoogleReCaptchaProvider,
   useGoogleReCaptcha,
 } from "react-google-recaptcha-v3";
+
 import Markdown from "@cocalc/frontend/editors/slate/static-markdown";
 import {
   CONTACT_TAG,
@@ -22,6 +23,7 @@ import {
 } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { Strategy } from "@cocalc/util/types/sso";
+import { Paragraph } from "components/misc";
 import A from "components/misc/A";
 import Loading from "components/share/loading";
 import apiPost from "lib/api/post";
@@ -99,7 +101,7 @@ function SignUp0({
 
   const submittable = useRef<boolean>(false);
   const { executeRecaptcha } = useGoogleReCaptcha();
-  const { strategies } = useCustomize();
+  const { strategies, supportVideoCall } = useCustomize();
 
   // Sometimes the user if this component knows requiresToken and sometimes they don't.
   // If they don't, we have to make an API call to figure it out.
@@ -263,13 +265,21 @@ function SignUp0({
       minimal={minimal}
       title={`Create a free account with ${siteName}`}
     >
-      <div>
+      <Paragraph>
         By creating an account, you agree to the{" "}
         <A external={true} href="/policies/terms">
           Terms of Service
         </A>
         .
-      </div>
+      </Paragraph>
+      {onCoCalcCom && supportVideoCall ? (
+        <Paragraph>
+          Do you need more information how {siteName} can be useful for you?{" "}
+          <A href={supportVideoCall}>Book a video call</A> and we'll help you
+          decide.
+        </Paragraph>
+      ) : undefined}
+      <Divider />
       {!minimal && onCoCalcCom ? (
         <Tags
           setTags={setTags}
diff --git a/src/packages/next/components/landing/footer.tsx b/src/packages/next/components/landing/footer.tsx
@@ -140,7 +140,7 @@ export default function Footer() {
         },
         {
           text: "Get a Live Demo",
-          url: supportVideoCall,
+          url: supportVideoCall ?? "",
           hide: !enabledPages?.liveDemo || !supportVideoCall,
         },
         {
diff --git a/src/packages/next/components/store/overview.tsx b/src/packages/next/components/store/overview.tsx
@@ -6,10 +6,12 @@
 import { Divider } from "antd";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
+
 import { Icon, PAYASYOUGO_ICON } from "@cocalc/frontend/components/icon";
 import { Paragraph } from "components/misc";
 import A from "components/misc/A";
 import SiteName from "components/share/site-name";
+import { useCustomize } from "lib/customize";
 import {
   OVERVIEW_LARGE_ICON,
   OVERVIEW_STYLE,
@@ -19,6 +21,7 @@ import {
 
 export default function Overview() {
   const router = useRouter();
+  const { supportVideoCall } = useCustomize();
 
   // most likely, user will go to the cart next
   useEffect(() => {
@@ -31,11 +34,18 @@ export default function Overview() {
       <h2 style={{ marginBottom: "30px" }}>
         Welcome to the <SiteName /> Store!
       </h2>
-      <div style={{ fontSize: "13pt" }}>
+      <Paragraph style={{ fontSize: "13pt" }}>
         Shop below for <A href="/store/site-license">licenses</A> and{" "}
         <A href="/store/vouchers">vouchers</A> or explore{" "}
         <A href="/pricing">all available products and pricing</A>.
-      </div>
+      </Paragraph>
+      {supportVideoCall ? (
+        <Paragraph>
+          Not sure what you need?{" "}
+          <A href={supportVideoCall}>Book a video call</A> and we'll help you
+          decide.
+        </Paragraph>
+      ) : undefined}
       <OverviewRow>
         <Product icon="key" title="Licenses" href="/store/site-license">
           Buy a license to upgrade projects, get internet access, more CPU, disk
diff --git a/src/packages/next/components/support/create.tsx b/src/packages/next/components/support/create.tsx
@@ -142,14 +142,25 @@ 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>
+        <Alert
+          type="info"
+          showIcon={false}
+          description={
+            <Paragraph style={{ fontSize: "16px" }}>
+              Please describe what you want to discuss in the{" "}
+              <A href={supportVideoCall}>video chat</A>. We will then contact
+              you to confirm the time.
+            </Paragraph>
+          }
+          message={
+            <Title level={2}>
+              <Icon name="video-camera" /> You can{" "}
+              <A href={supportVideoCall}>book a video chat</A> with us.
+            </Title>
+          }
+        />
       );
-    }
-    if (type !== "chat") {
+    } else {
       return (
         <>
           <b>
@@ -165,18 +176,18 @@ export default function Create() {
               paddingLeft: "15px",
             }}
           >
-            {type == "problem" && <Problem onChange={setBody} />}
-            {type == "question" && (
+            {type === "problem" && <Problem onChange={setBody} />}
+            {type === "question" && (
               <Question onChange={setBody} defaultValue={body} />
             )}
-            {type == "purchase" && (
+            {type === "purchase" && (
               <Purchase
                 onChange={setBody}
                 defaultValue={body}
                 showExtra={showExtra}
               />
             )}
-            {type == "task" && <Task onChange={setBody} />}
+            {type === "task" && <Task onChange={setBody} />}
           </div>
         </>
       );
@@ -200,28 +211,27 @@ export default function Create() {
         {showExtra && (
           <>
             <Space>
-              <p style={{ fontSize: "12pt" }}>
-                Create a new support ticket below or{" "}
-                <A href="/support/tickets">
-                  check the status of your support tickets
-                </A>
-                .{" "}
+              <Space direction="vertical" size="large">
+                <Paragraph style={{ fontSize: "16px" }}>
+                  Create a new support ticket below or{" "}
+                  <A href="/support/tickets">
+                    check the status of your support tickets
+                  </A>
+                  .
+                </Paragraph>
                 {helpEmail ? (
-                  <>
+                  <Paragraph style={{ fontSize: "16px" }}>
                     You can also email us directly at{" "}
-                    <A href={`mailto:${helpEmail}`}>{helpEmail}</A>{" "}
-                    {supportVideoCall ? (
-                      <>
-                        or{" "}
-                        <A href={supportVideoCall}>
-                          book a demo or discovery call
-                        </A>
-                      </>
-                    ) : undefined}
-                    .
-                  </>
+                    <A href={`mailto:${helpEmail}`}>{helpEmail}</A>.
+                  </Paragraph>
                 ) : undefined}
-              </p>
+                {supportVideoCall ? (
+                  <Paragraph style={{ fontSize: "16px" }}>
+                    Alternatively, feel free to{" "}
+                    <A href={supportVideoCall}>book a video call</A> with us.
+                  </Paragraph>
+                ) : undefined}
+              </Space>
               <VideoItem
                 width={600}
                 style={{ margin: "15px 0", width: "600px" }}
@@ -372,11 +382,14 @@ 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>
+        {type !== "chat" && (
+          <Paragraph 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>
+            .
+          </Paragraph>
+        )}
       </div>
     </Layout.Content>
   );

Original file line number	Diff line number	Diff line change
`@@ -140,7 +140,7 @@ export default function Footer() {`
`140`	`140`	`},`
`141`	`141`	`{`
`142`	`142`	`text: "Get a Live Demo",`
`143`		`- url: supportVideoCall,`
	`143`	`+ url: supportVideoCall ?? "",`
`144`	`144`	`hide: !enabledPages?.liveDemo \|\| !supportVideoCall,`
`145`	`145`	`},`
`146`	`146`	`{`