document EnrollmentDocumentWidgetCardPreview.tsx

0% Statements 0/101

0% Branches 0/1

0% Functions 0/1

0% Lines 0/101

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 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

import { css } from '@emotion/react';
import { IconCheckbox, IconFileDescription } from '@tabler/icons-react';
import { noop } from 'lodash-es';
import { Fragment, memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { Button, Group, Paper, Tooltip, Typography, UnstyledButton } from '@allshares/studio-design-system';
import { useBoolState } from '@amalia/ext/react/hooks';
import { DocumentDrawer, DocumentSignatureRequiredBadge } from '@amalia/lti/components';
import { useStreamPlanDocument } from '@amalia/lti/state';
import { type LtiPlan, type LtiPlanDocument } from '@amalia/lti/types';

type EnrollmentDocumentWidgetCardPreviewProps = {
  readonly document?: Partial<Pick<LtiPlanDocument, 'id'>> &
    Pick<LtiPlanDocument, 'isSignatureRequired' | 'mimeType' | 'name'>;
  readonly planId: LtiPlan['id'];
};

export const EnrollmentDocumentWidgetCardPreview = memo(function EnrollmentDocumentWidgetCardPreview({
  document,
  planId,
}: EnrollmentDocumentWidgetCardPreviewProps) {
  const { isDocumentDrawerOpen, setDocumentDrawerOpenTrue, setDocumentDrawerOpenFalse } = useBoolState(
    false,
    'documentDrawerOpen',
  );

  const isDocumentPreviewable = !!document;

  const { data: documentBlob } = useStreamPlanDocument(
    planId,
    document?.id,
    isDocumentDrawerOpen && isDocumentPreviewable,
  );

  return (
    <Fragment>
      <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?.name}</Typography>

            {!!document?.isSignatureRequired && <DocumentSignatureRequiredBadge />}
          </Group>
        </Group>
      </UnstyledButton>

      {!!document && (
        <DocumentDrawer
          documentBlob={documentBlob}
          isOpen={isDocumentDrawerOpen}
          isSignatureRequired={document.isSignatureRequired}
          name={document.name}
          actions={
            !!document.isSignatureRequired && (
              <Tooltip
                content={
                  <FormattedMessage defaultMessage="Preview mode: Document signing will be available when participants view the plan" />
                }
              >
                <Button
                  disabled
                  icon={<IconCheckbox />}
                  size="large"
                  variant="primary"
                >
                  <FormattedMessage defaultMessage="Mark as signed" />
                </Button>
              </Tooltip>
            )
          }
          onClose={setDocumentDrawerOpenFalse}
        />
      )}
    </Fragment>
  );
});