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 | 52x 80x 80x 80x 25x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 25x 25x 80x | import { Box } from "@mui/material";
import GiveTabs from "@shared/Tabs/GiveTabs";
import { useAppTheme } from "@theme/v2/Provider";
import React, { useMemo } from "react";
import { getTransactionTabColor } from "../utils";
import { TransactionType } from "@features/TransactionPanel/shared.types";
import GiveText from "@shared/Text/GiveText";
import { getDisplayStatusPortal } from "@components/ManageMoney/TransactionTable/transactions.helpers";
import { feesArray } from "@components/ManageMoney/TransactionTable/transactions.types";
import { capitalizeFirstLetter } from "@utils/index";
import { TextSkeleton } from "@common/Skeleton/atoms";
import { TransactionTableRowParsed } from "@components/ManageMoney/TransactionTable/transactions.types";
import { GiveTabItem } from "@shared/Tabs/GiveTab.types";
type Props = {
currentTab: number;
setCurrentTab: React.Dispatch<React.SetStateAction<number>>;
tabsData?: TransactionTableRowParsed[];
isBackwardFlow?: boolean; // show backward flow
isLoadingMore?: boolean; // New prop to indicate more tabs are loading
};
const TransactionHistory = ({
currentTab,
setCurrentTab,
tabsData,
isBackwardFlow,
isLoadingMore,
}: Props) => {
const { palette, breakpoints } = useAppTheme();
const tabsLength = tabsData?.length || 1;
const formattedTabs = useMemo(() => {
const baseTabs: GiveTabItem[] =
tabsData?.map((tab, index) => {
let firstLabel = "";
const isFee = feesArray.includes(tab?.transactionType || "");
const isMoveFund = tab?.transactionType === "move_funds";
const isSettled = tab?.processingState === "settled";
Iif (
["reserve_deposit", "reserve_release"].includes(
tab.transactionType || "",
)
)
firstLabel = "Reserve";
Iif (tab?.transactionType === "transfer") firstLabel = "Transfer";
let status: string;
Iif (isMoveFund && isSettled) status = "Sent";
else Iif (isFee) status = capitalizeFirstLetter(tab.processingState);
else status = getDisplayStatusPortal(tab);
const usedStatus =
tab?.transactionType === TransactionType.PRE_CHARGEBACK_REFUND ||
isFee || isMoveFund
? status
: tab?.status;
return {
label: `${firstLabel} ${status}`.trim(),
value: index.toString(),
startItem: (
<Box
sx={{
backgroundColor: getTransactionTabColor(usedStatus, palette),
width: "6px",
height: "6px",
borderRadius: "6px",
}}
/>
),
...(tabsLength > 1 &&
isBackwardFlow &&
index === tabsLength - 1 && {
endItem: (
<GiveText variant="bodyS" color="secondary">
(Original Transaction)
</GiveText>
),
}),
};
}) || [];
// Add fake loading tab if isLoading More tabs
Iif (isLoadingMore) {
baseTabs.push({
label: <TextSkeleton width="120px" height={16} />,
value: `loading`,
disabled: true,
startItem: (
<Box
sx={{
backgroundColor: palette.surface?.tertiary,
width: "6px",
height: "6px",
borderRadius: "6px",
}}
/>
),
});
}
return baseTabs;
}, [tabsData, isLoadingMore]);
return (
<GiveTabs
items={formattedTabs}
type="line"
selected={currentTab?.toString()}
variant="underline"
onClick={(val: string) => setCurrentTab(+val)}
containerSx={{
display: "flex",
overflow: "auto",
scrollbarWidth: "none",
[breakpoints.down("v2_sm")]: {
width: "calc( 100vw - 40px )",
},
gap: "20px",
}}
tabSx={{
"& p": {
whiteSpace: "nowrap",
},
}}
/>
);
};
export default TransactionHistory;
|