All files / libs/lti/views/participant-enrollment/src/lib LtiParticipantEnrollmentPreviewView.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { AlertBanner } from '@allshares/studio-design-system';
import { dayjs } from '@amalia/ext/dayjs';
import { useParams } from '@amalia/ext/react-router-dom';
import { useLtiPlan, useLtiPlanGrants } from '@amalia/lti/state';
import { isEnrollmentConfigurationReady, type LtiGrant, type LtiPlan } from '@amalia/lti/types';

import { LtiParticipantEnrollmentPresentation } from './LtiParticipantEnrollmentPresentation';

export const LtiParticipantEnrollmentPreviewView = memo(function LtiParticipantEnrollmentPreviewView() {
  const { ltiPlanId } = useParams<{ ltiPlanId: LtiPlan['id'] }>();

  const { data: plan, isLoading: isPlanLoading } = useLtiPlan(ltiPlanId);
  const { data: grants, isLoading: isGrantsLoading } = useLtiPlanGrants(ltiPlanId);

  const firstGrant = grants?.at(0);

  const grant: LtiGrant = {
    id: firstGrant?.id ?? 'preview-grant-id',
    nbShares: firstGrant?.nbShares ?? 2000,
    grantDate: firstGrant?.grantDate ?? dayjs().toDate(),
    offerExpiryDate: firstGrant?.offerExpiryDate ?? dayjs().add(2, 'week').toDate(),
    acceptedAt: firstGrant?.acceptedAt ?? null,
    createdAt: firstGrant?.createdAt ?? dayjs().toDate(),
    updatedAt: firstGrant?.updatedAt ?? dayjs().toDate(),
    planId: ltiPlanId,
    userId: firstGrant?.userId ?? 'preview-user-id',
    invitationSentAt: firstGrant?.invitationSentAt ?? dayjs().toDate(),

    // We want to preview the enrollment with the current configuration of the plan.
    enrollmentConfigurationVersionId: 'preview-enrollment-configuration-version-id',
    enrollmentConfigurationVersion: plan?.enrollmentConfiguration
      ? {
          id: 'preview-enrollment-configuration-version-id',
          planId: ltiPlanId,
          configuration: plan.enrollmentConfiguration,
        }
      : null,

    outcomeNbShares: 0,
    outcomePerformance: 0,
    outcomeKpiRatios: null,
    outcomeComputedAt: null,

    employmentAdjustment: null,
    employmentLeaverType: null,
    employmentEndedDate: null,
  };

  const isLoading = isPlanLoading || isGrantsLoading;

  if (!isLoading && !plan) {
    return null;
  }

  // The link from enrollment configuration is disabled but the user could navigate to this URL manually.
  if (plan && !isEnrollmentConfigurationReady(plan.enrollmentConfiguration)) {
    return (
      <AlertBanner
        inline
        withBorder
        variant="warning"
      >
        <FormattedMessage defaultMessage="This plan's enrollment configuration is not ready. Please complete the configuration to preview the participant experience." />
      </AlertBanner>
    );
  }

  return (
    <LtiParticipantEnrollmentPresentation
      isPreview
      grant={grant}
      isLoading={isLoading}
      plan={plan ?? null}
    />
  );
});