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 | 80x 80x 80x 80x 80x 80x 80x 80x 10x 80x 80x 80x 80x 80x 160x 80x 80x | import GiveSelect from "@shared/GiveInputs/GiveSelect";
import { memo, useMemo } from "react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { CustomToolTip as PermissionTooltip } from "componentsV2/Table/CustomTooltip";
import { useAccessControl } from "features/Permissions/AccessControl";
import RESOURCE_BASE, {
ACTION_DENY_MESSAGE,
OPERATIONS,
} from "@constants/permissions";
import { checkPortals } from "@utils/routing";
import { useMerchantSidePanelContext } from "@features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
import { useUpdateMerchantStatus } from "@features/Merchants/MerchantSidePanel/ApprovalFlowPanel/hooks/useUpdateMerchantStatus";
import { ApprovalType } from "@features/Merchants/MerchantSidePanel/Provider/types";
function RecommendationInput() {
const { isMobileView } = useCustomThemeV2();
const {
isUnderwritingView,
data,
setStaticApprovalType,
staticApprovalType,
isKYBTab,
isSponsorView,
} = useMerchantSidePanelContext();
const lastInternalApprovalType = data?.status?.lastInternalApprovalType;
const { handleUpdateMerchantRecommendation, isLoading } =
useUpdateMerchantStatus({
merchantId: data?.merchantInfo?.merchantID,
});
const isKYB = data?.status?.statusName === "ready_for_kyb";
const isKYBSectionName = data?.header?.onbSectionName === "kyb";
const isDeclined = data?.status?.statusName === "declined";
const recommendationOptions = useMemo(() => {
return [
{
label: "Auto-Approval",
value: "auto_approval",
isSelected: lastInternalApprovalType === "auto_approval",
},
{
label: "Pre-Approval",
value: "pre_approval",
isSelected: lastInternalApprovalType === "pre_approval",
},
];
}, [lastInternalApprovalType]);
const hasEditMerchantPermission = useAccessControl({
resource: RESOURCE_BASE.MERCHANT,
operation: OPERATIONS.UPDATE,
});
const { isEnterprisePortal } = checkPortals();
const allowedEditMerchant = isEnterprisePortal
? false
: hasEditMerchantPermission;
const onSaveChange = async (newValue: ApprovalType) => {
if (newValue === lastInternalApprovalType) return;
if (
isUnderwritingView ||
data.status.statusName === "ready_for_underwriting" ||
data.status.statusName === "declined"
) {
setStaticApprovalType(newValue);
return;
}
if (isSponsorView)
handleUpdateMerchantRecommendation(newValue as ApprovalType);
};
const defaultValue =
recommendationOptions.find(
(option) => option.value === lastInternalApprovalType,
)?.value || staticApprovalType;
const isDisabled =
isLoading ||
!allowedEditMerchant ||
isKYB ||
isKYBTab ||
(isKYBSectionName && isDeclined);
return (
<PermissionTooltip
showToolTip={!allowedEditMerchant}
message={ACTION_DENY_MESSAGE}
placement="top"
alignment="end"
>
<GiveSelect
name="recommendation"
label="Recommendation"
options={recommendationOptions}
useContextualMenu
contextualMenuProps={{
...(!isMobileView && {
color: "transparent",
texture: "blurred",
}),
}}
disabled={isDisabled}
value={defaultValue}
withIconOffset={false}
onChange={(e) => {
const value = e?.target?.value as ApprovalType;
onSaveChange(value);
}}
/>
</PermissionTooltip>
);
}
export default memo(RecommendationInput);
|