diff --git a/frontend/views/containers/contributions/ContributionsWidget.vue b/frontend/views/containers/contributions/ContributionsWidget.vue index 9316b95ca..84e281f42 100644 --- a/frontend/views/containers/contributions/ContributionsWidget.vue +++ b/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 }, diff --git a/test/cypress/integration/group-contributions.spec.js b/test/cypress/integration/group-contributions.spec.js index ec8eb798a..1e811deae 100644 --- a/test/cypress/integration/group-contributions.spec.js +++ b/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.'