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 | 21x 21x 157x 14x 21x 157x 157x 157x 12x 144x 157x 157x 157x 157x | import { customInstance } from "@services/api";
import React, { useMemo } from "react";
import { useQuery } from "react-query";
import { MERCHANT_SIDE_PANEL_PREVIEW_API_KEYS } from "../../constants";
export const customLabelsStepMap = {
identity_details: "Identity Details",
identity_id_document: "ID Document",
identity_photo_with_id: "Photo with ID",
business_profile: "Business Profile",
business_address: "Business Address",
business_owners: "Business Owners",
business_details: "Business Details",
business_bank_connect: "Bank Account Connect",
business_bank_statement: "Bank Statement",
business_bank_confirm: "Bank Account Confirm",
agreement_review: "Agreement Review",
agreement_sign: "Agreement Sign",
};
type Props = {
merchantId: number;
};
type TaskProp = {
stepName: string;
completedAt: Date;
};
const usePendingTasksQuery = ({ merchantId }: Props) => {
return useQuery({
queryKey: [
MERCHANT_SIDE_PANEL_PREVIEW_API_KEYS.PENDING_TASKS_LIST,
merchantId,
],
// uncomment this for testing purpuses
/* queryFn: async () => {
// Simulate backend response with mock data
return [
{
stepName: "identity_details",
completedAt: new Date("2025-06-13T14:23:00Z"),
},
{
stepName: "identity_id_document",
completedAt: new Date("2025-06-13T15:00:00Z"),
},
{
stepName: "identity_photo_with_id",
completedAt: new Date("2025-06-13T16:30:00Z"),
},
];
},*/
queryFn: async () =>
await customInstance({
url: `/merchants/${merchantId}/onboarding/steps`,
method: "GET",
}),
enabled: Boolean(merchantId),
refetchOnMount: true,
refetchOnWindowFocus: true,
});
};
export const usePendingTask = ({ merchantId }: Props) => {
const { data, isLoading } = usePendingTasksQuery({
merchantId,
});
const completedTasks = data?.data;
const taskList = useMemo(() => {
const completedKeys = new Set(
(completedTasks ?? []).map((task: TaskProp) => task.stepName),
);
return Object.entries(customLabelsStepMap).map(([key, label]) => ({
key,
label,
completed: completedKeys.has(key),
}));
}, [completedTasks]);
const completed = completedTasks?.length || 0;
const disabled = Object.keys(customLabelsStepMap).length - completed;
const counts = {
completed,
disabled,
incomplete: 0,
incomplete2: 0,
hasData: !!data?.data && !isLoading,
};
return { taskList, counts };
};
|