From fa8b55c40b8ed1118731474bec8538f7727c8bb7 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 18 Dec 2024 17:21:23 +0000
Subject: [PATCH 1/5] Add new team selection frontend

---
 frontend/src/components/PageHeader.vue        |   2 +-
 frontend/src/components/TeamTypeSelection.vue |  34 +++++
 frontend/src/components/TeamTypeTile.vue      | 137 ++++++++++++++++++
 frontend/src/pages/Home.vue                   |  19 ++-
 frontend/src/pages/account/NoTeamsUser.vue    |  44 ------
 .../TeamTypes/dialogs/TeamTypeEditDialog.vue  |   2 +-
 frontend/src/pages/admin/TeamTypes/index.vue  |   2 +-
 frontend/src/pages/team/create.vue            |  51 +++++--
 .../stylesheets/ff-components.scss            |   2 +-
 9 files changed, 224 insertions(+), 69 deletions(-)
 create mode 100644 frontend/src/components/TeamTypeSelection.vue
 create mode 100644 frontend/src/components/TeamTypeTile.vue
 delete mode 100644 frontend/src/pages/account/NoTeamsUser.vue

diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 21ec32c4e0..5d9568736b 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -11,7 +11,7 @@
         <router-link :to="homeLink">
             <img class="ff-logo" src="/ff-logo--wordmark--dark.png">
         </router-link>
-        <global-search v-if="hasAMinimumTeamRoleOf(Roles.Viewer)" />
+        <global-search v-if="teams.length > 0 && hasAMinimumTeamRoleOf(Roles.Viewer)" />
         <!-- Mobile: Toggle(User Options) -->
         <div class="flex ff-mobile-navigation-right" data-el="mobile-nav-right">
             <NotificationsButton class="ff-header--mobile-notificationstoggle" :class="{'active': mobileTeamSelectionOpen}" />
