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 | import Figure from "@common/Figure";
import {
CustomAmountInputType,
CardTitleProps,
} from "@common/PublicForm/types";
import { Text } from "@common/Text";
import CustomDonationInput from "@components/Fundraisers/PublicPaymentForm/CustomDonationInput";
import { Box, Stack } from "@mui/material";
import { palette } from "@palette";
import { useState } from "react";
const PaymentCardTitle = ({
title,
price,
style,
isDefault,
min,
max,
handleAdd,
handleSubtract,
handleSetValue,
customDonation,
selected,
imageURL,
quantityLeftComponent,
customStyle,
}: CardTitleProps & Partial<CustomAmountInputType>) => {
const [wasModified, setWasModified] = useState<boolean>(false);
const isCustomInput =
(!price || isDefault) && typeof customDonation !== undefined;
return (
<Stack
direction="column"
justifyContent={customStyle?.titleSectionAlignment || undefined}
style={{ ...style }}
>
<Stack
direction="row"
gap={quantityLeftComponent ? 1.5 : 0}
alignItems="flex-start"
justifyContent="space-between"
>
<Text
fontSize={customStyle?.titleFontSize || undefined}
color={customStyle?.titleFontColor || undefined}
flexGrow={1}
>
{title}
</Text>
{quantityLeftComponent}
</Stack>
<Stack
alignItems="baseline"
direction="row"
gap={1}
mt={isDefault || !imageURL ? 2 : 0}
>
{isCustomInput ? (
<CustomDonationInput
min={min}
max={max}
handleAdd={handleAdd!}
handleSubtract={handleSubtract!}
handleSetValue={handleSetValue!}
value={customDonation!}
selected={selected}
wasModified={wasModified}
setWasModified={setWasModified}
/>
) : (
<Box>
<Figure
isAmount
value={price!}
fontSize={28}
sx={{ lineHeight: "normal" }}
/>
</Box>
)}
<Text
variant="h3"
fontSize={isCustomInput ? "32px" : "27px"}
lineHeight={isCustomInput ? "29px" : "33px"}
fontWeight="book"
color={
isCustomInput
? !wasModified
? "#B8B8B8"
: "neutral.black"
: palette.neutral[750]
}
>
USD
</Text>
</Stack>
</Stack>
);
};
export default PaymentCardTitle;
|