fix #7721 -- Make it clear that the license is required when creating a project

Author: williamstein

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

@@ -439,44 +439,7 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
         <Paragraph strong>
           This shutdown timer only exists for projects without any upgrades!
         </Paragraph>
-        <Alert
-          banner
-          type="info"
-          showIcon={false}
-          message={
-            <>
-              <Paragraph strong>
-                This is a call to support <SiteName /> by{" "}
-                <A href={BUY_A_LICENSE_URL}>purchasing a license</A>.
-              </Paragraph>
-              <Paragraph>
-                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>,
-                which costs money as well.
-              </Paragraph>
-              <Paragraph>
-                <SiteName /> receives no funding from large organizations or
-                charitable foundations. The site depends entirely{" "}
-                <Text strong>on your financial support</Text> to continue
-                operating. Without your financial support this service will not
-                survive long-term!
-              </Paragraph>
-              <Paragraph>
-                <A
-                  href={
-                    "/support/new?hideExtra=true&type=purchase&subject=Support+CoCalc&title=Support+CoCalc"
-                  }
-                >
-                  Contact us
-                </A>{" "}
-                if you can give support in other ways or have any questions or
-                comments.
-              </Paragraph>
-            </>
-          }
-        />
+        <CallToSupport />
       </Modal>
     );
   }
@@ -512,3 +475,48 @@ function CountdownProject({ fontSize }: CountdownProjectProps) {
     </>
   );
 }
+
+export function CallToSupport({ onClose }: { onClose? }) {
+  return (
+    <Alert
+      closable={onClose != null}
+      onClose={onClose}
+      banner
+      type="info"
+      showIcon={false}
+      message={
+        <>
+          <Paragraph strong>
+            This is a call to support <SiteName /> by{" "}
+            <A href={BUY_A_LICENSE_URL}>purchasing a license</A>.
+          </Paragraph>
+          <Paragraph>
+            Behind the scenes,{" "}
+            <A href={"/about/team"}>people are working hard</A> to keep the
+            service running and improve it constantly. Your files and
+            computations <A href={"/info/status"}>run in our cluster</A>, which
+            costs money as well.
+          </Paragraph>
+          <Paragraph>
+            <SiteName /> receives no funding from large organizations or
+            charitable foundations. The site depends entirely{" "}
+            <Text strong>on your financial support</Text> to continue operating.
+            Without your financial support this service will not survive
+            long-term!
+          </Paragraph>
+          <Paragraph>
+            <A
+              href={
+                "/support/new?hideExtra=true&type=purchase&subject=Support+CoCalc&title=Support+CoCalc"
+              }
+            >
+              Contact us
+            </A>{" "}
+            if you can give support in other ways or have any questions or
+            comments.
+          </Paragraph>
+        </>
+      }
+    />
+  );
+}

src/packages/frontend/projects/create-project.tsx

