chore: release 2.21.0

Release-As: 2.21.0

.github/workflows/deploy-dev.yml

@@ -49,10 +49,10 @@ jobs:
           IPFS_GATEWAY: 'https://hypha.infura-ipfs.io/ipfs/'
           MULTISIG_CONTRACT: 'msig.hypha'
           HYPHA_TOKEN_SALES_ENCODE_KEY: ${{ secrets.HYPHA_TOKEN_SALES_ENCODE_KEY }}
-          HYPHA_TOKEN_SALES_URL: 'https://tokensale.hypha.earth'
+          HYPHA_TOKEN_SALES_URL: 'https://dp9rw57cx84kg.cloudfront.net'
           HYPHA_TOKEN_SALES_API_URL: 'http://api-tokensale.hypha.earth'
           HYPHA_TOKEN_SALES_RPC_URL: 'https://telos.greymass.com'
-
+ 
       - name: S3 sync
         uses: jakejarvis/s3-sync-action@master
         with:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dho-web-client",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "description": "Governance, payroll and treasury tools for distributed HUMAN organizations (DHO)",
   "productName": "Hypha DHO",
   "author": "Max <[email protected]>",

src/components/dao/settings-plan.vue

@@ -40,14 +40,18 @@ export default {
     Widget: () => import('~/components/common/widget.vue'),
 
     ChipPlan: () => import('~/components/plan/chip-plan.vue'),
-    DowngradePopUp: () => import('~/components/plan/downgrade-pop-up.vue')
+    DowngradePopUp: () => import('~/components/plan/downgrade-pop-up.vue'),
+    BillingHistoryCard: () => import('~/components/plan/billing-history-card.vue')
   },
 
   apollo: {
     pageQuery: {
       query: require('~/query/_pages/plan-page-query.gql'),
       update: data => data,
-      skip () { return !this.usdPerHypha }
+      variables () {
+        return { daoId: this.selectedDao.docId }
+      },
+      skip () { return !this.usdPerHypha || !this.selectedDao?.docId }
     }
   },
 
@@ -103,6 +107,17 @@ export default {
         })).sort((a, b) => a.periods - b.periods)
     },
 
+    BILLING_HISTORY () {
+      return !this.pageQuery
+        ? []
+        : this.pageQuery.getDao.planmanager[0].bill.map(_ => ({
+          id: _.docId,
+          date: new Date(_.details_expirationDate_t),
+          planName: _.details_planName_s,
+          status: (new Date(_.details_expirationDate_t) < new Date() && _.details_planName_s !== 'Founders') ? 'EXPIRED' : 'PAID'
+        })).sort((a, b) => a.date - b.date)
+    },
+
     selectedPlan () {
       if (!this.PLANS) return {}
       return this.PLANS.find(_ => _.id === this.form.plan)
@@ -302,6 +317,10 @@ export default {
                   rounded
                   unelevated
                 )
+  widget(title="Billing history").full-width.q-mt-md
+    .calendar-container.q-mt-lg.row.q-gutter-sm
+      template(v-for="(bill, index) in BILLING_HISTORY")
+        billing-history-card(v-bind="bill" :key="bill.id")
 
 </template>
 

src/components/plan/billing-history-card.stories.js

@@ -0,0 +1,22 @@
+import BillingHistoryCard from './billing-history-card.vue'
+
+export default {
+  title: 'Plan/Billing history card',
+  component: BillingHistoryCard,
+  argTypes: {}
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BillingHistoryCard },
+  template: `
+    <downgrade-pop-up v-bind="$props" />
+  `
+})
+
+export const Example = Template.bind({})
+Example.args = {
+  value: true
+}
+
+export const Base = Template.bind({})

src/components/plan/billing-history-card.vue

@@ -0,0 +1,48 @@
+<script>
+import { dateToString } from '~/utils/TimeUtils.js'
+
+export default {
+  name: 'billing-history-card',
+  components: {
+    Widget: () => import('~/components/common/widget.vue')
+  },
+  props: {
+    planName: String,
+    status: String,
+    date: Date
+  },
+  data () {
+    return {
+      dateToString
+    }
+  }
+}
+</script>
+
+<template lang="pug">
+  .pricing-history-card
+    widget(:background="status === 'PAID' ? 'secondary' : 'primary'")
+      q-btn(
+        round
+        unelevated
+        :icon="status === 'PAID' ? 'fas fa-check' : 'fa fa-exclamation-triangle'"
+        color="white"
+        text-color="primary"
+        size="12px"
+        :ripple="false"
+      )
+      .h-h5.text-white.q-mt-xs {{planName}}
+      .text-ellipsis.text-xs.text-white {{status === 'PAID' ? 'Payed/active': 'Next billing'}}
+      .text-ellipsis.text-xs.text-white.q-mt-sm {{ planName === 'Founders' ? 'Free forever' : dateToString(date)}}
+      q-badge(v-if="status === 'EXPIRED'" floating rounded color="red" label="\xa0").badge
+</template>
+
+<style lang="stylus" scoped>
+.pricing-history-card
+  width: 180px
+  height: 180px
+.badge
+  position: absolute
+  right: -28px
+  top: -28px
+</style>

