feat: disabling and upgrade tip of subdomain and operator of newbie

src/components/dashboard/SettingsLayout.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "next/router"
 import React from "react"
-import { useAccountState } from "@crossbell/connect-kit"
 
 import { type TabItem, Tabs } from "../ui/Tabs"
 import { DashboardMain } from "./DashboardMain"
@@ -11,9 +10,6 @@ export const SettingsLayout: React.FC<{
   type: "site" | "account"
 }> = ({ title, children, type }) => {
   const router = useRouter()
-  const isEmailAccount = useAccountState(
-    (s) => s.computed.account?.type === "email",
-  )
 
   const subdomain = router.query.subdomain as string
   const tabItems: TabItem[] = (
@@ -28,7 +24,6 @@ export const SettingsLayout: React.FC<{
           { text: "Custom CSS", href: `/dashboard/${subdomain}/settings/css` },
           {
             text: "Operators",
-            hidden: isEmailAccount,
             href: `/dashboard/${subdomain}/settings/operator`,
           },
           {

src/pages/dashboard/[subdomain]/settings/domains.tsx

@@ -8,6 +8,9 @@ import { Button } from "~/components/ui/Button"
 import { Input } from "~/components/ui/Input"
 import { OUR_DOMAIN, APP_NAME } from "~/lib/env"
 import { useGetSite, useUpdateSite } from "~/queries/site"
+import { useAccountState, useUpgradeAccountModal } from "@crossbell/connect-kit"
+import { UniLink } from "~/components/ui/UniLink"
+import { getSiteLink } from "~/lib/helpers"
 
 export default function SettingsDomainsPage() {
   const router = useRouter()
@@ -16,6 +19,11 @@ export default function SettingsDomainsPage() {
   const updateSite = useUpdateSite()
   const site = useGetSite(subdomain)
 
+  const isEmailAccount = useAccountState(
+    (s) => s.computed.account?.type === "email",
+  )
+  const upgradeAccountModal = useUpgradeAccountModal()
+
   const form = useForm({
     defaultValues: {
       subdomain: "",
@@ -76,7 +84,31 @@ export default function SettingsDomainsPage() {
               addon={`.${OUR_DOMAIN}`}
               className="w-28"
               {...form.register("subdomain")}
+              disabled={isEmailAccount}
             />
+            {isEmailAccount && (
+              <div className="text-sm text-orange-400 mt-1">
+                Email users cannot change subdomain/handle.{" "}
+                <UniLink
+                  className="underline"
+                  href={
+                    getSiteLink({
+                      subdomain: "crossbell-blog",
+                    }) + "/newbie-villa"
+                  }
+                >
+                  Learn more
+                </UniLink>{" "}
+                or{" "}
+                <span
+                  className="underline cursor-pointer"
+                  onClick={upgradeAccountModal.show}
+                >
+                  upgrade account
+                </span>
+                .
+              </div>
+            )}
           </div>
           <div className="mt-5">
             <Input

src/pages/dashboard/[subdomain]/settings/operator.tsx

@@ -13,6 +13,9 @@ import {
 } from "~/queries/site"
 import { Dialog } from "@headlessui/react"
 import { CharacterCard } from "~/components/common/CharacterCard"
+import { useAccountState, useUpgradeAccountModal } from "@crossbell/connect-kit"
+import { UniLink } from "~/components/ui/UniLink"
+import { getSiteLink } from "~/lib/helpers"
 
 type RemoveItem = (operator: string) => void
 
@@ -20,7 +23,8 @@ const SortableNavigationItem: React.FC<{
   item: string
   removeItem: RemoveItem
   isLoading: boolean
-}> = ({ item, removeItem, isLoading }) => {
+  disabled?: boolean
+}> = ({ item, removeItem, isLoading, disabled }) => {
   return (
     <div className="flex space-x-5 border-b p-5 bg-zinc-50 last:border-0 items-center">
       <div className="text-sm space-y-4">
@@ -38,6 +42,7 @@ const SortableNavigationItem: React.FC<{
           onClick={() => removeItem(item)}
           variantColor="red"
           isLoading={isLoading}
+          isDisabled={disabled}
         >
           Remove
         </Button>
@@ -57,6 +62,10 @@ export default function SiteSettingsNavigationPage() {
   const operators = useGetOperators({
     characterId: +(site.data?.metadata?.proof || 0),
   })
+  const isEmailAccount = useAccountState(
+    (s) => s.computed.account?.type === "email",
+  )
+  const upgradeAccountModal = useUpgradeAccountModal()
 
   const [items, setItems] = useState<string[]>([])
 
@@ -152,16 +161,43 @@ export default function SiteSettingsNavigationPage() {
             </div>
           </div>
         </Dialog>
-        <div className="p-5 text-zinc-500 bg-orange-50 mb-5 rounded-lg text-xs space-y-2">
+        <div className="p-5 text-zinc-500 bg-orange-50 mb-5 rounded-lg text-sm space-y-2">
           <p className="text-zinc-800 text-sm font-bold">⚠️ Warning:</p>
           <p>
             <span className="text-zinc-800">
-              Operators have permissions to enter your dashboard, change your
-              settings(excluding xLog subdomain) and post contents on your site.
+              {isEmailAccount ? (
+                <span>
+                  Email users cannot set operators.{" "}
+                  <UniLink
+                    className="underline"
+                    href={
+                      getSiteLink({
+                        subdomain: "crossbell-blog",
+                      }) + "/newbie-villa"
+                    }
+                  >
+                    Learn more
+                  </UniLink>{" "}
+                  or{" "}
+                  <span
+                    className="underline cursor-pointer"
+                    onClick={upgradeAccountModal.show}
+                  >
+                    upgrade account
+                  </span>
+                  .
+                </span>
+              ) : (
+                <span>
+                  Operators have permissions to enter your dashboard, change
+                  your settings(excluding xLog subdomain) and post contents on
+                  your site.
+                </span>
+              )}
             </span>
           </p>
         </div>
-        <div>
+        <div className={isEmailAccount ? `grayscale cursor-not-allowed` : ""}>
           <div className="bg-zinc-50 rounded-lg overflow-hidden">
             {items.length === 0 && (
               <div className="text-center text-zinc-500 p-5">
@@ -175,6 +211,7 @@ export default function SiteSettingsNavigationPage() {
                   item={item}
                   removeItem={removeItem}
                   isLoading={removeOperator.isLoading}
+                  disabled={isEmailAccount}
                 />
               )
             })}
@@ -185,7 +222,9 @@ export default function SiteSettingsNavigationPage() {
             `}</style>
           </div>
           <div className="border-t pt-5 mt-10 space-x-3 flex items-center">
-            <Button onClick={newEmptyItem}>Add</Button>
+            <Button onClick={newEmptyItem} isDisabled={isEmailAccount}>
+              Add
+            </Button>
           </div>
         </div>
       </SettingsLayout>