progress-card LtiPlanParticipantProgressCard.tsx

0% Statements 0/66

0% Branches 0/1

0% Functions 0/1

0% Lines 0/66

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

import { Fragment, memo } from 'react';
import { FormattedMessage, FormattedNumber } from 'react-intl';

import { Group } from '@allshares/studio-design-system';

import { type useLtiPlanParticipantGrantsAndShareValues } from '../../hooks/useLtiPlanParticipantGrantsAndShareValues';
import { LtiPlanProgressCardIndicator } from '../../progress-card/indicator/LtiPlanProgressCardIndicator';
import { LtiPlanProgressCard } from '../../progress-card/LtiPlanProgressCard';
import { LtiTracingButton } from '../../tracing/LtiTracingButton';

interface LtiPlanParticipantProgressCardProps {
  readonly shareValues: NonNullable<ReturnType<typeof useLtiPlanParticipantGrantsAndShareValues>['shareValues']>;
  readonly grantsForThisPlan: NonNullable<
    ReturnType<typeof useLtiPlanParticipantGrantsAndShareValues>['grantsForThisPlan']
  >;
}

export const LtiPlanParticipantProgressCard = memo(function LtiPlanParticipantProgressCard({
  grantsForThisPlan,
  shareValues,
}: LtiPlanParticipantProgressCardProps) {
  return (
    <LtiPlanProgressCard
      indicators={
        <Fragment>
          <LtiPlanProgressCardIndicator
            monetaryValue={shareValues.granted.monetaryValue}
            title={<FormattedMessage defaultMessage="Granted shares" />}
            value={<FormattedNumber value={shareValues.granted.nbShares} />}
          />

          <LtiPlanProgressCardIndicator
            monetaryValue={shareValues.earned.monetaryValue}
            title={<FormattedMessage defaultMessage="Provisional earned shares" />}
            value={
              <Group
                align="center"
                gap={8}
              >
                {shareValues.earned.nbShares === null ? (
                  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                  '−'
                ) : (
                  <FormattedNumber value={shareValues.earned.nbShares} />
                )}

                <LtiTracingButton
                  kpis={grantsForThisPlan.plan.kpis}
                  kpiValues={grantsForThisPlan.plan.kpiValues}
                  sharesCount={grantsForThisPlan.grants.reduce((acc, curr) => acc + curr.nbShares, 0)}
                  simulated={false}
                />
              </Group>
            }
          />

          <LtiPlanProgressCardIndicator
            monetaryValue={shareValues.remaining.monetaryValue}
            title={<FormattedMessage defaultMessage="Remaining shares" />}
            value={<FormattedNumber value={shareValues.remaining.nbShares} />}
          />
        </Fragment>
      }
    />
  );
});