example.jsx

class ContributionProcessWidget extends Component {
  render() {
      const {
        actions: {
          setCurrentStep,
          setFormField,
          setFormFieldError,
          setNotification,
          patchUsersTransaction,
          postUsersTransaction,
          postUsersShippingAddresses,
        },
        currentStep,
        projectTitle,
        loading,
        t,
        isRewardAvaliable,
        resetContributionProcess,
        totalAmountExchangeRate,
        amount,
        projectCurrency,
        selectedReward,
        contribution,
        postContributionPay,
      } = this.props;

      return (
        <div className="contribution-process">
          <Hero
            {...{
              subtitle: t('contribution_in'),
              title: projectTitle,
            }}
          />
          <ContributionProcessSteps {...{ t }} />
          <div className="container">
            <div className="row">
              <div className="col-md-8">
                {currentStep === t('steps.select_reward.value') &&
                  <ContributionProcessRewardSelection
                    {...{
                      t,
                      setFormField,
                      setFormFieldError,
                      setNotification,
                      patchUsersTransaction,
                      postUsersTransaction,
                    }}
                  />}
                {currentStep === t('steps.billing_info.value') && <ContributionProcessBillingInfo {...{ t, selectedReward }} />}
                {currentStep === t('steps.pay.value') &&
                  <ContributionProcessPay
                    {...{
                      t,
                      setCurrentStep,
                      setFormField,
                      setFormFieldError,
                      postUsersShippingAddresses,
                      setNotification,
                      isRewardAvaliable,
                      resetContributionProcess,
                      totalAmountExchangeRate,
                      contribution,
                      postContributionPay
                    }}
                  />}
              </div>
              {currentStep !== t('steps.share.value') && <div className="col-md-4">
                {/* chosenReward && */currentStep !== 'select_reward' && <ContributionProcessEditLink {...{ setCurrentStep, t, amount, projectCurrency, selectedReward }} />}
                <ContributionProcessAside {...{ t }} />
              </div>}
              {currentStep === t('steps.share.value') &&
                <ContributionProcessShare {...{ t }} />
              }
            </div>
          </div>
          <NotificationSystem ref={(c) => { this.notificationSystemRef = c; }} />
          {loading !== 0 && <LoadingIndicator />}
        </div>
      );
    }
  }
}