feat: add stripe

src/components/dao/settings-plans-billing.vue

@@ -65,14 +65,31 @@ export default {
     async checkout (id) {
       this.state = STATES.CREATING_SESSION
 
+      console.log(JSON.stringify(
+        {
+          daoId: this.selectedDao.docId,
+          daoName: this.selectedDao.title,
+          daoType: this.planType,
+          priceId: id,
+          redirectDomain: ORIGIN,
+          successUrl: `/${this.selectedDao.url}/configuration?tab=PLANS_AND_BILLING`
+        }
+      ))
+
       const res = await this.$apollo.mutate({
         mutation: gql`
           mutation createSession(
+            $daoId: String!
+            $daoName: String!
+            $daoType: String!
             $priceId: String!
             $redirectDomain: String!
             $successUrl: String!
           ) {
             createCheckoutSession(
+              daoId: $daoId
+              daoName: $daoName
+              daoType: $daoType
               priceId: $priceId
               redirectDomain: $redirectDomain
               successUrl: $successUrl
@@ -83,10 +100,12 @@ export default {
           }
         `,
         variables: {
+          daoId: this.selectedDao.docId,
+          daoName: this.selectedDao.title,
+          daoType: this.planType,
           priceId: id,
           redirectDomain: ORIGIN,
-
-          successUrl: `/${this.daoSettings.url}/configuration?tab=PLANS_AND_BILLING`
+          successUrl: `/${this.selectedDao.url}/configuration?tab=PLANS_AND_BILLING`
         }
       })
 
@@ -95,11 +114,27 @@ export default {
       }
     },
 
+    onPlanDialogClose () {
+      // this.state = STATES.WAITING
+      // this.planType = PLAN_TYPE.SAAS
+      // this.paymentInterval = 'year'
+    },
+
+    switchPlanType () {
+      // if (this.planType === PLAN_TYPE.SAAS) {
+      //   this.planType = PLAN_TYPE.EAAS
+      //   this.paymentInterval = null
+      // } else {
+      //   this.planType = PLAN_TYPE.SAAS
+      //   this.paymentInterval = 'year'
+      // }
+    },
+
     formatMoney (amount) { return amount ? new Intl.NumberFormat().format(parseInt(amount), { style: 'currency' }) : 0 }
   },
 
   computed: {
-    ...mapGetters('dao', ['daoSettings', 'selectedDaoPlan']),
+    ...mapGetters('dao', ['daoSettings', 'selectedDao', 'selectedDaoPlan']),
 
     isPlanModalOpen () { return [STATES.UPDATING_PLAIN, STATES.CREATING_SESSION].includes(this.state) },
 
@@ -124,7 +159,7 @@ export default {
 
 <template lang="pug">
 .tab
-  q-dialog(:value="isPlanModalOpen" @before-hide="state = STATES.WAITING" full-width="full-width")
+  q-dialog(:value="isPlanModalOpen" @before-hide="onPlanDialogClose" full-width="full-width")
     widget.relative.wrapper(
       v-if="state === STATES.UPDATING_PLAIN"
       :title="$t('configuration.settings-plans-billing.plan.modal.title')"
@@ -135,7 +170,7 @@ export default {
         q-btn.q-px-xl.rounded-border.text-bold(
           :color="planType === PLAN_TYPE.EAAS ? 'primary' : 'secondary'"
           :label="planType === PLAN_TYPE.EAAS ? 'Single' : 'Ecosystem'"
-          @click="planType = PLAN_TYPE.EAAS, paymentInterval = null"
+          @click="switchPlanType"
           no-caps
           rounded
           unelevated
@@ -179,8 +214,8 @@ export default {
 
               footer
                 div.row.justify-between
-                  p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose Core Members
-                  p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose {{ plan.coreMembersCount }}
+                  //- p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose Core Members
+                  //- p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose {{ plan.currentCoreMembersCount }} {{ plan.coreMembersCount }}
                 //- TODO: Return after beta
                 //- div.row.justify-between.q-mt-xs
                 //-   p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose Community Members
@@ -221,7 +256,7 @@ export default {
           footer
             div.row.justify-between
               p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose Core Members
-              p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose {{ selectedDaoPlan.coreMembersCount }}
+              p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose {{ selectedDaoPlan.currentCoreMembersCount }} / {{ selectedDaoPlan.coreMembersCount }}
             //- TODO: Return after beta
             //- div.row.justify-between.q-mt-xs
             //-   p.q-pa-none.q-ma-none.text-sm.text-h-gray.leading-loose Community Members

src/layouts/DhoSelector.vue

@@ -4,7 +4,18 @@ import gql from 'graphql-tag'
 const MAX_NUM_OF_RETIRES = 10
 
 const DAO_ACTIVE_QUERY = `
-
+  activePlan(daoId: $daoId) {
+    id: planId
+    status: subscriptionStatus
+    currency
+    currentPeriodEnd
+    currentPeriodStart
+    coreMembersCount
+    communityMembersCount
+    price
+    subscriptionId
+  }
+  
   queryDao @cascade(fields: ["settings"]) {
     docId
     details_daoName_n
@@ -166,7 +177,7 @@ const DAO_ACTIVE_QUERY = `
       settings_documentationURL_s
     }
 
-    settings(filter: { settings_daoUrl_s: { regexp: $regexp } }) {
+    settings(filter: {  settings_daoUrl_s: { regexp: $regexp } }) {
       ecosystem_name_s
       ecosystem_logo_s
       ecosystem_domain_s
@@ -180,7 +191,7 @@ const DAO_ACTIVE_QUERY = `
       settings_daoTitle_s
       settings_daoDescription_s
       settings_governanceTokenContract_n
-      
+
       settings_pegTokenName_s
       settings_pegToken_a
       settings_pegTokenContract_n
@@ -293,21 +304,22 @@ export default {
 
   apollo: {
     dao: {
-      query: gql`query activeDao($regexp: String!) { ${DAO_ACTIVE_QUERY} }`,
+      query: gql`query activeDao($daoId: ID!, $regexp: String!) { ${DAO_ACTIVE_QUERY} }`,
       update: data => data.queryDao,
       skip () { return !this.dhoname || !this.daoRegexp },
-      variables () { return { regexp: this.daoRegexp } },
+      variables () { return { regexp: this.daoRegexp, daoId: '39485' } },
 
       result (res) {
-        const data = res.data?.queryDao
+        const data = res?.data
 
-        if (!(data?.length)) {
+        if (!data?.queryDao?.length) {
           this.daoQueryNumberOfRetires++
           if (this.daoQueryNumberOfRetires > MAX_NUM_OF_RETIRES) {
             this.$router.push({ path: '/not-found' })
           } else {
             this.$apollo.queries.dao.refetch()
           }
+          return
         }
 
         this.$store.commit('dao/switchDao', data)

src/layouts/MultiDhoLayout.vue

@@ -51,9 +51,16 @@ export default {
   },
 
   apollo: {
-    member: {
+    dhos: {
       query: require('../query/profile/profile-dhos.gql'),
-      update: data => { return data.getMember },
+      update: data => data?.getMember?.memberof.map(dao => ({
+        name: dao.details_daoName_n,
+        title: dao.settings[0].settings_daoTitle_s,
+        icon: dao.settings[0].settings_logo_s,
+        logo: dao.settings[0].settings_logo_s,
+        isHypha: dao.settings[0].settings_isHypha_i,
+        url: dao.settings[0].settings_daoUrl_s
+      })),
       skip () { return !this.account },
       variables () { return { username: this.account } }
     }
@@ -229,12 +236,8 @@ export default {
     ...mapGetters('search', ['search']),
 
     breadcrumbs () { return this.$route.meta ? this.$route.meta.breadcrumbs : null },
-    dhos () {
-      const member = (this.$apolloData && this.$apolloData.member) ? this.$apolloData.member : this.member
-      return this.getDaos(member)
-    },
 
-    isLoading () { return this.$apollo.queries.member.loading },
+    isLoading () { return this.$apollo.queries.dhos.loading },
     status () { return this.$route.meta ? this.$route.meta.status ?? 'red' : 'red' },
 
     loadingAccount () { return localStorage?.getItem('autoLogin') && !this.account },
@@ -281,22 +284,7 @@ export default {
         }
       }
     },
-    getDaos (member) {
-      const results = []
-      if (member) {
-        member.memberof?.forEach((dao) => {
-          results.push({
-            name: dao.details_daoName_n,
-            title: dao.settings[0].settings_daoTitle_s,
-            icon: dao.settings[0].settings_logo_s,
-            logo: dao.settings[0].settings_logo_s,
-            isHypha: dao.settings[0].settings_isHypha_i,
-            url: dao.settings[0].settings_daoUrl_s
-          })
-        })
-      }
-      return results
-    },
+
     async getProfile () {
       if (this.account) {
         const profile = await this.getPublicProfile(this.account)
@@ -447,7 +435,20 @@ export default {
     //- Because iOS z-index doesn`t work
     router-view(v-if="$router.currentRoute.name === 'proposal-create' && $q.screen.lt.md")
     q-header.bg-white(v-if="$q.screen.lt.lg && $route.name !== ROUTE_NAMES.PROPOSAL_DETAIL && $route.name !== ROUTE_NAMES.CREATE_YOUR_DAO")
-      top-navigation(:unreadNotifications="countObjectsWithKeyValue(notifications, 'read', false)" :notifications="notifications" @openNotifications="languageSettings = false, right = false, showNotificationsBar = true" @isActiveRoute="isActiveRoute" @showLangSettings="languageSettings = true, right = false" :showTopButtons="showTopBarItems" :profile="profile" @toggle-sidebar="!$q.screen.md ? right = true : showMinimizedMenu = true" @search="onSearch" :dho="dho" :dhos="getDaos($apolloData.data.member)" :selectedDaoPlan="selectedDaoPlan")
+      top-navigation(
+        :dho="dho"
+        :dhos="dhos"
+        :selectedDaoPlan="selectedDaoPlan"
+        @search="onSearch"
+        :notifications="notifications"
+        :profile="profile"
+        :showTopButtons="showTopBarItems"
+        :unreadNotifications="countObjectsWithKeyValue(notifications, 'read', false)"
+        @isActiveRoute="isActiveRoute"
+        @openNotifications="languageSettings = false, right = false, showNotificationsBar = true"
+        @showLangSettings="languageSettings = true, right = false"
+        @toggle-sidebar="!$q.screen.md ? right = true : showMinimizedMenu = true"
+        )
     q-page-container.bg-white.window-height.q-py-sm(:class="{ 'q-pr-sm': $q.screen.gt.md, 'q-px-xs': !$q.screen.gt.md}")
       .bg-internal-bg.content.full-height
         q-resize-observer(@resize="onContainerResize")
@@ -557,7 +558,7 @@ export default {
     q-footer.bg-white(v-if="$q.screen.lt.lg && $route.name !== ROUTE_NAMES.PROPOSAL_DETAIL && $route.name !== ROUTE_NAMES.CREATE_YOUR_DAO" :style="{ height: '74px' }")
       bottom-navigation
     q-drawer(v-else v-model="left" side="left" :width="80" persistent="persistent" :show-if-above="true")
-      left-navigation(:dho="dho" :dhos="getDaos($apolloData.data.member)")
+      left-navigation(:dho="dho" :dhos="dhos")
 </template>
 <style lang="stylus" scoped>
 .rounded-border

src/store/dao/getters.js

@@ -1,4 +1,3 @@
-import { date } from 'quasar'
 
 export const announcement = ({ announcements }) => announcements.find(_ => _.enabled)
 
@@ -14,6 +13,7 @@ export const dho = ({ dho }) => dho
 export const ecosystem = ({ ecosystem }) => ecosystem
 
 export const selectedDao = (state) => ({
+  url: state.url,
   name: state.name,
   title: state.settings ? state.settings.title : undefined,
   docId: state.docId,
@@ -24,24 +24,7 @@ export const selectedDao = (state) => ({
   hasCustomToken: state.settings.settings_rewardToken_a !== null && state.settings.settings_pegToken_a !== null
 })
 
-export const selectedDaoPlan = ({ isWaitingEcosystem, plan }) => {
-  const daysLeft = date.getDateDiff(new Date(plan.expirationDate), new Date(), 'days')
-  const gracePeriodDays = 7
-  return {
-    ...plan,
-
-    id: 'founder',
-    status: 'active',
-    amountUSD: 0,
-    coreMembersCount: 5,
-    communityMembersCount: 0,
-
-    daysLeft: plan.name === 'Founders' ? -1 : (daysLeft - gracePeriodDays) < 0 ? 0 : (daysLeft - gracePeriodDays),
-    graceDaysLeft: plan.name === 'Founders' ? -1 : daysLeft < 0 ? 0 : daysLeft,
-    hasExpired: plan.isInfinite ? false : daysLeft <= 0 && plan.name !== 'Founders',
-    isExpiring: daysLeft <= gracePeriodDays && plan.name !== 'Founders'
-  }
-}
+export const selectedDaoPlan = ({ isWaitingEcosystem, plan }) => plan
 
 export const getDaoTokens = (state) => ({
   pegToken: state.settings.pegToken,