All files / libs/tenants/users/profile/components/src/lib/table/cells/integrations IntegrationsEditCell.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
94
95
96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { IconPencil } from '@tabler/icons-react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { Table, Typography } from '@allshares/studio-design-system';
import { UserExternalIdSourceLabel, UserHrisIdSourceLabel } from '@amalia/data-capture/connectors/assets';
import { useBoolState } from '@amalia/ext/react/hooks';
import { type UserInfo } from '@amalia/tenants/users/profile/types';

import { UserIntegrations } from '../../../integrations';

import { ConfirmResetIntegrationEditPopoverModal } from './modal/ConfirmResetIntegrationEditPopoverModal';
import { IntegrationsEditPopover } from './popover/IntegrationsEditPopover';
import { useConfirmResetPopoverFieldsIfErrors } from './popover/useConfirmResetPopoverFieldsIfErrors';

export type IntegrationsEditCellProps = {
  readonly row: Pick<
    UserInfo,
    'externalId' | 'externalIdSource' | 'firstName' | 'hrisId' | 'hrisIdSource' | 'lastName'
  >;
};

const disableCloseTransition = {
  close: 0,
} as const;

export const IntegrationsEditCell = memo(function IntegrationsEditCell({ row }: IntegrationsEditCellProps) {
  const { isPopoverOpen, setPopoverOpen } = useBoolState(false, 'popoverOpen');

  const { isAnyInputFocused, setAnyInputFocusedTrue, setAnyInputFocusedFalse } = useBoolState(false, 'anyInputFocused');

  const { onChangeIsOpen, onCancelConfirmReset, onConfirmReset, isConfirmResetOpen, missingField, formValues } =
    useConfirmResetPopoverFieldsIfErrors({
      onChangeIsOpen: setPopoverOpen,
    });

  return (
    <Table.Cell.WithActions
      hideActions={isPopoverOpen ? false : undefined}
      tooltipContent={null}
      actions={
        <IntegrationsEditPopover
          initialFocus={-1}
          isOpen={isPopoverOpen}
          shouldDismiss={!isConfirmResetOpen && !isAnyInputFocused}
          transitionDuration={disableCloseTransition}
          onBlurInput={setAnyInputFocusedFalse}
          onChangeIsOpen={onChangeIsOpen}
          onFocusInput={setAnyInputFocusedTrue}
        >
          <Table.Cell.IconAction
            data-testid="integrations-edit-popover-open-button"
            icon={<IconPencil />}
            label={<FormattedMessage defaultMessage="Edit external and HRIS IDs" />}
          />
        </IntegrationsEditPopover>
      }
    >
      <UserIntegrations user={row} />

      {!!isConfirmResetOpen && (
        <ConfirmResetIntegrationEditPopoverModal
          isOpen
          onCancel={onCancelConfirmReset}
          onConfirm={onConfirmReset}
        >
          {missingField === 'externalId' && (
            <FormattedMessage
              defaultMessage="You didn't enter an external ID for {source} source.{br}If you leave, we will remove the external source."
              values={{
                source: (
                  <Typography variant="bodyBaseBold">
                    <UserExternalIdSourceLabel externalIdSource={formValues.externalIdSource} />
                  </Typography>
                ),
              }}
            />
          )}
          {missingField === 'hrisId' && (
            <FormattedMessage
              defaultMessage="You didn't enter an HRIS ID for {source} source.{br}If you leave, we will remove the HRIS source."
              values={{
                source: (
                  <Typography variant="bodyBaseBold">
                    <UserHrisIdSourceLabel hrisIdSource={formValues.hrisIdSource} />
                  </Typography>
                ),
              }}
            />
          )}
        </ConfirmResetIntegrationEditPopoverModal>
      )}
    </Table.Cell.WithActions>
  );
});