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 | 61x 58x 58x 58x 58x 58x 58x 11x 290x 58x | import useMasqueradeReducer from "@hooks/Reducers/useMasqueradeReducer";
import GiveText from "@shared/Text/GiveText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { styled, useAppTheme } from "@theme/v2/Provider";
import { BaseMainContainer } from "./components/BaseMainContainer";
import { MobileLeftPanelMainHeader } from "./components/MobileLeftPanelMainHeader";
import { StackRow } from "./components/StackRow";
import Stepper from "./components/Stepper";
import { usePayBuilderContext } from "./provider/PayBuilderContext";
import { scrollbarStyles } from "./utils";
import { TopLeftPanelActions } from "./components/TopLeftPanelActions";
import { BottomLeftPanelActions } from "./components/BottomLeftPanelActions";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
function BuilderForm() {
const { isMediumView } = useCustomThemeV2();
const { activeItem, activeStepIndex, formStep } = usePayBuilderContext();
const ActiveView = formStep[activeStepIndex];
const { isMasqueradeMode } = useMasqueradeReducer();
const bannerOffset = useBannerOffset();
const { palette } = useAppTheme();
return (
<Container
isMasqueradeMode={isMasqueradeMode}
bannerOffset={bannerOffset}
xs={isMediumView ? 12 : 4}
item
>
{isMediumView ? (
<MobileLeftPanelMainHeader />
) : (
<StackRow
container
alignItems="center"
justifyContent="space-between"
gap={2}
sx={{
borderBottom: `1px solid ${palette.surface?.tertiary}`,
p: "16px 20px",
display: "flex",
}}
>
<TopLeftPanelActions />
</StackRow>
)}
<StackRow
sx={isMediumView ? { paddingBottom: 0, paddingLeft: "14px" } : {}}
>
<Stepper />
</StackRow>
{isMediumView && (
<StackRow sx={{ paddingTop: 0, paddingLeft: "22px" }}>
{<GiveText>{activeItem.label}</GiveText>}
</StackRow>
)}
<StackRow sx={scrollbarStyles}>
<ActiveView />
</StackRow>
<StackRow
container
alignItems="center"
gap={2}
sx={{
display: "flex",
justifyContent: "space-between",
borderTop: `1px solid ${palette.surface?.tertiary}`,
padding: "12px 24px",
}}
>
<BottomLeftPanelActions />
</StackRow>
</Container>
);
}
export default BuilderForm;
type ContainerProps = {
isMasqueradeMode?: boolean;
bannerOffset?: number;
};
const Container = styled(BaseMainContainer, {
shouldForwardProp: (prop) =>
prop !== "isMasqueradeMode" && prop !== "bannerOffset",
})<ContainerProps>(({ theme, bannerOffset }) => {
return {
height: "100dvh",
backgroundColor: theme.palette.surface?.primary,
borderRight: `1px solid ${theme.palette.border?.primary} `,
paddingTop: bannerOffset ? `${bannerOffset}px` : undefined,
maxWidth: "100%",
[theme.breakpoints.down("md")]: {
minWidth: "100%",
},
// [theme.breakpoints.up("xs")]: {
// maxWidth: "560px",
// },
};
});
|