All files / libs/payout-definition/plans/views/hub/rule-designer/src/lib/compute/result getChallengeResult.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { IconInfoCircle } from '@tabler/icons-react';
import { FormattedMessage } from 'react-intl';
import { match } from 'ts-pattern';

import { Tooltip, Typography } from '@allshares/studio-design-system';
import { type PaymentContract } from '@amalia/core/types';
import { type CurrencySymbolsEnum } from '@amalia/ext/iso-4217';
import { FormattedAmount } from '@amalia/kernel/intl/components';
import { type PlanRule } from '@amalia/payout-definition/plans/types';

export const InfoIcon = styled(IconInfoCircle)`
  width: 12px;
  color: ${({ theme }) => theme.ds.colors.gray[800]};

  [data-color-scheme='dark'] & {
    color: ${({ theme }) => theme.ds.colors.gray[200]};
  }
`;

export const getChallengeResult = ({
  definition,
  payment,
  defaultCurrency,
}: {
  definition: PlanRule;
  payment?: Pick<PaymentContract, 'currency' | 'value'>;
  defaultCurrency: CurrencySymbolsEnum;
}) =>
  match(definition.configuration?.challengePricesTableVariableId)
    // If null, it means the challenge is non-payout.
    .with(null, () => ({
      currencyAmount: null,
      amount: (
        <Typography
          variant="bodySmallRegular"
          css={(theme) => css`
            color: ${theme.ds.colors.gray[700]};

            [data-color-scheme='dark'] & {
              color: ${theme.ds.colors.gray[400]};
            }
          `}
        >
          <FormattedMessage defaultMessage="Non-payout" />
        </Typography>
      ),
      help: null,
    }))
    // If undefined, it means the challenge payout is not configured.
    .with(undefined, () => ({
      currencyAmount: null,
      amount: (
        <Typography
          variant="bodySmallRegular"
          css={(theme) => css`
            color: ${theme.ds.colors.gray[500]};

            [data-color-scheme='dark'] & {
              color: ${theme.ds.colors.gray[600]};
            }
          `}
        >
          <FormattedMessage defaultMessage="No value" />
        </Typography>
      ),
      help: (
        <Tooltip content={<FormattedMessage defaultMessage="Challenge configuration incomplete" />}>
          <InfoIcon />
        </Tooltip>
      ),
    }))
    // Otherwise, show the payment amount, or 0 if not found.
    .otherwise(() => ({
      currencyAmount: payment ? { value: payment.value, symbol: payment.currency } : null,
      amount: (
        <Typography variant="bodySmallMedium">
          <FormattedAmount
            currencySymbol={payment?.currency ?? defaultCurrency}
            value={payment?.value ?? 0}
          />
        </Typography>
      ),
      help: null,
    }));