Hide manage or renew button when customer uses invoicing + css updates (#10436)

* Hide manage or renew button when customer uses invoicing + css updates

* Remove usages of 'pro' and 'pro plan' from ui

* Enterprise plan -> Enterprise on enforce single sign on

* lint

packages/builder/src/pages/builder/portal/account/usage.svelte

@@ -43,12 +43,18 @@
   }
 
   $: quotaUsage = $licensing.quotaUsage
+
   $: license = $auth.user?.license
+  $: plan = license?.plan
+  $: usesInvoicing = plan?.usesInvoicing
+
   $: accountPortalAccess = $auth?.user?.accountPortalAccess
   $: quotaReset = quotaUsage?.quotaReset
   $: canManagePlan =
     ($admin.cloud && accountPortalAccess) || (!$admin.cloud && $auth.isAdmin)
 
+  $: showButton = !usesInvoicing && accountPortalAccess
+
   const setMonthlyUsage = () => {
     monthlyUsage = []
     if (quotaUsage.monthly) {
@@ -121,7 +127,7 @@
   const setTextRows = () => {
     textRows = []
 
-    if (cancelAt) {
+    if (cancelAt && !usesInvoicing) {
       textRows.push({ message: "Subscription has been cancelled" })
       textRows.push({
         message: `${getDaysRemaining(cancelAt)} days remaining`,
@@ -213,7 +219,7 @@
       description="YOUR CURRENT PLAN"
       title={planTitle()}
       {primaryActionText}
-      primaryAction={accountPortalAccess ? goToAccountPortal : undefined}
+      primaryAction={showButton ? goToAccountPortal : undefined}
       {textRows}
     >
       <div class="content">
@@ -224,33 +230,23 @@
                 <Usage {usage} warnWhenFull={WARN_USAGE.includes(usage.name)} />
               </div>
             {/each}
+            <Layout gap="XS" noPadding>
+              <Heading size="S">Monthly limits</Heading>
+              <div class="detail">
+                <TooltipWrapper tooltip={new Date(quotaReset)}>
+                  <Detail size="M">
+                    Resets in {daysRemainingInMonth} days
+                  </Detail>
+                </TooltipWrapper>
+              </div>
+            </Layout>
+            <Layout noPadding gap="M">
+              {#each monthlyUsage as usage}
+                <Usage {usage} warnWhenFull={WARN_USAGE.includes(usage.name)} />
+              {/each}
+            </Layout>
           </Layout>
         </div>
-
-        {#if monthlyUsage.length}
-          <div class="column">
-            <Layout noPadding gap="M">
-              <Layout gap="XS" noPadding>
-                <Heading size="S">Monthly limits</Heading>
-                <div class="detail">
-                  <TooltipWrapper tooltip={new Date(quotaReset)}>
-                    <Detail size="M">
-                      Resets in {daysRemainingInMonth} days
-                    </Detail>
-                  </TooltipWrapper>
-                </div>
-              </Layout>
-              <Layout noPadding gap="M">
-                {#each monthlyUsage as usage}
-                  <Usage
-                    {usage}
-                    warnWhenFull={WARN_USAGE.includes(usage.name)}
-                  />
-                {/each}
-              </Layout>
-            </Layout>
-          </div>
-        {/if}
       </div>
     </DashCard>
   </Layout>

packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte

@@ -176,7 +176,7 @@
       <Heading>Backups</Heading>
       {#if !$licensing.backupsEnabled}
         <Tags>
-          <Tag icon="LockClosed">Pro plan</Tag>
+          <Tag icon="LockClosed">Premium</Tag>
         </Tags>
       {/if}
     </div>

packages/builder/src/pages/builder/portal/settings/auth/index.svelte

@@ -378,7 +378,7 @@
         </div>
         {#if !$licensing.enforceableSSO}
           <Tags>
-            <Tag icon="LockClosed">Enterprise plan</Tag>
+            <Tag icon="LockClosed">Enterprise</Tag>
           </Tags>
         {/if}
       </div>

packages/builder/src/pages/builder/portal/settings/branding.svelte

@@ -213,7 +213,7 @@
         {/if}
         {#if isCloud && !brandingEnabled}
           <Tags>
-            <Tag icon="LockClosed">Pro</Tag>
+            <Tag icon="LockClosed">Premium</Tag>
           </Tags>
         {/if}
       </div>

packages/builder/src/pages/builder/portal/users/groups/index.svelte

@@ -94,7 +94,7 @@
       <Heading size="M">Groups</Heading>
       {#if !$licensing.groupsEnabled}
         <Tags>
-          <Tag icon="LockClosed">Pro plan</Tag>
+          <Tag icon="LockClosed">Business</Tag>
         </Tags>
       {/if}
     </div>