feat: Open Collective Support

src/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     VoAuthGithub: typeof import('./components/auth/VoAuthGithub.vue')['default']
     VoAuthListItem: typeof import('./components/auth/VoAuthListItem.vue')['default']
     VoAuthLogoutNavItem: typeof import('./components/auth/VoAuthLogoutNavItem.vue')['default']
+    VoAuthOpenCollective: typeof import('./components/auth/VoAuthOpenCollective.vue')['default']
     VoAuthShopify: typeof import('./components/auth/VoAuthShopify.vue')['default']
     VoBtn: typeof import('./components/app/VoBtn.vue')['default']
     VoCard: typeof import('./components/app/VoCard.vue')['default']
@@ -58,6 +59,7 @@ declare module 'vue' {
     VoSponsorshipsTimelineItemDiscord: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemDiscord.vue')['default']
     VoSponsorshipsTimelineItemGithub: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemGithub.vue')['default']
     VoSponsorshipsTimelineItemOne: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemOne.vue')['default']
+    VoSponsorshipsTimelineItemOpencollective: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue')['default']
     VoSpot: typeof import('./components/spots/VoSpot.vue')['default']
     VoStudioDialog: typeof import('./components/studio/VoStudioDialog.vue')['default']
     VoStudioNavItem: typeof import('./components/studio/VoStudioNavItem.vue')['default']

src/components/auth/VoAuthCard.vue

@@ -33,11 +33,13 @@
 
       <VoAuthDiscord class="mb-3" />
 
-      <VoAuthShopify />
+      <VoAuthShopify class="mb-3" />
+
+      <VoAuthOpenCollective />
     </v-list>
   </v-card>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
   const auth = useAuthStore()
 </script>

src/components/auth/VoAuthListItem.vue

@@ -46,6 +46,8 @@
             <VoAuthDiscord @click="social = false" />
 
             <VoAuthShopify @click="social = false" />
+
+            <VoAuthOpenCollective @click="social = false" />
           </div>
         </v-sheet>
       </v-expand-transition>
@@ -54,7 +56,7 @@
 </template>
 
 <script lang="ts" setup>
-  // Icons
+// Icons
   import { mdiSync, mdiSyncOff } from '@mdi/js'
 
   const auth = useAuthStore()

src/components/auth/VoAuthOpenCollective.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-list-item
+    base-color="#1258e2"
+    :prepend-icon="`svg:${mdiAccountGroupOutline}`"
+    rounded="pill"
+    slim
+    variant="flat"
+    @click="auth.login('opencollective')"
+  >
+    <template #title>
+      <span class="text-body-2">{{ text }}</span>
+    </template>
+
+    <template
+      v-if="(!auth.user && auth.lastLoginProvider() === 'openCollective')"
+      #subtitle
+    >
+      <div class="text-caption mt-n1">Last Used</div>
+    </template>
+  </v-list-item>
+</template>
+
+<script lang="ts" setup>
+  import { mdiAccountGroupOutline } from '@mdi/js'
+
+  const auth = useAuthStore()
+
+  const hasIdentity = computed(() => {
+    return auth.user && auth.findIdentity('openCollective')
+  })
+
+  const text = computed(() => {
+    if (!auth.user) return 'Login with Open Collective'
+    if (hasIdentity.value) return 'Connected to Open Collective'
+
+    return 'Connect Open Collective'
+  })
+</script>

src/components/sponsorships/VoSponsorshipsTimeline.vue

@@ -11,9 +11,11 @@
     <VoSponsorshipsTimelineItemGithub />
 
     <VoSponsorshipsTimelineItemDiscord />
+
+    <VoSponsorshipsTimelineItemOpencollective />
   </v-timeline>
 </template>
 
 <script lang="ts" setup>
-  //
+//
 </script>

src/components/sponsorships/VoSponsorshipsTimelineItem.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-  // Types
+// Types
   import type { VOneSponsorship } from '@/stores/auth'
 
   // Icons
@@ -74,8 +74,9 @@
   const settings = useSettingsStore()
 
   const tier = computed(() => {
-    const amount = Number.parseFloat(String((props.sponsorship?.amount ?? 0) / 100)).toFixed(2)
-
+    const amount = props.sponsorship?.platform === 'opencollective'
+      ? Number.parseFloat(String(props.sponsorship?.amount ?? 0)).toFixed(2)
+      : Number.parseFloat(String((props.sponsorship?.amount ?? 0) / 100)).toFixed(2)
     return `$${amount} /${props.sponsorship?.interval}`
   })
 </script>

src/components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue

@@ -0,0 +1,13 @@
+<template>
+  <VoSponsorshipsTimelineItem
+    href="https://opencollective.com/vuetify"
+    logo="opencollective"
+    :sponsorship="one.opencollective"
+    text="Support Vuetify through Open Collective."
+    title="Open Collective Subscriber"
+  />
+</template>
+
+<script lang="ts" setup>
+  const one = useOneStore()
+</script>

src/stores/auth.ts

@@ -41,7 +41,7 @@ export interface AuthState {
   isLoading: ShallowRef<boolean>
   verify: (force?: boolean) => Promise<void>
   findIdentity: (provider: string) => VOneIdentity | undefined
-  login: (provider?: 'github' | 'discord' | 'shopify') => Promise<void>
+  login: (provider?: 'github' | 'discord' | 'shopify' | 'opencollective') => Promise<void>
   logout: (identity?: string) => Promise<void>
   lastLoginProvider: () => string | null
   sync: () => Promise<void>
@@ -139,7 +139,7 @@ export const useAuthStore = defineStore('auth', (): AuthState => {
 
   verify.promise = null as Promise<void> | null
 
-  async function login (provider: 'github' | 'discord' | 'shopify' = 'github') {
+  async function login (provider: 'github' | 'discord' | 'shopify' | 'opencollective' = 'github') {
     isLoading.value = true
 
     const redirectUrl = `${http.url}/auth/${provider}/redirect`

src/stores/one.ts

@@ -52,6 +52,7 @@ interface OneState {
   github: ComputedRef<VOneSponsorship | undefined>
   discord: ComputedRef<VOneSponsorship | undefined>
   shopify: ComputedRef<VOneIdentity | undefined>
+  opencollective: ComputedRef<VOneSponsorship | undefined>
   one: ComputedRef<VOneSponsorship | undefined>
 
   activate: () => Promise<void>
@@ -107,6 +108,9 @@ export const useOneStore = defineStore('one', (): OneState => {
   const discord = computed(() => {
     return auth.user?.sponsorships.find(s => s.platform === 'discord' && s.isActive)
   })
+  const opencollective = computed(() => {
+    return auth.user?.sponsorships.find(s => s.platform === 'opencollective' && s.isActive)
+  })
   const shopify = computed(() => {
     return auth.user?.identities.find(i => i.provider === 'shopify')
   })
@@ -117,6 +121,7 @@ export const useOneStore = defineStore('one', (): OneState => {
     || subscription.value?.isActive
     || github.value?.isActive
     || discord.value?.isActive
+    || opencollective.value?.isActive
     || monthlyTotal.value >= 2.99
   ))
 
@@ -299,6 +304,7 @@ export const useOneStore = defineStore('one', (): OneState => {
     isOpen,
     isSubscriber,
 
+    opencollective,
     github,
     discord,
     shopify,