Cleanup Example

after_cleanup.jsx

import React from 'react';
import { ContentBox } from '@core_js/ui_elements';
import { money } from '@core_js/utils';
import SubscriptionPlan from '../../shared/SubscriptionPlan';

const BillingState = ({ state }) => {
  switch (state) {
    case 'overdue':
      return <div className="yellow">Overdue</div>;
    case 'delinquent':
      return <div className="red">Delinquent</div>;
    case 'good_standing':
      return <div className="green">In Good Standing</div>;
    default:
      return '';
  }
};

const MembershipState = ({ subscription }) => {
  if (!subscription) return <div>Never Subscribed</div>;
  if (subscription.state === 'canceled') return <div className="red">Canceled</div>;
  return <div className="green">Active</div>;
};

const MembershipType = ({
  subscription: { commitmentYearLength, cycleLength },
}) => {
  if (!commitmentYearLength || !cycleLength) return <div>N/A</div>;
  return (
    <div>
      {commitmentYearLength} Yr /
      {` ${cycleLength}`}
    </div>
  );
};

const CommitmentEndDate = ({
  subscription: { state, commitmentEndAt },
}) => {
  if (state === 'trial') return <div>N/A</div>;
  return <div>{commitmentEndAt}</div>;
};

const CurrentCycle = ({
  subscription: { state, cycleStartAt, cycleEndAt },
}) => {
  if (state === 'trial') return <div>N/A</div>;
  return (
    <div>
      {cycleStartAt} - {cycleEndAt}
    </div>
  );
};

const SubscriptionSummary = ({
  account: {
    balance, status, billingStatus, subscription,
  },
}) => (
  <ContentBox title="Account Status">
    <div className="field-list">
      <div className="labels">
        <div>Account Balance:</div>
        <div>Account State:</div>
        <div>Billing State:</div>
        <div>Membership State:</div>
      </div>
      <div className="values">
        <div>{money(balance)}</div>
        <div>{status}</div>
        <BillingState state={billingStatus} />
        <MembershipState subscription={subscription} />
      </div>
    </div>
    {subscription && subscription.state !== 'canceled' && <div className="separator" /> }
    {subscription && subscription.state !== 'canceled' &&
      <div className="field-list">
        <div className="labels">
          <div>Current Plan:</div>
          <div>Membership Type:</div>
          <div>Commitment End Date:</div>
          <div>Current Cycle:</div>
          <div># of Seats:</div>
          <div>Cost Per Period:</div>
        </div>
        <div className="values">
          <div><SubscriptionPlan subscription={subscription} withId={false} /></div>
          <MembershipType subscription={subscription} />
          <CommitmentEndDate subscription={subscription} />
          <CurrentCycle subscription={subscription} />
          <div>{subscription.licenseCount} users</div>
          <div>{money(subscription.estimatedPeriodPrice)} CAD</div>
        </div>
      </div>
    }
  </ContentBox>
);

export default SubscriptionSummary;