All files / libs/lti/views/participant-enrollment/src/lib/enrollment-content/widgets/document EnrollmentDocumentWidgetCard.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { IconCheckbox, IconFileDescription } from '@tabler/icons-react';
import { noop } from 'lodash-es';
import { Fragment, memo, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { match, P } from 'ts-pattern';

import { Button, Group, Paper, Skeleton, Tooltip, Typography, UnstyledButton } from '@allshares/studio-design-system';
import { useBoolState } from '@amalia/ext/react/hooks';
import { useAuthenticatedContext } from '@amalia/kernel/auth/state';
import { DocumentDrawer, DocumentSignatureRequiredBadge, DocumentSignedBadge } from '@amalia/lti/components';
import { useSignGrantDocument, useStreamGrantDocument } from '@amalia/lti/state';
import { type LtiGrant, type LtiGrantDocument, type LtiPlan } from '@amalia/lti/types';

type EnrollmentDocumentWidgetCardProps = {
  readonly document?: LtiGrantDocument;
  readonly grantId: LtiGrant['id'];
  readonly isLoading: boolean;
  readonly planId: LtiPlan['id'];
};

export const EnrollmentDocumentWidgetCard = memo(function EnrollmentDocumentWidgetCard({
  document,
  grantId,
  isLoading,
  planId,
}: EnrollmentDocumentWidgetCardProps) {
  const { authenticatedContext } = useAuthenticatedContext();

  const isAdminImpersonating = !!authenticatedContext.impersonation?.impersonator;

  const { isDocumentDrawerOpen, setDocumentDrawerOpenTrue, setDocumentDrawerOpenFalse } = useBoolState(
    false,
    'documentDrawerOpen',
  );

  const { data: documentBlob } = useStreamGrantDocument(planId, grantId, document?.id, isDocumentDrawerOpen);

  const { mutate: signGrantDocument, isPending } = useSignGrantDocument();

  const handleSignDocument = useCallback(() => {
    if (!document) {
      return;
    }

    signGrantDocument({ planId, grantId, documentId: document.id });
  }, [document, grantId, planId, signGrantDocument]);

  return (
    <Fragment>
      <Skeleton visible={isLoading}>
        <UnstyledButton
          css={css`
            width: 100%;
          `}
          onClick={document ? setDocumentDrawerOpenTrue : noop}
        >
          <Group
            align="center"
            gap={20}
            css={[
              Paper.style,
              css`
                flex: 1;
                height: 64px;
                padding: 16px 40px 16px 24px;
              `,
            ]}
          >
            <IconFileDescription size={18} />

            <Group
              align="center"
              justify="space-between"
              css={css`
                flex: 1;
              `}
            >
              <Typography variant="bodyLargeMedium">{document?.metadata.name}</Typography>

              {match(document)
                .with({ signedAt: P.nonNullable }, (document) => <DocumentSignedBadge signedAt={document.signedAt} />)
                .with({ metadata: { isSignatureRequired: true } }, () => <DocumentSignatureRequiredBadge />)
                .otherwise(() => null)}
            </Group>
          </Group>
        </UnstyledButton>
      </Skeleton>

      {!!document && (
        <DocumentDrawer
          documentBlob={documentBlob}
          isOpen={isDocumentDrawerOpen}
          isSignatureRequired={document.metadata.isSignatureRequired}
          name={document.metadata.name}
          signedAt={document.signedAt}
          actions={
            !!document.metadata.isSignatureRequired &&
            !document.signedAt && (
              <Tooltip
                disabled={!isAdminImpersonating}
                content={
                  isAdminImpersonating ? (
                    <FormattedMessage defaultMessage="You cannot sign documents while impersonating a user." />
                  ) : undefined
                }
              >
                <Button
                  disabled={isAdminImpersonating}
                  icon={<IconCheckbox />}
                  isLoading={isPending}
                  size="large"
                  variant="primary"
                  onClick={handleSignDocument}
                >
                  <FormattedMessage defaultMessage="Mark as signed" />
                </Button>
              </Tooltip>
            )
          }
          onClose={setDocumentDrawerOpenFalse}
        />
      )}
    </Fragment>
  );
});