#2267 - Don't prompt users to "Send Payments" until first distribution period starts

frontend/views/containers/contributions/ContributionsWidget.vue

@@ -2,34 +2,44 @@
   page-section(:title='L("Contributions")')
     .c-widget(data-test='contributionsWidget')
       .c-column
-        .c-status(v-if='copy.payments.title')
-          h3.is-title-4.c-title(data-test='paymentsTitle') {{ copy.payments.title }}
-          .has-text-1(
+        .c-status(v-if='!distributionStarted')
+          h3.is-title-4.c-title(data-test='paymentsTitle') {{ pSummary.title }}
+          i18n.has-text-1(
+            tag='p'
             data-test='paymentsStatus'
-            v-safe-html='copy.payments.status'
-            @click='handlePaymentStatusClick'
-          )
-        .c-status(v-else data-test='paymentsSummary')
-          .c-pSummary
-            h3.is-title-4 {{ pSummary.title }}
-            p.c-pSummary-status(:class='{"has-text-success": pSummary.max === pSummary.value}')
-              i.icon-check.is-prefix(v-if='pSummary.max === pSummary.value')
-              span.has-text-1 {{ pSummary.label }}
-          progress-bar.c-progress(
-            :max='pSummary.max'
-            :value='pSummary.value'
-            :hasMarks='pSummary.hasMarks'
-          )
-
-        router-link.button.is-small(
-          v-if='copy.payments.ctaText'
-          to='/payments'
-          :class='copy.payments.ctaClass'
-        ) {{ copy.payments.ctaText }}
+            :args='{ startDate: distributionStart }'
+          ) The distribution period begins on: {startDate}
+        template(v-else)
+          .c-status(v-if='copy.payments.title')
+            h3.is-title-4.c-title(data-test='paymentsTitle') {{ copy.payments.title }}
+            .has-text-1(
+              data-test='paymentsStatus'
+              v-safe-html='copy.payments.status'
+              @click='handlePaymentStatusClick'
+            )
+          .c-status(v-else data-test='paymentsSummary')
+            .c-pSummary
+              h3.is-title-4 {{ pSummary.title }}
+              p.c-pSummary-status(:class='{"has-text-success": pSummary.max === pSummary.value}')
+                i.icon-check.is-prefix(v-if='pSummary.max === pSummary.value')
+                span.has-text-1 {{ pSummary.label }}
+            progress-bar.c-progress(
+              :max='pSummary.max'
+              :value='pSummary.value'
+              :hasMarks='pSummary.hasMarks'
+            )
+
+          router-link.button.is-small(
+            v-if='copy.payments.ctaText'
+            to='/payments'
+            :class='copy.payments.ctaClass'
+          ) {{ copy.payments.ctaText }}
+
       .c-column
         h3.is-title-4.c-title(v-safe-html='copy.monetary.title' data-test='monetaryTitle')
         .has-text-1.c-status(data-test='monetaryStatus') {{ copy.monetary.status }}
         i18n.link(tag='button' @click='openModal("IncomeDetails")') Change
+
       .c-column
         h3.is-title-4.c-title {{ copy.nonMonetary.title }}
         .has-text-1.c-status(data-test='nonMonetaryStatus') {{ copy.nonMonetary.status }}
@@ -46,6 +56,7 @@ import { OPEN_MODAL } from '@utils/events.js'
 import PageSection from '@components/PageSection.vue'
 import ProgressBar from '@components/graphs/Progress.vue'
 import currencies from '@model/contracts/shared/currencies.js'
+import { humanDate } from '@model/contracts/shared/time.js'
 
 export default ({
   name: 'ContributionsWidget',
@@ -63,6 +74,15 @@ export default ({
       'ourContributionSummary',
       'ourPaymentsSummary'
     ]),
+    distributionStart () {
+      return humanDate(
+        this.groupSettings.distributionDate,
+        { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }
+      )
+    },
+    distributionStarted () {
+      return Date.now() >= new Date(this.groupSettings.distributionDate).getTime()
+    },
     withCurrency () {
       return currencies[this.groupSettings.mincomeCurrency].displayWithCurrency
     },

test/cypress/integration/group-contributions.spec.js

@@ -149,7 +149,7 @@ describe('Contributions', () => {
 
     assertContributionsWidget({
       paymentsTitle: 'Payments sent',
-      paymentsStatus: 'At the moment, no one is in need of contributions.',
+      paymentsStatus: 'The distribution period begins on:', // distribution period hasn't started at this point
       monetaryTitle: 'You are pledging $500',
       monetaryStatus: '$0 will be used.',
       nonMonetaryStatus: 'There are no non-monetary contributions.'
@@ -211,7 +211,7 @@ describe('Contributions', () => {
 
     assertContributionsWidget({
       paymentsTitle: 'Payments received',
-      paymentsStatus: 'No members in the group are pledging yet! 😔',
+      paymentsStatus: 'The distribution period begins on:', // The distribution period hasn't started yet.
       monetaryTitle: 'You need $100',
       monetaryStatus: 'You will receive $0.',
       nonMonetaryStatus: 'You are contributing.'
@@ -456,7 +456,7 @@ describe('Contributions', () => {
       .should('have.length', 3)
 
     assertContributionsWidget({
-      paymentsSummary: ' ', // TODO - just confirm it exists for now.
+      paymentsTitle: ' ', // TODO - just confirm it exists for now.
       monetaryTitle: 'You are pledging $100',
       monetaryStatus: '$100 will be used.',
       nonMonetaryStatus: 'You and 1 other members are contributing.'
@@ -496,7 +496,7 @@ describe('Contributions', () => {
     cy.get(elReceivingFirst).should('contain', '$100 from 3 members')
 
     assertContributionsWidget({
-      paymentsSummary: ' ', // TODO - just confirm it exists for now.
+      paymentsTitle: ' ', // TODO - just confirm it exists for now.
       monetaryTitle: 'You need $100',
       monetaryStatus: 'You will receive $100.',
       nonMonetaryStatus: 'You and 2 other members are contributing.'
@@ -522,7 +522,7 @@ describe('Contributions', () => {
     updateIncome(10, true, graphicLegend2, '$39.58 from Pierre')
 
     assertContributionsWidget({
-      paymentsSummary: ' ', // TODO - just confirm it exists for now.
+      paymentsTitle: ' ', // TODO - just confirm it exists for now.
       monetaryTitle: 'You need $190',
       monetaryStatus: 'You will receive $39.58.',
       nonMonetaryStatus: 'You and 2 other members are contributing.'
@@ -545,7 +545,7 @@ describe('Contributions', () => {
       .should('contain', '$20.83 from Pierre')
 
     assertContributionsWidget({
-      paymentsSummary: ' ', // TODO - just confirm it exists for now.
+      paymentsTitle: ' ', // TODO - just confirm it exists for now.
       monetaryTitle: 'You need $100',
       monetaryStatus: 'You will receive $20.83.',
       nonMonetaryStatus: 'You and 2 other members are contributing.'