test and slightly tweak free project shutdown

- there is a useInterval hook, so don't reinvent it.
- red on grey is not optimal from an *accessibility* perspective, so
  switch the colorscheme to one of the officially supported ones for
  tags
- reduced trial period a bit

Author: williamstein

src/packages/frontend/project/trial-banner.tsx

@@ -3,15 +3,14 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Alert, Modal, Space, Tag } from "antd";
+import { Alert, Modal, Space, Tag, Tooltip } from "antd";
 import humanizeList from "humanize-list";
 import { join } from "path";
-
+import { useInterval } from "react-interval-hook";
 import {
   CSS,
   React,
   redux,
-  useEffect,
   useForceUpdate,
   useMemo,
   useRef,
@@ -387,11 +386,7 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
   const openFiles = useTypedRedux({ project_id }, "open_files_order");
   const triggered = useRef<boolean>(false);
   const update = useForceUpdate();
-
-  useEffect(() => {
-    const interval = setInterval(update, 1000);
-    return () => clearInterval(interval);
-  }, []);
+  useInterval(update, 1000);
 
   if (
     status.get("state") !== "running" ||
@@ -404,7 +399,9 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
 
   // start_ts is e.g. 1508576664416
   const start_ts = project.getIn(["status", "start_ts"]);
-  if (start_ts == undefined) return null;
+  if (start_ts == null && !showInfo) {
+    return null;
+  }
 
   const shutdown_ts = start_ts + 1000 * 60 * limit_min;
   const countdown = shutdown_ts - server_time().getTime();
@@ -449,7 +446,7 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
                 <A href={BUY_A_LICENSE_URL}>purchasing a license</A>.
               </Paragraph>
               <Paragraph>
-                Behind this curtains,{" "}
+                Behind the curtain,{" "}
                 <A href={"/about/team"}>humans are working hard</A> to keep the
                 service running and improving it constantly. Your files and
                 computations <A href={"/info/status"}>run in our cluster</A>,
@@ -470,7 +467,8 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
                 >
                   Contact us
                 </A>{" "}
-                if you can give support in other ways.
+                if you can give support in other ways or have any questions or
+                comments.
               </Paragraph>
             </>
           }
@@ -482,30 +480,31 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
   return (
     <>
       {renderInfo()}
-      <Tag
-        style={{
-          marginTop: "5px",
-          fontSize,
-          float: "right",
-          fontWeight: "bold",
-          color: COLORS.ANTD_RED,
-          cursor: "pointer",
-        }}
-        color={COLORS.GRAY_LL}
-        onClick={() => {
-          setShowInfo(true);
-          track("trial-banner", { what: "countdown", project_id });
-        }}
-      >
-        <TimeAmount
-          key={"time"}
-          amount={countdwon0}
-          compact={true}
-          showIcon={true}
-          countdown={countdwon0}
-          style={{ color: COLORS.ANTD_RED }}
-        />
-      </Tag>
+      <Tooltip title="Automatic Project Shutdown: click for details...">
+        <Tag
+          style={{
+            marginTop: "5px",
+            fontSize,
+            float: "right",
+            fontWeight: "bold",
+            cursor: "pointer",
+          }}
+          color={"red"}
+          onClick={() => {
+            setShowInfo(true);
+            track("trial-banner", { what: "countdown", project_id });
+          }}
+        >
+          <TimeAmount
+            key={"time"}
+            amount={countdwon0}
+            compact={true}
+            showIcon={true}
+            countdown={countdwon0}
+            style={{ color: COLORS.ANTD_RED }}
+          />
+        </Tag>
+      </Tooltip>
     </>
   );
 }

src/packages/next/pages/pricing/onprem.tsx

@@ -145,9 +145,8 @@ function Body() {
         <Title level={3}>Purchasing CoCalc OnPrem</Title>
         <Paragraph>
           CoCalc OnPrem is a scalable solution and the license price depends on
-          the use case and expected number of users. Additionally, various
-          levels of support and custom development can be negotiated for an
-          additional cost.
+          the use case, expected number of users, level of support, and amount
+          of customization and training involved.
           <Button
             type="link"
             onClick={() =>
@@ -159,33 +158,6 @@ function Body() {
             Contact us for a quote.
           </Button>
         </Paragraph>
-        <Paragraph>
-          The price starts at{" "}
-          <Button
-            type="primary"
-            size="large"
-            onClick={() =>
-              router.push(
-                `/support/new?hideExtra=true&type=purchase&subject=CoCalc%20OnPrem%20Business&body=${body}&title=Purchase%20CoCalc-OnPrem`,
-              )
-            }
-          >
-            {K8S_PRICE}/year
-          </Button>{" "}
-          or, if an academic discount applies, starting at{" "}
-          <Button
-            type="primary"
-            size="large"
-            onClick={() =>
-              router.push(
-                `/support/new?hideExtra=true&type=purchase&subject=CoCalc%20OnPrem%20Academic&body=${body}&title=Purchase%20CoCalc-OnPrem`,
-              )
-            }
-          >
-            {K8S_PRICE_ACADEMIC}/year
-          </Button>
-          .
-        </Paragraph>
       </>
     );
   }

src/packages/util/consts/billing.ts

@@ -13,5 +13,5 @@ export const ONE_MONTH_MS = AVG_MONTH_DAYS * ONE_DAY_MS;
 export const LICENSE_MIN_PRICE = "about $5/month";
 
 // Trial Banner in the UI
-export const EVALUATION_PERIOD_DAYS = 10;
-export const BANNER_NON_DISMISSABLE_DAYS = 15;
+export const EVALUATION_PERIOD_DAYS = 3;
+export const BANNER_NON_DISMISSABLE_DAYS = 7;