export function OrganisationUsageLevel()

in frontend/src/components/teamsAndOrgs/orgUsageLevel.js [17:100]
83 lines of code
5 McCabe index (conditional complexity)

export function OrganisationUsageLevel({ completedActions, orgName }) {
  const [currentLevel, nextLevelThreshold] = useOrganisationLevel(completedActions);
  const percent = parseInt((completedActions / nextLevelThreshold) * 100);
  const yearPrediction = usePredictYearlyTasks(completedActions, new Date());
  const levelPrediction = usePredictLevel(yearPrediction, 'FREE');
  const currentYear = getYear(new Date());

  return (
    <div className="w-100 cf pb2">
      <div className="cf ph2 bg-white">
        <div className="w-10-l w-20-m w-100 fl">
          <h1
            className="relative tc w-100 dib red barlow-condensed ma0 ph4 v-mid top--1"
            style={{ fontSize: '8rem' }}
          >
            {currentLevel.level}
          </h1>
        </div>
        <div className="w-60-ns w-100 fl pl2-ns">
          {nextLevelThreshold && (
            <ProgressBar height={2} className="pt3 mt4 bg-white" secondBarValue={percent}>
              <p className="f6 lh-copy ma0 white f7 fw4">
                <FormattedMessage
                  {...messages.levelTooltip}
                  values={{
                    n: <FormattedNumber value={completedActions} />,
                    total: <FormattedNumber value={nextLevelThreshold} />,
                    percent: percent,
                    nextLevel: <strong>{currentLevel.level + 1}</strong>,
                  }}
                />
              </p>
            </ProgressBar>
          )}
        </div>
        <div className="w-100 fl mt3">
          {nextLevelThreshold && (
            <div className="pa2 w-25-l w-50-m w-100 fl">
              <div className="cf pa3 bg-white shadow-4">
                <StatsCardContent
                  label={
                    <FormattedMessage {...messages.estimatedLevel} values={{ year: currentYear }} />
                  }
                  className="tc"
                  value={<FormattedNumber value={levelPrediction.level} />}
                />
              </div>
            </div>
          )}
          {nextLevelThreshold && (
            <div className="pa2 w-25-l w-50-m w-100 fl">
              <div className="cf pa3 bg-white shadow-4">
                <StatsCardContent
                  label={
                    <FormattedMessage
                      {...messages.actionsToNextLevel}
                      values={{ n: currentLevel.level + 1 }}
                    />
                  }
                  className="tc"
                  value={<FormattedNumber value={nextLevelThreshold - completedActions} />}
                />
              </div>
            </div>
          )}
        </div>
        {!nextLevelThreshold && ( // message on level 5 organisations
          <div className="w-100 fl pv2">
            <div>
              <FormattedMessage
                {...messages.levelInfo}
                values={{
                  org: <strong>{orgName}</strong>,
                  level: currentLevel.level,
                }}
              />{' '}
              <FormattedMessage {...messages.topLevelInfo} />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}