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 | 21x 23x 23x 23x 23x 23x 21x 4x 23x 16x 23x 23x | import { Stack } from "@mui/material";
import GiveUnderwritingProgressBar from "@shared/ProgressBar/GiveUnderwritingProgressBar";
import GiveText from "@shared/Text/GiveText";
import { ModifiedGiveChip } from "./UnderwritingCard.style";
import { IChipProps } from "@shared/Chip/GiveChip";
import { useEffect, useMemo } from "react";
import { useGetChallengesStats } from "@features/Underwriting/hooks/useGetChallengesStats";
import { useMerchantSidePanelContext } from "features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
type TUnderwritingCardHeader = {
underwritingScorePercentage: number | string;
status: IChipProps;
merchantId: number;
};
const UnderwritingCardHeader = ({
underwritingScorePercentage,
status,
merchantId,
}: TUnderwritingCardHeader) => {
const { label, color } = status || {};
const {
setIsLoadingUnderwriting,
isLoadingUnderwriting,
isUnderwritingView,
isOnboardingView,
data,
} = useMerchantSidePanelContext();
const { data: challengesStatsData, isLoading } = useGetChallengesStats({
merchantId,
});
const showOnboardingStats =
isOnboardingView || data?.status?.statusName === "onboarding";
//set underwriting load to false if we don't have to wait for category fetch
useEffect(() => {
if (
!isLoading &&
isLoadingUnderwriting &&
!isUnderwritingView &&
!isOnboardingView
)
setIsLoadingUnderwriting(false);
}, [isLoading, isLoadingUnderwriting]);
const { completed, incomplete, disabled } = useMemo(
() => ({
completed:
(showOnboardingStats
? challengesStatsData?.closedMerchantOnboardingChallengesCount
: challengesStatsData?.closedChallengesCount) || 0,
incomplete:
(showOnboardingStats
? 0
: challengesStatsData?.readyForVerificationChallengesCount) || 0,
disabled:
(showOnboardingStats
? challengesStatsData?.merchantOnboardingChallengesCount -
challengesStatsData?.closedMerchantOnboardingChallengesCount
: challengesStatsData?.openChallengesCount) || 0,
}),
[challengesStatsData, showOnboardingStats],
);
const hiddenStatus = data?.status?.sponsorStatusName === "ready_for_review";
return (
<Stack gap="12px">
<Stack direction="row" justifyContent="space-between">
<GiveText
sx={{
fontSize: "24px",
fontWeight: 350,
lineHeight: "28px",
}}
>
{underwritingScorePercentage}%
</GiveText>
{!hiddenStatus && (
<ModifiedGiveChip
label={label}
color={color}
variant="light"
size="large"
/>
)}
</Stack>
<GiveUnderwritingProgressBar
completed={completed}
incomplete={incomplete}
disabled={disabled}
/>
</Stack>
);
};
export default UnderwritingCardHeader;
|