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 | 3x 77x 77x 77x 77x 77x 77x 77x 77x 77x 20x 20x 20x 77x 77x 77x 77x 77x 77x | import { memo, useMemo } from "react";
import {
composePermission,
useAccessControl,
} from "features/Permissions/AccessControl";
import RESOURCE_BASE, {
CREATE_DENY_MESSAGE,
OPERATIONS,
} from "@constants/permissions";
import useBusinessOwner from "@components/Settings/ManageTeam/BusinessOwners/useBusinessOwner";
import { BusinessUnionTypes } from "@common/BusinessProfileInputs/BusinessTypeSelect";
import { TBusinessOwner } from "components/Merchants/MerchantPreview/data.types";
import GiveBusinessOwnerItem from "features/Merchants/MerchantSidePanel/GiveMerchantFile/businessOwners/GiveBusinessOwnerItem";
import SectionCardBase from "shared/SidePanel/components/SectionCard/SectionCardBase";
import { adjustAddressType } from "features/Merchants/MerchantSidePanel/GiveMerchantFile/hooks/helpers";
import { useFormContext } from "react-hook-form";
type Props = {
onCloseModal?: (data?: TBusinessOwner, id?: string) => void;
isMerchant?: boolean;
};
const LocalBO = (prop: Props) => {
const { onCloseModal, isMerchant } = prop;
const { watch } = useFormContext();
const values: TBusinessOwner[] = watch("businessOwners");
const businessType = watch("businessProfile.businessType");
const isIndividualSoleProprietorship =
businessType === "individual_sole_proprietorship";
const isBPLinked = watch("businessProfile.isLinkBusinessProfile");
const ownersLength = values?.length || 0;
const limitCreation =
businessType === "individual_sole_proprietorship" && ownersLength >= 1;
const totalOwnerships = useMemo(() => {
return (
values?.reduce((acc, owner) => {
const _ownership = owner.ownership ? +owner.ownership : 0;
return acc + _ownership;
}, 0) || 0
);
}, [values]);
const { addOwnerHandler, editOwnerHandler } = useBusinessOwner({
stakeSum: totalOwnerships,
hasMaxOwners:
(isIndividualSoleProprietorship && ownersLength >= 1) || false,
isController: false,
showTag: true,
onCloseModal,
isSoleProprietorship: isIndividualSoleProprietorship,
isBPLinked,
businessType,
isMerchant,
businessOwnersLength: ownersLength,
});
const onClickAddOwner = () => {
const modalProps = {
onClose: onCloseModal,
isIndividualSoleProprietorship,
businessType: businessType as BusinessUnionTypes,
};
addOwnerHandler({ modalProps });
};
const isAddAllowed = useAccessControl({
resource: composePermission(
isMerchant ? RESOURCE_BASE.MERCHANT : RESOURCE_BASE.ENTERPRISE,
RESOURCE_BASE.LEGAL_ENTITY,
RESOURCE_BASE.PRINCIPAL,
),
operation: OPERATIONS.CREATE,
});
const disableAddButton = limitCreation || !isAddAllowed;
return (
<SectionCardBase
leftTitle="Business Owners"
actions={{
handleAdd: onClickAddOwner,
}}
sx={{ mx: "20px", width: "auto" }}
childrenContainerSx={{
padding: 0,
borderRadius: "20px",
overflow: "hidden",
}}
disabledActions={{
handleAdd: {
disabled: disableAddButton,
tooltipTitle: limitCreation
? "The sole proprietorship legal entities cannot have more than one business owner"
: CREATE_DENY_MESSAGE,
disableTooltip: !disableAddButton,
},
}}
>
{values?.map((owner) => (
<GiveBusinessOwnerItem
idFile={owner.files?.allFiles[0]}
key={owner.id}
owner={adjustAddressType(owner)}
onEdit={(event) => editOwnerHandler(event, adjustAddressType(owner))}
showStatus
/>
))}
</SectionCardBase>
);
};
export default memo(LocalBO);
|