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 120 121 122 123 124 | 167x 167x 167x 167x 91x 72x 36x 167x 164x 158x 48x 158x 48x 144x 167x 167x 55x 167x 4x 4x 4x 2x 4x 4x 167x 167x 4x 167x 5x 3x 5x 101x 3x 3x 101x 5x | import { processorMap } from "@features/Merchants/MerchantSidePanel/constants";
import { useGetProcessors } from "@hooks/acquirer-api/merchants/useGetProcessors";
import { useGetCurrentMerchantId } from "@hooks/common";
import { customInstance } from "@services/api";
import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery } from "react-query";
export function useProcessorPermission({
enabled,
permissionData,
memberId,
}: {
enabled: boolean;
permissionData?: string[];
memberId: number;
}) {
const { merchantId } = useGetCurrentMerchantId();
const { updateProcessorPermission } = useUpdateProcessorPermission(
merchantId,
memberId,
);
const { data } = useGetProcessors(merchantId, enabled);
const processorOptions = useMemo(() => {
if (!data) return defaultOptions;
const processorOptions = data?.map((processor) => ({
value: processor.name,
label: processorMap[processor.name],
}));
return [...defaultOptions, ...processorOptions];
}, [data]);
const defaultValue = useMemo(() => {
if (!permissionData) return "all";
const isAll = processorOptions
.slice(1, processorOptions.length)
.every((item) => permissionData.includes(item.value));
if (isAll) return "all";
else
return (
processorOptions.find((item) => permissionData.includes(item.value))
?.value || "all"
);
}, [processorOptions, permissionData]);
const [selectedValue, setSelectedValue] = useState(defaultValue);
//update the state with defaultValue if the defaultValue changes - this should only happen if prop changes for example on re-render
useEffect(() => {
Iif (defaultValue !== selectedValue) setSelectedValue(defaultValue);
}, [defaultValue]);
const handleUpdateProcessorPermission = (e: any) => {
Iif (!e?.target?.value || e.target.value === selectedValue) return;
setSelectedValue(e.target.value); //optimistically update for instant UI changes and handle error after request is done
const usedValue =
e.target.value === "all"
? data?.map((option) => option.name)
: [e.target.value];
Iif (!usedValue) return;
updateProcessorPermission.mutate(
{
processorNames: usedValue,
},
//onError reset to original
{ onError: () => setSelectedValue("all") },
);
};
return { processorOptions, selectedValue, handleUpdateProcessorPermission };
}
export function useUpdateProcessorPermission(
accountId: number,
memberId: number,
) {
const updateProcessorPermission = useMutation(
(payload: { processorNames: string[] }) => {
return customInstance({
url: `/accounts/${accountId}/members/${memberId}/permissions`,
method: "PATCH",
data: payload,
});
},
);
return { updateProcessorPermission };
}
const getProcessorPermission = (accountId?: number, memberId?: string) => {
return customInstance({
url: `/accounts/${accountId}/members/${memberId}/processors`,
method: "GET",
});
};
export const useGetProcessorPermission = (
accountId?: number,
memberId?: string,
enabled = true,
) => {
const { data, error, isLoading } = useQuery(
["processor-permission", accountId, memberId],
async () => {
const data = await getProcessorPermission(accountId, memberId);
return data;
},
{
refetchOnMount: false,
refetchOnWindowFocus: false,
enabled: Boolean(accountId && memberId && enabled),
},
);
return { error, isLoading, data };
};
const defaultOptions = [
{
value: "all",
label: "All Processors",
},
];
|