Vo Team Dashboard

.env.example

@@ -1 +1,6 @@
 VITE_API_SERVER_URL=https://dev-api.vuetifyjs.com
+
+VITE_YEARLY_TEAM_PRICE=299.99
+VITE_YEARLY_SOLO_PRICE=29.99
+VITE_MONTHLY_TEAM_PRICE=29.99
+VITE_MONTHLY_SOLO_PRICE=2.99

.eslintrc-auto-import.json

@@ -110,6 +110,7 @@
     "useQueueStore": true,
     "aliases": true,
     "trackEvent": true,
+    "useTeamStore": true,
     "Banner": true,
     "Bin": true,
     "DirectiveBinding": true,
@@ -138,6 +139,7 @@
     "SettingsState": true,
     "SiteState": true,
     "SnackbarQueueState": true,
-    "SponsorState": true
+    "SponsorState": true,
+    "Team": true
   }
 }

auto-imports.d.ts

@@ -102,6 +102,7 @@ declare global {
   const useSlots: typeof import('vue')['useSlots']
   const useSponsorsStore: typeof import('./lib/stores/sponsors')['useSponsorsStore']
   const useSpotsStore: typeof import('./lib/stores/spots')['useSpotsStore']
+  const useTeamStore: typeof import('./lib/stores/team')['useTeamStore']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTheme: typeof import('vuetify')['useTheme']
   const useUserStore: typeof import('./lib/stores/user')['useUserStore']
@@ -152,6 +153,9 @@ declare global {
   export type { Spot } from './lib/stores/spots'
   import('./lib/stores/spots')
   // @ts-ignore
+  export type { Team } from './lib/stores/team'
+  import('./lib/stores/team')
+  // @ts-ignore
   export type { RootState, SavedState } from './lib/stores/user'
   import('./lib/stores/user')
 }
@@ -256,6 +260,7 @@ declare module 'vue' {
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSponsorsStore: UnwrapRef<typeof import('./lib/stores/sponsors')['useSponsorsStore']>
     readonly useSpotsStore: UnwrapRef<typeof import('./lib/stores/spots')['useSpotsStore']>
+    readonly useTeamStore: UnwrapRef<typeof import('./lib/stores/team')['useTeamStore']>
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTheme: UnwrapRef<typeof import('vuetify')['useTheme']>
     readonly useUserStore: UnwrapRef<typeof import('./lib/stores/user')['useUserStore']>

components.d.ts

@@ -75,6 +75,9 @@ declare module 'vue' {
     VoSubscriptionStatus: typeof import('./lib/components/subscription/VoSubscriptionStatus.vue')['default']
     VoSubscriptionSubscribe: typeof import('./lib/components/subscription/VoSubscriptionSubscribe.vue')['default']
     VoSwitch: typeof import('./lib/components/app/VoSwitch.vue')['default']
+    VoTeamDialog: typeof import('./lib/components/team/VoTeamDialog.vue')['default']
+    VoTeamInvite: typeof import('./lib/components/team/VoTeamInvite.vue')['default']
+    VoTeamListItem: typeof import('./lib/components/team/VoTeamListItem.vue')['default']
     VoUserAvatar: typeof import('./lib/components/user/VoUserAvatar.vue')['default']
     VoUserBadges: typeof import('./lib/components/user/VoUserBadges.vue')['default']
     VoUserColors: typeof import('./lib/components/user/VoUserColors.vue')['default']

lib/components/app/VoAppBar.vue

@@ -32,6 +32,7 @@
         vertical
       />
 
+      <!-- Leads to one dropdown dialog -->
       <VoAuthBtn />
     </template>
   </v-app-bar>

lib/components/auth/VoAuthBtn.vue

@@ -26,13 +26,15 @@
   </VoNotificationsTotalBadge>
 
   <VoAuthDialog />
+  <VoTeamInvite />
 
   <VoSnackbarQueue />
 </template>
 
 <script lang="ts" setup>
   // Icons
   import { mdiLogin } from '@mdi/js'
+  import VoTeamInvite from '../team/VoTeamInvite.vue'
 
   defineProps({
     external: Boolean,

lib/components/subscription/VoSubscriptionDialog.vue

@@ -15,10 +15,8 @@
 
             <v-window :model-value="window">
               <v-window-item value="subscribe">
-                <VoSubscriptionSubscribe v-model="subscription" />
-
+                <VoSubscriptionSubscribe v-model:interval="interval" v-model:type="type" />
                 <br>
-
                 <VoSubscriptionPerks />
               </v-window-item>
 
@@ -50,13 +48,13 @@
         <VoBtn
           v-else-if="!one.one"
           block
-          :color="!subscription ? 'disabled' : 'primary'"
-          :disabled="!subscription"
+          :color="!(interval && type) ? 'disabled' : 'primary'"
+          :disabled="!(interval && type)"
           :loading="one.isLoading"
           prepend-icon="$vuetify"
           size="default"
           text="Activate Subscription"
-          @click="one.subscribe(subscription!)"
+          @click="one.subscribe(interval!, type!)"
         />
 
         <VoBtn
@@ -83,15 +81,20 @@
   const dialog = defineModel('modelValue', { type: Boolean })
 
   const one = useOneStore()
-  const query = useQuery<{ one: string }>()
-  const subscription = shallowRef(one.interval)
+  const query = useQuery<{ one: string, team: string}>()
+  const interval = shallowRef(one.interval)
+  const type = shallowRef(one.subscriptionType)
   const window = shallowRef(one.hasBilling ? 'status' : 'subscribe')
   const isUpdatingSubscription = shallowRef<boolean | null>(false)
 
-  watch(subscription, val => {
-    if (!one.isSubscriber || !one.interval) return
+  watch([interval, type], ([interval, type]) => {
+    if (!one.isSubscriber || !one.interval || !one.subscriptionType) return
 
-    isUpdatingSubscription.value = val !== one.interval
+    isUpdatingSubscription.value = interval !== one.interval || type !== one.subscriptionType
+  })
+  watchEffect(() => {
+    interval.value = one.interval
+    type.value = one.subscriptionType
   })
 
   watch(dialog, async val => {
@@ -106,7 +109,7 @@
 
   watch(query, async () => {
     if (!one.sessionId && !['subscribe', 'status'].includes(query.value.one)) return
-
+    if (query.value.team) return
     window.value = one.sessionId || query.value.one === 'status' ? 'status' : 'subscribe'
 
     one.isOpen = true
@@ -117,7 +120,7 @@
   }, { immediate: true })
 
   async function onClickModify () {
-    await one.modify(subscription.value!)
+    await one.modify(interval.value!, type.value!)
     await one.subscriptionInfo()
 
     isUpdatingSubscription.value = null

lib/components/subscription/VoSubscriptionSubscribe.vue

@@ -1,16 +1,30 @@
 <template>
-  <v-item-group v-model="subscription" mandatory>
+  <v-tabs v-model="interval" color="primary" mandatory>
+    <v-tab value="month">Monthly billing</v-tab>
+    <v-tab value="year">
+      Yearly billing
+      <v-chip
+        class="ml-2"
+        color="success"
+        size="small"
+        text="Save 2 months"
+        variant="flat"
+      />
+    </v-tab>
+  </v-tabs>
+
+  <v-item-group v-model="type" class="mb-4" mandatory>
     <v-row>
       <v-col cols="12" md="6">
-        <v-item value="month">
+        <v-item value="solo">
           <template #default="{ toggle, isSelected }">
             <v-card
               :border="isSelected ? 'sm primary opacity-100' : 'sm'"
               :color="isSelected ? 'primary' : undefined"
               :prepend-icon="isSelected ? `svg:${mdiCheckCircleOutline}` : '$radioOff'"
               rounded="lg"
-              subtitle="$2.99/month"
-              title="Monthly"
+              :subtitle="prices.solo[interval]"
+              title="Solo Developer"
               :variant="isSelected ? 'tonal' : 'text'"
               @click="toggle"
             >
@@ -23,31 +37,22 @@
       </v-col>
 
       <v-col cols="12" md="6">
-        <v-item value="year">
+        <v-item value="team">
           <template #default="{ toggle, isSelected }">
             <v-card
               :border="isSelected ? 'sm primary opacity-100' : 'sm'"
               :color="isSelected ? 'primary' : undefined"
+              :disabled="disableTeam"
               :prepend-icon="isSelected ? `svg:${mdiCheckCircleOutline}` : '$radioOff'"
               rounded="lg"
-              subtitle="$29.99/year"
-              title="Yearly"
+              :subtitle="prices.team[interval]"
+              title="Team Access"
               :variant="isSelected ? 'tonal' : 'text'"
               @click="toggle"
             >
               <template #prepend>
                 <v-icon class="mt-n6" />
               </template>
-
-              <template #append>
-                <v-chip
-                  class="mt-n6"
-                  color="success"
-                  size="small"
-                  text="Save 20%"
-                  variant="flat"
-                />
-              </template>
             </v-card>
           </template>
         </v-item>
@@ -57,21 +62,35 @@
 </template>
 
 <script lang="ts" setup>
-  // Icons
+// Icons
   import { mdiCheckCircleOutline } from '@mdi/js'
 
   const dialog = shallowRef(false)
-  const subscription = defineModel({
-    type: String as PropType<'month' | 'year' | undefined>,
+  const interval = defineModel('interval', {
+    type: String as PropType<'month' | 'year'>,
+    default: 'month',
+  })
+  const type = defineModel('type', {
+    type: String as PropType<'solo' | 'team'>,
+    default: 'solo',
   })
-
   const one = useOneStore()
+  const team = useTeamStore()
+
+  const disableTeam = computed(() => team.hasTeamAccess && !team.isTeamOwner)
+
+  const prices = {
+    solo: {
+      month: import.meta.env.VITE_MONTHLY_SOLO_PRICE + ' / Month',
+      year: import.meta.env.VITE_YEARLY_SOLO_PRICE + ' / Year',
+    },
+    team: {
+      month: import.meta.env.VITE_MONTHLY_TEAM_PRICE + ' / Month',
+      year: import.meta.env.VITE_YEARLY_TEAM_PRICE + ' / Year',
+    },
+  }
 
   watch(dialog, async val => {
     if (val) one.subscriptionInfo()
   })
-
-  watch(() => one.interval, val => {
-    subscription.value = val
-  }, { immediate: true })
 </script>