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 | 13x 114x 114x 114x 2x 2x 2x 2x 1x 114x 114x 114x 114x 13x 1039x 114x | import { CircularProgress, rgbToHex } from "@mui/material";
import useCheckFormType from "@sections/PayBuilder/components/hooks/useCheckFormType";
import {
getPayButtonContent,
getTextColorsBasedOnBackground,
} from "@sections/PayBuilder/utils";
import GiveButton from "@shared/Button/GiveButton";
import { styled } from "@theme/v2/Provider";
import { useState } from "react";
import { isExceededAmount } from "../helpers";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { CANNOT_EXCEED_MAX_AMOUNT } from "@constants/stringConstants";
interface CheckoutButtonProps {
isPreviewMode: boolean;
isLoading: boolean;
handleSubmit: (data: any) => void;
accentColor: string;
isDisabled?: boolean;
title?: string;
subTotal?: string;
}
const CheckoutButton = ({
title,
isPreviewMode = true,
isLoading = false,
handleSubmit,
accentColor,
isDisabled = false,
subTotal,
}: CheckoutButtonProps) => {
const [isCoolingDown, setIsCoolingDown] = useState(false);
const { formType, isSweepstake } = useCheckFormType();
const handleClick = (data: any) => {
setIsCoolingDown(true);
Eif (handleSubmit) {
handleSubmit(data);
}
setTimeout(() => {
setIsCoolingDown(false);
}, 1000);
};
const { titleColor } = getTextColorsBasedOnBackground(
rgbToHex(accentColor).toUpperCase(),
);
const isExceededSweepstakeAmount =
isSweepstake && subTotal && isExceededAmount(subTotal, "0");
const defaultTitle = getPayButtonContent(formType);
return (
<GiveTooltip
title={CANNOT_EXCEED_MAX_AMOUNT}
placement="top"
disableHoverListener={!isExceededSweepstakeAmount}
>
<StyledGiveButton
data-testid="checkout-submit-button"
label={
isLoading || isCoolingDown ? (
<>
Processing
<CircularProgress
size={14}
sx={{ color: titleColor }}
thickness={4}
/>
</>
) : (
title || defaultTitle
)
}
sx={{
opacity: isLoading || isCoolingDown ? 0.5 : 1,
}}
variant="filled"
disabled={
isPreviewMode ||
isLoading ||
isDisabled ||
isCoolingDown ||
isExceededSweepstakeAmount
}
form="checkout-form"
onClick={handleClick}
accentColor={accentColor}
titleColor={titleColor}
/>
</GiveTooltip>
);
};
export default CheckoutButton;
const StyledGiveButton = styled(GiveButton, {
shouldForwardProp: (prop) => prop !== "accentColor" && prop !== "titleColor",
})<{
accentColor: string;
titleColor: string;
}>(({ accentColor, titleColor }) => ({
width: "100%",
borderRadius: "40px",
padding: "16px",
border: 0,
backgroundColor: accentColor,
"&.MuiButtonBase-root:hover": {
bgcolor: `${accentColor}1A`,
},
color: titleColor,
"&.Mui-disabled": {
color: `${titleColor} !important`,
},
}));
|