All files / src/features/MerchantPortal/DeveloperApi/modals DeveloperApiPanel.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
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
2x
13x
13x
 
13x
13x
13x
13x
 
13x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import NiceModal from "@ebay/nice-modal-react";
import GiveSidePanel from "@shared/SidePanel/GiveSidePanel";
import {
  SidePanelBodyWrapper,
  SidePanelContainerWrapper,
} from "@shared/SidePanel/SidePanelAtoms";
import MainHeader from "../components/MainHeader";
import { useGetMerchantsApiKeyTable } from "../hooks/useGetMerchantsApiKeyTable";
import { useDevelperPanel } from "../hooks/useDeveloperPanel";
import LoadingState from "features/ChangeLog/LoadingState";
import DeveloperPanelContent from "../components/DeveloperPanelContent";
import { Box } from "@mui/material";
import { useGetDeveloperApi } from "@features/MerchantPortal/DeveloperApi/hooks/useGetDeveloperApi";
export const CAMPAIGN_PANEL_WIDTH = 600;
 
const MerchantDeveloperApiPanel = NiceModal.create((props: any) => {
  const { tableRowData: rowData, setSelectedRow, isFirst, isLast } = props;
  const { data, isLoading } = useGetDeveloperApi({ apiKeyId: rowData?.id });
 
  const { onClose, open } = useNiceModal();
  const { getMenuActions } = useGetMerchantsApiKeyTable(data);
  const menuActions = getMenuActions({ rowData: data, callback: onClose });
  const { handlers } = useDevelperPanel(setSelectedRow);
 
  return (
    <GiveSidePanel
      width={CAMPAIGN_PANEL_WIDTH}
      open={open}
      onClose={onClose}
      data-testid="generate-api-key-modal"
    >
      <SidePanelContainerWrapper>
        <MainHeader
          isFirst={isFirst}
          isLast={isLast}
          onClose={onClose}
          isLoading={isLoading}
          handlers={handlers}
          actions={menuActions}
        />
        {isLoading ? (
          <Box sx={{ padding: "20px" }}>
            <LoadingState />
          </Box>
        ) : (
          <SidePanelBodyWrapper
            sx={{
              padding: "20px",
              scrollbarGutter: "unset",
              overflowX: "hidden",
            }}
          >
            {data && <DeveloperPanelContent rowData={data} />}
          </SidePanelBodyWrapper>
        )}
      </SidePanelContainerWrapper>
    </GiveSidePanel>
  );
});
 
export default MerchantDeveloperApiPanel;