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 | 12x 75x 75x 75x 75x 75x 75x 75x 75x 12x 12x 12x 75x 75x 75x 75x 75x | import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { usePayBuilderContext } from "@sections/PayBuilder/provider/PayBuilderContext";
import { useMemo } from "react";
import {
StyledStack,
ContentComponent,
} from "@sections/PayBuilder/views/fundraiser/components/Atom.component";
import {
getTextColorsBasedOnBackground,
useGetRedesignedFormTypes,
} from "@sections/PayBuilder/utils";
import { Box, rgbToHex } from "@mui/material";
import { HeroImage } from "@sections/PayBuilder/components/products/Hero/HeroImage";
import { useImageSource } from "@sections/PayBuilder/Forms/About/utils";
import useCheckFormType from "../../hooks/useCheckFormType";
const HeroSection = ({ isPreview }: { isPreview?: boolean }) => {
const { parsedValues } = usePayBuilderForm();
const {
screenStates: { isMobileView },
} = usePayBuilderContext();
const { data, isLoading } = useImageSource(parsedValues?.selectedImage);
const { formType } = useCheckFormType();
const redesignedFormTypes = useGetRedesignedFormTypes();
const url = parsedValues.selectedImage?.URL;
const position = parsedValues.assetPosition;
const direction = useMemo(() => {
Iif (isMobileView) {
if (position === "left") {
return "column";
}
return "column-reverse";
}
Iif (position === "left") {
return "row";
}
return "row-reverse";
}, [isMobileView, position]);
const { isInputColorLight } = getTextColorsBasedOnBackground(
rgbToHex(parsedValues.background).toUpperCase(),
);
const content = (
<ContentComponent
description={parsedValues.description}
heading={parsedValues.heading}
isMobileView={isMobileView}
isPreview={isPreview}
adaptiveColorToBackground={isInputColorLight ? "black" : "white"}
/>
);
const isRedesigned = redesignedFormTypes.includes(formType);
Eif (isRedesigned) {
return (
<StyledStack
isMobile={isMobileView}
direction={isMobileView ? "column" : "row"}
sx={isMobileView ? { padding: "0px !important" } : {}}
>
{content}
</StyledStack>
);
}
return (
<StyledStack direction={direction} spacing={3} isMobile={isMobileView}>
<Box sx={{ flex: 1 }}>
{!isLoading && (
<HeroImage
src={data}
isPreview={isPreview}
canvasData={parsedValues?.selectedImage}
/>
)}
</Box>
{content}
</StyledStack>
);
};
export default HeroSection;
|