{"version":3,"sources":["Shared/Icons/PlanogramIcon.tsx","MyPlanogramsSeasonalPage/MyPlanogramsSeasonal.ts","MyPlanogramsSeasonalPage/MyPlanogramsSeasonalComponent.tsx","MyPlanogramsSeasonalPage/MyPlanogramsSeasonalPage.tsx","Shared/CtaButton/CtaButton.tsx","Shared/Icons/ArrowLeftIconPrimary.tsx","Shared/Button/Dots.tsx"],"names":["styled","compose","Svg","width","height","viewBox","fill","xmlns","css","clipPath","fillRule","clipRule","d","id","abortController","AbortController","channelId","requestToken","url","setIsLoading","a","abort","signal","litiumContext","JSON","stringify","channelSystemId","Fetcher","data","resolve","Wrapper","div","padding","x","marginBottom","theme","spacing","media","mediaQuery","mediaMinLarge","maxWidth","screenMaxWidth","margin","Container","backgroundColor","white","paddingTop","paddingBottom","borderRadius","DotsWrapper","display","justifyContent","HeadingSection","StyledCtaButton","CtaButton","marginTop","mediaMaxLarge","LinkWrapper","Heading","h3","fontSize","color","black","marginLeft","lineHeight","PlanogramGrid","gridTemplateColumns","gridColumnGap","gridRowGap","mediaMinMedium","pseudo","PlanogramCard","flexDirection","wordBreak","border","xy","style","tiny","veryLightGray","PlanogramImage","img","maxHeight","PlanogramText","font","size","beta","weight","fontWeight","bold","textAlign","delta","PlanogramArticleNumber","span","breadText","MyPlanogramsSeasonalComponent","showAllSeasonalPlanograms","useAppSettingsData","translations","mySeasonalPlanogramsLabel","seeAllPlanogramsLabel","myPlanogramsSeasonalPage","staticPages","languageRoute","planogramPlaceholderImg","placeholderImages","planogramPlaceholder","organizationId","useUserStateData","useState","isLoading","useCurrentPage","myPlanograms","setSeasonalPlanograms","useEffect","GetSeasonalPlanograms","then","length","slice","PlanogramIcon","Dots","data-showbtn","map","planogram","KexLink","key","articleNumber","href","image","src","name","asLink","BackLinkWrapper","position","top","desktopHeaderHeight","left","right","alignItems","paddingLeft","letterSpacing","mediaMaxMedium","ArrowLeftIcon","ArrowLeftIconPrimary","linkColor","marginRight","BackLink","gamma","cursor","textDecoration","TopContent","blockMaxWidthMobile","y","medium","none","h1","psi","Intro","p","MyPlanogramsSeasonalPage","backLinkLabel","myPage","pageHeading","pageIntroText","Button","button","primaryBlue","alpha","primaryDarkBlue","headerIconGray","Link","ButtonText","textTransform","LinkText","onClick","children","disabled","data-disabled","transform","Dot","primary","massive","animationName","opacity","animationDuration","timings","sevenFifths","animationIterationCount","animationFillMode","animationDelay","oneFifth","twoFifths"],"mappings":"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","file":"Dist/build-client/static/js/MyPlanogramsSeasonalPage-MyPlanogramsSeasonalPage.216b8d5a.chunk.js","sourcesContent":["import React from 'react';\r\nimport { styled } from '../../Theme';\r\nimport { StyledProps } from '@glitz/react';\r\n\r\nfunction PlanogramIcon({ compose }: StyledProps) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default styled(PlanogramIcon);\r\n","import Fetcher from '../Shared/Common/Fetcher';\r\nimport SimpleProduct from '../PlanogramPage/Models/SimpleProduct.interface';\r\n\r\nlet abortController: AbortController = new AbortController();\r\n\r\nexport async function GetSeasonalPlanograms(\r\n channelId: string,\r\n requestToken: string,\r\n url: string,\r\n setIsLoading?: (value: boolean) => void\r\n) {\r\n setIsLoading && setIsLoading(true);\r\n abortController.abort();\r\n abortController = new AbortController();\r\n const signal = abortController.signal;\r\n\r\n const litiumContext = JSON.stringify({\r\n channelSystemId: channelId,\r\n });\r\n return Fetcher(\r\n url,\r\n signal,\r\n (data, resolve) => {\r\n resolve(data);\r\n setIsLoading && setIsLoading(false);\r\n },\r\n litiumContext,\r\n requestToken\r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport PageModelBase from '../Shared/Models/PageModelBase.interface';\r\nimport { GetSeasonalPlanograms } from './MyPlanogramsSeasonal';\r\nimport PlanogramIcon from '../Shared/Icons/PlanogramIcon';\r\nimport { styled, theme } from '../Theme';\r\nimport SimpleProduct from '../PlanogramPage/Models/SimpleProduct.interface';\r\nimport KexLink from '../Shared/KexLink/KexLink';\r\nimport { media, pseudo } from '@glitz/core';\r\nimport { mediaQuery } from '../Theme/mediaQueries';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\nimport { useUserStateData } from '../Shared/UserContextProvider/UserContextProvider';\r\nimport Dots from '../Shared/Button/Dots';\r\nimport CtaButton from '../Shared/CtaButton/CtaButton';\r\n\r\ntype PropType = {\r\n showAllSeasonalPlanograms?: boolean;\r\n};\r\n\r\nfunction MyPlanogramsSeasonalComponent({\r\n showAllSeasonalPlanograms = true,\r\n}: PropType) {\r\n const {\r\n translations: {\r\n 'planogram/mySeasonalPlanograms': mySeasonalPlanogramsLabel,\r\n 'planogram/seeAllSeasonalPlanograms': seeAllPlanogramsLabel,\r\n },\r\n staticPages: { myPlanogramsSeasonalPage },\r\n languageRoute,\r\n requestToken,\r\n placeholderImages: { planogramPlaceholder: planogramPlaceholderImg },\r\n } = useAppSettingsData();\r\n const { organizationId } = useUserStateData();\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const { channelId } = useCurrentPage();\r\n const url = `/api/${languageRoute}/planogram/GetSeasonalPlanograms?organizationId=${organizationId}`;\r\n const [myPlanograms, setSeasonalPlanograms] = useState([]);\r\n\r\n useEffect(() => {\r\n organizationId &&\r\n GetSeasonalPlanograms(\r\n channelId,\r\n requestToken,\r\n url,\r\n setIsLoading\r\n ).then(data =>\r\n !showAllSeasonalPlanograms && !!data.length && data.length > 4\r\n ? setSeasonalPlanograms(data.slice(0, 4))\r\n : setSeasonalPlanograms(data)\r\n );\r\n }, [channelId]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {mySeasonalPlanogramsLabel}\r\n \r\n {isLoading ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n {!!myPlanograms.length &&\r\n myPlanograms.map(\r\n (planogram: SimpleProduct) =>\r\n planogram.url && (\r\n \r\n \r\n {planogram.image ? (\r\n \r\n ) : (\r\n \r\n )}\r\n\r\n {planogram.name}\r\n \r\n {planogram.articleNumber}\r\n \r\n \r\n \r\n )\r\n )}\r\n \r\n )}\r\n {!showAllSeasonalPlanograms && !!myPlanograms.length && (\r\n \r\n \r\n {seeAllPlanogramsLabel}\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nconst Wrapper = styled.div({\r\n padding: { x: '7.5px' },\r\n marginBottom: theme.spacing(10),\r\n ...media(mediaQuery.mediaMinLarge, {\r\n padding: { x: theme.spacing(10) },\r\n maxWidth: theme.screenMaxWidth,\r\n margin: { x: 'auto' },\r\n }),\r\n});\r\n\r\nconst Container = styled.div({\r\n backgroundColor: theme.white,\r\n padding: { x: theme.spacing(6) },\r\n paddingTop: theme.spacing(7),\r\n paddingBottom: theme.spacing(10),\r\n borderRadius: '10px',\r\n ...media(mediaQuery.mediaMinLarge, {\r\n padding: { x: theme.spacing(11) },\r\n paddingTop: theme.spacing(8),\r\n paddingBottom: theme.spacing(16),\r\n }),\r\n});\r\n\r\nconst DotsWrapper = styled.div({\r\n display: 'flex',\r\n justifyContent: 'center',\r\n paddingBottom: theme.spacing(9),\r\n});\r\n\r\nconst HeadingSection = styled.div({\r\n display: 'flex',\r\n marginBottom: theme.spacing(7),\r\n});\r\n\r\nconst StyledCtaButton = styled(CtaButton, {\r\n marginTop: theme.spacing(11),\r\n marginBottom: theme.spacing(6),\r\n ...media(mediaQuery.mediaMaxLarge, {\r\n margin: { x: 'auto' },\r\n }),\r\n});\r\n\r\nconst LinkWrapper = styled.div({\r\n display: 'flex',\r\n});\r\n\r\nconst Heading = styled.h3({\r\n fontSize: '22px',\r\n color: theme.black,\r\n marginLeft: theme.spacing(3),\r\n lineHeight: '26.4px',\r\n});\r\n\r\nconst PlanogramGrid = styled.div({\r\n display: 'grid',\r\n gridTemplateColumns: `repeat(2, minmax(0, 1fr))`,\r\n gridColumnGap: theme.spacing(4),\r\n gridRowGap: theme.spacing(7),\r\n ...media(mediaQuery.mediaMinMedium, {\r\n gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,\r\n ...pseudo([':nth-child(n)[data-showbtn=\"true\"]'], {\r\n gridTemplateColumns: `repeat(4, minmax(0, 1fr))`,\r\n }),\r\n }),\r\n ...media(mediaQuery.mediaMinLarge, {\r\n gridTemplateColumns: `repeat(4, minmax(0, 1fr))`,\r\n gridColumnGap: theme.spacing(9),\r\n gridRowGap: theme.spacing(11),\r\n }),\r\n});\r\n\r\nconst PlanogramCard = styled.div({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-between',\r\n height: '100%',\r\n wordBreak: 'break-word',\r\n border: {\r\n xy: {\r\n style: 'solid',\r\n width: theme.tiny,\r\n color: theme.veryLightGray,\r\n },\r\n },\r\n borderRadius: '10px',\r\n paddingBottom: theme.spacing(6),\r\n paddingTop: theme.spacing(5),\r\n});\r\n\r\nconst PlanogramImage = styled.img({\r\n margin: { x: 'auto' },\r\n maxHeight: '110px',\r\n padding: { x: theme.spacing(5) },\r\n ...media(mediaQuery.mediaMinMedium, {\r\n maxHeight: '180px',\r\n }),\r\n ...media(mediaQuery.mediaMinLarge, {\r\n maxHeight: '220px',\r\n }),\r\n});\r\n\r\nconst PlanogramText = styled.div({\r\n font: { size: theme.beta, weight: theme.fontWeight.bold },\r\n lineHeight: '17px',\r\n textAlign: 'center',\r\n marginTop: theme.spacing(6),\r\n color: theme.black,\r\n padding: { x: theme.spacing(2) },\r\n ...media(mediaQuery.mediaMinLarge, {\r\n fontSize: theme.delta,\r\n lineHeight: '22px',\r\n }),\r\n});\r\n\r\nconst PlanogramArticleNumber = styled.span({\r\n font: { size: theme.beta },\r\n textAlign: 'center',\r\n color: theme.breadText,\r\n marginTop: theme.spacing(3),\r\n});\r\n\r\nexport default MyPlanogramsSeasonalComponent;\r\n","import React from 'react';\r\n\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport { styled } from '@glitz/react';\r\nimport { theme } from '../Theme';\r\nimport { media } from '@glitz/core';\r\nimport MyPlanogramsSeasonalComponent from './MyPlanogramsSeasonalComponent';\r\nimport MyPlanogramsSeasonalPageModel from './Models/MyPlanogramsSeasonalModel.interface';\r\nimport ArrowLeftIconPrimary from '../Shared/Icons/ArrowLeftIconPrimary';\r\nimport KexLink from '../Shared/KexLink/KexLink';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\n\r\nfunction MyPlanogramsSeasonalPage() {\r\n const {\r\n translations: { 'myPlanogramsPage/backToMyPage': backLinkLabel },\r\n staticPages: { myPage },\r\n } = useAppSettingsData();\r\n\r\n const { pageHeading, pageIntroText } = useCurrentPage<\r\n MyPlanogramsSeasonalPageModel\r\n >();\r\n return (\r\n
\r\n \r\n \r\n {backLinkLabel}\r\n \r\n \r\n {pageHeading}\r\n {pageIntroText}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst BackLinkWrapper = styled.div({\r\n position: 'absolute',\r\n top: theme.desktopHeaderHeight,\r\n left: 0,\r\n right: 0,\r\n margin: { x: 'auto' },\r\n maxWidth: theme.screenMaxWidth,\r\n width: '100%',\r\n paddingTop: '18px',\r\n alignItems: 'center',\r\n display: 'flex',\r\n paddingLeft: '32px',\r\n lineHeight: 1.33,\r\n letterSpacing: 0.45,\r\n ...media(theme.mediaQuery.mediaMaxLarge, {\r\n paddingTop: '0px',\r\n }),\r\n ...media(theme.mediaQuery.mediaMaxMedium, {\r\n paddingLeft: '20px',\r\n }),\r\n});\r\n\r\nconst ArrowLeftIcon = styled(ArrowLeftIconPrimary, {\r\n fill: theme.linkColor,\r\n marginRight: theme.spacing(4),\r\n});\r\n\r\nconst BackLink = styled(KexLink, {\r\n fontSize: theme.gamma,\r\n color: theme.linkColor,\r\n cursor: 'pointer',\r\n textDecoration: 'underline',\r\n});\r\n\r\nconst TopContent = styled.div({\r\n width: '100%',\r\n color: theme.black,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n marginBottom: theme.spacing(15),\r\n maxWidth: theme.blockMaxWidthMobile,\r\n padding: {\r\n x: '7.5px',\r\n },\r\n paddingTop: theme.spacing(10),\r\n ...media(theme.mediaQuery.mediaMinMedium, {\r\n margin: { x: 'auto' },\r\n }),\r\n ...media(theme.mediaQuery.mediaMinLarge, {\r\n margin: { y: theme.spacing(14) },\r\n padding: { x: theme.medium, y: theme.none },\r\n maxWidth: '900px',\r\n }),\r\n});\r\n\r\nconst Heading = styled.h1({\r\n font: { size: theme.psi, weight: theme.fontWeight.bold },\r\n marginBottom: theme.spacing(5),\r\n ...media(theme.mediaQuery.mediaMinLarge, {\r\n lineHeight: '40px',\r\n fontSize: '32px',\r\n marginTop: theme.spacing(5),\r\n }),\r\n});\r\n\r\nconst Intro = styled.p({\r\n lineHeight: '28.8px',\r\n});\r\n\r\nexport default MyPlanogramsSeasonalPage;\r\n","import React from 'react';\r\n\r\nimport { theme, styled } from '../../Theme';\r\n\r\nimport { media, pseudo } from '@glitz/core';\r\nimport { mediaQuery } from '../../Theme/mediaQueries';\r\nimport { StyledProps } from '@glitz/react';\r\n\r\nimport KexLink from '../KexLink/KexLink';\r\n\r\ntype PropTypes = StyledProps & {\r\n onClick?: () => void;\r\n asLink?: boolean;\r\n href?: string;\r\n children?: any;\r\n disabled?: boolean;\r\n};\r\n\r\nfunction CtaButton({\r\n compose,\r\n onClick,\r\n asLink,\r\n href,\r\n children,\r\n disabled,\r\n}: PropTypes) {\r\n return asLink ? (\r\n \r\n {children}\r\n \r\n ) : (\r\n \r\n );\r\n}\r\n\r\nconst Button = styled.button({\r\n backgroundColor: theme.primaryBlue,\r\n font: { size: theme.alpha, weight: theme.fontWeight.bold },\r\n display: 'flex',\r\n justifyContent: 'center',\r\n borderRadius: '50px',\r\n padding: { y: theme.spacing(4), x: theme.spacing(6) },\r\n ...media(mediaQuery.mediaMinLarge, {\r\n ':hover': { backgroundColor: theme.primaryDarkBlue },\r\n }),\r\n ':disabled': {\r\n cursor: 'not-allowed',\r\n backgroundColor: theme.headerIconGray,\r\n ':hover': { backgroundColor: theme.headerIconGray },\r\n },\r\n});\r\n\r\nconst Link = styled(KexLink, {\r\n backgroundColor: theme.primaryBlue,\r\n font: { size: theme.alpha, weight: theme.fontWeight.bold },\r\n display: 'flex',\r\n justifyContent: 'center',\r\n borderRadius: '50px',\r\n padding: { y: theme.spacing(4), x: theme.spacing(6) },\r\n ...media(mediaQuery.mediaMinLarge, {\r\n ':hover': { backgroundColor: theme.primaryDarkBlue },\r\n }),\r\n ...pseudo([':nth-child(n)[data-disabled=\"true\"]'], {\r\n cursor: 'not-allowed',\r\n backgroundColor: theme.headerIconGray,\r\n ':hover': { backgroundColor: theme.headerIconGray },\r\n }),\r\n});\r\n\r\nconst ButtonText = styled.span({\r\n color: theme.white,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n});\r\n\r\nconst LinkText = styled.span({\r\n padding: { x: theme.spacing(2) },\r\n color: theme.white,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n});\r\n\r\nexport default CtaButton;\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { theme } from '../../Theme';\r\n\r\nfunction ArrowLeftIconPrimary({ compose }: StyledProps) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default styled(ArrowLeftIconPrimary);\r\n","import React from 'react';\r\nimport { styled, theme } from '../../Theme';\r\nimport { pseudo } from '@glitz/core';\r\n\r\ntype DotsType = {\r\n color?: string;\r\n lineHeight?: string;\r\n};\r\n\r\nfunction Dots({ color, lineHeight }: DotsType) {\r\n return (\r\n <>\r\n \r\n .\r\n \r\n \r\n .\r\n \r\n \r\n .\r\n \r\n \r\n );\r\n}\r\n\r\nexport default Dots;\r\n\r\n// const Wrapper = styled.div({});\r\n\r\nconst Dot = styled.div({\r\n display: 'inline-block',\r\n font: { size: theme.massive },\r\n animationName: {\r\n '0%': {\r\n opacity: '.2',\r\n },\r\n '20%': {\r\n opacity: '1',\r\n },\r\n '100%': {\r\n opacity: '.2',\r\n },\r\n },\r\n animationDuration: theme.timings.sevenFifths,\r\n animationIterationCount: 'infinite',\r\n animationFillMode: 'both',\r\n ...pseudo(':nth-child(2)', {\r\n animationDelay: theme.timings.oneFifth,\r\n }),\r\n ...pseudo(':nth-child(3)', {\r\n animationDelay: theme.timings.twoFifths,\r\n }),\r\n});\r\n"],"sourceRoot":""}