@@ -52,8 +52,6 @@ export const NewProjectCreator: React.FC<Props> = ({
   start_in_edit_mode,
   default_value,
 }: Props) => {
-  const managed_licenses = useTypedRedux("billing", "managed_licenses");
-
   // view --> edit --> saving --> view
   const [state, set_state] = useState<EditState>(
     start_in_edit_mode ? "edit" : "view",
@@ -63,13 +61,9 @@ export const NewProjectCreator: React.FC<Props> = ({
   const [show_advanced, set_show_advanced] = useState<boolean>(false);
   const [title_prefill, set_title_prefill] = useState<boolean>(false);
   const [license_id, set_license_id] = useState<string>("");
-  const [warnBoost, setWarnBoost] = useState<boolean>(false);
-
   const [custom_software, set_custom_software] =
     useState<SoftwareEnvironmentState>({});
-
   const new_project_title_ref = useRef(null);
-
   const is_anonymous = useTypedRedux("account", "is_anonymous");
   const customize_kucalc = useTypedRedux("customize", "kucalc");
   const hasLegacyUpgrades = redux.getStore("account").hasLegacyUpgrades();
@@ -282,8 +276,6 @@ export const NewProjectCreator: React.FC<Props> = ({
   }
 
   function addSiteLicense(lic: string): void {
-    const license = managed_licenses?.get(lic)?.toJS();
-    setWarnBoost(license?.quota?.boost === true);
     set_license_id(lic);
   }
 
@@ -295,7 +287,7 @@ export const NewProjectCreator: React.FC<Props> = ({
         title={
           <>
             <div style={{ float: "right" }}>
-              <BuyLicenseForProject size="small" />
+              <BuyLicenseForProject />
             </div>
             <Icon name="key" /> Select License
           </>
@@ -306,14 +298,8 @@ export const NewProjectCreator: React.FC<Props> = ({
           requireValid
           confirmLabel={"Add this license"}
           onChange={addSiteLicense}
+          requireLicense
         />
-        {warnBoost && (
-          <Alert bsStyle="warning">
-            This license is for boosting on top of an already applied and active
-            license. This one alone will not provide any upgrades to this
-            project!
-          </Alert>
-        )}
       </Card>
     );
   }

src/packages/frontend/site-licenses/input.tsx

@@ -6,8 +6,6 @@
 // Inputing a site license, e.g., for a project, course, etc.
 
 import {
-  CSS,
-  React,
   redux,
   useEffect,
   useTypedRedux,
@@ -25,47 +23,18 @@ export function useManagedLicenses() {
   return managedLicenses;
 }
 
-interface Props {
-  onSave?: (licenseId: string) => void;
-  onCancel?: () => void;
-  onChange?: (licenseId: string) => void;
-  confirmLabel?: string;
-  exclude?: string[];
-  style?: CSS;
-  extra?: React.ReactNode;
-  extraButtons?: React.ReactNode;
-  requireValid?: boolean;
-}
-
-export const SiteLicenseInput: React.FC<Props> = (props: Props) => {
-  const {
-    onSave,
-    onCancel,
-    onChange,
-    exclude,
-    style,
-    confirmLabel = "Apply License",
-    extra,
-    extraButtons,
-    requireValid,
-  } = props;
-
+export function SiteLicenseInput(props) {
   const managedLicenses = useManagedLicenses();
 
-  if (managedLicenses == null) return <Loading />;
+  if (managedLicenses == null) {
+    return <Loading />;
+  }
 
   return (
     <SelectLicense
-      onSave={onSave}
-      onCancel={onCancel}
-      onChange={onChange}
-      exclude={exclude}
       managedLicenses={managedLicenses.toJS() as { [id: string]: License }}
-      confirmLabel={confirmLabel}
-      style={style}
-      extra={extra}
-      extraButtons={extraButtons}
-      requireValid={requireValid}
+      confirmLabel="Apply License"
+      {...props}
     />
   );
-};
+}

src/packages/frontend/site-licenses/select-license.tsx

@@ -9,12 +9,12 @@ IMPORTANT: this component must work in *both* from nextjs and static.
 import { Alert, Button, Checkbox, Popconfirm, Select, Space } from "antd";
 import { keys } from "lodash";
 import { ReactNode, useMemo, useRef, useState } from "react";
-
 import { CSS, Rendered } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { describe_quota as describeQuota } from "@cocalc/util/licenses/describe-quota";
 import { days_ago as daysAgo, isValidUUID, len } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
+import { CallToSupport } from "@cocalc/frontend/project/trial-banner";
 
 const { Option } = Select;
 
@@ -36,6 +36,7 @@ interface Props {
   extra?: ReactNode; // plain-text node is ok
   extraButtons?: ReactNode;
   requireValid?: boolean;
+  requireLicense?: boolean;
 }
 
 export default function SelectLicense(props: Props) {
@@ -51,6 +52,7 @@ export default function SelectLicense(props: Props) {
     extra,
     extraButtons,
     requireValid,
+    requireLicense,
   } = props;
   const isBlurredRef = useRef<boolean>(true);
   const [licenseId, setLicenseId] = useState<string>(defaultLicenseId ?? "");
@@ -69,6 +71,7 @@ export default function SelectLicense(props: Props) {
     }
     return v;
   }, [managedLicenses, showAll]);
+  const [showCall, setShowCall] = useState<boolean>(false);
 
   const options: JSX.Element[] = useMemo(() => {
     const v: JSX.Element[] = [];
@@ -178,6 +181,7 @@ export default function SelectLicense(props: Props) {
             flex: "1 1 0",
             marginRight: "10px",
           }}
+          status={requireLicense && !licenseId ? "error" : undefined}
           placeholder={
             `Enter${requireValid ? " valid " : " "}license code ` +
             (options.length > 0
@@ -207,6 +211,28 @@ export default function SelectLicense(props: Props) {
         >
           {options}
         </Select>
+        {requireLicense && !licenseId ? (
+          <Alert
+            style={{ marginTop: "10px" }}
+            type="info"
+            showIcon
+            message={
+              <div>
+                A license is required.
+                {showCall ? (
+                  <CallToSupport onClose={() => setShowCall(false)} />
+                ) : (
+                  <Button
+                    style={{ marginLeft: "15px" }}
+                    onClick={() => setShowCall(true)}
+                  >
+                    Why?
+                  </Button>
+                )}
+              </div>
+            }
+          />
+        ) : undefined}
       </div>
       {!valid && licenseId && (
         <Alert