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 | 12x | import {
AssigneesType,
useGetUnderwriters,
} from "@components/Merchants/MerchantPreview/hooks/useGetTeamMembers";
import Selector from "./Selector";
import { FormFields } from "./utils";
import { SelectorOption } from "./SelectorOption";
import { useMemo, useState } from "react";
interface IAssigneesSelector {
id: number;
handleMultiSelect: (fieldName: FormFields, value: SelectorOption) => void;
selectedValues?: SelectorOption[];
type?: AssigneesType;
}
const AssigneesSelector = ({
id,
handleMultiSelect,
selectedValues,
type,
}: IAssigneesSelector) => {
const [searchValue, setSearchValue] = useState("");
const { data, isLoading } = useGetUnderwriters({
merchantId: id,
type,
});
const options: SelectorOption[] = useMemo(() => {
if (!data) return [];
return data
?.filter((x: any) => x.roleDisplayName !== "Primary Account Holder") //this Check is specific to this use case. If in the future this component si ment to be reuse, take in consideratiosn if this filter makes sense
?.map(
({
user: {
firstName = "",
lastName = "",
accID = "",
imageURL = "",
email = "",
} = {},
}: any) => {
const name =
firstName && lastName ? `${firstName} ${lastName}` : email;
return {
label: name,
value: email,
id: accID,
imageURL: imageURL,
};
},
);
}, [data]);
const filteredOptions = options.filter((item) =>
item?.label?.toLowerCase().includes(searchValue.toLowerCase()),
);
return (
<Selector
options={filteredOptions}
loading={isLoading}
value={selectedValues}
searchedWord={searchValue}
handleChange={(val) =>
handleMultiSelect("underwriterEmail", val as SelectorOption)
}
handleSearch={setSearchValue}
handleDeselect={(val) => handleMultiSelect("underwriterEmail", val)}
multiSelect
dataTestId="assignees-selector"
/>
);
};
export default AssigneesSelector;
|