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 | 2x 2x 10x 10x 10x 10x 2x | import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import NiceModal from "@ebay/nice-modal-react";
import { Box, Stack } from "@mui/material";
import GivePopup from "@shared/Popup/GivePopup";
import GiveText from "@shared/Text/GiveText";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { ReactNode } from "react";
import CopyButton from "@common/CopyButton";
import { DOCUMENTATION_LINK_TITLE } from "@components/DeveloperApi/consts";
import GiveLink from "@shared/Link/GiveLink";
import {
PopupIconTypeProps,
PopupTypeProps,
} from "@shared/Popup/GivePopupTypes";
import { useActions } from "@features/MerchantPortal/DeveloperApi/hooks/useMerchantsApiKeysActions";
import { getDocsDomain } from "../utils";
import { StyledAPIKey } from "@components/DeveloperApi/components/GeneralModalContent";
export const RolledKeyModalBody = ({ res }: { res: any }) => {
const DocumentationLink = getDocsDomain();
return (
<Box>
<GiveText variant="bodyS">
Your API Key has been successfully rolled
</GiveText>
<StyledAPIKey sx={{ mt: "16px", minHeight: "fit-content" }}>
<GiveText variant="bodyS" fontFamily="Oxygen Mono">
{res.apiKey}
</GiveText>
<CopyButton
text={res.apiKey}
sx={{ height: "25px" }}
label="Key copied!"
customCopySx={{
position: "initial",
paddingY: "initial",
height: "25px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
/>
</StyledAPIKey>
<Stack spacing={0.5} direction="row" alignItems="center">
<GiveText variant="bodyS" sx={{ mt: "4px" }}>
For further guidance on how to get started, check out our{" "}
</GiveText>
<GiveLink
href={DocumentationLink}
rel="noopener noreferrer"
target="_blank"
>
{DOCUMENTATION_LINK_TITLE}
</GiveLink>
</Stack>
</Box>
);
};
type Props = {
title: string;
body: string | ReactNode;
primaryActionLabel: string;
action: string;
actionId: string;
keyId: string;
type: string;
successMessage?: string;
};
const DeveloperApiActionModal = NiceModal.create(
({
body,
title,
primaryActionLabel,
action,
keyId,
type,
successMessage,
}: Props) => {
const { isMobileView } = useCustomTheme();
const { open, onClose } = useNiceModal();
const { fireAction, isLoading } = useActions({
keyId,
onClose,
successMessage,
});
return (
<GivePopup
type={type as PopupTypeProps}
title={title}
description={body}
iconType={
action === "delete" ? "destructive" : (action as PopupIconTypeProps)
}
open={open}
onClose={onClose}
isMobile={isMobileView}
buttons={[
{
label: "Cancel",
onClick: onClose,
variant: "ghost",
},
{
label: `Yes, ${primaryActionLabel}`,
onClick: () => fireAction(action),
variant: "filled",
submitType: "submit",
color: ["delete", "revoke"].includes(action)
? "destructive"
: "primary",
disabled: isLoading,
},
]}
sx={{
"& .MuiPaper-root": {
height: "fit-content",
},
"& .MuiDialogTitle-root+.MuiDialogContent-root": {
paddingTop: "0 !important",
},
}}
/>
);
},
);
export default DeveloperApiActionModal;
|