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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | 109x 109x 109x 109x 109x 109x 109x 109x 109x 2x 107x 107x 107x 107x 214x 214x 194x | import { Stack } from "@mui/material";
import { ChatsCircleIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useConversationsModal } from "features/Minibuilders/Conversations/hooks/useConversationsModal";
import TitleLabel from "./components/TitleLable";
import { useNotifications } from "features/Merchants/MerchantSidePanel/WithRepository/Challenges/hooks/useNotifications";
import { checkPortals } from "@utils/routing";
import { useEnterprisePermissions } from "@components/AcquirerEnterprises/CreateEnterprise/hooks/useEnterprisePermissions";
import GiveLink from "@shared/Link/GiveLink";
import ProfileImage from "@shared/ProfileImage/ProfileImage";
import useChangeProfileImage from "./hooks/useChangeProfileImage";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { EDIT_DENY_MESSAGE } from "@constants/permissions";
import { ArrowPlacement } from "@shared/Tooltip/GiveTooltip.types";
import { TPrimaryAccountHolder } from "@components/Merchants/MerchantPreview/data.types";
import PanelLoadingSkeleton from "features/Merchants/MerchantSidePanel/components/PanelLoadingSkeleton";
interface Props {
title: string;
imageUrl?: string;
panelType?: "merchantSidePanel" | "other";
id: number;
pahData?: TPrimaryAccountHolder;
statusName?: string;
hideConversationButtons?: boolean;
isLoading?: boolean;
hasError?: boolean;
}
function SidePanelTitle({
title,
imageUrl,
panelType,
id,
pahData,
statusName,
hideConversationButtons = false,
isLoading = false,
hasError = false,
}: Props) {
const { isMobileView } = useCustomThemeV2();
const { handleOpenConversationsModal } = useConversationsModal();
const { openNotifyMerchantModal } = useNotifications({
merchantID: id,
statusName: statusName || "",
});
const { merchant_underwriting } = useEnterprisePermissions();
const { isEnterprisePortal } = checkPortals();
// We are hiding the action items section if merchant_underwriting is false and we are in enterprise portal
const isHidden =
(!merchant_underwriting && isEnterprisePortal) || hideConversationButtons;
const { onUpload, onDelete, disabled } = useChangeProfileImage(id);
const isNotifyDisabled = !pahData?.id || pahData?.memberStatus !== "joined";
if ((isLoading || hasError) && panelType === "merchantSidePanel") {
return <PanelLoadingSkeleton variant="title" />;
}
if (panelType === "merchantSidePanel") {
const handleClick = () => {
openNotifyMerchantModal({});
};
const actionItemList = [
{
name: "Notify Merchant",
Icon: PaperPlaneTiltIcon,
onClick: handleClick,
hidden: isHidden,
disabled: isNotifyDisabled,
},
{
name: "View All Conversations",
Icon: ChatsCircleIcon,
onClick: () => handleOpenConversationsModal(true),
hidden: isHidden,
},
];
return (
<Stack
flexDirection="row"
justifyContent="space-between"
alignItems={isMobileView ? "start" : "end"}
maxWidth="100%"
gap={1}
>
<Stack flexShrink={1} overflow="hidden">
<TitleLabel title={title} />
<Stack
flexDirection={!isMobileView ? "row" : "column"}
gap={!isMobileView ? "21px" : "20px"}
mt="16px"
>
{actionItemList.map((item) => {
const { Icon, name, onClick, hidden, disabled } = item || {};
if (hidden) return null;
return (
<GiveTooltip
key={name}
sx={{ width: "fit-content" }}
title="Assign a Primary Account Holder to notify the merchant"
disableHoverListener={!disabled}
>
<GiveLink
component="button"
Icon={Icon}
onClick={onClick}
disabled={disabled}
>
{name}
</GiveLink>
</GiveTooltip>
);
})}
</Stack>
</Stack>
<GiveTooltip
arrowPlacement={ArrowPlacement.TOP_START}
title={EDIT_DENY_MESSAGE}
color="default"
disableHoverListener={!disabled}
sx={{ width: "fit-content" }}
>
<ProfileImage
imageUrl={imageUrl}
title={title}
onUpload={onUpload}
onDelete={onDelete}
disabled={disabled}
/>
</GiveTooltip>
</Stack>
);
} else Ereturn <div> other panel titles created here</div>;
}
export default SidePanelTitle;
|