fix(ui): billing page feedback (#4005)

## Changes

- Billing page feeedback
  - Add back button even if not self-serve yet
  - Link point to demo or mail, not pricing page
  - The current plan should not link to anything
- Upgrade button in environment picker goes to the billing page (and fix
auto focus)
  - Missing description for old plans (just put something)
<!-- Summary by @propel-code-bot -->

---

This PR refines the billing page user experience with several UI/UX
improvements. Changes include adding back buttons, adjusting link
destinations, improving the environment picker behavior, and enhancing
plan descriptions for better clarity.

**Key Changes:**
• Modified current plan card to not be clickable while other plans link
to demo/mail
• Added buttons for upgrading and downgrading plans with proper
messaging
• Fixed environment picker auto focus and search behavior
• Updated 'Upgrade' button to link to billing page instead of external
site
• Added descriptions for older plan types


**Affected Areas:**
• Billing page UI
• Environment picker component
• Create environment button
• Plan definitions


*This summary was automatically generated by @propel-code-bot*

Author: bodinsamuel

packages/shared/lib/services/plans/definitions.ts

@@ -92,7 +92,7 @@ export const plansList: PlanDefinition[] = [
     {
         code: 'starter',
         title: 'Starter',
-        description: '',
+        description: 'Tailored to your scale.',
         canUpgrade: false,
         canDowngrade: false,
         hidden: true,
@@ -109,7 +109,7 @@ export const plansList: PlanDefinition[] = [
     {
         code: 'scale',
         title: 'Scale',
-        description: '',
+        description: 'Tailored to your scale.',
         canUpgrade: false,
         canDowngrade: false,
         hidden: true,

packages/webapp/src/components/CreateEnvironmentButton.tsx

@@ -53,25 +53,25 @@ export const CreateEnvironmentButton: React.FC = () => {
     let tooltipContent: React.ReactNode = null;
     if (isMaxEnvironmentsReached) {
         tooltipContent = (
-            <span>
+            <div>
                 Max number of environments reached.{' '}
                 {environment?.plan?.name === 'scale' ? (
                     <>Contact Nango to add more</>
                 ) : (
                     <>
-                        <Link to="https://app.withsurface.com/s/cm1zve3340001l503sm0xtvo1" className="underline">
+                        <Link to={`/${env}/team/billing`} className="underline">
                             Upgrade
                         </Link>{' '}
                         to add more
                     </>
                 )}
-            </span>
+            </div>
         );
     }
 
     return (
         <Dialog open={openDialog} onOpenChange={setOpenDialog}>
-            <SimpleTooltip tooltipContent={tooltipContent} delay={0} className="text-gray-400" side="bottom">
+            <SimpleTooltip tooltipContent={tooltipContent} delay={1} className="text-gray-400" side="bottom">
                 <DialogTrigger className="w-full" asChild>
                     <Button disabled={!!isMaxEnvironmentsReached} variant={'secondary'} className="w-full justify-center">
                         {isMaxEnvironmentsReached && <IconLock size={18} stroke={1} />}

packages/webapp/src/components/EnvironmentPicker.tsx

@@ -59,10 +59,13 @@ export const EnvironmentPicker: React.FC = () => {
                 side="bottom"
                 align="start"
                 style={{ width: 'var(--radix-popover-trigger-width)' }}
+                onOpenAutoFocus={(e) => {
+                    if (meta.environments.length < 5) e.preventDefault();
+                }}
                 className="bg-grayscale-900 w-full px-0 border-grayscale-700 py-0"
             >
                 <Command>
-                    {meta.environments.length > 5 && (
+                    {meta.environments.length >= 5 && (
                         <CommandInput
                             placeholder="Search..."
                             className="text-white ring-0 focus:ring-0 focus-visible:outline-none border-transparent border-b-grayscale-700 rounded-b-none px-2.5    "

packages/webapp/src/pages/Team/Billing/Show.tsx

@@ -172,14 +172,15 @@ const UsageTable: React.FC<{ data: GetUsage['Success'] | undefined; isLoading: b
 };
 
 export const PlanCard: React.FC<{ env: string; def: PlanDefinitionList }> = ({ def }) => {
+    const Comp = def.active ? 'div' : Link;
     return (
-        <Link
+        <Comp
             className={cn(
                 'flex flex-col gap-4 text-white rounded-lg bg-grayscale-3 py-7 px-6 border border-grayscale-5',
                 def.active && 'bg-grayscale-1 border-grayscale-7'
             )}
             target="_blank"
-            to={'https://nango.dev/pricing'}
+            to={def.plan.canUpgrade ? 'mailto:upgrade@nango.dev' : 'https://nango.dev/demo'}
             // to={def.above && !def.plan.canUpgrade ? 'mailto:upgrade@nango.dev' : ''}
             // onClick={onClickPlan}
         >
@@ -190,13 +191,10 @@ export const PlanCard: React.FC<{ env: string; def: PlanDefinitionList }> = ({ d
                 </header>
                 <div className="text-sm text-grayscale-10">{def.plan.description}</div>
             </div>
-            {/* <footer>
-                {!def.active && (
-                    <Button variant={'primary'} isLoading={loading}>
-                        {def.plan.cta ? def.plan.cta : def.below ? 'Downgrade Plan' : 'Upgrade plan'}
-                    </Button>
-                )}
-            </footer> */}
-        </Link>
+            <footer>
+                {!def.active && def.isUpgrade && <Button variant={'primary'}>{def.plan.cta ? def.plan.cta : 'Upgrade plan'}</Button>}
+                {!def.active && def.isDowngrade && <Button variant={'primary'}>Contact us to downgrade</Button>}
+            </footer>
+        </Comp>
     );
 };