All files / libs/assignments/plans/components/src/lib/plan-assignments-bulk-csv-import-modal PlanAssignmentsBulkCsvImportModal.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
88
89
90
91
92
93
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useCallback, useEffect } from 'react';
import { FormattedMessage } from 'react-intl';

import { type ModalProps } from '@allshares/studio-design-system';
import { useUpsertPlanAssignments, useUpsertPlanAssignmentsDryRun } from '@amalia/assignments/plans/state';
import { BulkCsvImportModal } from '@amalia/kernel/data-imports/components';
import { type CsvPlanAssignmentRow, type UpsertPlanAssignmentRequest } from '@amalia/payout-definition/plans/types';

import { PlanAssignmentsBulkCsvPreview } from './preview/PlanAssignmentsBulkCsvPreview';
import { PlanAssignmentsBulkCsvValidationErrors } from './validation-errors/PlanAssignmentsBulkCsvValidationErrors';

export type PlanAssignmentsBulkCsvImportModalProps = Pick<ModalProps, 'isOpen' | 'onClose'>;

export const PlanAssignmentsBulkCsvImportModal = memo(function PlanAssignmentsBulkCsvImportModal({
  isOpen,
  onClose,
}: PlanAssignmentsBulkCsvImportModalProps) {
  const {
    mutate: upsertPlanAssignmentsDryRun,
    data: dryRunResponse,
    isPending: isDryRunPending,
    reset: resetDryRun,
  } = useUpsertPlanAssignmentsDryRun();
  const { mutate: upsertPlanAssignments, isPending: isUpsertPending } = useUpsertPlanAssignments();

  useEffect(() => {
    if (!isOpen) {
      resetDryRun();
    }
  }, [isOpen, resetDryRun]);

  const handleUpsertPlanAssignmentsDryRun = useCallback(
    (rows: CsvPlanAssignmentRow[]) => {
      if (rows.length) {
        upsertPlanAssignmentsDryRun(rows);
      } else {
        resetDryRun();
      }
    },
    [upsertPlanAssignmentsDryRun, resetDryRun],
  );

  const handleConfirmUpsertPlanAssignments = useCallback(() => {
    upsertPlanAssignments(
      [
        ...(dryRunResponse?.insertedPlanAssignments ?? []),
        ...(dryRunResponse?.updatedPlanAssignments.map(({ next }) => next) ?? []),
      ].map(
        (row): UpsertPlanAssignmentRequest => ({
          planId: row.plan.id,
          userId: row.user.id,
          mainTeamId: row.mainTeam?.id ?? null,
          effectiveAsOf: row.effectiveAsOf,
          effectiveUntil: row.effectiveUntil,
        }),
      ),
      { onSuccess: onClose },
    );
  }, [dryRunResponse, onClose, upsertPlanAssignments]);

  return (
    <BulkCsvImportModal
      isLoading={isDryRunPending || isUpsertPending}
      isOpen={isOpen}
      mandatoryColumns={['planName', 'userEmail']}
      optionalColumns={['assignmentStartDate', 'assignmentEndDate', 'primaryTeam']}
      templateLink="https://docs.google.com/spreadsheets/d/1QIZZoCpWf-uvi3aqyfd5kKr-EzF4CGpWBjHX_33JyUI"
      additionalContent={
        <p>
          <FormattedMessage defaultMessage="You can upload a file in .csv format to update plan assignments for multiple users at once. Please use the provided template to ensure your data is entered in the correct format." />
        </p>
      }
      isSubmitDisabled={
        !!dryRunResponse?.errors.length ||
        (!dryRunResponse?.insertedPlanAssignments.length && !dryRunResponse?.updatedPlanAssignments.length)
      }
      preview={
        dryRunResponse && !dryRunResponse.errors.length ? (
          <PlanAssignmentsBulkCsvPreview dryRunResponse={dryRunResponse} />
        ) : undefined
      }
      uploadError={
        dryRunResponse?.errors.length ? (
          <PlanAssignmentsBulkCsvValidationErrors errors={dryRunResponse.errors} />
        ) : undefined
      }
      onChangeRows={handleUpsertPlanAssignmentsDryRun}
      onClose={onClose}
      onSubmit={handleConfirmUpsertPlanAssignments}
    />
  );
});