Merge pull request #5232 from opencollective/enhancement/cf-misc

ContributionFlow: Misc enhancements
opencollective · Oct 9, 2020 · d2a0a54 · d2a0a54 · vercel · Oct 9, 2020
2 parents b3cc55a + bc141fa
commit d2a0a54
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/components/contribution-flow/ContributionFlowStepsProgress.js b/components/contribution-flow/ContributionFlowStepsProgress.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 
 import { getPaymentMethodName } from '../../lib/payment_method_label';
@@ -26,25 +26,6 @@ StepLabel.defaultProps = {
   mt: 1,
 };
 
-const STEP_LABELS = defineMessages({
-  profile: {
-    id: 'contribute.step.profile',
-    defaultMessage: 'Profile',
-  },
-  details: {
-    id: 'contribute.step.details',
-    defaultMessage: 'Details',
-  },
-  payment: {
-    id: 'contribute.step.payment',
-    defaultMessage: 'Payment info',
-  },
-  summary: {
-    id: 'Summary',
-    defaultMessage: 'Summary',
-  },
-});
-
 const PrettyAmountFromStepDetails = ({ stepDetails, currency, isFreeTier }) => {
   if (stepDetails.amount) {
     const totalAmount = stepDetails.amount + (stepDetails.platformContribution || 0);
@@ -97,7 +78,6 @@ const ContributionFlowStepsProgress = ({
   currency,
   isFreeTier,
 }) => {
-  const { formatMessage } = useIntl();
   return (
     <StepsProgress
       steps={steps}
@@ -109,7 +89,7 @@ const ContributionFlowStepsProgress = ({
     >
       {({ step }) => (
         <Flex flexDirection="column" alignItems="center">
-          <StepLabel>{STEP_LABELS[step.name] ? formatMessage(STEP_LABELS[step.name]) : step.name}</StepLabel>
+          <StepLabel>{step.label || step.name}</StepLabel>
           <Span fontSize="12px" textAlign="center">
             {step.isVisited && (
               <StepInfo

diff --git a/components/contribution-flow/StepDetails.js b/components/contribution-flow/StepDetails.js
@@ -76,7 +76,6 @@ const StepDetails = ({ onChange, data, collective, tier, showFeesOnTop }) => {
             otherAmountDisplay="button"
             value={isOtherAmountSelected ? OTHER_AMOUNT_KEY : data?.amount}
             onChange={value => {
-              console.log('CHANGE');
               if (value === OTHER_AMOUNT_KEY) {
                 setOtherAmountSelected(true);
               } else {

diff --git a/components/contribution-flow/index.js b/components/contribution-flow/index.js
@@ -4,7 +4,7 @@ import { graphql } from '@apollo/client/react/hoc';
 import { getApplicableTaxes } from '@opencollective/taxes';
 import { find, get, intersection, isEmpty, isNil, pick } from 'lodash';
 import memoizeOne from 'memoize-one';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import styled from 'styled-components';
 
 import { CollectiveType } from '../../lib/constants/collectives';
@@ -54,6 +54,25 @@ const StepsProgressBox = styled(Box)`
   }
 `;
 
+const STEP_LABELS = defineMessages({
+  profile: {
+    id: 'contribute.step.profile',
+    defaultMessage: 'Profile',
+  },
+  details: {
+    id: 'contribute.step.details',
+    defaultMessage: 'Details',
+  },
+  payment: {
+    id: 'contribute.step.payment',
+    defaultMessage: 'Payment info',
+  },
+  summary: {
+    id: 'Summary',
+    defaultMessage: 'Summary',
+  },
+});
+
 class ContributionFlow extends React.Component {
   static propTypes = {
     collective: PropTypes.shape({
@@ -401,7 +420,7 @@ class ContributionFlow extends React.Component {
 
   /** Returns the steps list */
   getSteps() {
-    const { fixedInterval, fixedAmount, collective, host, tier } = this.props;
+    const { intl, fixedInterval, fixedAmount, collective, host, tier } = this.props;
     const { stepDetails, stepProfile, stepPayment, stepSummary } = this.state;
     const isFixedContribution = this.isFixedContribution(tier, fixedAmount, fixedInterval);
     const minAmount = this.getTierMinAmount(tier);
@@ -410,6 +429,7 @@ class ContributionFlow extends React.Component {
     const steps = [
       {
         name: 'details',
+        label: intl.formatMessage(STEP_LABELS.details),
         isCompleted: Boolean(stepDetails && stepDetails.amount >= minAmount && stepDetails.quantity),
         validate: () => {
           if (isNil(tier?.availableQuantity)) {
@@ -421,6 +441,7 @@ class ContributionFlow extends React.Component {
       },
       {
         name: 'profile',
+        label: intl.formatMessage(STEP_LABELS.profile),
         isCompleted: Boolean(this.state.stepProfile),
         validate: this.validateStepProfile,
       },
@@ -430,6 +451,7 @@ class ContributionFlow extends React.Component {
     if (!noPaymentRequired && this.getApplicableTaxes(collective, host, tier?.type).length) {
       steps.push({
         name: 'summary',
+        label: intl.formatMessage(STEP_LABELS.summary),
         isCompleted: noPaymentRequired || get(stepSummary, 'isReady', false),
       });
     }
@@ -438,6 +460,7 @@ class ContributionFlow extends React.Component {
     if (!noPaymentRequired) {
       steps.push({
         name: 'payment',
+        label: intl.formatMessage(STEP_LABELS.payment),
         isCompleted: stepProfile?.contributorRejectedCategories ? false : true,
         validate: action => {
           if (action === 'prev') {