All files / libs/reporting/dashboards/components/src/lib/home-legacy/users-badges-widget UsersBadgesWidget.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useState } from 'react';
import useAsyncEffect from 'use-async-effect';

import { Group } from '@allshares/studio-design-system';
import { BadgesApiClient } from '@amalia/payout-calculation/badge-awards/state';
import { type Period } from '@amalia/payout-definition/periods/types';
import { PlanAwardCard } from '@amalia/payout-definition/plans/components';
import { type BadgeAward } from '@amalia/payout-definition/plans/types';
import { useCurrentCompany } from '@amalia/tenants/companies/state';

interface UsersBadgesWidgetProps {
  readonly selectedUsersIds: string[];
  readonly selectedPlanIds: string[];
  readonly period?: Period;
}

export const UsersBadgesWidget = memo(function UsersBadgesWidget({
  selectedUsersIds,
  selectedPlanIds,
  period,
}: UsersBadgesWidgetProps) {
  const { data: company } = useCurrentCompany();

  const [groupedAwards, setGroupedAwards] = useState<Partial<Record<string, BadgeAward[]>>>({});

  useAsyncEffect(async () => {
    const result = await BadgesApiClient.getAwardsForFilters(selectedUsersIds, period?.id, selectedPlanIds);

    setGroupedAwards(Object.groupBy(result, (award) => award.configurationId));
  }, [selectedUsersIds, selectedPlanIds, period?.id]);

  if (!company.featureFlags.BADGES) {
    return null;
  }

  if (Object.keys(groupedAwards).length === 0) {
    return null;
  }

  return (
    <Group
      wrap
      gap={16}
    >
      {Object.values(groupedAwards).map((a) => (
        <PlanAwardCard
          key={a![0].configuration.id}
          awards={a!}
          configuration={a![0].configuration}
        />
      ))}
    </Group>
  );
});