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 | 10x 86x 86x 86x 86x 86x 86x 86x 86x 12x 12x 86x 86x 86x | import { useEffect, useState } from "react";
import GiveMerchantTableActions from "@shared/MerchantsProviders/GiveMerchantTableActions";
import {
ArrowUpRightIcon,
CopyIcon,
DotsThreeVerticalIcon,
PlusIcon,
} from "@phosphor-icons/react";
import { Stack } from "@mui/material";
import { DEV_API_DOCUMENTATION_TITLE } from "../constants";
import { getDocsDomain } from "../utils";
import { useAppTheme } from "@theme/v2/Provider";
import { showMessage } from "@common/Toast";
import { useGetMerchantById } from "@hooks/enterprise-api/account/useGetMerchants";
import { checkPortals } from "@utils/routing";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveExpandingSearch from "@shared/SearchBar/GiveExpandingSearch";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import { CompactTableActionsProps } from "componentsV2/Table/Table.types";
type Props = {
handleSearchChange?: (value: string) => void;
search: string;
} & CompactTableActionsProps;
const DeveloperActionsHandler = ({
handleSearchChange,
search,
compact = false,
handleCreate,
createLabel,
disableCreate,
}: Props) => {
const DocumentationLink = getDocsDomain();
const { palette } = useAppTheme();
const { data: merchantData } = useGetMerchantById();
const { isEnterprisePortal } = checkPortals();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleCopyMerchantId = () => {
if (!navigator || !("clipboard" in navigator)) {
return showMessage("Error", "Unable to copy Merchant ID");
}
navigator?.clipboard?.writeText(merchantData?.objID ?? "");
showMessage("Info", "Merchant ID copied to clipboard");
};
const openDocumentation = () =>
window.open(DocumentationLink, "_blank", "noopener noreferrer");
useEffect(() => {
return () => {
handleSearchChange?.("");
};
}, []);
const actions = [
{
label: "Merchant ID",
endIcon: <CopyIcon color={palette.icon?.["icon-primary"]} />,
handleAction: handleCopyMerchantId,
hidden: isEnterprisePortal,
},
{
label: DEV_API_DOCUMENTATION_TITLE,
endIcon: <ArrowUpRightIcon color={palette.icon?.["icon-primary"]} />,
handleAction: openDocumentation,
},
];
Iif (compact) {
const compactMenuOptions = [
...(handleCreate
? [
{
text: createLabel ?? "Add API Key",
IconRight: PlusIcon,
disabled: disableCreate,
onClick: () => handleCreate(),
},
]
: []),
{
text: "Merchant ID",
IconRight: CopyIcon,
hidden: isEnterprisePortal,
onClick: handleCopyMerchantId,
},
{
text: DEV_API_DOCUMENTATION_TITLE,
IconRight: ArrowUpRightIcon,
onClick: openDocumentation,
},
];
return (
<Stack direction="row" alignItems="center" gap="8px">
<GiveExpandingSearch value={search} onChange={handleSearchChange} />
<GiveIconButton
Icon={DotsThreeVerticalIcon}
variant="ghost"
onClick={(e) => setAnchorEl(e.currentTarget)}
/>
<ContextualMenu
anchorEl={anchorEl}
options={compactMenuOptions}
handleClose={() => setAnchorEl(null)}
color="primary"
texture="solid"
/>
</Stack>
);
}
return (
<GiveMerchantTableActions
actions={actions}
search={search}
onSearchChange={handleSearchChange}
searchOnEnter={true}
sx={{ mb: "12px" }}
/>
);
};
export default DeveloperActionsHandler;
|