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 | 14x | import { darken, rgbToHex } from "@mui/material";
import ButtonWithSpinner from "@shared/Button/ButtonWithSpinner";
import { useAddMembershipToCart } from "@sections/PayBuilder/items/useAddMembershipToCart";
import { getTextColorsBasedOnBackground } from "@sections/PayBuilder/utils";
import GiveButton from "@shared/Button/GiveButton";
import { Product } from "../types";
import { ProductItemType } from "@sections/PayBuilder/types";
import { Dispatch, SetStateAction } from "react";
import { selectCart } from "@redux/slices/cart";
import { useAppSelector } from "@redux/hooks";
interface SubscribeButtonProps {
product: ProductItemType | Product;
accentColor: string;
buttonText?: string;
isPreview?: boolean;
isPeekMode?: boolean;
showCheckoutBottomSheet?: Dispatch<SetStateAction<boolean>>;
}
const SubscribeButton: React.FC<SubscribeButtonProps> = ({
product,
accentColor,
buttonText = "subscribe",
isPreview = false,
isPeekMode = false,
showCheckoutBottomSheet,
}) => {
const { onAddMembershipToCart, isLoading } = useAddMembershipToCart({
showCheckoutBottomSheet,
});
const { isCartLoading } = useAppSelector(selectCart);
const isButtonLoading = isLoading && !isPreview && !isPeekMode;
const { titleColor } = getTextColorsBasedOnBackground(
rgbToHex(accentColor).toUpperCase(),
);
const handleSubscribe = (e: React.MouseEvent) => {
e.stopPropagation();
if (isPreview || isButtonLoading || isCartLoading) return;
onAddMembershipToCart(product as Product);
};
return (
<ButtonWithSpinner
isLoading={isButtonLoading}
sx={{ width: "100%", marginTop: "auto" }}
>
<GiveButton
size="large"
variant="filled"
label={buttonText}
onClick={handleSubscribe}
disabled={isButtonLoading}
sx={{
width: "100%",
background: accentColor,
borderColor: accentColor,
color: titleColor,
"&:hover": {
background: darken(accentColor, 0.2),
},
}}
/>
</ButtonWithSpinner>
);
};
export default SubscribeButton;
|