feat: set workspace url when creating a new workspace (#172)

* feat: add migration to remove not null constraint from referenceId on subscriptions

* feat(cloud): write worspace slug availability checks to db

* feat: add migration to add cascade set null to referenceId on subscription

* feat: update workspace and subscripton schema

* feat: add createWorkspaceSlugCheck repo func

* feat: set workspace url on creation

* chore: update translations

* refactor: various tweaks and fixes

* feat: add pro bolt to pricing notice

* feat: toggle pro subscription

* fix: hide pro subscription notice for self hosters

* feat: add pro upgrade message on members page

* feat: hide pro upgrade notice on small viewports

* feat: update workspace url placeholder

apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx

@@ -76,9 +76,14 @@ export function UpgradeToProConfirmation({
             </div>
             <div className="flex items-center space-x-3">
               <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
-              <span className="text-sm text-neutral-900 dark:text-dark-1000">
-                {t`Board analytics (coming soon)`}
-              </span>
+              <div className="flex items-center space-x-2">
+                <span className="text-xs text-neutral-900 dark:text-dark-1000">
+                  {t`Board analytics`}
+                </span>
+                <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
+                  {t`Coming soon`}
+                </span>
+              </div>
             </div>
             <div className="flex items-center space-x-3">
               <HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
@@ -90,7 +95,12 @@ export function UpgradeToProConfirmation({
         </div>
       </div>
       <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <Button onClick={() => closeModal()} variant="secondary">
+        <Button
+          onClick={() => {
+            closeModal();
+          }}
+          variant="secondary"
+        >
           {t`Cancel`}
         </Button>
         <Button

apps/web/src/views/settings/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { HiBolt, HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
 
 import type { Subscription } from "@kan/shared/utils";
@@ -36,6 +36,7 @@ export default function SettingsPage() {
   const router = useRouter();
   const workspaceUrlSectionRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
   const isCredentialsEnabled =
     env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
   const { data } = api.user.getUser.useQuery();
@@ -100,11 +101,13 @@ export default function SettingsPage() {
     if (
       router.query.upgrade === "pro" &&
       env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-      !hasActiveSubscription(subscriptions, "pro")
+      !hasActiveSubscription(subscriptions, "pro") &&
+      !hasOpenedUpgradeModal
     ) {
       openModal("UPGRADE_TO_PRO");
+      setHasOpenedUpgradeModal(true);
     }
-  }, [router.query.upgrade, subscriptions, openModal]);
+  }, [router.query.upgrade, subscriptions, openModal, hasOpenedUpgradeModal]);
 
   const { mutateAsync: disconnectTrello } =
     api.integration.disconnect.useMutation({