src/components/proposals/creation-stepper.vue

@@ -35,7 +35,10 @@ export default {
 </script>
 
 <template lang="pug">
-widget(title="Creation process")
+widget(
+  title="Creation process"
+  :noTitle="!$q.screen.gt.md"
+)
   q-list(:class="{ 'q-pt-md':$q.screen.gt.md }").wizard
     template(v-if="$q.screen.gt.md" v-for="(step, index) in filteredSteps")
       q-item.q-py-md.q-px-none.wizard-item
@@ -47,30 +50,7 @@ widget(title="Creation process")
             q-icon(v-show='activeStepIndex > step.index - 1' center size='10px' name="fas fa-check")
         q-item-section
           div(:class="{ 'cursor-pointer': activeStepIndex > index-1, 'selected-label-text text-primary': activeStepIndex === step.index - 1 }" @click="activeStepIndex > index-1 && $emit('goToStep', { index: step.index - 1, stepName: step.component })").label-text.q-pl-sm {{ step.label }}
-    template(v-if="($q.screen.lt.md || $q.screen.md) && !$q.screen.sm" v-for="(step, index) in filteredSteps")
-      q-item(v-if="activeStepIndex === step.index - 1" :key="index").q-py-sm.q-px-none.wizard-item
-        q-item-section(avatar)
-          transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
-            span(v-show='activeStepIndex > step.index - 1').wizard-item-line
-          div(:class=" {'cursor-pointer': activeStepIndex > index-1, 'active': activeStepIndex === step.index - 1 }" @click=" activeStepIndex > index-1 && $emit('goToStep', index)").text-bold.wizard-item-icon
-            span.number-text(v-show='activeStepIndex <= step.index - 1') {{ index + 1 }}
-            q-icon(v-show='activeStepIndex > step.index - 1' center size='10px' name="fas fa-check")
-        q-item-section
-          div(:class="{ 'cursor-pointer': activeStepIndex > index-1, 'selected-label-text text-primary': activeStepIndex === step.index - 1 }" @click="activeStepIndex > index-1 && $emit('goToStep', index)").label-text.q-pl-sm {{ step.label }}
   div.flex.full-width.justify-between
-    template(v-if="($q.screen.lt.md || $q.screen.md) && $q.screen.sm" v-for="(step, index) in filteredSteps")
-      q-item(v-if="activeStepIndex === step.index - 1" :key="index").q-py-sm.q-px-none.wizard-item
-        q-item-section(avatar)
-          transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
-            span(v-show='activeStepIndex > step.index - 1').wizard-item-line
-          div(:class=" {'cursor-pointer': activeStepIndex > index-1, 'active': activeStepIndex === step.index - 1 }" @click=" activeStepIndex > index-1 && $emit('goToStep', index)").text-bold.wizard-item-icon
-            span.number-text(v-show='activeStepIndex <= step.index - 1') {{ index + 1 }}
-            q-icon(v-show='activeStepIndex > step.index - 1' center size='10px' name="fas fa-check")
-        q-item-section
-          div(:class="{ 'cursor-pointer': activeStepIndex > index-1, 'selected-label-text text-primary': activeStepIndex === step.index - 1 }" @click="activeStepIndex > index-1 && $emit('goToStep', index)").label-text.q-pl-sm {{ step.label }}
-    .flex.row.justify-center.items-center(v-if="$q.screen.sm")
-      template(v-if="$q.screen.lt.md || $q.screen.md" v-for="(step, index) in filteredSteps")
-        div(:class="{ 'active-dot':activeStepIndex === step.index - 1, 'upcoming-dot':activeStepIndex < step.index - 1 }" style="width: 10px; height: 10px; border-radius: 100%; border: 1px solid #242F5D; margin: 0 13px;")
     div.flex.items-center(:class="{ 'full-width':!$q.screen.sm }")
       q-btn.q-px-sm(
         :class="{ 'q-mt-xxxl':$q.screen.gt.md, 'full-width':!$q.screen.sm, 'q-mr-xs':$q.screen.sm }"
@@ -81,34 +61,35 @@ widget(title="Creation process")
         no-caps
         outline
         rounded
-        v-if="hasSaveListener"
-      )
-      q-btn.q-px-sm(
-        :class="{ 'btn-primary-disabled': nextDisabled, 'btn-primary-active': !nextDisabled, 'full-width q-mt-sm': !$q.screen.sm }"
-        :disable="nextDisabled"
-        @click="$emit('next')"
-        color="primary"
-        label="Next step"
-        no-caps
-        rounded
-        unelevated
-        v-if="($q.screen.lt.md || $q.screen.md) && !lastStep"
-      )
-      slot(name="cta")
-      q-btn.q-px-sm(
-        v-show="!hasCTA"
-        :class="{ 'btn-primary-disabled': !lastStep, 'btn-primary-active': lastStep, 'full-width q-mt-sm':!$q.screen.sm }"
-        :disabled="!lastStep"
-        @click="$emit('publish')"
-        label="Publish"
-        no-caps
-        rounded
-        unelevated
-        v-if="hasPublishListener && lastStep"
+        v-if="hasSaveListener && $q.screen.gt.md"
       )
-  .flex.row.justify-center.q-mt-sm(v-if="!$q.screen.sm")
-    template(v-if="$q.screen.lt.md || $q.screen.md" v-for="(step, index) in filteredSteps")
-      div(:class="{ 'active-dot':activeStepIndex === step.index - 1, 'upcoming-dot':activeStepIndex < step.index - 1 }" style="width: 10px; height: 10px; border-radius: 100%; border: 1px solid #242F5D; margin: 0 13px;")
+      .flex.items-center.justify-between.row.full-width(v-if="!$q.screen.gt.md" :style="{ 'flex-direction': 'row', 'margin-bottom': '40px' }")
+        .flex.row.justify-center(v-if="!$q.screen.sm")
+          template(v-if="$q.screen.lt.md || $q.screen.md" v-for="(step, index) in filteredSteps")
+            div(:class="{ 'active-dot':activeStepIndex === step.index - 1, 'upcoming-dot':activeStepIndex < step.index - 1 }" style="width: 10px; height: 10px; border-radius: 100%; border: 1px solid #242F5D; margin: 0 7.5px;")
+        q-btn.q-px-sm(
+          :class="{ 'btn-primary-disabled': nextDisabled, 'btn-primary-active': !nextDisabled, 'full-width q-mt-sm': $q.screen.gt.md }"
+          :disable="nextDisabled"
+          @click="$emit('next')"
+          color="primary"
+          label="Next step"
+          no-caps
+          rounded
+          unelevated
+          v-if="($q.screen.lt.md || $q.screen.md) && !lastStep"
+        )
+        slot(name="cta")
+        q-btn.q-px-sm(
+          v-show="!hasCTA"
+          :class="{ 'btn-primary-disabled': !lastStep, 'btn-primary-active': lastStep, 'full-width q-mt-sm': $q.screen.gt.md }"
+          :disabled="!lastStep"
+          @click="$emit('publish')"
+          label="Publish"
+          no-caps
+          rounded
+          unelevated
+          v-if="hasPublishListener && lastStep"
+        )
 </template>
 
 <style lang="stylus" scoped>

src/components/proposals/proposal-view.vue

@@ -67,7 +67,8 @@ export default {
     },
     isBadge: Boolean,
     pastQuorum: Number,
-    pastUnity: Number
+    pastUnity: Number,
+    purpose: String
   },
   data () {
     return {
@@ -125,6 +126,7 @@ export default {
     commitDifference () {
       return (this.newCommit ? this.newCommit : this.commit.value) - this.commit.max
     }
+
   },
 
   methods: {
@@ -195,10 +197,10 @@ widget.proposal-view.q-mb-sm
             img.icon-img(:src="iconDetails.name")
         ipfs-image-viewer(size="lg", :ipfsCid="iconDetails.cid" v-else-if="iconDetails.type === 'ipfs'")
         .text-bold.q-ml-md Icon
-    .col.bg-internal-bg.rounded-border(:class="{ 'q-mr-sm':$q.screen.gt.md, 'q-mb-sm':$q.screen.lt.md || $q.screen.md }" v-if="type === 'Badge'")
+    .col.bg-internal-bg.rounded-border(:class="{ 'q-mb-sm':$q.screen.lt.md || $q.screen.md }" v-if="type === 'Badge'")
       .bg-internal-bg.rounded-border.q-pa-md.q-ml-xs
         .text-bold Voting system
-        .text-grey-7.text-body2 {{ `Quorum: ${pastQuorum} | Unity: ${pastUnity}` }}
+        .text-grey-7.text-body2 {{ `Quorum: ${pastQuorum ? pastQuorum : '20'} | Unity: ${pastUnity ? pastUnity : '80'}` }}
     .col(:class="{ 'q-mr-sm':$q.screen.gt.md }" v-if="(type === 'Role' || type === 'Assignment' || (deferred && commit && type === 'Edit') )")
       .row.bg-internal-bg.rounded-border.q-pa-md(:class="{ 'q-ml-xs':$q.screen.gt.md, 'q-mt-sm':$q.screen.lt.md || $q.screen.md }")
         .col-6(v-if="commit !== undefined")
@@ -269,7 +271,11 @@ widget.proposal-view.q-mb-sm
           .col.text-bold Deferred amount
         .row.q-pt-xs
           .text-grey-7.text-body2 {{ deferred.value + '%' }}
-  .text-bold.q-mt-lg.q-mb-sm Description
+  template(v-if="purpose")
+    .text-bold.q-mt-lg.q-mb-sm Purpose
+    .row
+      q-markdown(:src="purpose")
+  .text-bold.q-mb-sm(:class="{ 'q-mt-lg': !purpose }") Description
   .row
     q-markdown(:src="descriptionWithoutSpecialCharacters")
   .row.items-center.q-mb-md(v-if="url")

src/layouts/MultiDhoLayout.vue

@@ -217,9 +217,10 @@ export default {
   }
 }
 </script>
+
 <template lang="pug">
 q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout")
-  q-dialog(:value="selectedDaoPlan.hasExpired && $route.name !== 'plan-manager' && $route.name !== 'login'" persistent)
+  q-dialog(:value="selectedDaoPlan.hasExpired && $route.name !== 'configuration' && $route.name !== 'login'" persistent)
     .bg-negative.rounded-border(:style="{'min-width':'680px'}")
       header.q-px-xl.q-py-md.row.h-h4.text-white(:class="{'justify-between h-h5': !$q.screen.gt.sm }" :style="{'border-bottom': '2px solid rgba(255, 255, 255, .2)'}")
           div(:class="{'q-pr-md': $q.screen.gt.sm }") {{selectedDaoPlan.name}} plan

src/pages/onboarding/create.vue

@@ -261,6 +261,7 @@ export default {
       if (this.activeStepIndex >= 0) {
         this.activeStepIndex = this.activeStepIndex - 1
       }
+      this.scrollToNextStep(this.steps[this.activeStepIndex].name)
     },
 
     scrollToNextStep (nextStep) {
@@ -547,11 +548,11 @@ q-page.dao-launcher-page
             q-btn.q-px-xl(
               @click="onNextStep(activeStepIndex)"
               color="primary"
-              :label="isLastStep ? 'Publish' : 'Next step'"
+              :label="'Next step'"
               no-caps
               rounded
               unelevated
-              v-if="!isLastStep && $q.screen.gt.md"
+              v-if="$q.screen.gt.md"
             )
 
         widget.q-mb-md(id="step-token" :class="{ 'disabled': (activeStep !== 'TOKEN') && $q.screen.gt.md }" v-if="$q.screen.gt.md ? pastSteps.includes('step-token') : activeStep === 'TOKEN'")
@@ -594,14 +595,23 @@ q-page.dao-launcher-page
                     v-model="form.utilitySymbol"
                   )
           nav.row.justify-end.q-mt-xl.q-gutter-xs
+            q-btn.q-px-xl(
+              @click="onPreviousStep()"
+              color="primary"
+              :label="'Back'"
+              no-caps
+              rounded
+              flat
+              v-if="$q.screen.gt.md"
+            )
             q-btn.q-px-xl(
               @click="onNextStep(activeStepIndex)"
               color="primary"
-              :label="isLastStep ? 'Publish' : 'Next step'"
+              :label="'Next step'"
               no-caps
               rounded
               unelevated
-              v-if="!isLastStep && $q.screen.gt.md"
+              v-if="$q.screen.gt.md"
             )
 
         widget(id="step-design" :class="{ 'disabled': (activeStep !== 'DESIGN') && $q.screen.gt.md }" v-if="$q.screen.gt.md ? pastSteps.includes('step-design') : activeStep === 'DESIGN'")
@@ -710,13 +720,22 @@ q-page.dao-launcher-page
                   )
           nav.row.justify-end.q-mt-xl.q-gutter-xs
             q-btn.q-px-xl(
-              @click="onNextStep(activeStepIndex)"
+              @click="onPreviousStep()"
+              color="primary"
+              :label="'Back'"
+              no-caps
+              rounded
+              flat
+              v-if="$q.screen.gt.md"
+            )
+            q-btn.q-px-xl(
+              @click="onSubmit()"
               color="primary"
-              :label="isLastStep ? 'Publish' : 'Next step'"
+              :label="'Publish'"
               no-caps
               rounded
               unelevated
-              v-if="!isLastStep && $q.screen.gt.md"
+              v-if="$q.screen.gt.md"
             )
 
       widget(v-if="isState(['ADDING_ADMINS','FINISHED'])")
@@ -804,7 +823,7 @@ q-page.dao-launcher-page
 .member-item
   position: relative
 .disabled
-  opacity: 60% !important
+  opacity: 20% !important
   pointer-events: none
   border-radius: 26px
 </style>