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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { memo, useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { type SelectOption } from '@allshares/studio-design-system';
import { useUserPlanAssignments } from '@amalia/assignments/plans/state';
import { FormikSelect } from '@amalia/design-system/ext';
import { IconPlanVisibility } from '@amalia/payout-definition/plans/components';
import { type Plan } from '@amalia/payout-definition/plans/types';
import { usePlansList } from '@amalia/payout-definition/state';
import { type UserContract } from '@amalia/tenants/users/types';
type PlanOption = SelectOption<Plan['id']>;
export type CreateUserPlanAssignmentsFieldsProps = {
readonly userId: UserContract['id'];
};
export const CreateUserPlanAssignmentsFields = memo(function CreateUserPlanAssignmentsFields({
userId,
}: CreateUserPlanAssignmentsFieldsProps) {
const { formatMessage } = useIntl();
const { data: plans, isPending: isPlansPending } = usePlansList();
const { data: planAssignments, isPending: isPlanAssignmentsPending } = useUserPlanAssignments(userId);
const planOptions = useMemo(
() =>
(plans ?? [])
.filter((plan) => !plan.archived && !planAssignments?.some(({ planId }) => planId === plan.id))
.toSorted((a, b) => a.name.localeCompare(b.name))
.map(
(plan): PlanOption => ({
value: plan.id,
label: plan.name,
icon: <IconPlanVisibility isPlanHidden={plan.isHidden} />,
}),
),
[planAssignments, plans],
);
return (
<FormikSelect
isMultiple
required
disabled={isPlansPending || isPlanAssignmentsPending}
label={<FormattedMessage defaultMessage="Plans" />}
name="planIds"
options={planOptions}
placeholder={formatMessage({ defaultMessage: 'Select plans' })}
/>
);
});
|