result RuleDesignerComputeResultBreakdown.tsx

0% Statements 0/110

0% Branches 0/1

0% Functions 0/1

0% Lines 0/110

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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

import { css } from '@emotion/react';
import { IconAward } from '@tabler/icons-react';
import { memo, type ReactElement } from 'react';
import { FormattedMessage } from 'react-intl';

import { Divider, Group, Popover, Stack, Typography } from '@allshares/studio-design-system';
import { type Statement } from '@amalia/core/types';
import { FormattedAmount } from '@amalia/kernel/intl/components';
import { RuleType } from '@amalia/payout-definition/plans/types';

import { useStatementTotal } from './use-statement-total';

interface RuleDesignerComputeResultBreakdownProps {
  readonly statement?: Pick<Statement, 'adjustments' | 'currency' | 'id' | 'period' | 'results' | 'total'> | null;
  readonly disabled: boolean;
  readonly children: ReactElement;
  readonly popoverTitle: ReactElement;
}

export const RuleDesignerComputeResultBreakdown = memo(function RuleDesignerComputeResultBreakdown({
  statement,
  disabled,
  children,
  popoverTitle,
}: RuleDesignerComputeResultBreakdownProps) {
  const { ruleResultWithLabel, total } = useStatementTotal(statement);

  // Not showing the breakdown if we have an error or else tooltips will pile up.
  if (!statement || disabled) {
    return children;
  }

  return (
    <Popover
      shouldTriggerOnHover
      initialFocus={-1}
      content={
        <Popover.Layout>
          <Popover.Header>
            <Popover.Title>{popoverTitle}</Popover.Title>
          </Popover.Header>

          <Popover.Body>
            <Stack
              gap={8}
              css={css`
                min-width: 360px;
              `}
            >
              {ruleResultWithLabel.map(({ definition, label, amount, help }) => (
                <Group
                  key={label}
                  align="center"
                  gap={8}
                >
                  <Group
                    align="center"
                    gap={4}
                  >
                    {definition?.type === RuleType.CHALLENGE && <IconAward size={12} />}

                    <Typography variant="bodyXsmallRegular">{label}</Typography>
                  </Group>

                  <Divider.Horizontal
                    lineStyle="dashed"
                    css={css`
                      flex: 1;
                      gap: 8px;
                      align-self: initial;
                    `}
                  />
                  {amount}

                  {help}
                </Group>
              ))}
            </Stack>

            <Divider.Horizontal
              grayShade={700}
              css={css`
                margin: 16px 0;
              `}
            />

            <Group
              align="center"
              gap={8}
              justify="space-between"
            >
              <Typography variant="bodyXsmallMedium">
                <FormattedMessage defaultMessage="Total" />
              </Typography>

              <Typography variant="bodySmallBold">
                <FormattedAmount
                  currencySymbol={statement.currency}
                  value={total}
                />
              </Typography>
            </Group>
          </Popover.Body>
        </Popover.Layout>
      }
    >
      {children}
    </Popover>
  );
});