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 | 13x 6x 6x 6x 6x 6x 6x 6x | import React, { memo } from "react";
//mui
import { Stack } from "@mui/material";
import { palette } from "@palette";
import { useTheme, useMediaQuery } from "@mui/material";
import { ReportActionButtons } from "@components/CampaignReport";
import NiceModal from "@ebay/nice-modal-react";
import { NEW_PEEK_MODE_MODAL, PEEK_MODE_MODAL } from "modals/modal_names";
import { Image } from "@common/StyledImage/Image";
import placeholder from "assets/images/Placeholder.png";
import { Text, TruncateText } from "@common/Text";
import { useAppDispatch } from "@redux/hooks";
import { setSelectedPaymentFormID } from "@redux/slices/products";
import { FormType } from "@sections/PayBuilder/utils";
type DonationBannerProps = {
title: string;
onMenuOpen?: (e?: any) => void;
imgSrc: string;
previewLink?: string;
handleEdit?: (e: any) => void;
handleOpenMenu?: (e: any) => void;
secondaryActionButton?: React.ReactNode;
createdAt: string;
endOfEvent?: boolean;
isEditProductAllowed?: boolean;
isNewForm?: boolean;
paymentId?: number;
campaignType?: string;
};
const HeaderListingBanner = ({
secondaryActionButton,
previewLink,
handleEdit,
handleOpenMenu,
title,
imgSrc,
createdAt,
endOfEvent = false,
isEditProductAllowed,
isNewForm = false,
paymentId,
campaignType,
}: DonationBannerProps) => {
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
const dispatch = useAppDispatch();
const hidePreview = campaignType === FormType.INVOICES;
const modalName = isNewForm ? NEW_PEEK_MODE_MODAL : PEEK_MODE_MODAL;
const handlePreview = () => {
if (isNewForm) {
dispatch(setSelectedPaymentFormID(String(paymentId)));
}
if (previewLink) {
NiceModal.show(modalName, {
previewLink,
state: { preview: true, campaignType },
title,
});
}
};
return (
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Stack direction="row" gap={3}>
<Image alt="logo" src={imgSrc ? `${imgSrc}/original` : placeholder} />
<Stack>
<TruncateText
lineClamp={1}
fontSize={24}
variant="h6"
fontWeight="medium"
lineHeight="normal"
color={palette.neutral[80]}
>
{title}
</TruncateText>
<Text
variant="body"
fontWeight="book"
fontSize={14}
color={palette.neutral[70]}
>
{/* {type} */}
{createdAt && (
<span
style={{
fontWeight: 300,
color: palette.neutral[80],
}}
>
Created on <span style={{ fontWeight: 400 }}>{createdAt}</span>
</span>
)}
</Text>
</Stack>
</Stack>
{isDesktop && (
<ReportActionButtons
isEditProductAllowed={isEditProductAllowed}
secondaryButton={secondaryActionButton}
onSecondaryClick={previewLink && !hidePreview ? handlePreview : null}
onPrimaryClick={handleEdit}
isDisabledPrimaryClick={endOfEvent}
onMenuOpen={handleOpenMenu}
/>
)}
</Stack>
);
};
export default memo(HeaderListingBanner);
|