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 | 33x 48x 48x 48x | import { useAppTheme } from "@theme/v2/Provider";
import { Stack } from "@mui/material";
import AcceptPaymentsOn from "@assets/iconsV2/AcceptPaymentsOn";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { ArrowCircleUpRightIcon, CreditCardIcon, ClockIcon } from "@phosphor-icons/react";
type CanManageMoneyProps = {
canProcess: boolean;
canTransfer: boolean;
isOnApprovalDelay: boolean;
};
const CanManageMoney = ({
canProcess,
canTransfer,
isOnApprovalDelay,
}: CanManageMoneyProps) => {
const { palette } = useAppTheme();
const ProcessIcon = canProcess ? AcceptPaymentsOn : CreditCardIcon;
return (
<Stack direction="row" gap="12px">
{isOnApprovalDelay && (
<>
<GiveTooltip
title="Merchant will be activated and notified after the 2 hours from the approval"
color="default"
placement="top"
>
<ClockIcon
data-testid="give-clock-icon"
size={18}
color={palette.text.tertiary}
/>
</GiveTooltip>
</>
)}
<GiveTooltip
title={canProcess ? "Can accept payments" : "Can't accept payments"}
color="default"
placement="top"
>
<ProcessIcon
data-testid="give-process-icon"
size={18}
color={
canProcess ? palette.primitive?.success[50] : palette.text.tertiary
}
/>
</GiveTooltip>
<GiveTooltip
title={canTransfer ? "Can send money" : "Can't send money"}
color="default"
placement="top"
>
<ArrowCircleUpRightIcon
data-testid="give-sendmoney-icon"
size={18}
fill={
canTransfer ? palette.primitive?.success[50] : palette.text.tertiary
}
/>
</GiveTooltip>
</Stack>
);
};
export default CanManageMoney;
|