1
import { Col, Layout } from "antd";
2

3
import Footer from "components/landing/footer";
4
import Head from "components/landing/head";
5
import Header from "components/landing/header";
6
import IndexList, { DataSource } from "components/landing/index-list";
7
import SocialMediaIconList from "components/landing/social-media-icon-list";
8
import { Title } from "components/misc";
9
import A from "components/misc/A";
10
import SanitizedMarkdown from "components/misc/sanitized-markdown";
11
import ChatGPTHelp from "components/openai/chatgpt-help";
12
import { VideoItem } from "components/videos";
13
import { Customize, type CustomizeType } from "lib/customize";
14
import withCustomize from "lib/with-customize";
15

16
const dataSource = [
17
  {
18
    link: "/support/new",
19
    title: "Create a New Support Ticket",
20
    logo: "medkit",
21
    hide: (customize) => !customize.zendesk,
22
    description: ({ supportVideoCall }: CustomizeType) => (
23
      <>
24
        If you are having any trouble or just have a question,{" "}
25
        <A href="/support/new">
26
          <b>create a support ticket</b>{" "}
27
        </A>
28
        {supportVideoCall ? (
29
          <>
30
            or{" "}
31
            <A href={supportVideoCall}>
32
              <b>book a video chat</b>
33
            </A>
34
          </>
35
        ) : (
36
          ""
37
        )}
38
        . You do NOT have to be a paying customer to contact us!
39
        <VideoItem
40
          width={800}
41
          style={{ margin: "15px 0" }}
42
          id={"4Ef9sxX59XM"}
43
        />
44
      </>
45
    ),
46
  },
47
  {
48
    link: "/support/tickets",
49
    title: "Status of Support Tickets",
50
    logo: "life-saver",
51
    hide: (customize) => !customize.zendesk,
52
    description: (
53
      <>
54
        Check on the{" "}
55
        <A href="/support/tickets">
56
          <b>status of your support tickets</b>
57
        </A>
58
        .
59
      </>
60
    ),
61
  },
62
  {
63
    link: ({ supportVideoCall }: CustomizeType) => supportVideoCall,
64
    title: "Book a Video Chat",
65
    logo: "video-camera",
66
    description: ({ supportVideoCall }: CustomizeType) => (
67
      <>
68
        Book a{" "}
69
        <A href={supportVideoCall}>
70
          <b>video chat</b>
71
        </A>
72
        .
73
      </>
74
    ),
75
  },
76
  {
77
    link: "/support/chatgpt",
78
    title: "ChatGPT Suppport",
79
    logo: "robot",
80
    hide: (customize) => !customize.openaiEnabled || !customize.onCoCalcCom,
81
    description: (
82
      <>
83
        Our <A href="/support/chatgpt">integrated ChatGPT support</A> is free
84
        and often very helpful since it knows so much about the open source
85
        software in CoCalc.
86
        <ChatGPTHelp
87
          style={{ marginTop: "15px" }}
88
          size="large"
89
          tag="support-index"
90
        />
91
      </>
92
    ),
93
  },
94
  {
95
    link: "/support/community",
96
    title: "CoCalc Community Support",
97
    logo: "users",
98
    description: (
99
      <>
100
        <A href="https://github.com/sagemathinc/cocalc/discussions">
101
          Join a discussion
102
        </A>{" "}
103
        or{" "}
104
        <A href="https://groups.google.com/forum/?fromgroups#!forum/cocalc">
105
          post to the mailing list.{" "}
106
        </A>
107
        <SocialMediaIconList
108
          links={{
109
            facebook: "https://www.facebook.com/CoCalcOnline",
110
            github: "https://github.com/sagemathinc/cocalc",
111
            linkedin: "https://www.linkedin.com/company/sagemath-inc./",
112
            twitter: "https://twitter.com/cocalc_com",
113
            youtube: "https://www.youtube.com/c/SagemathCloud",
114
          }}
115
          iconFontSize={20}
116
        />
117
      </>
118
    ),
119
  },
120
  {
121
    landingPages: true,
122
    link: ({ supportVideoCall }: CustomizeType) => supportVideoCall,
123
    title: "Request a Live Demo!",
124
    logo: "video-camera",
125
    hide: ({ supportVideoCall, isCommercial }: CustomizeType) =>
126
      !isCommercial || !supportVideoCall,
127
    description: ({ supportVideoCall }: CustomizeType) => (
128
      <>
129
        If you're seriously considering using CoCalc to teach a course, but
130
        aren't sure of some of the details and really need to just{" "}
131
        <b>talk to a person</b>,{" "}
132
        <A href={supportVideoCall}>
133
          fill out this form and request a live video chat with us
134
        </A>
135
        . We love chatting (in English, German and Russian), and will hopefully
136
        be able to answer all of your questions.
137
      </>
138
    ),
139
  },
140
] as const satisfies DataSource;
141

142
export default function Preferences({ customize }) {
143
  const { support, onCoCalcCom } = customize;
144

145
  function renderContent() {
146
    if (!onCoCalcCom && support) {
147
      return (
148
        <Col
149
          xs={{ span: 12, offset: 6 }}
150
          style={{
151
            marginTop: "30px",
152
            marginBottom: "30px",
153
          }}
154
        >
155
          <Title level={2}>Support</Title>
156
          <SanitizedMarkdown value={support} />
157
        </Col>
158
      );
159
    } else {
160
      return (
161
        <IndexList
162
          title="Support"
163
          description={
164
            <>
165
              We provide extremely good support to our users and customers. If
166
              you run into a problem, read{" "}
167
              <A href="https://doc.cocalc.com/">our extensive documentation</A>,{" "}
168
              <A href="/support/community">check online forums and chatrooms</A>{" "}
169
              or <A href="/support/new">create a support ticket</A>.
170
            </>
171
          }
172
          dataSource={dataSource}
173
        />
174
      );
175
    }
176
  }
177

178
  return (
179
    <Customize value={customize}>
180
      <Head title="Support" />
181
      <Layout>
182
        <Header page="support" />
183
        {renderContent()}
184
        <Footer />
185
      </Layout>
186
    </Customize>
187
  );
188
}
189

190
export async function getServerSideProps(context) {
191
  return await withCustomize({ context });
192
}
193

194