{"version":3,"file":"static/chunks/7066-3ba62d9fb82273bb.js","mappings":"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","sources":["webpack://_N_E/./src/components/SegmentedBanner/styled.ts","webpack://_N_E/./src/components/SegmentedBanner/index.tsx","webpack://_N_E/./src/components/SegmentedBanner/SegmentedBannerGrid/styled.ts","webpack://_N_E/./src/components/SegmentedBanner/SegmentedBannerGrid/index.tsx","webpack://_N_E/../../packages/api-domru/src/spec-offer/v1/banners/segmented-banners.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Button from '@r1-frontend/ui-react/components/buttons/button';\nimport { wideBreakpoints } from '@r1-frontend/ui-react/components/layouts/wideContainer';\nimport { H3 } from '@r1-frontend/ui-react/components/typography/heading';\nimport { Paragraph3 } from '@r1-frontend/ui-react/components/typography/paragraph';\nimport { BorderRadius } from '@r1-frontend/ui-react/tokens/borderRadius';\nimport { COLORS } from '@r1-frontend/ui-react/tokens/colors';\nimport { FONTS } from '@r1-frontend/ui-react/tokens/fonts';\nimport { textOverflowLineClamp } from '@r1-frontend/ui-react/tokens/others/textOverflowLineClamp';\nimport { progressiveBackground } from '@r1-frontend/shared/helpers/progressiveBackground';\n\nimport { TSegmentedBannerImage, TSegmentedBannerImageProps } from './index';\n\nexport const BannerWrapper = styled.div<{\n    small?: boolean,\n    rounded?: boolean,\n    backgroundColor?: TSegmentedBannerImage['backgroundColor'],\n    backgroundImage?: TSegmentedBannerImageProps,\n}>`\n    position: relative;\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ${({ backgroundColor = COLORS.BgSurface }) => backgroundColor};\n    ${({ backgroundImage }) => progressiveBackground(backgroundImage)};\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: cover;\n    border-radius: ${({ rounded }) => rounded\n        ? `${BorderRadius.OuterBlockRadius} 128px 128px ${BorderRadius.OuterBlockRadius}`\n        : BorderRadius.OuterBlockRadius};\n    overflow: hidden;\n\n    @media (max-width: ${wideBreakpoints.sDesktop}) {\n        width: 100%;\n    }\n\n    @media (max-width: ${wideBreakpoints.mobile}) {\n        flex-direction: column-reverse;\n        align-items: flex-start;\n        border-radius: ${BorderRadius.InnerBlockRadius};\n        background-image: none;\n    }\n`;\n\nexport const BannerInfo = styled.div<{ isSmall?: boolean, textColor?: string }>`\n    flex-direction: column;\n    max-width: 480px;\n    margin: 0 140px;\n    color: ${({ textColor = COLORS.TextPrimary }) => textColor};\n    ${({ isSmall = false }) => isSmall && css`\n        margin-left: 32px;\n        margin-right: 0;\n    `};\n\n    @media (max-width: ${wideBreakpoints.laptop}) {\n        margin-left: 80px;\n        margin-right: 80px;\n    }\n\n    @media (max-width: ${wideBreakpoints.mobile}) {\n        max-width: unset;\n        width: 100%;\n        margin: 0;\n        padding: 24px;\n        color: ${COLORS.TextPrimary};\n    }\n`;\n\nexport const BannerTitle = styled(H3)`\n    ${textOverflowLineClamp(2)};\n    color: inherit;\n    margin-bottom: 4px;\n`;\n\nexport const BannerDescription = styled(Paragraph3)`\n    ${textOverflowLineClamp(2)};\n    color: inherit;\n    opacity: 0.8;\n`;\n\nexport const BannerButton = styled(Button)`\n    width: fit-content;\n    margin-top: 16px;\n\n    & > span {\n        white-space: pre;\n    }\n\n    @media (max-width: ${wideBreakpoints.mobile}) {\n        margin-top: 24px;\n    }\n`;\n\nexport const BannerImageContainer = styled.div<{\n    image?: TSegmentedBannerImage['fixedImage'],\n    backgroundImage?: TSegmentedBannerImageProps,\n    isSmall?: boolean,\n}>`\n    position: relative;\n    flex: 0 0 380px;\n    margin-right: ${({ isSmall = false }) => isSmall ? 0 : '140px'};\n    background-color: transparent;\n\n    picture,\n    img {\n        object-position: center;\n        object-fit: cover;\n        width: 100%;\n    }\n\n    @media (max-width: ${wideBreakpoints.laptop}) {\n        margin-right: 70px;\n    }\n\n    @media (max-width: ${wideBreakpoints.tablet}) {\n        margin-right: 0;\n        align-self: center;\n    }\n\n    @media (max-width: ${wideBreakpoints.mobile}) {\n        width: 100%;\n        display: flex;\n        justify-content: center;\n        flex-basis: 260px;\n        ${({ backgroundImage }) => progressiveBackground(backgroundImage)};\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n\n        picture,\n        img {\n            object-fit: contain;\n        }\n    }\n\n    &:before,\n    &:after {\n        display: ${({ image }) => image?.legalText ? 'block' : 'none'};\n        color: ${COLORS.TextSecondary};\n        position: absolute;\n        padding: 12px;\n        bottom: 0;\n    }\n\n    &:before {\n        padding-bottom: 24px;\n        ${FONTS.MediumS};\n        content: '18+';\n    }\n\n    &:after {\n        content: '${({ image }) => image?.legalText}';\n        ${FONTS.XXXS};\n\n        ${({ image }) => image?.legalTextColor && css`\n            color: ${image?.legalTextColor};\n        `}\n    }\n`;\n","import React, { useCallback, useMemo } from 'react';\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\n\nimport { IAdvertising, TSegmentedBannerButton } from '@r1-frontend/api-domru/spec-offer/v1/banners/dto/responseDto';\n\nimport { push } from '@r1-frontend/analytics/campaignLayer';\n\nimport { wideBreakpoints } from '@r1-frontend/ui-react/components/layouts/wideContainer';\nimport WebpImage from '@r1-frontend/ui-react/components/WebpImage';\nimport { NonStaticContainer } from '@r1-frontend/ui-react/experimental/containers';\nimport { AdvertisingLabelWithTooltip } from '@r1-frontend/ui-react/organisms/AdvertisingLabelWithTooltip';\nimport { useMatchMediaByWidth } from '@r1-frontend/shared/hooks/useMatchMedia';\n\nimport { sendVasGA } from '~/src/helpers/eventsForDataLayer';\nimport { useElementVisibility } from '~/src/helpers/hooks/useElementVisibility';\n\nimport * as ST from './styled';\n\nexport type TSegmentedBannerImageProps = {\n    src: string,\n    webpSrc?: string,\n};\n\nexport type TSegmentedBannerImage = Partial<{\n    backgroundColor: string,\n    backgroundImage: TSegmentedBannerImageProps,\n    fixedImage: TSegmentedBannerImageProps & {\n        alt: string,\n        legalText?: string,\n        legalTextColor?: string,\n    },\n}>;\n\nexport interface ISegmentedBannerProps {\n    id: number,\n    title: string,\n    description: string,\n    buttonText: string,\n    communicationId?: string,\n    textColor?: string,\n    rounded?: boolean,\n    small?: boolean,\n    image?: TSegmentedBannerImage,\n    advertising?: IAdvertising,\n    buttonType?: TSegmentedBannerButton,\n    onClick?: () => void,\n}\n\nexport const SegmentedBanner = ({\n    id,\n    title,\n    description,\n    buttonText,\n    communicationId,\n    textColor,\n    rounded,\n    image,\n    advertising,\n    small,\n    buttonType,\n    onClick,\n}: ISegmentedBannerProps): JSX.Element => {\n    const isMobile = useMatchMediaByWidth(wideBreakpoints.mobile);\n\n    const onButtonClick = useCallback(async() => {\n        onClick && onClick();\n        sendVasGA(\n            'click_promo_banner_lk',\n            `${title}`,\n        );\n    }, [onClick, title]);\n\n    const fixedImage = useMemo(() => image?.fixedImage, [image]);\n    const backgroundImage = useMemo(() => image?.backgroundImage, [image]);\n\n    const pushCampaignBannerView = useCallback(() => {\n        if (communicationId) {\n            push({ id, type: 'banner', actionType: 'view', communicationId });\n        }\n    }, [communicationId, id]);\n\n    const bannerRef = useElementVisibility(pushCampaignBannerView);\n\n    return (\n        <ST.BannerWrapper\n            ref={bannerRef}\n            small={small}\n            rounded={rounded}\n            backgroundColor={image?.backgroundColor}\n            backgroundImage={backgroundImage}\n        >\n            <ST.BannerInfo isSmall={small} textColor={textColor} data-test='banner-info'>\n                <ST.BannerTitle\n                    $withIndent={false}\n                    $desktop\n                    data-test='banner-title'\n                >\n                    {title}\n                </ST.BannerTitle>\n\n                <ST.BannerDescription data-test='banner-description'>\n                    {description}\n                </ST.BannerDescription>\n\n                <ST.BannerButton\n                    size={'large'}\n                    bType={(isMobile || !buttonType) ? 'primary' : buttonType}\n                    onClick={onButtonClick}\n                >\n                    {buttonText}\n                </ST.BannerButton>\n            </ST.BannerInfo>\n\n            {!!fixedImage?.src && (\n                <ST.BannerImageContainer\n                    isSmall={small}\n                    image={fixedImage}\n                    backgroundImage={backgroundImage}\n                    data-test='banner-image'\n                >\n                    <WebpImage urlWebp={fixedImage?.webpSrc}>\n                        <LazyLoadImage\n                            alt={fixedImage?.alt}\n                            src={fixedImage?.src}\n                            height={260}\n                            width={410}\n                        />\n                    </WebpImage>\n                </ST.BannerImageContainer>\n            )}\n\n            {advertising && (\n                <NonStaticContainer\n                    $desktop={{ $bottom: 24, $right: 24 }}\n                    $mobile={{ $top: 16, $right: 16 }}\n                >\n                    <AdvertisingLabelWithTooltip\n                        onClick={e => e.stopPropagation()}\n                        companyName={advertising.companyName}\n                        erid={advertising.erid}\n                        tooltip={{\n                            position: isMobile ? 'bottom-right' : 'top-right',\n                            zIndex: 999,\n                        }}\n                    />\n                </NonStaticContainer>\n            )}\n        </ST.BannerWrapper>\n    );\n};\n","import styled from 'styled-components';\n\nimport { wideBreakpoints } from '@r1-frontend/ui-react/components/layouts/wideContainer';\n\nconst createGridTemplate = (type: 'rows' | 'columns', length: number) => {\n    const template = new Array(length)\n        .fill('1fr')\n        .join(' ');\n\n    return `grid-template-${type}: ${template}`;\n};\n\nexport const SegmentedBannerGrid = styled.div<{\n    margin?: React.CSSProperties['margin'],\n    rows: number,\n}>`\n    ${({ margin }) => margin && `margin: ${margin}`};\n\n    display: grid;\n    ${({ rows }) => createGridTemplate('rows', rows)};\n    gap: 32px;\n    width: 100%;\n\n    @media (max-width: ${wideBreakpoints.sDesktop}) {\n        display: flex;\n    }\n`;\n\nexport const SegmentedBannerGridRow = styled.div<{ columns: number }>`\n    display: grid;\n    ${({ columns }) => createGridTemplate('columns', columns)};\n    gap: 32px;\n\n    @media (max-width: ${wideBreakpoints.sDesktop}) {\n        display: flex;\n        width: 100%;\n    }\n`;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { shallowEqual, useSelector } from 'react-redux';\nimport { useRouter } from 'next/router';\n\nimport { doRequest } from '@r1-frontend/do-request/index';\nimport { segmentedBanners } from '@r1-frontend/api-domru/spec-offer/v1/banners';\nimport { TSegmentedBanner, TSegmentedBannerAlias } from '@r1-frontend/api-domru/spec-offer/v1/banners/dto/responseDto';\n\nimport { push } from '@r1-frontend/analytics/campaignLayer';\nimport { dataLayerPush } from '@r1-frontend/analytics/dataLayerPush';\n\nimport { wideBreakpoints } from '@r1-frontend/ui-react/components/layouts/wideContainer';\nimport { WithSkeleton } from '@r1-frontend/ui-react/components/loaders/Skeleton';\nimport { BorderRadius } from '@r1-frontend/ui-react/tokens/borderRadius';\nimport { CATEGORIES, EVENTS } from '@r1-frontend/shared/constants/analytics';\nimport { useMatchMediaByWidth } from '@r1-frontend/shared/hooks/useMatchMedia';\n\nimport { ISegmentedBannerProps, SegmentedBanner } from '~/src/components/SegmentedBanner';\nimport { TState } from '~/src/store';\nimport selectProviderId from '~/src/store/selectors/selectProviderId';\n\nimport * as ST from './styled';\n\nexport interface ISegmentedBannerGridProps {\n    margin?: React.CSSProperties['margin'],\n    alias?: TSegmentedBannerAlias,\n}\n\nconst createRow = (props: ISegmentedBannerProps) => <SegmentedBanner {...props}/>;\n\nconst toClientBanner = ({\n    banner: {\n        bannerInfo: {\n            id,\n            imageBackground,\n            imageBackgroundWebp,\n            image,\n            imageWebp,\n            text,\n            title,\n            buttonText,\n            link,\n            textColor,\n            legalInfo,\n            legalInfoTextColor,\n            buttonType,\n            advertising,\n        },\n        communicationId,\n    },\n    onClick,\n}: {\n    banner: TSegmentedBanner,\n    onClick: (link: string) => void,\n}): ISegmentedBannerProps => ({\n    id,\n    communicationId,\n    title,\n    description: text,\n    buttonText,\n    image: {\n        backgroundImage: {\n            src: imageBackground ?? '',\n            webpSrc: imageBackgroundWebp,\n        },\n        fixedImage: {\n            src: image ?? '',\n            webpSrc: imageWebp,\n            alt: `изображение ${title}`,\n            legalText: legalInfo,\n            legalTextColor: legalInfoTextColor,\n        },\n    },\n    advertising,\n    textColor,\n    buttonType,\n    onClick: () => onClick(link),\n});\n\ntype TSegmentedBannerState =\n    Array<\n        | ISegmentedBannerProps\n        | [ISegmentedBannerProps, ISegmentedBannerProps]\n    >;\n\nexport const SegmentedBannerGrid = ({ margin, alias }: ISegmentedBannerGridProps) => {\n    const isDesktopSmall = useMatchMediaByWidth(wideBreakpoints.sDesktop);\n\n    const { auth: { isAuth, clientPersonal, accessToken }, providerId } = useSelector((state: TState) => ({\n        auth: state.auth,\n        providerId: selectProviderId(state),\n    }), shallowEqual);\n\n    const { agreement } = clientPersonal || {};\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [banners, setBanners] = useState<TSegmentedBannerState>([]);\n\n    const router = useRouter();\n\n    const transformToClientBanner = useCallback(\n        (banner: TSegmentedBanner) =>\n            toClientBanner({\n                banner,\n                onClick: (link) => {\n                    if (banner.communicationId) {\n                        push({\n                            id: banner.bannerInfo.id,\n                            type: 'banner',\n                            actionType: 'transition',\n                            communicationId: banner.communicationId,\n                        });\n                    }\n\n                    router.push(link);\n                },\n            }),\n        [router],\n    );\n\n    const setSegmentedBanners = (value: TSegmentedBannerState) => {\n        setBanners(value);\n        setIsLoading(false);\n    };\n\n    useEffect(() => {\n        const bannersTitles: string[] = [];\n\n        if (!isAuth || !providerId || !agreement) {\n            return;\n        }\n\n        (async() => {\n            setIsLoading(true);\n\n            const response = await doRequest.specOffer<TSegmentedBanner[]>(\n                segmentedBanners(providerId, {\n                    agreementId: clientPersonal?.agreement ?? 0,\n                }),\n            );\n\n            if (!response.isSuccess || !response.payload?.length) {\n                return setIsLoading(false);\n            }\n\n            /**\n             * Баннеров может прийти больше 3-х, но показать\n             * нужно не более 3-x первых. Также фильтруем по\n             * алиасам страниц, на которых можно отображать\n             * конкретный баннер\n             */\n            const clientBanners = response.payload\n                .filter(({ bannerInfo: { tags } }) =>\n                    tags.some(tag => tag.alias === alias))\n                .slice(0, 3)\n                .map(transformToClientBanner);\n\n            const { length } = clientBanners;\n\n            if (!length) {\n                return setIsLoading(false);\n            }\n\n            clientBanners.forEach(banner => bannersTitles.push(banner.title));\n\n            dataLayerPush({\n                event: EVENTS.UAevent,\n                category: CATEGORIES.vas,\n                action: 'view_banner_list',\n                label: `list:[name:${bannersTitles.join(', ')}]`,\n            });\n\n            /**\n             * Последний баннер в массиве скругляется\n             * только при условии что их количество более одного\n             */\n            if (length > 1) {\n                clientBanners[length - 1].rounded = true;\n            }\n\n            const [first, second, third] = clientBanners;\n\n            if (!second) {\n                return setSegmentedBanners([first]);\n            }\n\n            if (!third) {\n                return setSegmentedBanners([[first, second]]);\n            }\n\n            setSegmentedBanners([first, [second, third]]);\n        })();\n    }, [\n        transformToClientBanner,\n        accessToken,\n        agreement,\n        providerId,\n        isAuth,\n        alias,\n    ]);\n\n    return (\n        <WithSkeleton\n            isLoading={isLoading}\n            height={260}\n            count={2}\n            borderRadius={BorderRadius.OuterBlockRadius}\n            style={{\n                margin: '32px 0',\n            }}\n        >\n            <ST.SegmentedBannerGrid margin={banners.length && margin} rows={banners.length}>\n                {banners.map((item) => Array.isArray(item)\n                    ? <ST.SegmentedBannerGridRow columns={item.length}>\n                        {item.map((value) => createRow({\n                            ...value,\n                            small: !isDesktopSmall,\n                            rounded: value.rounded && !isDesktopSmall,\n                        }))}\n                    </ST.SegmentedBannerGridRow>\n                    : createRow(item))}\n            </ST.SegmentedBannerGrid>\n        </WithSkeleton>\n    );\n};\n","import { TSegmentedBannersRequest } from '@r1-frontend/api-domru/spec-offer/v1/banners/dto/requestDto';\n\nimport { IRequest } from '@r1-frontend/shared/types/IRequest';\n\n/**\n * Получение списка сегментированных баннеров\n * @link https://master.spec-offer.sandbox.d2c.r-one.io/docs#/Сегментированные%20баннеры/BannerSiteController_getSegmentedBanners\n */\nexport const segmentedBanners = (providerId: number, queryParams: TSegmentedBannersRequest): IRequest => ({\n    uri: `/api/v1/${providerId}/segmented-banners`,\n    method: 'GET',\n    withAuth: true,\n    withProvider: true,\n    queryParams,\n});\n"],"names":["BannerWrapper","styled","backgroundColor","COLORS","backgroundImage","progressiveBackground","rounded","BorderRadius","wideBreakpoints","BannerInfo","textColor","isSmall","css","BannerTitle","H3","textOverflowLineClamp","BannerDescription","Paragraph3","BannerButton","Button","BannerImageContainer","image","legalText","FONTS","legalTextColor","SegmentedBanner","id","title","description","buttonText","communicationId","advertising","small","buttonType","onClick","isMobile","useMatchMediaByWidth","onButtonClick","useCallback","sendVasGA","fixedImage","useMemo","pushCampaignBannerView","push","type","actionType","bannerRef","useElementVisibility","ST","ref","data-test","$withIndent","$desktop","size","bType","src","WebpImage","urlWebp","webpSrc","LazyLoadImage","alt","height","width","NonStaticContainer","$bottom","$right","$mobile","$top","AdvertisingLabelWithTooltip","e","stopPropagation","companyName","erid","tooltip","position","zIndex","createGridTemplate","length","template","Array","fill","join","SegmentedBannerGrid","margin","rows","SegmentedBannerGridRow","columns","createRow","props","alias","isDesktopSmall","useSelector","state","auth","providerId","selectProviderId","shallowEqual","isAuth","clientPersonal","accessToken","agreement","useState","isLoading","setIsLoading","banners","setBanners","router","useRouter","transformToClientBanner","banner","bannerInfo","imageBackground","imageBackgroundWebp","imageWebp","text","link","legalInfo","legalInfoTextColor","toClientBanner","setSegmentedBanners","value","useEffect","bannersTitles","response","clientBanners","first","second","third","doRequest","segmentedBanners","agreementId","isSuccess","payload","filter","tags","some","tag","slice","map","forEach","dataLayerPush","event","EVENTS","category","CATEGORIES","action","label","WithSkeleton","count","borderRadius","style","item","isArray","queryParams","uri","method","withAuth","withProvider"],"sourceRoot":""}