1
/*
2
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Col, Flex, Layout, Row, Space, Typography } from "antd";
7

8
import { COLORS } from "@cocalc/util/theme";
9

10
import { is_valid_email_address as isValidEmailAddress } from "@cocalc/util/misc";
11
import Logo from "components/logo";
12
import { CSS } from "components/misc";
13
import A from "components/misc/A";
14
import { MAX_WIDTH } from "lib/config";
15
import { useCustomize } from "lib/customize";
16

17
import { liveDemoUrl } from "components/landing/live-demo";
18
import SocialMediaIconList from "./social-media-icon-list";
19

20
const FOOTER_STYLE: CSS = {
21
  borderTop: "1px solid lightgrey",
22
  backgroundColor: "white",
23
};
24

25
const FOOTER_COLUMNS_STYLE: CSS = {
26
  minWidth: "200px",
27
  flexGrow: 1,
28
} as const;
29

30
const FOOTER_COLUMN_STYLE = {
31
  marginTop: "32px",
32
  minWidth: "128px",
33
} as const;
34

35
const FOOTER_TABLE_STYLE: CSS = {
36
  maxWidth: MAX_WIDTH,
37
  marginBottom: "36px",
38
  width: "100%",
39
} as const;
40

41
const LOGO_COLUMN_STYLE = {
42
  paddingBottom: "24px",
43
  marginTop: "32px",
44
} as const;
45

46
interface FooterLink {
47
  text: string;
48
  url: string;
49
  hide?: boolean;
50
}
51

52
interface FooterColumn {
53
  header: string;
54
  links: Array<FooterLink>;
55
}
56

57
export default function Footer() {
58
  const {
59
    contactEmail,
60
    onCoCalcCom,
61
    organizationName,
62
    organizationURL,
63
    enabledPages,
64
    termsOfServiceURL,
65
    supportVideoCall,
66
  } = useCustomize();
67

68
  const footerColumns: Array<FooterColumn> = [
69
    {
70
      header: "Product",
71
      links: [
72
        {
73
          text: "Store",
74
          url: "/store",
75
          hide: !enabledPages?.store,
76
        },
77
        {
78
          text: "Features",
79
          url: "/features",
80
          hide: !enabledPages?.features,
81
        },
82
        {
83
          text: "Licenses",
84
          url: "/licenses",
85
          hide: !enabledPages?.licenses,
86
        },
87
        {
88
          text: "Pricing",
89
          url: "/pricing",
90
          hide: !enabledPages?.pricing,
91
        },
92
        {
93
          text: "On-Premises",
94
          url: "/pricing/onprem",
95
          hide: !enabledPages?.onPrem,
96
        },
97
        {
98
          text: "Translations",
99
          url: "/lang",
100
        },
101
        {
102
          text: "System Activity",
103
          url: "/info/status",
104
          hide: !enabledPages?.systemActivity,
105
        },
106
        {
107
          text: "Status",
108
          url: "https://status.cocalc.com/",
109
          hide: !enabledPages?.status,
110
        },
111
      ],
112
    },
113
    {
114
      header: "Resources",
115
      links: [
116
        {
117
          text: "Documentation",
118
          url: "/info/doc",
119
          hide: !enabledPages?.info,
120
        },
121
        {
122
          text: "Compute Servers",
123
          url: "https://doc.cocalc.com/compute_server.html",
124
          hide: !enabledPages?.compute,
125
        },
126
        {
127
          text: "Public Share",
128
          url: "/share/public_paths/page/1",
129
          hide: !enabledPages?.share,
130
        },
131
        {
132
          text: "Software",
133
          url: "/software",
134
          hide: !enabledPages?.software,
135
        },
136
        {
137
          text: "Support",
138
          url: "/support",
139
          hide: !enabledPages?.support,
140
        },
141
        {
142
          text: "Get a Live Demo",
143
          url: supportVideoCall ?? "",
144
          hide: !enabledPages?.liveDemo || !supportVideoCall,
145
        },
146
        {
147
          text: "Contact Us",
148
          url: liveDemoUrl("footer"),
149
          hide: !enabledPages?.support,
150
        },
151
      ],
152
    },
153
    {
154
      header: "Company",
155
      links: [
156
        {
157
          text: "About",
158
          url: "/about",
159
          hide: !enabledPages?.about.index,
160
        },
161
        {
162
          text: "Contact",
163
          url: contactEmail || "",
164
          hide: !enabledPages?.contact,
165
        },
166
        {
167
          text: "Events",
168
          url: "/about/events",
169
          hide: !enabledPages?.about.events,
170
        },
171
        {
172
          text: "Team",
173
          url: "/about/team",
174
          hide: !enabledPages?.about.team,
175
        },
176
        {
177
          text: "Imprint",
178
          url: "/policies/imprint",
179
          hide: !enabledPages?.policies.imprint,
180
        },
181
        {
182
          text: "News",
183
          url: "/news",
184
          hide: !enabledPages?.news,
185
        },
186
        {
187
          text: "Policies",
188
          url: "/policies",
189
          hide: !enabledPages?.policies.index,
190
        },
191
        {
192
          text: "Terms of Service",
193
          url: termsOfServiceURL || "",
194
          hide: !enabledPages?.termsOfService,
195
        },
196
        {
197
          text: organizationName || "Company",
198
          url: organizationURL || "",
199
          hide: !enabledPages?.organization,
200
        },
201
      ],
202
    },
203
  ];
204

205
  function renderFooterColumns() {
206
    return footerColumns.map((column) => (
207
      <Space
208
        key={`footer-column-${column.header}`}
209
        direction="vertical"
210
        size="small"
211
        style={FOOTER_COLUMN_STYLE}
212
      >
213
        <Typography.Title level={5}>{column.header}</Typography.Title>
214
        {column.links
215
          .filter((footerLink) => !footerLink.hide)
216
          .map((footerLink) => (
217
            <A
218
              key={footerLink.url}
219
              href={
220
                isValidEmailAddress(footerLink.url)
221
                  ? `mailto:${footerLink.url}`
222
                  : footerLink.url
223
              }
224
              style={{ color: COLORS.GRAY_D }}
225
            >
226
              {footerLink.text}
227
            </A>
228
          ))}
229
      </Space>
230
    ));
231
  }
232

233
  return (
234
    <Layout.Footer style={FOOTER_STYLE}>
235
      <Flex justify="center">
236
        <Row justify="space-between" style={FOOTER_TABLE_STYLE}>
237
          <Col xs={24} md={8}>
238
            <Flex
239
              justify="space-between"
240
              align="center"
241
              wrap="wrap"
242
              style={LOGO_COLUMN_STYLE}
243
            >
244
              <Logo type="rectangular" width={150} />
245
              {onCoCalcCom && (
246
                <SocialMediaIconList
247
                  links={{
248
                    facebook: "https://www.facebook.com/CoCalcOnline",
249
                    github: "https://github.com/sagemathinc/cocalc",
250
                    linkedin: "https://www.linkedin.com/company/sagemath-inc./",
251
                    twitter: "https://twitter.com/cocalc_com",
252
                    youtube: "https://www.youtube.com/c/SagemathCloud",
253
                  }}
254
                  iconFontSize={20}
255
                />
256
              )}
257
            </Flex>
258
          </Col>
259
          <Col xs={24} md={16}>
260
            <Flex
261
              justify="space-between"
262
              style={FOOTER_COLUMNS_STYLE}
263
              wrap="wrap"
264
            >
265
              {renderFooterColumns()}
266
            </Flex>
267
          </Col>
268
        </Row>
269
      </Flex>
270
    </Layout.Footer>
271
  );
272
}
273

274