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 | 2x 2x 23x 23x 23x 23x 23x 23x 23x 23x 46x 46x 23x 46x 46x 46x 2x 94x 46x | import {
GENERAL_NOT_ALLOWED,
MERCHANT_PROD_KEY_TOOLTIP_MESSAGE,
PROVIDER_PROD_KEY_TOOLTIP_MESSAGE,
SUSPENDED_PROFILE_PROD_KEY_TOOLTIP_MESSAGE,
SUSPENDED_PROFILE_SANDBOX_KEY_TOOLTIP_MESSAGE,
} from "@constants/constants";
import { useGetMerchantById } from "@hooks/enterprise-api/account/useGetMerchants";
import { Box, FormControlLabel, Stack } from "@mui/material";
import GiveRadio from "@shared/Radio/GiveRadio";
import GiveText from "@shared/Text/GiveText";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { styled } from "@theme/v2/Provider";
import { checkPortals } from "@utils/routing";
import { useFormContext } from "react-hook-form";
const radios = [
{
title: "Sandbox",
description: `Use this environment for testing and development purposes. Data in the sandbox environment is not live and won't affect your data`,
},
{
title: "Production",
description: `Choose this environment when you're ready to deploy your application or integrate with live data. This environment is suitable for your production-ready applications`,
},
];
const ApiKeyEnvInput = ({
isProductionOptionEnabled,
}: {
isProductionOptionEnabled: boolean;
}) => {
const { watch, setValue } = useFormContext();
const { isEnterprisePortal } = checkPortals();
const { data: merchantData } = useGetMerchantById();
const isApproved = merchantData?.onbStateName === "approved";
const isSuspended = merchantData?.onbStateName === "suspended";
const isDeclined = merchantData?.onbStateName === "declined";
const isDeleted = Boolean(merchantData?.deletedAt);
const getTooltipMessage = (type: string) => {
Iif (isSuspended)
return type === "production"
? SUSPENDED_PROFILE_PROD_KEY_TOOLTIP_MESSAGE
: SUSPENDED_PROFILE_SANDBOX_KEY_TOOLTIP_MESSAGE;
Eif (isDeclined || isDeleted || !isApproved) return GENERAL_NOT_ALLOWED;
if (!isEnterprisePortal) return MERCHANT_PROD_KEY_TOOLTIP_MESSAGE;
return PROVIDER_PROD_KEY_TOOLTIP_MESSAGE;
};
return (
<Stack gap="12px">
<GiveText>Environment</GiveText>
<Stack gap="12px">
{radios.map((radio) => {
const type = radio.title.toLowerCase();
const isDisabled =
type === "production"
? !isProductionOptionEnabled || !isApproved
: isDeclined || isSuspended || isDeleted;
return (
<CustomRadio
key={radio.title}
isChecked={type === watch("environment")}
>
<GiveTooltip
color="default"
disableHoverListener={!isDisabled}
placement="top-start"
title={getTooltipMessage(type)}
>
<FormControlLabel
control={
<GiveRadio
checked={type === watch("environment")}
onChange={() => setValue("environment", type)}
disabled={isDisabled}
/>
}
label={
<Stack gap="4px">
<GiveText variant="bodyS">{radio.title}</GiveText>
<GiveText color="secondary" variant="bodyS">
{radio.description}
</GiveText>
</Stack>
}
labelPlacement="end"
sx={{
gap: "12px",
alignItems: "flex-start",
}}
/>
</GiveTooltip>
</CustomRadio>
);
})}
</Stack>
</Stack>
);
};
const CustomRadio = styled(Box, {
shouldForwardProp: (prop) => prop !== "isChecked",
})<{ isChecked: boolean }>(({ theme, isChecked }) => ({
padding: "16px",
border: `${isChecked ? "2px" : "1px"} solid ${
isChecked ? theme.palette.border?.active : theme.palette.border?.secondary
}`,
borderRadius: "8px",
".MuiFormControlLabel-root": {
marginLeft: 0,
marginRight: 0,
marginTop: 0,
},
}));
export default ApiKeyEnvInput;
|