added license banner (#833)

* added license banner and NEXT_PUBLIC_LICENSE_CONSENT in .env.example. agree to hide the banner

* minor changes to license banner

* added /ee/ to tailwind purge config

* wip

.env.example

@@ -1,3 +1,12 @@
+# Set this value to 'agree' to accept our license: 
+# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+#
+# Summary of terms:
+# - The codebase has to stay open source, whether it was modified or not
+# - You can not repackage or sell the codebase
+# - Acquire a commercial license to remove these terms by emailing: license@cal.com
+NEXT_PUBLIC_LICENSE_CONSENT=''
+
 # DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>/<db-name>'
 DATABASE_URL="postgresql://postgres:@localhost:5432/calendso?schema=public"
 

components/DonateBanner.tsx

@@ -1,42 +0,0 @@
-import { GiftIcon } from "@heroicons/react/outline";
-
-export default function DonateBanner() {
-  if (location.hostname.endsWith(".cal.com")) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className="h-12" />
-      <div className="fixed inset-x-0 bottom-0">
-        <div className="bg-blue-600">
-          <div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
-            <div className="flex items-center justify-between flex-wrap">
-              <div className="w-0 flex-1 flex items-center">
-                <span className="flex p-2 rounded-lg bg-blue-600">
-                  <GiftIcon className="h-6 w-6 text-white" aria-hidden="true" />
-                </span>
-                <p className="ml-3 font-medium text-white truncate">
-                  <span className="md:hidden">Support the ongoing development</span>
-                  <span className="hidden md:inline">
-                    You&apos;re using the free self-hosted version. Support the ongoing development by making
-                    a donation.
-                  </span>
-                </p>
-              </div>
-              <div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://cal.com/donate"
-                  className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50">
-                  Donate
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

components/Shell.tsx

@@ -15,6 +15,7 @@ import { useRouter } from "next/router";
 import React, { Fragment, ReactNode, useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 
+import LicenseBanner from "@ee/components/LicenseBanner";
 import HelpMenuItemDynamic from "@ee/lib/intercom/HelpMenuItemDynamic";
 
 import classNames from "@lib/classNames";
@@ -241,6 +242,7 @@ export default function Shell(props: {
               {/* add padding to content for mobile navigation*/}
               <div className="block md:hidden pt-12" />
             </div>
+            <LicenseBanner />
           </main>
         </div>
       </div>

components/dialog/ConfirmationDialogContent.tsx

@@ -1,4 +1,5 @@
 import { ExclamationIcon } from "@heroicons/react/outline";
+import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren } from "react";
 
@@ -8,9 +9,9 @@ import { Button } from "@components/ui/Button";
 export type ConfirmationDialogContentProps = {
   confirmBtnText?: string;
   cancelBtnText?: string;
-  onConfirm: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   title: string;
-  variety?: "danger" /* no others yet */;
+  variety?: "danger" | "warning" | "success";
 };
 
 export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
@@ -26,6 +27,16 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
                 <ExclamationIcon className="w-5 h-5 text-red-600" />
               </div>
             )}
+            {variety === "warning" && (
+              <div className="text-center p-2 rounded-full mx-auto bg-orange-100">
+                <ExclamationIcon className="w-5 h-5 text-orange-600" />
+              </div>
+            )}
+            {variety === "success" && (
+              <div className="text-center p-2 rounded-full mx-auto bg-green-100">
+                <CheckIcon className="w-5 h-5 text-green-600" />
+              </div>
+            )}
           </div>
         )}
         <div>

ee/components/LicenseBanner.tsx

@@ -0,0 +1,90 @@
+import { XIcon } from "@heroicons/react/outline";
+import { BadgeCheckIcon } from "@heroicons/react/solid";
+
+import { Dialog, DialogTrigger } from "@components/Dialog";
+import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
+
+export default function LicenseBanner() {
+  /*
+    Set this value to 'agree' to accept our license: 
+    LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+
+    Summary of terms:
+    - The codebase has to stay open source, whether it was modified or not
+    - You can not repackage or sell the codebase
+    - Acquire a commercial license to remove these terms by emailing: license@cal.com
+    NEXT_PUBLIC_LICENSE_CONSENT=''
+  */
+  if (process.env.NEXT_PUBLIC_LICENSE_CONSENT === "agree") {
+    return null;
+  }
+
+  return (
+    <div className="fixed left-0 md:left-56 bottom-0 inset-x-0 pb-2 sm:pb-5">
+      <div className="max-w-7xl mx-auto px-2 sm:px-8">
+        <div className="p-2 rounded-sm bg-green-600 shadow-lg sm:p-3">
+          <div className="flex items-center justify-between flex-wrap">
+            <div className="w-0 flex-1 flex items-center">
+              <span className="flex p-2 rounded-sm bg-green-800">
+                <BadgeCheckIcon className="h-6 w-6 text-white" aria-hidden="true" />
+              </span>
+              <p className="ml-3 font-medium text-white truncate">
+                <span className="inline">
+                  Accept our license by changing the .env variable{" "}
+                  <span className="bg-gray-50 bg-opacity-20 px-1">NEXT_PUBLIC_LICENSE_CONSENT</span> to
+                  &apos;I agree&apos;.
+                </span>
+              </p>
+            </div>
+            <div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
+              <Dialog>
+                <DialogTrigger asChild>
+                  <button className="rounded-sm w-full flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium text-green-600 bg-white hover:bg-green-50">
+                    Accept License
+                  </button>
+                </DialogTrigger>
+                <DialogContent />
+              </Dialog>
+            </div>
+            <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
+              <Dialog>
+                <DialogTrigger asChild>
+                  <button className="-mr-1 flex p-2 rounded-sm hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-white">
+                    <span className="sr-only">Dismiss</span>
+                    <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                  </button>
+                </DialogTrigger>
+                <DialogContent />
+              </Dialog>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  function DialogContent() {
+    return (
+      <ConfirmationDialogContent
+        variety="success"
+        title="Open .env and agree to our License"
+        confirmBtnText="I've changed my .env"
+        cancelBtnText="Cancel">
+        To remove this banner, please open your .env file and change the{" "}
+        <span className="bg-green-400 text-green-500 bg-opacity-20 p-[2px]">NEXT_PUBLIC_LICENSE_CONSENT</span>{" "}
+        variable to &apos;agree&apos;.
+        <h2 className="mt-8 mb-2 text-black font-cal">Summary of terms:</h2>
+        <ul className="ml-5 list-disc">
+          <li>The codebase has to stay open source, whether it was modified or not</li>
+          <li>You can not repackage or sell the codebase</li>
+          <li>
+            Acquire a commercial license to remove these terms by emailing:{" "}
+            <a className="text-blue-500 underline" href="mailto:license@cal.com">
+              license@cal.com
+            </a>
+          </li>
+        </ul>
+      </ConfirmationDialogContent>
+    );
+  }
+}

tailwind.config.js

@@ -1,6 +1,10 @@
 module.exports = {
   mode: "jit",
-  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  purge: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./ee/components/**/*.{js,ts,jsx,tsx}",
+  ],
   darkMode: "class",
   theme: {
     extend: {