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 | 1x 1x | import { Stack } from "@mui/material";
import { TransactionSidePanelType } from "@features/TransactionPanel/types";
import { useTransactionSummary } from "@features/TransactionPanel/hooks/useTransactionSummary";
import { styled } from "@theme/v2/Provider";
import TransactionSummaryActions from "@features/TransactionPanel/components/Summary/TransactionSummaryActions";
import TransactionSummaryDetails from "@features/TransactionPanel/components/Summary/TransactionSummaryDetails";
import { SummaryContainerBase } from "@features/TransactionPanel/components/atoms";
import { useManageMoneyActions } from "../hooks/useManageMoneyActions";
import TransactionSummary from "@features/TransactionPanel/components/Summary/TopContainer/TopContainer";
import { useMemo } from "react";
import { DesktopDescriptionColumn } from "../../ManageMoneyTable.atoms";
import { parseRow } from "@components/ManageMoney/TransactionTable/transactions.helpers";
import { TransactionStatus } from "@components/ManageMoney/TransactionTable/TransactionInfoModal";
import { moveFundsArray } from "@components/ManageMoney/TransactionTable/transactions.types";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
type Props = {
data: any;
isFirst?: boolean;
isLast?: boolean;
setSelectedRow?: (newIdx: string | number) => void;
handleSidePanelOpen?: (type: TransactionSidePanelType) => void;
chooseTransaction?: (
loading: boolean,
) => ((prevWasLoading: boolean, data: any) => void) | undefined;
isFees?: boolean;
open?: boolean;
isManageMoney?: boolean;
};
const ManageMoneySummary = ({
data,
isFirst,
isLast,
handleSidePanelOpen,
setSelectedRow,
chooseTransaction,
isManageMoney,
}: Props) => {
const { section, formattedCreatedAt, isFees, isAcquirerTransfer } =
useTransactionSummary({
data,
handleSidePanelOpen,
isManageMoneyPanel: true,
});
const { isMobileView } = useCustomThemeV2();
const isTransferFunds = moveFundsArray.includes(data?.transactionType);
const isTransfer =
data?.displayType === TransactionStatus.MONEY_TRANSFER || isTransferFunds;
const { actions } = useManageMoneyActions({
handleSidePanelOpen,
isTransfer,
});
const ActionsSection = useMemo(
() => (
<TransactionSummaryActions
data={data}
setSelectedRow={setSelectedRow}
isFirst={isFirst}
isLast={isLast}
setIsCustomerPanelOpen={() => {}}
chooseTransaction={chooseTransaction}
customActions={actions}
isTopCard
noOptions
/>
),
[data, setSelectedRow, isFirst, isLast, chooseTransaction, actions],
);
const parsedData = parseRow(data, false);
const descriptionProps = useMemo(
() =>
({
...parsedData,
transactionType: data?.transactionType || data.originalTransactionType,
isSidepanel: true,
} as any),
[parsedData, data?.transactionType, data?.originalTransactionType],
);
const DescriptionContent = DesktopDescriptionColumn(descriptionProps);
return (
<Stack gap="20px">
{!isFees && DescriptionContent}
<TransactionSummary
data={data}
actions={ActionsSection}
formattedCreatedAt={formattedCreatedAt}
isManageMoney={isManageMoney}
isFees={isFees}
/>
{isMobileView && ActionsSection}
{!isAcquirerTransfer && (
<SummaryContainer>
{section?.items.length > 0 && (
<TransactionSummaryDetails
list={section?.items}
isHideBorder={true}
/>
)}
</SummaryContainer>
)}
</Stack>
);
};
const SummaryContainer = styled(SummaryContainerBase)({
padding: "0 20px",
});
export default ManageMoneySummary;
|