Skip to content

Commit

Permalink
added i18n and responsiveness support to hcx components
Browse files Browse the repository at this point in the history
  • Loading branch information
@khavinshankar
khavinshankar committed Aug 26, 2024
1 parent ae5ecdf commit 1193d4c
Show file tree
Hide file tree
Showing 14 changed files with 317 additions and 234 deletions.
9 changes: 6 additions & 3 deletions src/Components/Facility/ConsultationClaims.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ import routes from "../../Redux/api";
import { useMessageListener } from "../../Common/hooks/useMessageListener";
import useQuery from "../../Utils/request/useQuery";
import { useState } from "react";
import { useTranslation } from "react-i18next";

interface Props {
export interface IConsultationClaimsProps {
facilityId: string;
patientId: string;
consultationId: string;
Expand All @@ -19,7 +20,9 @@ export default function ConsultationClaims({
facilityId,
consultationId,
patientId,
}: Props) {
}: IConsultationClaimsProps) {
const { t } = useTranslation();

const [isCreateLoading, setIsCreateLoading] = useState(false);

const { data: claimsResult, refetch: refetchClaims } = useQuery(
Expand Down Expand Up @@ -56,7 +59,7 @@ export default function ConsultationClaims({
return (
<div className="relative flex flex-col pb-2">
<PageTitle
title="Claims"
title={t("Claims")}
className="grow-0 pl-6"
onBackClick={() => {
navigate(
Expand Down
37 changes: 26 additions & 11 deletions src/Components/HCX/ClaimCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useLayoutEffect, useRef, useState } from "react";

import CareIcon from "../../CAREUI/icons/CareIcon";
import ClaimCardCommunication from "./ClaimCardCommunication";
import ClaimCardInfo from "./ClaimCardInfo";
import { HCXClaimModel } from "./models";
Expand All @@ -25,16 +26,30 @@ export default function ClaimCard({ claim }: IProps) {
}
}, [cardContainerRef]);

return showMessages ? (
<div style={{ ...containerDimensions }} className="relative px-6 lg:px-8">
<ClaimCardCommunication claim={claim} setShowMessages={setShowMessages} />
</div>
) : (
<div
ref={cardContainerRef}
className="px-6 lg:px-8" // TODO: add a card flip animation
>
<ClaimCardInfo claim={claim} setShowMessages={setShowMessages} />
</div>
return (
<>
<div className="relative flex justify-end">
<CareIcon
icon={showMessages ? "l-info-circle" : "l-chat"}
className="absolute right-0 top-0 z-30 h-7 w-7 cursor-pointer text-gray-600 hover:text-gray-800"
onClick={() => setShowMessages((prev) => !prev)}
/>
</div>
{showMessages ? (
<div
style={{ ...containerDimensions }}
className="relative w-full px-2 lg:px-8"
>
<ClaimCardCommunication claim={claim} />
</div>
) : (
<div
ref={cardContainerRef}
className="w-full px-2 lg:px-8" // TODO: add a card flip animation
>
<ClaimCardInfo claim={claim} />
</div>
)}
</>
);
}
40 changes: 12 additions & 28 deletions src/Components/HCX/ClaimCardCommunication.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,9 @@ import { useTranslation } from "react-i18next";

interface IProps {
claim: HCXClaimModel;
setShowMessages: (show: boolean) => void;
}

export default function ClaimCardCommunication({
claim,
setShowMessages,
}: IProps) {
export default function ClaimCardCommunication({ claim }: IProps) {
const { t } = useTranslation();
const [inputText, setInputText] = useState("");
const [isSendingCommunication, setIsSendingCommunication] = useState(false);
Expand Down Expand Up @@ -78,36 +74,26 @@ export default function ClaimCardCommunication({
});

if (res?.ok) {
Notification.Success({ msg: "Sent communication to HCX" });
Notification.Success({ msg: t("communication__sent_to_hcx") });

await refetchCommunications();

setInputText("");
clearFiles();
} else {
Notification.Error({ msg: "Error sending communication to HCX" });
}
}

setIsSendingCommunication(false);
};

return (
<div className="flex h-full flex-col justify-end">
<div className="flex justify-end">
<CareIcon
icon="l-info-circle"
className="h-7 w-7 cursor-pointer text-gray-600 hover:text-gray-800"
onClick={() => setShowMessages(false)}
/>
</div>

<div className="flex h-full !w-full flex-col justify-end">
<CommunicationChatInterface
communications={communicationsResult?.results ?? []}
/>

<div className="m-auto flex w-full items-center gap-3">
<div className="relative w-full">
<div className="flex w-full items-center gap-3 max-md:flex-col">
<div className="relative w-full flex-1">
<div className="absolute bottom-full flex max-w-full items-center gap-2 overflow-x-auto rounded-md bg-white p-2">
{files.map((file, i) => (
<div
Expand Down Expand Up @@ -154,19 +140,21 @@ export default function ClaimCardCommunication({
onChange={(e) => setInputText(e.value)}
placeholder={t("enter_message")}
rows={1}
className="-mb-3"
className="-mb-3 flex-1"
/>
</div>
<div className="w-fit">
<div className="flex items-center justify-center max-md:w-full">
<label className="button-size-default button-shape-square button-primary-default inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out">
<CareIcon icon="l-paperclip" className="h-5 w-5" />
<span className="md:hidden">{t("add_attachments")}</span>
<Input />
</label>
</div>
<ButtonV2
disabled={!inputText}
loading={isSendingCommunication}
onClick={handleSubmit}
className="max-md:w-full"
>
{t("send_message")}
</ButtonV2>
Expand Down Expand Up @@ -267,10 +255,6 @@ function CommunicationChatMessage({
if (res?.ok) {
const url = data?.read_signed_url;
window.open(url, "_blank");
} else {
Notification.Error({
msg: "Error downloading attachment",
});
}

setIsDownloadingAttachment(false);
Expand Down Expand Up @@ -298,10 +282,10 @@ function CommunicationChatMessage({
});

if (res?.ok) {
Notification.Success({ msg: "Fetched attachments successfully" });
Notification.Success({
msg: t("fetched_attachments_successfully"),
});
setAttachments(data?.results ?? []);
} else {
Notification.Error({ msg: "Error fetching attachments" });
}

setIsFetchingAttachments(false);
Expand Down
74 changes: 32 additions & 42 deletions src/Components/HCX/ClaimCardInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,39 @@
import { classNames, formatCurrency, formatDateTime } from "../../Utils/utils";

import CareIcon from "../../CAREUI/icons/CareIcon";
import { HCXClaimModel } from "./models";
import { useTranslation } from "react-i18next";

interface IProps {
claim: HCXClaimModel;
setShowMessages: (show: boolean) => void;
}

export default function ClaimCardInfo({ claim, setShowMessages }: IProps) {
export default function ClaimCardInfo({ claim }: IProps) {
const { t } = useTranslation();

const status =
claim.outcome === "Processing Complete"
? claim.error_text
? "Rejected"
: "Approved"
: "Pending";
? t("claim__status__rejected")
: t("claim__status__approved")
: t("claim__status__pending");

return (
<>
<div className="sm:flex sm:items-center">
<div className="sm:flex sm:items-end">
<div className="sm:flex-auto">
<h1 className="text-xl font-semibold text-secondary-700">
#{claim.id?.slice(0, 5)}
</h1>

<p className="mt-2 text-sm text-secondary-700">
Created on{" "}
<time dateTime="2022-08-01">
{t("created_on")}{" "}
<time dateTime={claim.created_date}>
{formatDateTime(claim.created_date ?? "")}
</time>
.
</p>
</div>
<div className="mt-4 flex flex-row-reverse items-center justify-center gap-3 sm:ml-16 sm:mt-0">
<CareIcon
icon="l-comment-alt-message"
className="h-7 w-7 cursor-pointer text-gray-600 hover:text-gray-800"
onClick={() => setShowMessages(true)}
/>
<div className="mt-4 flex flex-row-reverse items-center justify-center gap-3 max-sm:justify-end sm:ml-16 sm:mt-0">
{claim.use && (
<span className="rounded bg-primary-100 p-1 px-2 text-sm font-bold text-primary-500 shadow">
{claim.use}
Expand All @@ -46,39 +42,45 @@ export default function ClaimCardInfo({ claim, setShowMessages }: IProps) {
<span
className={classNames(
"rounded p-1 px-2 text-sm font-bold text-white shadow",
status === "Approved" && "bg-primary-400",
status === "Rejected" && "bg-danger-400",
status === "Pending" && "bg-yellow-400",
status === t("claim__status__approved") && "bg-primary-400",
status === t("claim__status__rejected") && "bg-danger-400",
status === t("claim__status__pending") && "bg-yellow-400",
)}
>
{status}
</span>
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-4">
<div className="mt-6 grid gap-4 sm:grid-cols-2">
<div className="text-center">
<h2 className="text-lg font-bold text-secondary-800">
{claim.policy_object?.policy_id || "NA"}
</h2>
<p className="text-sm text-secondary-500">Policy ID</p>
<p className="text-sm text-secondary-500">{t("policy__policy_id")}</p>
</div>
<div className="text-center">
<h2 className="text-lg font-bold text-secondary-800">
{claim.policy_object?.subscriber_id || "NA"}
</h2>
<p className="text-sm text-secondary-500">Subscriber ID</p>
<p className="text-sm text-secondary-500">
{t("policy__subscriber_id")}
</p>
</div>
<div className="text-center">
<h2 className="text-lg font-bold text-secondary-800">
{claim.policy_object?.insurer_id || "NA"}
{claim.policy_object?.insurer_id?.split("@").shift() || "NA"}
</h2>
<p className="text-sm text-secondary-500">Insurer ID</p>
<p className="text-sm text-secondary-500">
{t("policy__insurer_id")}
</p>
</div>
<div className="text-center">
<h2 className="text-lg font-bold text-secondary-800">
{claim.policy_object?.insurer_name || "NA"}
</h2>
<p className="text-sm text-secondary-500">Insurer Name</p>
<p className="text-sm text-secondary-500">
{t("policy__insurer_name")}
</p>
</div>
</div>
<div className="-mx-6 mt-8 flow-root sm:mx-0">
Expand All @@ -89,15 +91,15 @@ export default function ClaimCardInfo({ claim, setShowMessages }: IProps) {
scope="col"
className="py-3.5 pl-6 pr-3 text-left text-sm font-semibold text-secondary-900 sm:pl-0"
>
Items
{t("claim__items")}
</th>
<th></th>
<th></th>
<th
scope="col"
className="py-3.5 pl-3 pr-6 text-right text-sm font-semibold text-secondary-900 sm:pr-0"
>
Price
{t("claim__item__price")}
</th>
</tr>
</thead>
Expand All @@ -123,15 +125,9 @@ export default function ClaimCardInfo({ claim, setShowMessages }: IProps) {
<th
scope="row"
colSpan={3}
className="hidden pl-6 pr-3 pt-6 text-right text-sm font-normal text-secondary-500 sm:table-cell sm:pl-0"
>
Total Claim Amount
</th>
<th
scope="row"
className="pl-6 pr-3 pt-6 text-left text-sm font-normal text-secondary-500 sm:hidden"
className="table-cell pl-6 pr-3 pt-6 text-right text-sm font-normal text-secondary-500 sm:pl-0"
>
Total Claim Amount
{t("claim__total_claim_amount")}
</th>
<td className="pl-3 pr-6 pt-6 text-right text-sm text-secondary-500 sm:pr-0">
{claim.total_claim_amount &&
Expand All @@ -143,15 +139,9 @@ export default function ClaimCardInfo({ claim, setShowMessages }: IProps) {
<th
scope="row"
colSpan={3}
className="hidden pl-6 pr-3 pt-4 text-right text-sm font-semibold text-secondary-900 sm:table-cell sm:pl-0"
>
Total Amount Approved
</th>
<th
scope="row"
className="pl-6 pr-3 pt-4 text-left text-sm font-semibold text-secondary-900 sm:hidden"
className="table-cell pl-6 pr-3 pt-4 text-right text-sm font-semibold text-secondary-900 sm:pl-0"
>
Total Amount Approved
{t("claim__total_approved_amount")}
</th>
<td className="pl-3 pr-6 pt-4 text-right text-sm font-semibold text-secondary-900 sm:pr-0">
{claim.total_amount_approved
Expand Down
11 changes: 7 additions & 4 deletions src/Components/HCX/ClaimCreatedModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Submit } from "../Common/components/ButtonV2";
import request from "../../Utils/request/request";
import routes from "../../Redux/api";
import { useState } from "react";
import { useTranslation } from "react-i18next";

interface Props {
claim: HCXClaimModel;
Expand All @@ -16,6 +17,8 @@ interface Props {
}

export default function ClaimCreatedModal({ claim, ...props }: Props) {
const { t } = useTranslation();

const [isMakingClaim, setIsMakingClaim] = useState(false);

const { use } = claim;
Expand All @@ -38,17 +41,17 @@ export default function ClaimCreatedModal({ claim, ...props }: Props) {
<DialogModal
show={props.show}
onClose={props.onClose}
title="Add supporting documents"
description={`${claim.use} ID: #${claim.id?.slice(0, 5)}`}
title={t("add_attachments")}
description={`${t("claim__use__claim")}: #${claim.id?.slice(0, 5)}`}
className="w-full max-w-screen-lg"
titleAction={
<Submit disabled={isMakingClaim} onClick={handleSubmit}>
{isMakingClaim && (
<CareIcon icon="l-spinner" className="animate-spin" />
)}
{isMakingClaim
? `Requesting ${use === "Claim" ? "Claim" : "Pre-Authorization"}...`
: `Request ${use === "Claim" ? "Claim" : "Pre-Authorization"}`}
? t("claim__requesting_claim")
: t("claim__request_claim")}
</Submit>
}
>
Expand Down
Loading

0 comments on commit 1193d4c

Please sign in to comment.