All files / src/features/Settlements/ReconciliationHub/components PerMerchantBreakdownEmptyState.tsx

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
 
 
 
 
 
 
2x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
import { Box } from "@mui/material";
import { StorefrontIcon } from "@phosphor-icons/react";
import GiveEmptyState from "@shared/EmptyState/GiveEmptyState";
import { memo } from "react";
 
/** Empty state for the Per-Merchant Breakdown table (no settlement activity). */
const PerMerchantBreakdownEmptyState = memo(() => (
  // Borderless per the design — just centered content with vertical breathing
  // room (no card border/background).
  <Box sx={{ padding: "48px 24px" }}>
    <GiveEmptyState
      dataTestId="hub-per-merchant-empty"
      title={{
        main: "No merchant activity",
        secondary: "No merchants have settlement activity for this period.",
      }}
      Icon={<StorefrontIcon size={24} weight="regular" />}
      sx={{ "& .empty_text": { gap: "8px" } }}
    />
  </Box>
));
PerMerchantBreakdownEmptyState.displayName = "PerMerchantBreakdownEmptyState";
 
export default PerMerchantBreakdownEmptyState;