diff --git a/frontend/src/components/TeamTypeSelection.vue b/frontend/src/components/TeamTypeSelection.vue
new file mode 100644
index 0000000000..2c41bfc209
--- /dev/null
+++ b/frontend/src/components/TeamTypeSelection.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div class="flex gap-6 justify-center relative z-10 flex-wrap">
+            <team-type-tile v-for="type in types" :key="type.id" :team-type="type" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import teamTypesApi from '../api/teamTypes.js'
+
+import TeamTypeTile from './TeamTypeTile.vue'
+
+export default {
+    name: 'TeamTypeSelection',
+    components: {
+        'team-type-tile': TeamTypeTile
+    },
+    data () {
+        return {
+            types: []
+        }
+    },
+    computed: {
+        ...mapState('account', ['user'])
+    },
+    async created () {
+        const { types } = await teamTypesApi.getTeamTypes()
+        this.types = types.sort((a, b) => a.order - b.order)
+    }
+}
+</script>
diff --git a/frontend/src/components/TeamTypeTile.vue b/frontend/src/components/TeamTypeTile.vue
new file mode 100644
index 0000000000..2469dde892
--- /dev/null
+++ b/frontend/src/components/TeamTypeTile.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="ff-team-type-tile">
+        <div v-if="isTrial(teamType)" class="trial-ribbon">
+            <label>{{ teamType.properties.trial.duration }} Days Free Trial</label>
+        </div>
+        <div class="space-y-2">
+            <img class="w-36 m-auto" src="../images/empty-states/application-instances.png">
+            <div class="flex flex-col gap-5">
+                <div class="flex justify-between items-center text-2xl">
+                    <label class="font-medium">{{ teamType.name }}</label>
+                    <span v-if="pricing?.value">
+                        {{ pricing.value }} <span class="text-xs">/{{ pricing.interval }}</span>
+                    </span>
+                </div>
+                <ff-markdown-viewer :content="teamType.description" />
+            </div>
+        </div>
+        <template v-if="enableCTA">
+            <ff-button v-if="isTrial(teamType)" kind="primary" class="w-full mt-4" :to="`/team/create?teamType=${teamType.id}`">
+                Start Free Trial
+            </ff-button>
+            <ff-button v-else-if="isManualBilling(teamType)" kind="secondary" class="w-full mt-4" @click="contactFF(teamType)">
+                Contact FlowFuse
+            </ff-button>
+            <ff-button v-else kind="secondary" class="w-full mt-4" :to="`/team/create?teamType=${teamType.id}`">
+                Select
+            </ff-button>
+        </template>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import BillingAPI from '../api/billing.js'
+import Alerts from '../services/alerts.js'
+
+export default {
+    name: 'TeamTypeTile',
+    props: {
+        teamType: {
+            type: Object,
+            required: true
+        },
+        enableCTA: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        ...mapState('account', ['user']),
+        pricing: function () {
+            const billing = this.teamType.properties?.billing.description?.split('/')
+            const price = {}
+            if (typeof billing !== 'undefined') {
+                price.value = billing[0]
+                price.interval = billing[1]
+            }
+            return price
+        }
+    },
+    methods: {
+        isTrial (teamType) {
+            return teamType.properties?.trial?.active
+        },
+        isManualBilling (teamType) {
+            return teamType.properties?.billing?.requireContact
+        },
+        contactFF (teamType) {
+            BillingAPI.sendTeamTypeContact(this.user, teamType, 'Create Team').then(() => {
+                Alerts.emit('A message has been sent to you our team. We will contact you soon regarding your request. In the mean time, feel free to choose another plan to get started.', 'confirmation', 20000)
+            }).catch(err => {
+                Alerts.emit('Something went wrong with the request. Please try again or contact support for help.', 'warning', 15000)
+                console.error('Failed to submit hubspot form: ', err)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.ff-team-type-tile {
+    position: relative;
+    border-radius: 6px;
+    border: 2px solid $ff-grey-300;
+    background: white;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
+    padding: 24px;
+    width: 100%;
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    ul {
+        list-style: disc;
+        padding-left: 16px;
+        li {
+            margin-bottom: 6px;
+        }
+    }
+}
+.trial-ribbon {
+    --ribbon-overlap: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+    left: calc(-1 * var(--ribbon-overlap));
+    line-height: 1.3;
+    width: calc(100% + 2 * var(--ribbon-overlap));
+    margin: 0;
+    position: absolute;
+    top: 8px;
+    color: white;
+    // text-shadow: 0 1px 1px #111;
+    border-top: 1px solid #363636;
+    border-bottom: 1px solid #202020;
+    background: $ff-red-500;
+    // background: linear-gradient($ff-red-500 0%, $ff-red-700 100%);
+    border-radius: 2px 2px 0 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+.trial-ribbon::before,
+.trial-ribbon::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    bottom: calc((-2 * var(--ribbon-overlap)) - 1px);
+    z-index: -10;
+    border: var(--ribbon-overlap) solid;
+    border-color: $ff-red-900 transparent transparent transparent;
+}
+.trial-ribbon::before {left: 0;}
+.trial-ribbon::after {right: 0;}
+</style>
diff --git a/frontend/src/pages/Home.vue b/frontend/src/pages/Home.vue
index c9c9de5165..3ad5432886 100644
--- a/frontend/src/pages/Home.vue
+++ b/frontend/src/pages/Home.vue
@@ -1,13 +1,20 @@
 <template>
-    <main>
+    <main class="min-h-full">
         <template v-if="pending">
             <div class="flex-grow flex flex-col items-center justify-center mx-auto text-gray-600 opacity-50">
                 <FlowFuseLogo class="max-w-xs mx-auto w-full" />
             </div>
         </template>
-        <template v-else-if="teams.length === 0">
-            <NoTeamsUser />
-        </template>
+        <ff-page v-else-if="teams.length === 0">
+            <template #header>
+                <ff-page-header title="Choose Team Type">
+                    <template #context>
+                        Choose which team type you'd like to get started with.
+                    </template>
+                </ff-page-header>
+            </template>
+            <TeamTypeSelection />
+        </ff-page>
     </main>
 </template>
 
@@ -17,13 +24,13 @@ import { mapGetters, mapState } from 'vuex'
 
 import FlowFuseLogo from '../components/Logo.vue'
 
-import NoTeamsUser from './account/NoTeamsUser.vue'
+import TeamTypeSelection from '../components/TeamTypeSelection.vue'
 
 export default {
     name: 'HomePage',
     components: {
         FlowFuseLogo,
-        NoTeamsUser
+        TeamTypeSelection
     },
     data () {
         return {
diff --git a/frontend/src/pages/account/NoTeamsUser.vue b/frontend/src/pages/account/NoTeamsUser.vue
deleted file mode 100644
index dfd7eb0aa8..0000000000
--- a/frontend/src/pages/account/NoTeamsUser.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <form class="py-8 text-center">
-        <p class="text-gray-700 text-lg">You need to be in a team to create projects.</p>
-        <p v-if="invitationCount === 0 && !user.admin && !settings['team:create']" class="text-gray-700 text-lg mt-10 ">Ask an Admin or Team Owner to add you to a team.</p>
-        <div class="pt-4 justify-center flex gap-5" :class="invitationCount > 0?'sm:grid-cols-2':'max-w-xs mx-auto'">
-            <router-link v-if="user.admin || settings['team:create']" to="/team/create" class="forge-button-secondary p-4 sm:h-36 inline-flex sm:flex-col items-center sm:justify-center gap-4">
-                <UserGroupIcon class="w-10" />
-                Create a new team
-            </router-link>
-            <router-link v-if="invitationCount>0" data-nav="team-invites" to="/account/teams/invitations" class="forge-button-secondary p-4 sm:h-36 inline-flex sm:flex-col items-center sm:justify-center gap-4">
-                <InboxInIcon class="w-10" />
-                You have {{ invitationCount }} team {{ $filters.pluralize(invitationCount,"invitation") }}
-            </router-link>
-        </div>
-    </form>
-</template>
-
-<script>
-
-import { InboxInIcon, UserGroupIcon } from '@heroicons/vue/outline'
-import { mapGetters, mapState } from 'vuex'
-
-export default {
-    name: 'NoTeamsUser',
-    components: {
-        UserGroupIcon,
-        InboxInIcon
-    },
-    computed: {
-        ...mapState('account', ['settings', 'user']),
-        ...mapGetters('account', {
-            invitationCount: 'teamInvitationsCount'
-        })
-    },
-    mounted () {
-        this.fetchData()
-    },
-    methods: {
-        async fetchData () {
-            await this.$store.dispatch('account/getInvitations')
-        }
-    }
-}
-</script>
diff --git a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
index 082c7b8b83..de0ff84900 100644
--- a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
+++ b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
@@ -14,7 +14,7 @@
                     Order
                     <template #description>Set the sort order when listing the types</template>
                 </FormRow>
-                <FormRow v-model="input.description" :error="errors.description" data-form="description">
+                <FormRow v-model="input.description" :error="errors.description" data-form="description" containerClass="w-full">
                     Description
                     <template #description>Use markdown for formatting</template>
                     <template #input><textarea v-model="input.description" class="w-full" rows="6" /></template>
diff --git a/frontend/src/pages/admin/TeamTypes/index.vue b/frontend/src/pages/admin/TeamTypes/index.vue
index 7f6573d94b..f975a3478f 100644
--- a/frontend/src/pages/admin/TeamTypes/index.vue
+++ b/frontend/src/pages/admin/TeamTypes/index.vue
@@ -79,7 +79,7 @@ export default {
     },
     computed: {
         activeTeamTypes () {
-            const types = this.teamTypes.filter(pt => pt.active)
+            const types = this.teamTypes.filter(pt => pt.active).sort((a, b) => a.order - b.order)
             return types
         },
         inactiveTeamTypes () {
diff --git a/frontend/src/pages/team/create.vue b/frontend/src/pages/team/create.vue
index cc0bc83c40..e4998f3980 100644
--- a/frontend/src/pages/team/create.vue
+++ b/frontend/src/pages/team/create.vue
@@ -1,13 +1,21 @@
 <template>
     <ff-page>
+        <template #header>
+            <ff-page-header title="Create New Team">
+                <template #context>
+                    Teams provide a way to organize who collaborates on your applications.
+                </template>
+            </ff-page-header>
+        </template>
         <ff-loading v-if="redirecting" message="Redirecting to Stripe..." />
         <ff-loading v-else-if="loading" message="Creating Team..." />
-        <div v-else class="m-auto">
-            <form class="space-y-6">
-                <FormHeading>Create a new team</FormHeading>
-                <div class="mb-8 text-sm text-gray-500">Teams are how you organize who collaborates on your applications.</div>
+        <div v-else class="m-auto max-w-5xl" :class="presetTeamType ? 'flex flex-col gap-4 sm:flex-row sm:gap-0' : 'space-y-6 max-w-4xl m-auto'">
+            <div v-if="presetTeamType" class="w-full max-w-lg">
+                <team-type-tile class="m-auto" :team-type="presetTeamType" :enableCTA="false" />
+            </div>
+            <form>
                 <!-- TeamType Type -->
-                <div class="grid">
+                <div v-if="!presetTeamType" class="grid mb-3">
                     <ff-tile-selection v-model="input.teamTypeId">
                         <ff-tile-selection-option
                             v-for="(teamType, index) in teamTypes" :key="index"
@@ -18,15 +26,15 @@
                         />
                     </ff-tile-selection>
                 </div>
-                <template v-if="!isContactRequired">
-                    <FormRow id="team" v-model="input.name" :error="errors.name">
+                <div v-if="!isContactRequired" class="space-y-3">
+                    <FormRow id="team" v-model="input.name" :error="errors.name" containerClass="max-w-md">
                         Team Name
                         <template #description>
                             eg. 'Development'
                         </template>
                     </FormRow>
 
-                    <FormRow id="team" v-model="input.slug" :error="input.slugError" :placeholder="input.defaultSlug">
+                    <FormRow id="team" v-model="input.slug" :error="input.slugError" :placeholder="input.defaultSlug" containerClass="max-w-md">
                         URL Slug
                         <template #description>
                             Use the default slug based on the team name or set your own.<br>
@@ -36,7 +44,8 @@
 
                     <template v-if="billingEnabled">
                         <div class="mb-8 text-sm text-gray-500 space-y-2">
-                            <p>To create the team we need to setup payment details via Stripe, our secure payment provider.</p>
+                            <p v-if="!presetTeamType || !presetTeamType.isFree">To create the team we need to setup payment details via Stripe, our secure payment provider.</p>
+                            <p v-else>Please note that, whilst we do require credit card details, this Team is free of charge, and no charges will be made.</p>
                         </div>
                         <ff-button :disabled="!formValid" @click="createTeam()">
                             <template #icon-right><ExternalLinkIcon /></template>
@@ -46,7 +55,7 @@
                     <ff-button v-else :disabled="!formValid" @click="createTeam()">
                         Create team
                     </ff-button>
-                </template>
+                </div>
                 <template v-else>
                     <div class="mb-8 text-sm text-gray-500 space-y-2">
                         <p>To learn more about our {{ input.teamType?.name }} plan, click below to contact our sales team.</p>
@@ -68,9 +77,9 @@ import billingApi from '../../api/billing.js'
 import teamApi from '../../api/team.js'
 import teamTypesApi from '../../api/teamTypes.js'
 import teamsApi from '../../api/teams.js'
-import FormHeading from '../../components/FormHeading.vue'
 import FormRow from '../../components/FormRow.vue'
 
+import TeamTypeTile from '../../components/TeamTypeTile.vue'
 import Alerts from '../../services/alerts.js'
 import slugify from '../../utils/slugify.js'
 
@@ -96,7 +105,8 @@ export default {
             needsBilling: false,
             newTeam: null,
             errors: {},
-            pendingSlugCheck: null
+            pendingSlugCheck: null,
+            presetTeamType: false
         }
     },
     watch: {
@@ -146,11 +156,22 @@ export default {
     async created () {
         const teamTypesPromise = await teamTypesApi.getTeamTypes()
 
-        this.teamTypes = (await teamTypesPromise).types
+        this.teamTypes = (await teamTypesPromise).types.sort((a, b) => a.order - b.order)
         this.input.teamTypeId = this.teamTypes[0].id
+
+        if (this.$route.query.teamType) {
+            this.input.teamTypeId = this.$route.query.teamType
+            for (const teamType of this.teamTypes) {
+                if (teamType.id === this.input.teamTypeId) {
+                    this.presetTeamType = teamType
+                    break
+                }
+            }
+        }
     },
     mounted () {
         this.mounted = true
+        // was a team type pre-determined
     },
     methods: {
         createTeam () {
@@ -215,8 +236,8 @@ export default {
     },
     components: {
         FormRow,
-        FormHeading,
-        ExternalLinkIcon
+        ExternalLinkIcon,
+        'team-type-tile': TeamTypeTile
     }
 }
 </script>
diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
index 505e619cce..bf4c9691df 100644
--- a/frontend/src/ui-components/stylesheets/ff-components.scss
+++ b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -665,7 +665,7 @@ li.ff-list-item {
     }
     &.active {
       border: 2px solid var(--ff-tile-selection-color);
-      svg {
+      .ff-tile-selection-option--header svg {
         fill: var(--ff-tile-selection-color);
       }
     }

From b48680d7377e527f5ac3943554d58e472b919718 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 18 Dec 2024 18:02:12 +0000
Subject: [PATCH 2/5] Improve visibility of instance limit warnings

---
 .../src/pages/instance/components/InstanceForm.vue    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/instance/components/InstanceForm.vue b/frontend/src/pages/instance/components/InstanceForm.vue
index 3e1c81cd24..8e79b7b32f 100644
--- a/frontend/src/pages/instance/components/InstanceForm.vue
+++ b/frontend/src/pages/instance/components/InstanceForm.vue
@@ -1,6 +1,4 @@
 <template>
-    <FeatureUnavailableToTeam v-if="teamRuntimeLimitReached" fullMessage="You have reached the runtime limit for this team." />
-    <FeatureUnavailableToTeam v-else-if="teamInstanceLimitReached" fullMessage="You have reached the instance limit for this team." />
     <form class="space-y-6" @submit.prevent="onSubmit">
         <SectionTopMenu v-if="hasHeader" :hero="heroTitle" />
         <!-- Form title -->
@@ -66,6 +64,9 @@
             </template>
         </FormRow>
 
+        <FeatureUnavailableToTeam v-if="teamRuntimeLimitReached && input.createInstance" fullMessage="You have reached the runtime limit for this team." />
+        <FeatureUnavailableToTeam v-else-if="teamInstanceLimitReached && input.createInstance" fullMessage="You have reached the instance limit for this team." />
+
         <div v-if="!creatingApplication || input.createInstance" :class="creatingApplication ? 'ml-6' : ''" class="space-y-6">
             <!-- Instance Name -->
             <div>
@@ -452,6 +453,10 @@ export default {
             return (teamTypeRuntimeLimit > 0 && currentRuntimeCount >= teamTypeRuntimeLimit)
         },
         teamInstanceLimitReached () {
+            console.log('this.projectTypes.length')
+            console.log(this.projectTypes)
+            console.log('this.activeProjectTypeCount')
+            console.log(this.activeProjectTypeCount)
             return this.projectTypes.length > 0 && this.activeProjectTypeCount === 0
         },
         atLeastOneFlowBlueprint () {
@@ -513,6 +518,8 @@ export default {
         const projectTypes = (await projectTypesPromise).types
         this.templates = (await templateListPromise).templates.filter(template => template.active)
 
+        console.log(projectTypes)
+
         this.activeProjectTypeCount = projectTypes.length
 
         // Do a first pass of the instance types to disable any not allowed for this team

From be1de13b449680a45a9b026ae361ba41950656aa Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 19 Dec 2024 09:31:02 +0000
Subject: [PATCH 3/5] Only show trial flags when appropriate

---
 frontend/src/components/TeamTypeTile.vue | 12 +++++++++---
 frontend/src/pages/team/create.vue       | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/TeamTypeTile.vue b/frontend/src/components/TeamTypeTile.vue
index 2469dde892..19b0e3c100 100644
--- a/frontend/src/components/TeamTypeTile.vue
+++ b/frontend/src/components/TeamTypeTile.vue
@@ -48,7 +48,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['user']),
+        ...mapState('account', ['user', 'teams']),
         pricing: function () {
             const billing = this.teamType.properties?.billing.description?.split('/')
             const price = {}
@@ -61,14 +61,20 @@ export default {
     },
     methods: {
         isTrial (teamType) {
-            return teamType.properties?.trial?.active
+            // A team trial can be offered if:
+            // 1. User has no other teams
+            return this.teams.length === 0 &&
+            // 2. User is less than a week old
+                (Date.now() - (new Date(this.user.createdAt)).getTime()) < 1000 * 60 * 60 * 24 * 7 &&
+            // 3. TeamType meta data says so
+                teamType.properties?.trial?.active
         },
         isManualBilling (teamType) {
             return teamType.properties?.billing?.requireContact
         },
         contactFF (teamType) {
             BillingAPI.sendTeamTypeContact(this.user, teamType, 'Create Team').then(() => {
-                Alerts.emit('A message has been sent to you our team. We will contact you soon regarding your request. In the mean time, feel free to choose another plan to get started.', 'confirmation', 20000)
+                Alerts.emit('A message has been sent to our team. We will contact you soon regarding your request. In the mean time, feel free to choose another plan to get started.', 'confirmation', 20000)
             }).catch(err => {
                 Alerts.emit('Something went wrong with the request. Please try again or contact support for help.', 'warning', 15000)
                 console.error('Failed to submit hubspot form: ', err)
diff --git a/frontend/src/pages/team/create.vue b/frontend/src/pages/team/create.vue
index e4998f3980..cd667c8775 100644
--- a/frontend/src/pages/team/create.vue
+++ b/frontend/src/pages/team/create.vue
@@ -137,7 +137,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['user', 'team', 'features']),
+        ...mapState('account', ['user', 'team', 'teams', 'features']),
         formValid () {
             return this.input.teamTypeId && this.input.name && this.input.slug && !this.pendingSlugCheck && !this.input.slugError && !this.errors.name
         },
@@ -182,6 +182,17 @@ export default {
                 slug: this.input.slug || this.input.defaultSlug,
                 type: this.input.teamTypeId
             }
+            // Check if we should set the trial flag
+            if (
+                // TeamType has trial mode enabled
+                this.input.teamType.properties?.trial?.active &&
+                // User has no other teams
+                this.teams.length === 0 &&
+                // User is less than a week old
+                (Date.now() - (new Date(this.user.createdAt)).getTime()) < 1000 * 60 * 60 * 24 * 7
+            ) {
+                opts.trial = true
+            }
 
             teamApi.create(opts).then(async result => {
                 await this.$store.dispatch('account/refreshTeams')

From d5ffa19c693ecffe2d8e99ff90594773911fe535 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 19 Dec 2024 10:39:47 +0000
Subject: [PATCH 4/5] Fix ui tests for new empty-team state

---
 .../frontend/cypress/tests/invitations.spec.js    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/invitations.spec.js b/test/e2e/frontend/cypress/tests/invitations.spec.js
index 7071a71f93..ff0b769e75 100644
--- a/test/e2e/frontend/cypress/tests/invitations.spec.js
+++ b/test/e2e/frontend/cypress/tests/invitations.spec.js
@@ -21,14 +21,15 @@ describe('FlowFuse platform invitees', () => {
     })
 
     it('can reject an invitation to a new team', () => {
-        // should show one pending invite
         cy.get('[data-el="desktop-nav-right"]').within(() => {
             cy.get('[data-el="notification-pill"]').should('have.text', '2')
+            cy.get('[data-el="notifications-button"]').click()
         })
 
+        cy.get('[data-el="notifications-drawer"]').should('be.visible')
+        cy.get('[data-el="invitation-message"]').eq(0).click()
+
         // user should see a message
-        cy.get('[data-nav="team-invites"]').should('be.visible')
-        cy.get('[data-nav="team-invites"]').click()
 
         cy.url().should('include', '/account/teams/invitations')
 
@@ -49,12 +50,12 @@ describe('FlowFuse platform invitees', () => {
     it('can accept an invitation to a new team and is navigated to the team\'s dashboard', () => {
         // should show one pending invite
         cy.get('[data-el="desktop-nav-right"]').within(() => {
-            cy.get('[data-el="notification-pill"]').should('have.text', '1')
+            cy.get('[data-el="notifications-button"]').click()
         })
 
-        // user should see a message
-        cy.get('[data-nav="team-invites"]').should('be.visible')
-        cy.get('[data-nav="team-invites"]').click()
+        cy.get('[data-el="notifications-drawer"]').should('be.visible')
+        cy.get('[data-action="show-read-check"]').click()
+        cy.get('[data-el="invitation-message"]').eq(0).click()
 
         cy.url().should('include', '/account/teams/invitations')
 

From fd58a063284aa993b233b8fe0d9b30e00e13e186 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 19 Dec 2024 10:58:17 +0000
Subject: [PATCH 5/5] Do not preselect create-instance when at instance limit

---
 .../pages/instance/components/InstanceForm.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/instance/components/InstanceForm.vue b/frontend/src/pages/instance/components/InstanceForm.vue
index 8e79b7b32f..24edd3c403 100644
--- a/frontend/src/pages/instance/components/InstanceForm.vue
+++ b/frontend/src/pages/instance/components/InstanceForm.vue
@@ -64,10 +64,9 @@
             </template>
         </FormRow>
 
-        <FeatureUnavailableToTeam v-if="teamRuntimeLimitReached && input.createInstance" fullMessage="You have reached the runtime limit for this team." />
-        <FeatureUnavailableToTeam v-else-if="teamInstanceLimitReached && input.createInstance" fullMessage="You have reached the instance limit for this team." />
-
         <div v-if="!creatingApplication || input.createInstance" :class="creatingApplication ? 'ml-6' : ''" class="space-y-6">
+            <FeatureUnavailableToTeam v-if="teamRuntimeLimitReached" fullMessage="You have reached the runtime limit for this team." />
+            <FeatureUnavailableToTeam v-else-if="teamInstanceLimitReached" fullMessage="You have reached the instance limit for this team." />
             <!-- Instance Name -->
             <div>
                 <FormRow
@@ -453,10 +452,10 @@ export default {
             return (teamTypeRuntimeLimit > 0 && currentRuntimeCount >= teamTypeRuntimeLimit)
         },
         teamInstanceLimitReached () {
-            console.log('this.projectTypes.length')
-            console.log(this.projectTypes)
-            console.log('this.activeProjectTypeCount')
-            console.log(this.activeProjectTypeCount)
+            // this.projectTypes.length > 0 : There are Instance Types defined
+            // this.activeProjectTypeCount : How instance types are available for the user to select
+            //                               taking into account their limits
+            // Hence, if activeProjectTypeCount === 0, then they are at their limit of usage
             return this.projectTypes.length > 0 && this.activeProjectTypeCount === 0
         },
         atLeastOneFlowBlueprint () {
@@ -518,8 +517,6 @@ export default {
         const projectTypes = (await projectTypesPromise).types
         this.templates = (await templateListPromise).templates.filter(template => template.active)
 
-        console.log(projectTypes)
-
         this.activeProjectTypeCount = projectTypes.length
 
         // Do a first pass of the instance types to disable any not allowed for this team
@@ -655,6 +652,9 @@ export default {
                 ...this.preDefinedInputs
             }
         }
+        if (this.teamInstanceLimitReached || this.teamRuntimeLimitReached) {
+            this.input.createInstance = false
+        }
     },
     async beforeMount () {
         // Billing feature must be enabled