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 | 80x 80x 80x 80x 80x 80x 80x 52x | import React from "react";
import { Box, Stack } from "@mui/material";
import DeclinedContainer from "../DeclinedContainer";
import GiveText from "@shared/Text/GiveText";
import { checkPortals } from "@utils/routing";
import { styled } from "@theme/v2/Provider";
import { SummaryContainerBase } from "../../atoms";
import GiveDivider from "@shared/GiveDivider/GiveDivider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { SecondRow } from "./SecondRow";
import GiveDateTooltip from "@shared/Tooltip/GiveDateTooltip";
type TransactionSummaryProps = {
data: Record<string, any>;
isDeclined?: boolean;
isFees?: boolean;
isTransfer?: boolean;
actions?: React.ReactNode;
formattedCreatedAt?: string;
isManageMoney?: boolean;
};
export default function TransactionSummary({
data,
actions,
isFees,
isDeclined,
isTransfer,
formattedCreatedAt,
isManageMoney = false,
}: TransactionSummaryProps) {
const { isMerchantPortal } = checkPortals();
const showDeclineReason = Boolean(
isDeclined && data?.mspStatusDetails?.msp_response_code,
);
const feeLabel = data?.transactionType?.replace(/_/g, " ");
return (
<>
{showDeclineReason && (
<DeclinedContainer mspStatusDetails={data?.mspStatusDetails} />
)}
<Stack flex={1} gap="36px" py={0}>
<CardSummary
data={data}
actions={actions}
formattedCreatedAt={formattedCreatedAt}
isTransfer={isTransfer}
isManageMoney={isManageMoney}
isFees={isFees}
/>
{isFees && <FeeSummary label={feeLabel} />}
</Stack>
</>
);
}
// === SUBCOMPONENTS ===================================================
type CardSummaryProps = {
data: Record<string, any>;
actions?: React.ReactNode;
formattedCreatedAt?: string;
isTransfer?: boolean;
isManageMoney?: boolean;
isFees?: boolean;
};
function CardSummary({
data,
actions,
formattedCreatedAt,
isTransfer,
isManageMoney,
isFees,
}: CardSummaryProps) {
return (
<SummaryContainer width="100%">
<FirstRow actions={actions} formattedCreatedAt={formattedCreatedAt} />
<GiveDivider mt="12px" bgType="transparent" />
<SecondRow
data={data}
isTransfer={isTransfer}
isManageMoney={isManageMoney}
isFees={isFees}
/>
</SummaryContainer>
);
}
type FirstRowProps = {
actions?: React.ReactNode;
formattedCreatedAt?: string;
};
function FirstRow({ actions, formattedCreatedAt }: FirstRowProps) {
const { isMobileView } = useCustomThemeV2();
return (
<Box
display="flex"
justifyContent={!isMobileView ? "space-between" : "flex-start"}
alignItems="center"
>
{!isMobileView && actions}
<GiveDateTooltip>
<GiveText variant="bodyS" color="secondary">
{formattedCreatedAt}
</GiveText>
</GiveDateTooltip>
</Box>
);
}
type FeeSummaryProps = {
label?: string;
};
function FeeSummary({ label }: FeeSummaryProps) {
return (
<GiveText variant="bodyM" sx={{ textTransform: "capitalize" }}>
Summary {label}
</GiveText>
);
}
// === STYLED COMPONENTS ===============================================
const SummaryContainer = styled(SummaryContainerBase)({
padding: "20px",
});
|