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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 21x 104x 104x 104x 104x 104x 113x 104x 104x 104x 104x 104x 104x 4x 100x 100x 100x 100x 100x 857x 21x | import { isArray } from "lodash";
import { Stack } from "@mui/material";
import { useAppSelector } from "@redux/hooks";
import { selectQueryString } from "@redux/slices/search";
import GiveEmptyState from "@shared/EmptyState/GiveEmptyState";
import TaskItemCard from "../TaskItemCard/TaskItemCard";
import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { SkeletonTasks } from "./SkeletonTasks";
import { TUnderwritingTask } from "@features/Merchants/MerchantSidePanel/ApprovalFlowPanel/types";
import { IParsedData } from "@components/Merchants/MerchantPreview/data.types";
import { Box } from "@mui/material";
import { useMerchantSidePanelContext } from "@features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
import { NewTaskButton } from "./NewTask";
import { ErrorState } from "@features/Merchants/MerchantSidePanel/components/ErrorState/ErrorState";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import { checkPortals } from "@utils/routing";
interface TasksBodyContentProps {
tasks: TUnderwritingTask[];
isTasksLoading: boolean;
hasError: boolean;
onRetry: () => void;
filters: {
status: string[];
userTaggedIn: string;
};
merchantData: IParsedData;
}
const TasksBodyContent = ({
tasks,
isTasksLoading,
hasError,
onRetry,
filters,
merchantData,
}: TasksBodyContentProps) => {
const showTasks = isArray(tasks) && !isTasksLoading;
const { isKYBView, isUnderwritingView } = useMerchantSidePanelContext();
const { merchant_underwriting } = useEnterprisePermissions();
const { isEnterprisePortal } = checkPortals();
const searchQuery = useAppSelector((state) =>
selectQueryString(state, "items_all_tasks"),
);
const isEmpty =
(!isArray(tasks) || !tasks || tasks?.length < 1) && !isTasksLoading;
const isEmptySearchData = !searchQuery && isEmpty;
const isEmptyUserTagged = filters.userTaggedIn !== "" && isEmpty;
const showEmptyState =
isEmpty &&
(isEmptySearchData || filters.userTaggedIn || filters.status.length > 0);
const getEmptyText = () => {
if (isEmptySearchData && (isEmptyUserTagged || filters.status.length > 0))
return EMPTY_TEXTS.searchAndFilter;
if (isEmptySearchData) return EMPTY_TEXTS.search;
if (isEmptyUserTagged) return EMPTY_TEXTS.tagged;
};
if (hasError) {
return (
<Stack paddingTop="20px">
<ErrorState title="Tasks list could not be loaded" onRetry={onRetry} />
</Stack>
);
}
Iif (showEmptyState) {
return (
<GiveEmptyState
Icon={<MagnifyingGlassIcon size={28} />}
title={{
main: searchQuery ? `No results for "${searchQuery}"` : `No results`,
secondary: getEmptyText(),
}}
sx={{ justifyContent: "flex-start", paddingTop: "64px" }}
/>
);
}
const isSponsor = merchantData?.header?.onbSectionName === "sponsor";
const isProviderWithoutUnderwriting = isEnterprisePortal && !merchant_underwriting;
const showNewTaskBtn = (isUnderwritingView || isKYBView) && !isSponsor && !isProviderWithoutUnderwriting;
return (
<>
<Stack paddingTop="20px">
{isTasksLoading && <SkeletonTasks />}
{showTasks && (
<Box>
{tasks?.map((task, index) => (
<TaskItemCard
taskData={task}
key={index}
merchantData={merchantData}
/>
))}
{showNewTaskBtn && (
<NewTaskButton
merchantId={merchantData?.merchantInfo.merchantID}
/>
)}
</Box>
)}
</Stack>
</>
);
};
export default TasksBodyContent;
const EMPTY_TEXTS = {
search: "Please try a different search term",
searchAndFilter: "Please try a different search term or filter criteria",
tagged: "You are not tagged in any conversations",
};
|