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 | 209x 5x 21x 21x 21x 21x 11x 11x 11x 11x 11x 2x 9x 7x 21x 21x 10x 10x | import { useEffect, useMemo, useRef } from "react";
import { Authority, opensearch } from "shared-types";
import { useGetUser } from "@/api/useGetUser";
import { DetailsSection, LoadingSpinner } from "@/components";
import { useFeatureFlag } from "@/hooks/useFeatureFlag";
import { sendGAEvent } from "@/utils";
import {
getApprovedAndEffectiveDetails,
getDescriptionDetails,
getSubmissionDetails,
getSubmittedByDetails,
} from "./details";
import { LabelAndValue } from "./details";
type PackageDetailsGridProps = {
details: LabelAndValue[];
};
const PackageDetailsGrid = ({ details }: PackageDetailsGridProps) => (
<div className="two-cols gap-y-6 sm:gap-y-6">
{details.map(({ label, value, canView = true }) => {
return canView ? (
<dl key={label}>
<dt className="font-bold">{label}</dt>
<dd className="py-2">{value}</dd>
</dl>
) : null;
})}
</div>
);
type PackageDetailsProps = {
submission: opensearch.main.Document;
};
export const PackageDetails = ({ submission }: PackageDetailsProps) => {
const { data: user, isLoading: isUserLoading } = useGetUser();
const didSetGATag = useRef<boolean>(false);
const isCHIPDetailsEnabled = useFeatureFlag("CHIP_SPA_DETAILS");
const title = useMemo(() => {
const hasChipSubmissionType =
Array.isArray(submission.chipSubmissionType) && submission.chipSubmissionType.length > 0;
const hasChipEligibilityAttachment =
Array.isArray(submission.attachments?.chipEligibility?.files) &&
submission.attachments.chipEligibility.files.length > 0;
Iif (isCHIPDetailsEnabled && (hasChipSubmissionType || hasChipEligibilityAttachment)) {
return "CHIP Eligibility SPA Package Details";
}
switch (submission.authority) {
//possibly add option for chip eligibility here
case Authority["1915b"]:
case Authority["1915c"]:
case undefined:
if (submission.actionType === "Amend" && submission.authority === Authority["1915c"])
return "1915(c) Appendix K Amendment Package Details";
if (submission.actionType === "Extend") return "Temporary Extension Request Details";
}
return `${submission.authority} Package Details`;
}, [submission, isCHIPDetailsEnabled]);
useEffect(() => {
if (!isUserLoading && typeof window.gtag == "function" && !didSetGATag.current) {
sendGAEvent("package_details_view", {
package_id: submission.id,
package_type: submission.authority,
state: submission.state,
...(user?.user?.role && { user_role: user?.user?.role }),
});
didSetGATag.current = true;
}
}, [isUserLoading]); // eslint-disable-line react-hooks/exhaustive-deps
// we only want this to run when the user finishes loading
if (isUserLoading) return <LoadingSpinner />;
return (
<DetailsSection id="package_details" title={title} childrenClassName="grid gap-y-8">
<div>
<PackageDetailsGrid
details={[
...getSubmissionDetails(submission, user, isCHIPDetailsEnabled),
...getApprovedAndEffectiveDetails(submission, user, isCHIPDetailsEnabled),
...getDescriptionDetails(submission, user, isCHIPDetailsEnabled),
]}
/>
<hr className="my-4" />
<PackageDetailsGrid
details={getSubmittedByDetails(submission, user, isCHIPDetailsEnabled)}
/>
</div>
</DetailsSection>
);
};
|