{"version":3,"file":"static/js/336.b523ff03f533db51b68d.js","mappings":"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","sources":["components/PopoutCustomSection/PopoutButton.tsx","components/SectionComponents/CustomSection.tsx"],"sourcesContent":["import React, { useState, useEffect, startTransition } from 'react';\nimport { Button, ButtonProps, Dialog } from '@mui/material';\nimport { useAtom } from 'jotai';\nimport { isMobileAtom } from '@atoms/appSettings';\nimport { useStaticValues } from '@stateManagement/StaticValuesContext';\nimport { CustomSection } from '@sections/CustomSection';\nimport { PopoutDisplayMode } from '@models/customSection';\nimport { FormParams } from '@models/form';\nimport { CloseIcon } from '@icon/CloseIcon';\nimport { v2Colors, breakpoints, DefaultV2ButtonProps, V2Button, IconButton } from '@web-for-marketing/react-ui';\nimport { visuallyHidden } from '@mui/utils';\nimport { ClassNames } from '@emotion/react';\n\nconst classes = {\n    fixedPopout: {\n        boxShadow: 'none',\n        backgroundColor: v2Colors.core.snow,\n        [`@media (max-width: ${breakpoints.md})`]: {\n            bottom: 'auto',\n            top: 0,\n            height: '100% !important',\n        },\n    },\n    popoutBackground: (backgroundImagePath: string) => ({\n        boxShadow: '0px 20px 40px 0px rgba(0, 0, 0, 0.08)',\n        background: `url(${backgroundImagePath}) no-repeat top / cover`,\n        [`@media (max-width: ${breakpoints.lg})`]: {\n            backgroundPosition: 'top left',\n        },\n        [`@media (max-width: ${breakpoints.sm})`]: {\n            backgroundPosition: 'center',\n        },\n    }),\n    popoutPaper: {\n        position: 'unset',\n        minWidth: '599.9px',\n        [`@media (max-width: ${breakpoints.md})`]: {\n            margin: '1.6rem',\n            minWidth: 'unset',\n        },\n    },\n    popoutContentContainer: {\n        overflowY: 'auto',\n        height: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        width: '100%',\n    },\n} as const;\n\ninterface BaseProps {\n    text: string;\n    customSectionKey?: string;\n    displayMode?: PopoutDisplayMode;\n    backgroundImagePath?: string;\n    closeAdditional?: () => void;\n    params?: FormParams;\n}\n\ninterface MUIButtonProps extends ButtonProps {\n    isV2?: false;\n}\n\ninterface V2ButtonProps extends Omit<DefaultV2ButtonProps, 'children'> {\n    isV2: true;\n}\n\ntype PopoutButtonProps = BaseProps & (MUIButtonProps | V2ButtonProps);\n\nexport function PopoutButton({\n    text,\n    customSectionKey,\n    displayMode,\n    backgroundImagePath,\n    params = [],\n    closeAdditional,\n    isV2,\n    ...buttonProps\n}: PopoutButtonProps): JSX.Element {\n    const { prefixStringWithBaseUrl } = useStaticValues();\n    const [isMobile] = useAtom(isMobileAtom);\n    const [open, setOpen] = useState(false);\n\n    const setPopoutOpen = (popoutValue: boolean): void => {\n        if (closeAdditional) closeAdditional();\n        startTransition(() => {\n            setOpen(popoutValue);\n        });\n    };\n\n    const handleClose = (): void => {\n        setPopoutOpen(false);\n    };\n\n    useEffect(() => {\n        if (open) {\n            setPopoutOpen(false);\n        }\n        return () => {\n            if (open) {\n                setPopoutOpen(false);\n            }\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMobile]);\n\n    return (\n        <>\n            {isV2 ? (\n                <V2Button\n                    aria-label={`Open ${text} popout`}\n                    onClick={() => setPopoutOpen(true)}\n                    {...(buttonProps as DefaultV2ButtonProps)}\n                >\n                    {text}\n                </V2Button>\n            ) : (\n                <Button\n                    aria-label={`Open ${text} popout`}\n                    onClick={() => setPopoutOpen(true)}\n                    {...(buttonProps as ButtonProps)}\n                >\n                    {text}\n                </Button>\n            )}\n            {open ? (\n                displayMode === 'bg-popout' ? (\n                    <ClassNames>\n                        {({ css }) => (\n                            <Dialog\n                                open={open}\n                                onClose={handleClose}\n                                css={\n                                    backgroundImagePath &&\n                                    classes.popoutBackground(prefixStringWithBaseUrl(backgroundImagePath))\n                                }\n                                classes={{ paper: css(classes.popoutPaper) }}\n                                aria-labelledby='popout-button-title'\n                            >\n                                <h2 style={visuallyHidden} id='popout-button-title'>\n                                    {text}\n                                </h2>\n                                <CustomSection\n                                    component={customSectionKey}\n                                    params={params}\n                                    lazyLoad={false}\n                                    displayMode={displayMode}\n                                    onClose={handleClose}\n                                />\n                            </Dialog>\n                        )}\n                    </ClassNames>\n                ) : (\n                    <Dialog\n                        open={open}\n                        onClose={handleClose}\n                        hideBackdrop\n                        fullScreen\n                        css={classes.fixedPopout}\n                        aria-labelledby='popout-button-title'\n                    >\n                        <h2 style={visuallyHidden} id='popout-button-title'>\n                            {text}\n                        </h2>\n                        <div css={{ display: 'flex', justifyContent: 'flex-end' }}>\n                            <IconButton\n                                label='Close dialog'\n                                variant='secondary'\n                                size='small'\n                                shape='round'\n                                css={{ margin: '1.5rem' }}\n                                onClick={handleClose}\n                            >\n                                <CloseIcon />\n                            </IconButton>\n                        </div>\n                        <div css={classes.popoutContentContainer}>\n                            <CustomSection\n                                component={customSectionKey}\n                                params={params}\n                                lazyLoad={false}\n                                displayMode='full-popout'\n                                onClose={handleClose}\n                            />\n                        </div>\n                    </Dialog>\n                )\n            ) : null}\n        </>\n    );\n}\n","import React, { useMemo } from 'react';\nimport { customSectionTypes } from '../EditorFormComponents/helpers/CustomSectionTypes';\nimport { v2Colors } from '@web-for-marketing/react-ui';\nimport { Heading } from '@web-for-marketing/react-ui';\nimport { CustomSectionContent } from '@models/section/customSection';\nimport { CustomSectionDisplayMode } from '@models/customSection';\n\nconst classes = {\n    customSectionComponentContainer: {\n        minHeight: '10rem',\n        width: '100%',\n    },\n    notConfiguredContainer: {\n        backgroundColor: v2Colors.core.cloud,\n        display: 'flex',\n        alignItems: 'center',\n        width: '100%',\n    },\n    notConfiguredHeading: {\n        margin: '8rem auto',\n    },\n};\n\ntype CustomSectionProps = CustomSectionContent & {\n    lazyLoad?: boolean;\n    headerSection?: boolean;\n    displayMode?: CustomSectionDisplayMode;\n    onClose?: () => void;\n};\n\nexport function CustomSection({\n    component,\n    params,\n    lazyLoad = false,\n    headerSection,\n    displayMode = 'default',\n    onClose,\n}: CustomSectionProps): JSX.Element {\n    const CustomSectionComponent = useMemo(() => {\n        const sectionType = customSectionTypes.find((sectionType) => sectionType.value === component);\n        return (sectionType && sectionType.component) || null;\n    }, [component]);\n\n    return CustomSectionComponent ? (\n        <div css={classes.customSectionComponentContainer}>\n            <CustomSectionComponent\n                params={params}\n                lazyLoad={lazyLoad}\n                headerSection={headerSection}\n                displayMode={displayMode}\n                onClose={onClose}\n            />\n        </div>\n    ) : (\n        <div css={classes.notConfiguredContainer}>\n            <Heading variant='h2' color='primary' css={classes.notConfiguredHeading}>\n                Custom section not configured\n            </Heading>\n        </div>\n    );\n}\n"],"names":["classes","fixedPopout","boxShadow","backgroundColor","v2Colors","core","snow","breakpoints","md","bottom","top","height","popoutBackground","backgroundImagePath","background","lg","backgroundPosition","sm","popoutPaper","position","minWidth","margin","popoutContentContainer","overflowY","display","justifyContent","width","_ref","name","styles","_ref2","PopoutButton","text","customSectionKey","displayMode","params","closeAdditional","isV2","buttonProps","prefixStringWithBaseUrl","useStaticValues","isMobile","useAtom","isMobileAtom","open","setOpen","useState","setPopoutOpen","popoutValue","startTransition","handleClose","useEffect","_jsxs","_Fragment","children","_jsx","V2Button","onClick","Button","ClassNames","css","Dialog","onClose","paper","style","visuallyHidden","id","CustomSection","component","lazyLoad","hideBackdrop","fullScreen","IconButton","label","variant","size","shape","CloseIcon","customSectionComponentContainer","minHeight","notConfiguredContainer","cloud","alignItems","notConfiguredHeading","headerSection","CustomSectionComponent","useMemo","sectionType","customSectionTypes","find","value","Heading","color"],"sourceRoot":""}