Component.jsx

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import { selectLoggedInUserId } from 'modules/auth/selectors';
import { SolidButton } from 'modules/core/components';
import GIGSTER_COLORS from 'modules/core/constants/GIGSTER_COLORS';

import * as userActions from '../../../actions';
import {
  selectSessions,
  selectActivePayoneerPayee,
  selectPayoneerApproved,
} from '../../../selectors';
import type { SessionType } from '../../../types';

import styles from '../styles.css';

type ChildProps = {
  userId: string,
  createPayoneerSignup: typeof userActions.createPayoneerSignup,
};

// View for a user with a linked Payoneer account.
function Linked(props: ChildProps) {
  const { userId, createPayoneerSignup } = props;
  return (
    <div className={styles.paymentSettings}>
      <div className={styles.middle}>
        <h1>Payment</h1>
      </div>

      <h2>YOU&apos;VE LINKED A PAYONEER ACCOUNT</h2>
      <p>
        Please{' '}
        <a href="https://payoneer.custhelp.com/" target="_blank" rel="noopener noreferrer">
          click here
        </a>{' '}
        to contact Payoneer Customer Care if you are experiencing any issues with your account. If
        you would like to change or update your current payment method, please click a button below
        and follow the instructions.
      </p>
      <p>
        If you have linked a bank account and would like to link a different bank account, use the
        &apos;Bank Payment&apos; button below. If you would like to change your payout method to the
        Prepaid Mastercard option, use the &apos;Card Payment&apos; button below.
      </p>
      <div className={styles.buttons}>
        <SolidButton
          type="button"
          text="PAYONEER CARD PAYMENT"
          padding={2}
          onClick={() => createPayoneerSignup({ linkType: 'PrepaidCard' }, userId)}
          color={GIGSTER_COLORS.BLUE}
        />
        <SolidButton
          type="button"
          text="PAYONEER BANK PAYMENT"
          padding={2}
          onClick={() => createPayoneerSignup({ linkType: 'iACH' }, userId)}
          color={GIGSTER_COLORS.BLUE}
        />
      </div>
    </div>
  );
}

// View for a user that does not have a linked Payoneer account.
function Unlinked(props: ChildProps) {
  const { userId, createPayoneerSignup } = props;
  return (
    <div className={styles.paymentSettings}>
      <div className={styles.middle}>
        <h1>Payment</h1>
      </div>

      <h2>LINK A PAYONEER ACCOUNT</h2>
      <p className={styles.center}>
        Please click a button below to link a new or existing Payoneer account with Gigster.
      </p>
      <div className={styles.buttons}>
        <SolidButton
          type="button"
          text="LINK PAYONEER ACCOUNT"
          padding={2}
          onClick={() => createPayoneerSignup({ linkType: 'PrepaidCard,iACH' }, userId)}
          color={GIGSTER_COLORS.BLUE}
        />
      </div>
    </div>
  );
}

// View for a user who has initiated an application with Payoneer for an account, but it has not yet been approved.
function Review(props: ChildProps) {
  const { userId, createPayoneerSignup } = props;
  return (
    <div className={styles.paymentSettings}>
      <div className={styles.middle}>
        <h1>Payment</h1>
      </div>

      <h2>PAYONEER APPLICATION UNDER REVIEW</h2>
      <p>Payoneer is reviewing your application.</p>
      <p>
        Please{' '}
        <a href="https://payoneer.custhelp.com/" target="_blank" rel="noopener noreferrer">
          click here
        </a>{' '}
        to contact Payoneer Customer Care if you are experiencing any issues with your account. If
        you were not able to complete your application, please link a Payoneer account now.
      </p>
      <div className={styles.buttons}>
        <SolidButton
          type="button"
          text="LINK PAYONEER ACCOUNT"
          padding={2}
          onClick={() => createPayoneerSignup({ linkType: 'PrepaidCard,iACH' }, userId)}
          color={GIGSTER_COLORS.BLUE}
        />
      </div>
    </div>
  );
}

type State = {
  requestedSessions: boolean,
};

type Props = {
  activePayoneerPayee: string,
  payoneerApproved: boolean,
  sessions: SessionType[],
  userId: string,
  requestPayoneerRedirect: typeof userActions.requestPayoneerRedirect,
  createPayoneerSignup: typeof userActions.createPayoneerSignup,
};

// eslint-disable-next-line
class PaymentSettings extends React.Component {
  state: State;
  props: Props;

  constructor(props) {
    super(props);
    this.state = { requestedSessions: false };
  }

  componentWillMount() {
    const { requestPayoneerRedirect, userId } = this.props;
    requestPayoneerRedirect(userId);
  }

  render() {
    const { payoneerApproved, activePayoneerPayee = '', sessions = [] } = this.props;

    // should not display payoneer options if not gigster
    if (!payoneerApproved) {
      return null;
    }

    // indicates user already has linked payoneer account
    if (activePayoneerPayee) {
      return <Linked />;
    }

    // indicates that there is at least 1 session that is not invalidated
    // invalidated means complete
    if (!sessions.every(s => s)) {
      return <Review />;
    }

    // user has not taken action to activate payoneer yet
    return <Unlinked />;
  }
}

const mapStateToProps = createStructuredSelector({
  activePayoneerPayee: selectActivePayoneerPayee,
  payoneerApproved: selectPayoneerApproved,
  sessions: selectSessions,
  userId: selectLoggedInUserId,
});

const mapDispatchToProps = {
  requestPayoneerRedirect: userActions.requestPayoneerRedirect,
  createPayoneerSignup: userActions.createPayoneerSignup,
};

export default connect(mapStateToProps, mapDispatchToProps)(PaymentSettings);

ParentComponent.jsx

// rather than passing down props from the parent component, PaymentSettings is already connected to the store
// and can grab it's own values

<PaymentSettings />

parse.js

export function parseSessions(input: mixed): SessionType[] {
  if (!Array.isArray(input)) {
    return [];
  }

  return input.map(s => boolean(s, 'invalidated'));
}

selectors.js

export const selectActivePayoneerPayee = createSelector(
  makeSelectLoggedInUser(),
  user => user.activePayoneerPayee
);

export const selectPayoneerApproved = createSelector(
  makeSelectLoggedInUser(),
  user => user.gigsterApproved || user.pmApproved || user.seApproved || user.designerApproved
);

types.js

export type SessionType = boolean;