{"version":3,"sources":["webpack:///./presentation/components/ribbons/salesboard/ItemHeader.tsx","webpack:///src/presentation/components/ribbons/salesboard/ItemHeader.stylesheet.ts","webpack:///./presentation/components/ribbons/salesboard/ItemDetails.tsx","webpack:///./presentation/components/ribbons/salesboard/ItemDetails.stylesheet.ts","webpack:///./presentation/components/ribbons/salesboard/ItemPrice.tsx","webpack:///./presentation/components/ribbons/salesboard/ItemPrice.stylesheet.ts","webpack:///./presentation/components/ribbons/salesboard/ItemFeature.tsx","webpack:///src/presentation/components/ribbons/salesboard/ItemFeature.stylesheet.ts","webpack:///./presentation/components/ribbons/salesboard/ItemFeatures.tsx","webpack:///src/presentation/components/ribbons/salesboard/ItemFeatures.stylesheet.ts","webpack:///./presentation/components/ribbons/salesboard/Item.tsx","webpack:///src/presentation/components/ribbons/salesboard/Item.stylesheet.ts","webpack:///src/presentation/components/ribbons/salesboard/PaginationItem.tsx","webpack:///./presentation/components/ribbons/salesboard/Pagination.tsx","webpack:///src/presentation/components/ribbons/salesboard/Navigation.tsx","webpack:///./presentation/utils/debounce.js","webpack:///./presentation/components/ribbons/salesboard/constants.ts","webpack:///./presentation/components/ribbons/salesboard/Salesboard.tsx","webpack:///./presentation/components/ribbons/salesboard/utils.ts","webpack:///./presentation/utils/isTouchDevice.js","webpack:///./presentation/components/ribbons/salesboard/Salesboard.stylesheet.ts","webpack:///./presentation/components/ribbons/salesboard/index.ts","webpack:///./presentation/hocs/withLanguage.ts","webpack:///./presentation/components/common/Saving.js","webpack:///./presentation/components/common/ProductPrice/LegalText.tsx","webpack:///./presentation/components/common/ProductPrice/utils.ts","webpack:///./presentation/components/common/ProductPrice/ProductPrice.tsx","webpack:///./presentation/components/common/ProductPrice/ProductPrice.stylesheet.ts","webpack:///./presentation/components/common/ProductPrice/ConnectedProductPrice.ts","webpack:///./presentation/components/common/ProductPrice/index.ts","webpack:///./presentation/components/common/ProductPrice/constants.ts"],"names":["PureSalesboardItemHeader","endorse","isEndorsed","currentLanguage","imageUrl","illustration","colorway","imageAspectRatio","theme","useTheme","hasBanner","isNilOrEmpty","bannerUrl","createImageUrl","styles","typography","isMinLg","useBreakpoints","useStyles","default","root","position","width","gu2px","spacing","backgroundColor","palette","color","display","alignItems","height","maxHeight","cssSides","Side","endorseText","headingXxs","textOverflow","overflow","whiteSpace","left","right","lineHeight","bannerAspect","justifyContent","padding","paddingTop","imageAspectRatioPercentage","grey12","bannerImage","minHeight","minWidth","top","transform","modifier","Colorway","useStylesheet","style","loading","alt","createImageAlt","src","urlLanguageParse","displayName","withLanguage","PureSalesboardItemDetails","hBaseline","title","text","grey02","grey04","depth","PureSalesboardItemPrice","ctas","product","pricingStrategy","id","index","ctaProps","JSON","parse","stringify","kind","Kind","PRIMARY","isMinSm","body","flexDirection","cta","marginTop","ProductPrice","showLegalCaveat","CallToAction","ribbonId","block","glyph","data-selector","label","PureSalesboardItemFeature","feature","first","last","longhand","opacify","borderTopWidth","paddingBottom","Shortcode","code","against","LIGHT","isLastVisibleItem","f","v","i","arr","length","isLast","PureSalesboardItemFeatures","hasMoreFeatures","onShowMoreClick","showMoreFeatures","visibleFeatureLimit","features","maxFeatureLimit","parsedFeatures","toAddNumber","push","splitFeatures","slice","reverse","visibleFeatures","map","value","moreFeatures","openFeatures","toggleHeight","toggleIcon","list","listStyle","toggleBox","boxShadow","marginBottom","toggle","borderWidth","cursor","textAlign","outline","primary","borderTopColor","toggleOpen","ItemFeature","key","duration","side","X","type","onClick","icon","size","PureSalesboardItem","productId","descRef","hasFeaturedProduct","name","productName","prodSelectors","getName","tagline","getTagline","Boolean","flex","flexBasis","legalText","smallprint","getBodyColor","opacity","borderBottomColor","getBorderBottomColor","borderless","NEUTRAL","indexOf","data-value","border","ref","PureSalesboardPaginationItem","active","activeIndex","visibleItems","curvature","transition","borderRadius","Curvature","getBorderRadius","unsafeColorway","aria-hidden","PureSalesboardPagination","itemCount","Array","fill","PaginationItem","role","PureSalesboardNavigation","button","onButtonClick","onNavigationClick","func","wait","immediate","timeout","args","context","timestamp","result","later","Date","now","setTimeout","apply","debounced","this","arguments","callNow","clear","clearTimeout","VisibleItems","XS","SM","MD","LG","XL","PureSalesboard","layout","products","initialScrollOffset","breakpoints","isMinMd","isMinXl","getVisibleItems","setActiveIndex","useState","setShowMoreFeatures","showPagination","showNavigation","prefixes","split","window","DocumentTouch","document","query","matchMedia","matches","mq","join","isTouchDevice","scroller","scrollerRef","onScroll","debounce","currentVisible","children","el","getBoundingClientRect","findIndex","scrollToNode","idx","scrollTo","Math","min","node","offset","scrollLeft","behavior","nodes","useRef","direction","clickZone","bottom","marginLeft","pageNavControls","featureLengthArray","forEach","getFeaturesLengths","max","getMaxFeatureLimit","activeVisibleFeatureLimit","findResponsiveItem","supportNull","productsLength","useEffect","Ribbon","byRow","parsedNodes","current","getNodes","sliderRef","Object","values","item","Item","concat","String","Pagination","Navigation","errorBoundary","visibilitySet","Salesboard","BaseComponent","compose","connect","state","getCurrentLanguage","isPercentage","r","isFixed","Saving","intlNamespace","saving","currency","enhance","setDisplayName","defaultProps","withBreakpoints","withProps","percentage","fontWeight","highlight","verticalAlign","fixed","textDecoration","BadgeKind","HIGHLIGHT","component","pureEnhance","createStructuredSelector","interval","term","LegalText","getInterval","selectors","getDisplayPeriod","rA","hasSavingValue","hasBadge","isNotNilOrEmpty","shouldShowSetupFee","props","viewModes","excludeViewModes","hooks","mapProps","showFee","ownerProps","proposition","hasProposition","hasSaving","showSetupFee","renewalPeriod","withBreakpointsHook","priceLayout","intro","getTitleColor","content","badge","price","getContrastColor","marginRight","setupFee","fee","renewal","legalCaveat","Layout","COMPACT","priceWrapper","pricing","badgeAndNoProposition","upFront","hasDiscount","discountPerc","parseInt","amount","period","bespoke","shouldIncludeTax","mapStateToProps","includeTax","displayInterval","viewMode","productPrice","ConnectedProductPrice"],"mappings":"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","file":"pex-static/40/47.b996ebe97376dcee1986.chunk.js","sourcesContent":["import React, { ComponentClass, ReactNode } from 'react';\nimport { Display } from '@ux/typeface';\nimport createImageUrl from 'presentation/utils/createImageUrl';\nimport useStylesheet from './ItemHeader.stylesheet';\nimport createImageAlt from 'presentation/utils/createImageAlt';\nimport urlLanguageParse from 'presentation/utils/urlLanguageParse';\nimport withLanguage from 'presentation/hocs/withLanguage';\nimport { Colorway, useTheme } from '@ux/theme-utils';\nimport { ImageAspectRatio } from 'domain/constants/imageAspectRatio';\nimport { isNilOrEmpty } from 'presentation/utils/generalUtils';\n\n\ninterface OuterProps {\n  imageUrl: string,\n  imageAspectRatio?: ImageAspectRatio,\n  illustration: string,\n  endorse: ReactNode,\n  isEndorsed: boolean,\n  colorway: Colorway,\n}\n\nexport interface InnerProps extends OuterProps {\n  currentLanguage: string,\n}\n\nconst PureSalesboardItemHeader = ({\n  endorse,\n  isEndorsed,\n  currentLanguage,\n  imageUrl,\n  illustration,\n  colorway,\n  imageAspectRatio,\n}: InnerProps) => {\n  const {\n    theme,\n  } = useTheme();\n  const hasBanner = !isNilOrEmpty(imageUrl) || !isNilOrEmpty(illustration);\n  const bannerUrl = createImageUrl(\n    {\n      illustration: illustration,\n      imageUrl: imageUrl,\n    },\n    theme,\n    currentLanguage,\n  );\n  const {\n    styles,\n  } = useStylesheet({\n    colorway,\n    imageAspectRatio,\n    theme,\n  });\n\n  return (\n    <div style={styles.root}>\n      {hasBanner && (\n        <div style={styles.bannerAspect}>\n          <img\n            loading=\"lazy\"\n            alt={createImageAlt({ imageUrl: bannerUrl })}\n            src={urlLanguageParse(bannerUrl, currentLanguage)}\n            style={styles.bannerImage}\n          />\n        </div>\n      )}\n      {isEndorsed && (\n        <div style={styles.endorse}>\n          <Display\n            theme={theme}\n            style={styles.endorseText}\n          >\n            {endorse}\n          </Display>\n        </div>\n      )}\n    </div>\n  );\n};\n\nPureSalesboardItemHeader.displayName = 'SalesboardItemHeader';\n\nexport default withLanguage(PureSalesboardItemHeader) as ComponentClass<OuterProps>;\n","import { useStyles } from '@team-griffin/stylr';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport { headingXxs } from '@ux/type-size';\nimport { gu2px, Theme } from '@ux/theme-utils';\nimport { modifier } from '@ux/style-utils';\nimport { Colorway } from 'domain/constants/colorway';\nimport { imageAspectRatioPercentage } from 'presentation/utils/imageAspectRatioPercentage';\nimport { ImageAspectRatio } from 'domain/constants/imageAspectRatio';\nimport { useBreakpoints } from '@ux/responsive';\n\nexport default ({\n  colorway,\n  imageAspectRatio,\n  theme: {\n    spacing,\n    palette,\n    typography,\n  },\n}: {\n  colorway: Colorway,\n  imageAspectRatio: ImageAspectRatio,\n  theme: Theme,\n}) => {\n  const {\n    isMinLg,\n  } = useBreakpoints();\n\n  return useStyles({\n    default: {\n      root: {\n        position: 'relative',\n      },\n      illustration: {\n        width: gu2px(10, spacing),\n      },\n      endorse: {\n        backgroundColor: palette.primary,\n        color: palette.primaryContrast,\n        display: 'flex',\n        alignItems: 'center',\n        height: gu2px(4, spacing),\n        maxHeight: gu2px(4, spacing),\n        position: 'relative',\n        ...cssSides('padding', Side.Y, gu2px(1, spacing)),\n      },\n      endorseText: {\n        ...headingXxs(typography),\n        ...cssSides('padding', Side.X, gu2px(3, spacing)),\n        position: 'absolute',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        left: 0,\n        right: 0,\n        lineHeight: 1, // to keep it centered\n      },\n      bannerAspect: {\n        display: 'flex',\n        justifyContent: 'flex-content',\n        position: 'relative',\n        width: '100%',\n        height: 0,\n        padding: 0,\n        overflow: 'hidden',\n        paddingTop: imageAspectRatioPercentage(imageAspectRatio),\n        backgroundColor: palette.grey12,\n      },\n      bannerImage: {\n        position: 'absolute',\n        minHeight: '100%',\n        minWidth: '100%',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        width: '100%',\n      },\n    },\n\n    isMinLg: {\n      endorseText: {\n        ...cssSides('padding', Side.X, gu2px(4, spacing)),\n      },\n    },\n\n    [modifier('colorway', Colorway.PRIMARY)]: {\n      endorse: {\n        backgroundColor: palette.grey02,\n        color: '#fff',\n      },\n    },\n\n    [modifier('colorway', Colorway.PRIMARY_GRADIENT)]: {\n      endorse: {\n        backgroundColor: palette.grey02,\n        color: '#fff',\n      },\n    },\n\n    [modifier('colorway', Colorway.HIGHLIGHT)]: {\n      endorse: {\n        backgroundColor: palette.grey02,\n        color: '#fff',\n      },\n    },\n  }, [\n    { isMinLg },\n    { colorway },\n  ]);\n};\n","import React from 'react';\nimport useStylesheet from './ItemDetails.stylesheet';\nimport { Heading03, BodyCopy01 } from '@ux/typography';\nimport { useTheme } from '@ux/theme-utils';\nimport { ShortcodeProps } from 'presentation/components/Shortcode';\n\ninterface OuterProps {\n  hBaseline: number,\n  title: ShortcodeProps | string,\n  text: ShortcodeProps | string,\n}\n\nconst PureSalesboardItemDetails = ({\n  hBaseline,\n  title,\n  text,\n}: OuterProps) => {\n  const {\n    theme,\n  } = useTheme();\n  const {\n    styles,\n  } = useStylesheet({\n    theme,\n  });\n  return (\n    <div>\n      <Heading03\n        theme={theme}\n        depth={hBaseline}\n        style={styles.title}\n      >\n        {title}\n      </Heading03>\n      <BodyCopy01\n        theme={theme}\n        style={styles.text}\n      >\n        {text}\n      </BodyCopy01>\n    </div>\n  );\n};\n\nPureSalesboardItemDetails.displayName = 'SalesboardItemDetails';\n\nexport default PureSalesboardItemDetails;\n","import { useStyles } from '@team-griffin/stylr';\nimport { Theme } from '@ux/theme-utils';\n\nexport default ({\n  theme: {\n    palette,\n  },\n}: {\n  theme: Theme,\n}) => useStyles({\n  default: {\n    title: {\n      color: palette.grey02,\n    },\n    text: {\n      color: palette.grey04,\n    },\n  },\n});\n","import React from 'react';\nimport Message from '@ux/message';\nimport CallToAction from 'components/common/CallToAction';\nimport { Kind } from '@ux/button';\nimport ProductPrice from 'components/common/ProductPrice';\nimport useStylesheet from './ItemPrice.stylesheet';\nimport { useBreakpoints } from '@ux/responsive';\nimport { CTA } from 'core/ribbons/cta';\nimport { useTheme } from '@ux/theme-utils';\nimport { Product } from '@ux/product';\nimport { isNilOrEmpty } from 'ramda-adjunct';\n\nexport type PricingStrategy = {\n  proposition?: string,\n  paymentIntervalDisplay: number,\n  viewMode: number,\n  pricingTier: {\n    paymentInterval: number,\n    term: number,\n  }\n};\n\ninterface OuterProps {\n  ctas?: CTA[],\n  index: number,\n  id: string|number,\n  product: Product,\n  pricingStrategy: PricingStrategy,\n}\n\nconst PureSalesboardItemPrice = ({\n  ctas = [],\n  product,\n  pricingStrategy,\n  id,\n  index,\n}: OuterProps) => {\n  const ctaProps = JSON.parse(JSON.stringify(ctas[0] || {}));\n  ctaProps.kind = Kind.PRIMARY;\n  const {\n    theme,\n  } = useTheme();\n  const {\n    isMinSm,\n    isMinLg,\n  } = useBreakpoints();\n  const {\n    styles,\n  } = useStylesheet({\n    theme,\n    isMinLg,\n  });\n  return (\n    <div>\n      <div style={styles.body}>\n        <ProductPrice\n          theme={theme}\n          product={product}\n          pricingStrategy={pricingStrategy}\n          showLegalCaveat={false}\n        />\n      </div>\n      {!isNilOrEmpty(ctas[0]) && (\n        <div style={styles.cta}>\n          <CallToAction\n            product={product}\n            ribbonId={id as string}\n            index={index}\n            theme={theme}\n            block={!(isMinSm)}\n            glyph=\"arrowRight\"\n            data-selector=\"salesboard-item-cta\"\n            label={(\n              <Message id=\"usf.salesboard.item.select\"/>\n            )}\n            {...ctaProps}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nPureSalesboardItemPrice.displayName = 'SalesboardItemPrice';\n\nexport default PureSalesboardItemPrice;\n","import { useStyles } from '@team-griffin/stylr';\nimport { gu2px, Theme } from '@ux/theme-utils';\n\nexport default ({\n  theme: {\n    spacing,\n  },\n  isMinLg,\n}: {\n  theme: Theme,\n  isMinLg: boolean,\n}) => useStyles({\n  default: {\n    body: {\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n    },\n    cta: {\n      marginTop: gu2px(3, spacing),\n    },\n  },\n}, [\n  { isMinLg },\n]);\n","import React from 'react';\nimport Shortcode, { ShortcodeProps } from 'components/Shortcode';\nimport useStylesheet from './ItemFeature.stylesheet';\nimport { useTheme } from '@ux/theme-utils';\nimport { Colorway } from 'domain/constants/colorway';\n\nexport type FeatureProps = {\n  text: ShortcodeProps | string,\n};\n\ninterface OuterProps {\n  feature: FeatureProps,\n  first?: boolean,\n  last?: boolean,\n}\n\nconst PureSalesboardItemFeature = ({\n  feature,\n  first,\n  last,\n}: OuterProps) => {\n  const {\n    theme,\n  } = useTheme();\n  const {\n    styles,\n  } = useStylesheet({\n    theme,\n    first,\n    last,\n  });\n  return (\n    <li style={styles.root}>\n      <Shortcode\n        code={feature.text}\n        against={Colorway.LIGHT}\n      />\n    </li>\n  );\n};\n\nPureSalesboardItemFeature.displayName = 'SalesboardItemFeature';\n\nexport default PureSalesboardItemFeature;\n","import { useStyles } from '@team-griffin/stylr';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport { gu2px, Theme } from '@ux/theme-utils';\nimport { opacify } from '@ux/style-utils';\nimport longhand from '@team-griffin/css-longhand';\n\nexport default ({\n  theme: {\n    spacing,\n    palette,\n  },\n  first,\n  last,\n}: {\n  theme: Theme,\n  first: boolean,\n  last: boolean,\n}) => useStyles({\n  default: {\n    root: {\n      ...cssSides('padding', Side.Y, gu2px(2, spacing)),\n      ...cssSides('margin', Side.A, 0),\n      ...longhand('borderTop', {\n        style: 'solid',\n        width: 1,\n        color: opacify(palette.grey06, 0.2),\n      }),\n    },\n  },\n\n  first: {\n    root: {\n      paddingTop: 0,\n      borderTopWidth: 0,\n    },\n  },\n\n  last: {\n    root: {\n      paddingBottom: 0,\n    },\n  },\n}, [\n  { first },\n  { last },\n]);\n","import React from 'react';\nimport ItemFeature, { FeatureProps } from './ItemFeature';\nimport AnimateHeight from 'react-animate-height';\nimport PaddingBox, { Side } from '@ux/padding-box';\nimport Glyph from '@ux/glyphs';\nimport useStylesheet from './ItemFeatures.stylesheet';\nimport { isNilOrEmpty } from 'presentation/utils/generalUtils';\nimport { Colorway } from '@ux/theme-utils';\n\ninterface OuterProps {\n  colorway: Colorway,\n  features: FeatureProps[],\n  visibleFeatureLimit: number,\n  maxFeatureLimit: number,\n  id: string,\n  index: number,\n  hasMoreFeatures: boolean,\n  showMoreFeatures: boolean,\n  isEndorsed: boolean,\n  onShowMoreClick: (evt: any) => void,\n}\n\nexport interface InnerProps extends OuterProps {\n  toggleHeight: string|number,\n  toggleIcon: 'string',\n}\n\nconst isLast = (index: number, arr: any[]) => index === arr.length - 1;\n// we have no hidden features, and item is last in array\nconst isLastVisibleItem = (f: boolean, v: any[], i: number) => !f && isLast(i, v);\n\ndeclare const i: number;\ndeclare const feature: FeatureProps;\n\nconst PureSalesboardItemFeatures = ({\n  colorway,\n  hasMoreFeatures,\n  onShowMoreClick,\n  isEndorsed,\n  showMoreFeatures,\n  visibleFeatureLimit,\n  features,\n  maxFeatureLimit,\n  index,\n  id,\n}: OuterProps) => {\n  // pad the array so it is the same length as the longest product\n  const parsedFeatures = [ ...features ];\n  const toAddNumber = maxFeatureLimit - features.length;\n  if (toAddNumber > 0) {\n    for (let i = 0; i < toAddNumber; i+=1) {\n      parsedFeatures.push({\n        text: '\\u2014',\n      });\n    }\n  }\n  // split into 2 arrays of visible items and hidden items\n  let splitFeatures = [\n    parsedFeatures.slice(0, visibleFeatureLimit),\n    parsedFeatures.slice(visibleFeatureLimit),\n  ];\n  if (isNilOrEmpty(visibleFeatureLimit)) {\n    splitFeatures = splitFeatures.reverse();\n  }\n  const visibleFeatures = splitFeatures[0].map((value, i) => ({\n    value,\n    index: `vf_${i}_${id}_${index}`,\n  }));\n  const moreFeatures = splitFeatures[1].map((value, i) => ({\n    value,\n    index: `mf${i}_${id}_${index}`,\n  }));\n  // if showMoreFeatures toggle has been activated,\n  // or we have a `null` visibleFeatureLimit\n  // we want to open up the animated height area\n  const openFeatures = showMoreFeatures || (visibleFeatureLimit === null);\n\n  const {\n    toggleHeight,\n    toggleIcon,\n  } = (() => {\n    if (openFeatures) {\n      return {\n        toggleHeight: 'auto' as string | number,\n        toggleIcon: 'chevronUp',\n      };\n    }\n    return {\n      toggleHeight: 0,\n      toggleIcon: 'chevronDown',\n    };\n  })();\n\n  const {\n    styles,\n  } = useStylesheet({\n    toggleHeight,\n    isEndorsed,\n    hasMoreFeatures,\n    colorway,\n  });\n\n  return (\n    <>\n      <PaddingBox\n        style={styles.root}\n      >\n        <ul style={styles.list}>\n          {visibleFeatures.map((feature, i) => (\n            <ItemFeature\n              key={feature.index}\n              feature={feature.value}\n              first={i === 0}\n              last={isLastVisibleItem(hasMoreFeatures, visibleFeatures, i)}\n            />\n          ))}\n          <AnimateHeight\n            height={toggleHeight}\n            duration={300}\n          >\n            {moreFeatures.map((feature) => (\n              <ItemFeature\n                key={feature.index}\n                feature={feature.value}\n              />\n            ))}\n          </AnimateHeight>\n        </ul>\n      </PaddingBox>\n      {hasMoreFeatures && (\n        <PaddingBox\n          side={Side.X}\n          style={styles.toggleBox}\n        >\n          <button\n            type=\"button\"\n            onClick={onShowMoreClick}\n            style={styles.toggle}\n          >\n            <Glyph\n              icon={toggleIcon}\n              size={styles.toggleIcon.width as number}\n              color={styles.toggleIcon.color as string}\n            />\n          </button>\n        </PaddingBox>\n      )}\n    </>\n  );\n};\n\nPureSalesboardItemFeatures.displayName = 'SalesboardItemFeatures';\n\n\nexport default PureSalesboardItemFeatures;\n","import { useStyles } from '@team-griffin/stylr';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport longhand from '@team-griffin/css-longhand';\nimport { opacify } from '@ux/style-utils';\nimport { Colorway, gu2px, useTheme } from '@ux/theme-utils';\nimport { useBreakpoints } from '@ux/responsive';\n\nexport default ({\n  toggleHeight,\n  isEndorsed,\n  hasMoreFeatures,\n  colorway,\n}: {\n  toggleHeight: string|number,\n  isEndorsed: boolean,\n  hasMoreFeatures: boolean,\n  colorway: Colorway,\n}) => {\n  const {\n    isMinLg,\n  } = useBreakpoints();\n  const {\n    theme: {\n      spacing,\n      palette,\n    },\n  } = useTheme();\n  return useStyles({\n    default: {\n      root: {\n        ...longhand('borderTop', {\n          width: gu2px(0.5, spacing),\n          style: 'solid',\n          color: opacify(palette.grey06, 0.2),\n        }),\n      },\n      list: {\n        ...cssSides('margin', Side.A, 0),\n        ...cssSides('padding', Side.A, 0),\n        listStyle: 'none',\n      },\n      toggleBox: {\n        boxShadow: `0 ${0 - gu2px(0.5, spacing)}px 0 ${opacify(palette.grey06, 0.2)}`,\n        position: 'relative',\n        // offset 3GU padding + 2GU item padding  + 1GU peak\n        top: 0 - gu2px(6, spacing),\n        marginBottom: 0 - gu2px(6, spacing),\n      },\n      toggle: {\n        borderWidth: 0,\n        display: 'block',\n        width: '100%',\n        cursor: 'pointer',\n        ...cssSides('padding', Side.X, 0),\n        ...cssSides('padding', Side.Y, gu2px(2, spacing)),\n        backgroundColor: '#fff',\n        color: palette.primary,\n        textAlign: 'center',\n        outline: 0,\n      },\n      toggleIcon: {\n        width: gu2px(3, spacing),\n        color: palette.primary,\n      },\n    },\n\n    isEndorsed: {\n      root: {\n        borderTopColor: (() => {\n          if ([\n            Colorway.PRIMARY,\n            Colorway.PRIMARY_GRADIENT,\n            Colorway.HIGHLIGHT,\n          ].indexOf(colorway) > -1) {\n            return palette.grey02;\n          }\n          return palette.primary;\n        })(),\n      },\n    },\n\n    isMinLg: {\n      toggleBox: {\n        // offset 4GU padding + 2GU item padding  + 1GU peak\n        top: 0 - gu2px(7, spacing),\n        marginBottom: 0 - gu2px(7, spacing),\n      },\n    },\n\n    toggleOpen: {\n      list: {\n        // compensate for negative margin of toggle box\n        marginBottom: gu2px(4, spacing),\n      },\n    },\n  }, [\n    { isEndorsed },\n    { isMinLg },\n    { toggleOpen: toggleHeight === 'auto' && hasMoreFeatures },\n  ]);\n};","import React, { ReactNode } from 'react';\nimport Panel from '@ux/panel';\nimport Header from './ItemHeader';\nimport Details from './ItemDetails';\nimport Price, { PricingStrategy } from './ItemPrice';\nimport PaddingBox from '@ux/padding-box';\nimport { LegalText } from 'components/common/ProductPrice';\nimport Features from './ItemFeatures';\nimport useStylesheet from './Item.stylesheet';\nimport { Product, selectors as prodSelectors } from '@ux/product';\nimport { Colorway } from '@ux/theme-utils';\nimport { FeatureProps } from './ItemFeature';\nimport { CTA } from 'core/ribbons/cta';\nimport { ImageAspectRatio } from 'domain/constants/imageAspectRatio';\n\nexport type ProductDetailsType = {\n  tagline: string,\n  productName: string,\n};\n\ninterface OuterProps {\n  colorway: Colorway,\n  product?: Product,\n  features: FeatureProps[],\n  hBaseline: number,\n  illustration?: string,\n  imageUrl?: string,\n  imageAspectRatio?: ImageAspectRatio,\n  ctas: CTA[],\n  pricingStrategy: PricingStrategy,\n  endorse: ReactNode,\n  productId: string,\n  index: number,\n  id: string,\n  visibleFeatureLimit: number,\n  maxFeatureLimit: number,\n  hasMoreFeatures: boolean,\n  showMoreFeatures: boolean,\n  onShowMoreClick: (evt: any) => void,\n  descRef: any,\n  hasFeaturedProduct?: boolean,\n  text?: ProductDetailsType,\n}\n\nconst PureSalesboardItem = ({\n  colorway,\n  features,\n  endorse,\n  hBaseline,\n  illustration,\n  imageUrl,\n  imageAspectRatio,\n  product = {} as Product,\n  ctas,\n  pricingStrategy,\n  productId,\n  visibleFeatureLimit,\n  maxFeatureLimit,\n  hasMoreFeatures,\n  showMoreFeatures,\n  descRef,\n  id,\n  index,\n  onShowMoreClick,\n  hasFeaturedProduct,\n  text,\n}: OuterProps) => {\n  const name = text?.productName ?? prodSelectors.getName({ product });\n  const tagline = text?.tagline ?? prodSelectors.getTagline({ product });\n\n  const isEndorsed = Boolean(endorse);\n  const {\n    styles,\n  } = useStylesheet({\n    colorway,\n    isEndorsed,\n    hasFeaturedProduct,\n  });\n  const borderless = [\n    Colorway.LIGHT,\n    Colorway.NEUTRAL,\n  ].indexOf(colorway) === -1;\n\n  return (\n    <div\n      data-selector=\"salesboard-item\"\n      data-value={productId}\n    >\n      <Panel\n        border={!borderless}\n        style={styles.root}\n      >\n        <Header\n          colorway={colorway}\n          illustration={illustration}\n          imageUrl={imageUrl}\n          imageAspectRatio={imageAspectRatio}\n          isEndorsed={isEndorsed}\n          endorse={endorse}\n        />\n        <div ref={descRef}>\n          <PaddingBox\n            style={styles.body}\n          >\n            <Details\n              hBaseline={hBaseline}\n              title={name}\n              text={tagline}\n            />\n            <Price\n              ctas={ctas}\n              id={id}\n              index={index}\n              product={product}\n              pricingStrategy={pricingStrategy}\n            />\n          </PaddingBox>\n        </div>\n        <Features\n          colorway={colorway}\n          isEndorsed={isEndorsed}\n          features={features}\n          onShowMoreClick={onShowMoreClick}\n          showMoreFeatures={showMoreFeatures}\n          hasMoreFeatures={hasMoreFeatures}\n          visibleFeatureLimit={visibleFeatureLimit}\n          maxFeatureLimit={maxFeatureLimit}\n          id={id}\n          index={index}\n        />\n      </Panel>\n      <div style={styles.legalText}>\n        <LegalText\n          product={product}\n          pricingStrategy={pricingStrategy}\n        />\n      </div>\n    </div>\n  );\n};\n\nPureSalesboardItem.displayName = 'SalesboardItem';\n\nexport default PureSalesboardItem;\n","import { useStyles } from '@team-griffin/stylr';\nimport { Colorway, gu2px, useTheme } from '@ux/theme-utils';\nimport { smallprint } from '@ux/type-size';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport { getBodyColor } from 'presentation/utils/colorway';\nimport { useBreakpoints } from '@ux/responsive';\n\nexport default ({\n  colorway,\n  isEndorsed,\n  hasFeaturedProduct,\n\n}: {\n  colorway: Colorway,\n  isEndorsed: boolean,\n  hasFeaturedProduct: boolean,\n}) => {\n  const {\n    isMinLg,\n  } = useBreakpoints();\n  const {\n    theme,\n    theme: {\n      palette,\n      typography,\n      spacing,\n    },\n  } = useTheme();\n  const getBorderBottomColor = (colorway: Colorway) => {\n    if ([\n      Colorway.PRIMARY,\n      Colorway.PRIMARY_GRADIENT,\n      Colorway.HIGHLIGHT,\n    ].indexOf(colorway) > -1) {\n      return palette.grey02;\n    }\n    return palette.primary;\n  };\n  return useStyles({\n    default: {\n      root: {\n        flex: 1,\n        flexBasis: 'auto',\n      },\n      body: {\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'space-between',\n        height: '100%',\n      },\n      legalText: {\n        ...smallprint(typography),\n        ...cssSides('margin', Side.X, gu2px(3, spacing)),\n        marginTop: gu2px(1, spacing),\n        color: getBodyColor(theme, colorway),\n        opacity: 0.9,\n      },\n    },\n    hasFeaturedProduct: {\n      root: {\n        marginTop: gu2px(4, spacing),\n      },\n    },\n    isEndorsed: {\n      root: {\n        marginTop: 0,\n      },\n      body: {\n        borderBottomColor: getBorderBottomColor(colorway),\n      },\n    },\n    isMinLg: {\n      legalText: {\n        ...cssSides('margin', Side.X, gu2px(4, spacing)),\n      },\n    },\n  }, [\n    { isMinLg },\n    { hasFeaturedProduct },\n    { isEndorsed },\n  ]);\n};\n","import React from 'react';\nimport { opacify } from '@ux/style-utils';\nimport { gu2px, Curvature, Colorway, useTheme } from '@ux/theme-utils';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport {\n  useStyles,\n} from '@team-griffin/stylr';\n\ninterface OuterProps {\n  colorway: Colorway,\n  activeIndex: number,\n  index: number,\n  visibleItems: number,\n  role: string,\n}\n\nconst useStylesheet = ({\n  colorway,\n  active,\n}: {\n  colorway: Colorway,\n  active: boolean,\n}) => {\n  const {\n    theme: {\n      spacing,\n      palette,\n      curvature,\n    },\n  } = useTheme();\n  const getBorderRadius = (curvature: Curvature) => {\n    if (curvature === Curvature.WEAK) {\n      return 2;\n    }\n    if (curvature === Curvature.STRONG) {\n      return gu2px(2, spacing);\n    }\n    return 0;\n  };\n  return useStyles({\n    default: {\n      root: {\n        display: 'block',\n        height: gu2px(0.5, spacing),\n        width: gu2px(3, spacing),\n        ...cssSides('margin', Side.X, gu2px(0.5, spacing)),\n        backgroundColor: opacify(palette.grey06, 0.5),\n        transition: 'background-color 0.2s ease-in-out, height 0.2s ease-in-out',\n        borderRadius: getBorderRadius(curvature),\n      },\n    },\n    unsafeColorway: {\n      root: {\n        backgroundColor: opacify(palette.grey09, 0.5),\n      },\n    },\n    active: {\n      root: {\n        backgroundColor: palette.secondary,\n        height: gu2px(1, spacing),\n      },\n    },\n  }, [\n    {\n      unsafeColorway: [\n        Colorway.PRIMARY,\n        Colorway.DARK,\n        Colorway.PRIMARY_GRADIENT,\n        Colorway.HIGHLIGHT,\n      ].indexOf(colorway) > -1,\n    },\n    { active },\n  ]);\n};\n\nconst PureSalesboardPaginationItem = ({\n  colorway,\n  visibleItems,\n  activeIndex,\n  index,\n}: OuterProps) => {\n  const visible = visibleItems-1; // others are 0 indexed\n\n  // it's active if if it's the current index,\n  // or it's between the activeIndex and the visibleLimit added together\n  const active =index === activeIndex || (index >= activeIndex && index <=activeIndex + visible);\n\n  const {\n    styles,\n  } = useStylesheet({\n    colorway,\n    active,\n  });\n  return (\n    <span\n      style={styles.root}\n      aria-hidden=\"true\"\n    />\n  );\n};\n\nPureSalesboardPaginationItem.displayName = 'SalesboardPaginationItem';\n\nexport default PureSalesboardPaginationItem;\n","import React from 'react';\nimport PaginationItem from './PaginationItem';\nimport { gu2px, useTheme } from '@ux/theme-utils';\nimport { useStyles } from '@team-griffin/stylr';\nimport { Colorway } from 'domain/constants/colorway';\n\ninterface OuterProps {\n  itemCount: number,\n  activeIndex: number,\n  colorway: Colorway,\n  visibleItems: number,\n}\n\nconst useStylesheet = () => {\n  const {\n    theme: {\n      spacing,\n    },\n  } = useTheme();\n  return useStyles({\n    default: {\n      root: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        height: gu2px(1, spacing),\n      },\n    },\n  });\n};\n\ndeclare const i: number;\n\nconst PureSalesboardPagination = ({\n  itemCount,\n  activeIndex,\n  visibleItems,\n  colorway,\n}: OuterProps) => {\n  const {\n    styles,\n  } = useStylesheet();\n  return (\n    <div style={styles.root}>\n      <For\n        each=\"item\"\n        of={new Array(itemCount).fill(0)}\n        index=\"i\"\n      >\n        <PaginationItem\n          colorway={colorway}\n          role=\"button\"\n          key={`item_${i}`}\n          activeIndex={activeIndex}\n          visibleItems={visibleItems}\n          index={i}\n        />\n      </For>\n    </div>\n  );\n};\n\nPureSalesboardPagination.displayName = 'SalesboardPagination';\n\nexport default PureSalesboardPagination;\n","import React from 'react';\nimport Glyph from '@ux/glyphs';\nimport { Colorway, gu2px, useTheme } from '@ux/theme-utils';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport { useStyles } from '@team-griffin/stylr';\nimport { getBodyColor } from 'presentation/utils/colorway';\n\ninterface OuterProps {\n  colorway: Colorway,\n  onNavigationClick: (direction: string) => void,\n}\n\nconst useStylesheet = ({\n  colorway,\n}: {\n  colorway: Colorway,\n}) => {\n  const {\n    theme,\n    theme: {\n      palette,\n      spacing,\n    },\n  } = useTheme();\n  return useStyles({\n    default: {\n      root: {\n        display: 'flex',\n        justifyContent: 'space-between',\n      },\n      button: {\n        backgroundColor: 'transparent',\n        color: palette.grey02,\n        outline: 0,\n        borderWidth: 0,\n        height: gu2px(6, spacing),\n        cursor: 'pointer',\n        ...cssSides('padding', Side.X, gu2px(3, spacing)),\n        ...cssSides('padding', Side.Y, 0),\n      },\n      icon: {\n        width: gu2px(3, spacing),\n        color: getBodyColor(theme, colorway),\n      },\n    },\n  });\n};\n\nconst PureSalesboardNavigation = ({\n  onNavigationClick,\n  colorway,\n}: OuterProps) => {\n  const {\n    styles,\n  } = useStylesheet({\n    colorway,\n  });\n\n  const onButtonClick = (direction: string) => onNavigationClick(direction);\n\n  return (\n    <div style={styles.root}>\n      <button\n        type=\"button\"\n        style={styles.button}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => onButtonClick('prev')}\n      >\n        <Glyph\n          size={styles.icon.width as number}\n          color={styles.icon.color as string}\n          icon=\"arrowLeft\"\n        />\n      </button>\n      <button\n        type=\"button\"\n        style={styles.button}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => onButtonClick('next')}\n      >\n        <Glyph\n          size={styles.icon.width as number}\n          color={styles.icon.color as string}\n          icon=\"arrowRight\"\n        />\n      </button>\n    </div>\n  );\n};\n\nPureSalesboardNavigation.displayName = 'SalesboardNavigation';\n\nexport default PureSalesboardNavigation;\n","// from: https://github.com/component/debounce\n/* eslint-disable */\nexport default (func, wait, immediate) => {\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100\n\n  function later() {\n    var last = Date.now() - timestamp\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last)\n    } else {\n      timeout = null\n      if (!immediate) {\n        result = func.apply(context, args)\n        context = args = null\n      }\n    }\n  }\n\n  var debounced = function(){\n    context = this\n    args = arguments\n    timestamp = Date.now()\n    var callNow = immediate && !timeout\n    if (!timeout) timeout = setTimeout(later, wait)\n    if (callNow) {\n      result = func.apply(context, args)\n      context = args = null\n    }\n\n    return result\n  }\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = null\n    }\n  }\n\n  return debounced;\n}","export const VisibleItems = {\n  XS: 1,\n  SM: 2,\n  MD: 3,\n  LG: 4,\n  XL: 6,\n};\n\nexport default null;","import React, { useRef, useState, useEffect, ComponentType } from 'react';\nimport Ribbon from 'components/ribbons/Ribbon';\nimport PaddingBox from '@ux/padding-box';\nimport Slider from '@ux/slider';\nimport { Container } from '@ux/grid';\nimport Item, { ProductDetailsType } from './Item';\nimport Pagination from './Pagination';\nimport Navigation from './Navigation';\nimport Equalizer from 'react-equalizer';\nimport { useBreakpoints } from '@ux/responsive';\nimport findResponsiveItem from 'presentation/utils/findResponsiveItem';\nimport errorBoundary from 'presentation/hocs/errorBoundary';\nimport visibilitySet from 'presentation/hocs/visibilitySet';\nimport debounce from 'presentation/utils/debounce';\nimport isTouchDevice from 'presentation/utils/isTouchDevice';\nimport useStylesheet from './Salesboard.stylesheet';\nimport { useTheme, gu2px } from '@ux/theme-utils';\nimport { VisibleItems } from './constants';\nimport { RibbonProps } from 'domain/constants/ribbons';\nimport { Product } from '@ux/product';\nimport { FeatureProps } from './ItemFeature';\nimport { CTA } from 'core/ribbons/cta';\nimport { PricingStrategyType } from '../domain-promo/CardLink';\nimport { getMaxFeatureLimit, getVisibleItems } from './utils';\n\nexport type SalesboardProductType = {\n  action?: string,\n  ctas: CTA[],\n  endorse: boolean,\n  features: FeatureProps[],\n  illustration?: string,\n  imageUrl?: string,\n  pricingStrategy: PricingStrategyType,\n  product: Product,\n  productId: string,\n  text?: ProductDetailsType,\n};\n\ninterface OuterProps extends RibbonProps {\n  initialScrollOffset?: number,\n  products?: SalesboardProductType[],\n  hBaseline?: number,\n  visibleFeatureLimit: number,\n}\n\nconst PureSalesboard = ({\n  layout,\n  name,\n  products = [],\n  colorway,\n  loading,\n  hBaseline = 1,\n  id,\n  visibleFeatureLimit,\n  initialScrollOffset = 0,\n}: OuterProps) => {\n  const {\n    theme,\n  } = useTheme();\n  const breakpoints = useBreakpoints();\n  const {\n    isMinSm,\n    isMinMd,\n  } = breakpoints;\n\n  const visibleItems = getVisibleItems(breakpoints);\n  const [ activeIndex, setActiveIndex ] = useState(initialScrollOffset);\n  const [ showMoreFeatures, setShowMoreFeatures ] = useState(false);\n  const onShowMoreClick = () => setShowMoreFeatures(!showMoreFeatures);\n\n  // we have more items than fit on the screen\n  const showPagination = products.length > visibleItems;\n  // only show arrow nav if we're not a touch device\n  const showNavigation = !isTouchDevice() && showPagination;\n\n  const [ scroller, scrollerRef ]: [any, any] = useState(null);\n\n  const onScroll = debounce(() => {\n    // we only run the active index setter via scroll when on smaller screens\n    if (!isMinMd) {\n      const arrayedCollection = Array(...scroller.children).map(\n        ((el) => el.getBoundingClientRect().left)\n      );\n      const currentVisible = arrayedCollection.findIndex((value) => value > 0 && value < 100);\n      if (currentVisible > -1) {\n        setActiveIndex(currentVisible);\n      }\n    }\n  }, 100);\n  // take an index and scroll to that node, used for desktop/button nav\n  const scrollToNode = (idx: number) => {\n    if (!scroller || !scroller.scrollTo || !scroller.children) {\n      return;\n    }\n\n    // check index is with bounds\n    const index = idx < 0 ? 0 : Math.min(idx, products.length - visibleItems);\n\n    const node = scroller.children[index];\n\n    if (!node) {\n      return;\n    }\n\n    const offset = node.getBoundingClientRect();\n\n    scroller.scrollTo({\n      left: scroller.scrollLeft + offset.left - gu2px(1, theme.spacing),\n      top: offset.top,\n      behavior: 'smooth',\n    });\n    setActiveIndex(index);\n  };\n\n  const nodes = (() => {\n    const nodes = [];\n    for (let i = 0; i< 12; i+=1) {\n      nodes.push(useRef());\n    }\n    return nodes;\n  })();\n  const getNodes = () => {\n    const parsedNodes = [] as any[];\n    nodes.forEach((node) => {\n      if (node.current) {\n        parsedNodes.push(node.current);\n      }\n    });\n    return parsedNodes;\n  };\n\n  const onNavigationClick = (direction: string) => {\n    if (direction === 'next') {\n      scrollToNode(activeIndex + 1);\n    }\n\n    if (direction === 'prev') {\n      scrollToNode(activeIndex - 1);\n    }\n  };\n\n  const {\n    styles,\n  } = useStylesheet({\n    theme,\n    showNavigation,\n    isMinSm,\n  });\n\n  const maxFeatureLimit = getMaxFeatureLimit(products);\n\n  const activeVisibleFeatureLimit = findResponsiveItem(\n    breakpoints,\n    visibleFeatureLimit,\n    {\n      supportNull: true,\n    },\n  );\n\n  const hasMoreFeatures = (activeVisibleFeatureLimit !== null) &&\n    (activeVisibleFeatureLimit < maxFeatureLimit);\n\n  let hasFeaturedProduct = false;\n  let i = 0;\n  const productsLength = products.length;\n\n  while (hasFeaturedProduct === false && i < productsLength) {\n    if (products[i].endorse) {\n      hasFeaturedProduct = true;\n    }\n    i += 1;\n  }\n  // on first load, scroll to the correct node\n  useEffect(\n    () => {\n      scrollToNode(initialScrollOffset);\n    },\n    [ scroller ],\n  );\n\n  return (\n    <Ribbon\n      id={id}\n      theme={theme}\n      layout={layout}\n      name={name}\n      colorway={colorway}\n      loading={loading}\n      type=\"Salesboard\"\n    >\n      <div style={styles.root}>\n        <Equalizer\n          byRow={false}\n          // eslint-disable-next-line react/jsx-no-bind\n          nodes={() => getNodes()}\n        >\n\n          <Slider\n            theme={theme}\n            sliderRef={scrollerRef}\n            onScroll={onScroll}\n            /*\n            // @ts-ignore */\n            visibleItems={Object.values(VisibleItems)}\n          >\n            {products.map((item, i) => (\n              <Item\n                key={`salesboard_item_${id}`.concat(String(i))}\n                id={id}\n                index={i}\n                descRef={nodes[i]}\n                hasFeaturedProduct={hasFeaturedProduct}\n                colorway={colorway}\n                hBaseline={hBaseline}\n                onShowMoreClick={onShowMoreClick}\n                showMoreFeatures={showMoreFeatures}\n                hasMoreFeatures={hasMoreFeatures}\n                maxFeatureLimit={maxFeatureLimit}\n                visibleFeatureLimit={activeVisibleFeatureLimit}\n                {...item}\n              />\n            ))}\n          </Slider>\n        </Equalizer>\n        <Container>\n          {showPagination && (\n            <div\n              style={styles.clickZone}\n              role=\"button\"\n              aria-hidden=\"true\"\n              // eslint-disable-next-line\n              onClick={() => onNavigationClick('next')}\n            />\n          )}\n          {(showPagination || showNavigation) && (\n            <PaddingBox\n              style={styles.pageNavControls}\n            >\n              {showPagination && (\n                <Pagination\n                  colorway={colorway}\n                  visibleItems={visibleItems}\n                  activeIndex={activeIndex}\n                  itemCount={products.length}\n                />\n              )}\n              {showNavigation && (\n                <Navigation\n                  colorway={colorway}\n                  onNavigationClick={onNavigationClick}\n                />\n              )}\n            </PaddingBox>\n          )}\n        </Container>\n      </div>\n    </Ribbon>\n  );\n};\n\nPureSalesboard.displayName = 'Salesboard';\n\nexport default errorBoundary(visibilitySet(PureSalesboard)) as ComponentType<OuterProps>;\n","import { BreakpointProps } from '@ux/responsive';\nimport { VisibleItems } from './constants';\nimport { SalesboardProductType } from './Salesboard';\n\nexport const getFeaturesLengths = (products: SalesboardProductType[]) => {\n  const featureLengthArray = [] as number[];\n  products.forEach((product) => {\n    featureLengthArray.push(product.features?.length ?? 0);\n  });\n  return featureLengthArray;\n};\n\nexport const getMaxFeatureLimit = (products: SalesboardProductType[]) => {\n  const featureLengthArray = getFeaturesLengths(products);\n  return Math.max(...featureLengthArray);\n};\n\nexport const getVisibleItems = (breakpoints: BreakpointProps) => {\n  const {\n    isMinSm,\n    isMinMd,\n    isMinLg,\n    isMinXl,\n  } = breakpoints;\n  if (isMinXl) {\n    return VisibleItems.XL;\n  }\n  if (isMinLg) {\n    return VisibleItems.LG;\n  }\n  if (isMinMd) {\n    return VisibleItems.MD;\n  }\n  if (isMinSm) {\n    return VisibleItems.SM;\n  }\n  return VisibleItems.XS;\n};","export default () => {\n  const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');\n  const mq = (query) => {\n    return window.matchMedia(query).matches;\n  };\n\n  if (('ontouchstart' in window) ||\n    (window.DocumentTouch && document instanceof window.DocumentTouch)) {\n    return true;\n  }\n\n  // include the 'heartz' as a way to have a non matching MQ to help terminate the join\n  // https://git.io/vznFH\n  const query = [ '(', prefixes.join('touch-enabled),('), 'heartz', ')' ].join('');\n  return mq(query);\n};","import { useStyles } from '@team-griffin/stylr';\nimport { gu2px, Theme } from '@ux/theme-utils';\n\nexport default ({\n  theme: {\n    spacing,\n  },\n  showNavigation,\n  isMinSm,\n}: {\n  theme: Theme,\n  showNavigation: boolean,\n  isMinSm: boolean,\n}) => {\n  return useStyles({\n    default: {\n      root: {\n        position: 'relative',\n        overflow: 'hidden',\n      },\n      clickZone: {\n        position: 'absolute',\n        // arbitrary number high enough to fill the void off screen\n        width: '20%',\n        left: '100%',\n        top: 0,\n        bottom: 0,\n        // 4gu clickable target\n        marginLeft: 0 - gu2px(4, spacing),\n      },\n      pageNavControls: {\n        marginTop: gu2px(1, spacing),\n      },\n    },\n    isMinSm: {\n      pageNavControls: {\n        marginTop: gu2px(2, spacing),\n      },\n    },\n\n    showNavigation: {\n      pageNavControls: {\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n      },\n    },\n  }, {\n    isMinSm,\n    showNavigation,\n  });\n};\n","import Salesboard from './Salesboard';\n\nexport default Salesboard;\n","import {\n  compose,\n} from 'recompose';\nimport { connect } from 'react-redux';\nimport { getCurrentLanguage } from 'domain/selectors/ribbons';\n\nexport default (BaseComponent: any) => {\n  return compose(\n    connect((state) => {\n      return {\n        currentLanguage: getCurrentLanguage(state),\n      };\n    }),\n  )(BaseComponent);\n};\n","import React from 'react';\nimport {\n  compose,\n  setDisplayName,\n  defaultProps,\n  withProps,\n} from 'recompose';\n// import { fastCompare } from '@ux/perf';\nimport {\n  FormattedNumber, FormattedMessage,\n} from 'react-intl';\nimport Message from '@ux/message';\nimport Badge, { Kind as BadgeKind } from '@ux/badge';\nimport { Display } from '@ux/typeface';\nimport { withBreakpoints } from '@ux/responsive';\nimport { gu2px } from '@ux/theme-utils';\nimport * as r from 'ramda';\nimport { Heading06 } from '@ux/typography';\nimport { useStyles } from '@team-griffin/stylr';\n\nconst stylesheet = ({\n  theme,\n}) => {\n  const {\n    spacing,\n    palette,\n  } = theme;\n\n  return useStyles({\n    default: {\n      root: {\n        marginLeft: r.negate(gu2px(1, spacing)),\n      },\n      percentage: {\n        fontWeight: 'normal',\n        color: palette.highlight,\n        verticalAlign: 'middle',\n      },\n      fixed: {\n        fontWeight: 'normal',\n        color: palette.highlight,\n        verticalAlign: 'middle',\n        textDecoration: 'line-through',\n      },\n    },\n  }, []);\n};\n\nconst isPercentage = r.propEq('type', 'percentage');\nconst isFixed = r.propEq('type', 'fixed');\n\nconst Saving = r.cond([\n  [ isPercentage, ({\n    value,\n    intlNamespace,\n  }) => (\n    <FormattedMessage\n      id={`${intlNamespace}.saving.percentage`}\n      values={{\n        saving: (<span>{`${value}%`}</span>),\n      }}\n    />\n  ) ],\n  [ isFixed, ({\n    value,\n    currency,\n    intlNamespace,\n  }) => (\n    <FormattedMessage\n      id={`${intlNamespace}.saving.fixed`}\n      values={{\n        saving: (\n          <FormattedNumber\n            value={value}\n            // eslint-disable-next-line react/style-prop-object\n            style=\"currency\"\n            currency={currency}\n          />\n        ),\n      }}\n    />\n  ) ],\n  [ r.T, r.always(null) ],\n]);\n\nexport const PureSaving = ({\n  styles,\n  theme,\n  type,\n  value,\n  currency,\n  intlNamespace,\n}) => (\n  <Display\n    theme={theme}\n    style={styles.root}\n  >\n    <Badge\n      theme={theme}\n      kind={BadgeKind.HIGHLIGHT}\n    >\n      <Message id={`${intlNamespace}.saving.badge`}/>\n    </Badge>\n    <Heading06\n      style={styles[type]}\n      theme={theme}\n      component=\"span\"\n    >\n      <Saving\n        type={type}\n        value={value}\n        currency={currency}\n        intlNamespace={intlNamespace}\n      />\n    </Heading06>\n  </Display>\n);\n\nexport const enhance = compose(\n  setDisplayName('Saving'),\n  // fastCompare,\n  defaultProps({\n    intlNamespace: 'usf',\n  }),\n  withBreakpoints,\n  withProps(stylesheet),\n);\n\nexport default enhance(PureSaving);\n","import { withProps } from '@team-griffin/rehook';\nimport { createStructuredSelector } from 'reselect';\nimport * as r from 'ramda';\nimport { LegalText } from '@ux/product';\nimport pureEnhance from '@ux/pure-enhance';\n\nconst enhance = pureEnhance('LegalText', [\n  withProps(createStructuredSelector({\n    interval: r.path([ 'pricingStrategy', 'pricingTier', 'paymentInterval' ]),\n    term: r.path([ 'pricingStrategy', 'pricingTier', 'term' ]),\n  })),\n]);\n\nexport default enhance(LegalText);\n","import * as r from 'ramda';\nimport * as rA from 'ramda-adjunct';\nimport { selectors } from '@ux/product';\n\nconst { getInterval } = selectors;\n\nexport const getDisplayPeriod = rA.dispatch([\n  r.path([ 'pricingStrategy', 'paymentIntervalDisplay' ]),\n  getInterval,\n]);\n\nexport default null;\n","import React from 'react';\nimport {\n  mapProps,\n  withProps,\n} from '@team-griffin/rehook';\nimport { FormattedMessage } from 'react-intl';\nimport { Display } from '@ux/typeface';\nimport Saving from 'components/common/Saving';\nimport {\n  Heading04,\n  Heading06,\n  SubHeading02,\n} from '@ux/typography';\nimport stylesheet, { Styles } from './ProductPrice.stylesheet';\nimport { BreakpointProps, withBreakpointsHook } from '@ux/responsive';\nimport * as r from 'ramda';\nimport {\n  isNotNilOrEmpty,\n} from '@team-griffin/capra';\nimport LegalText from './LegalText';\nimport Shortcode from 'components/Shortcode';\nimport Badge, { Kind as BadgeKind } from '@ux/badge';\nimport Prices from '@ux/prices';\nimport { RenewalPeriod, Product } from '@ux/product';\nimport {\n  getDisplayPeriod,\n} from './utils';\nimport { RibbonProps } from 'domain/constants/ribbons';\nimport { Layout } from 'components/common/ProductPrice/constants';\nimport pureEnhance from '@ux/pure-enhance';\n\nconst hasSavingValue = r.propSatisfies(\n  r.both(\n    r.is(Object),\n    r.has('value')\n  ),\n  'saving',\n);\n\nconst hasBadge = r.anyPass([\n  hasSavingValue,\n  r.propEq('hasDiscount', true),\n  r.propSatisfies(isNotNilOrEmpty, 'badge'),\n]);\n\n// returns true if we are in a viewMode not in given array\n//   0 = retail price with setup cost underneath (default)\n//   1 = no setup cost, price incs. upfront cost\n//   2 = no setup cost, just show retail\nconst excludeViewModes = (viewModes: number[], props: DefaultProps) => r.pipe(\n  r.path([ 'pricingStrategy', 'viewMode' ]),\n  //@ts-ignore\n  r.includes(\n    r.__,\n    viewModes,\n  ),\n  r.not,\n  // @ts-ignore\n)(props);\n\nconst shouldShowSetupFee = r.allPass([\n  // check product has a setup fee\n  r.propEq('hasUpFrontCost', true),\n  // check whether showFee is not false\n  r.propEq('showFee', true),\n  //check we are in a valid view mode (0)\n  (props) => excludeViewModes([ 1, 2 ], props),\n]);\n\n// eslint-disable-next-line no-underscore-dangle\nexport const __test__ = {\n  shouldShowSetupFee,\n};\n\ninterface OuterProps extends RibbonProps {\n  showFee?: boolean,\n  showLegalCaveat?: boolean,\n  price: number,\n  priceLayout?: Layout,\n  viewMode: number,\n  currency: string,\n  discountPerc: string,\n  product: Product,\n  pricingStrategy: {\n    proposition?: string,\n    paymentIntervalDisplay: number,\n    viewMode: number,\n    pricingTier: {\n      paymentInterval: number,\n      term: number,\n    }\n  },\n  hasDiscount?: boolean,\n  badge?: string,\n  upFront?: number,\n  legalText?: string,\n  saving?: {\n    type: string,\n    value: number,\n    currency: string,\n  },\n  displayInterval: number,\n  interval: number,\n  term: number,\n}\n\ninterface DefaultProps extends OuterProps {\n  showFee: true,\n  showLegalCaveat: true,\n}\n\nexport interface InnerProps extends DefaultProps, BreakpointProps {\n  styles: Styles,\n  proposition: string,\n  hasProposition: boolean,\n  hasSaving: boolean,\n  showSetupFee: boolean,\n  renewalPeriod: number,\n  hasBadge: boolean,\n}\nconst PureProductPrice = ({\n  theme,\n  colorway,\n  styles,\n  currency,\n  price,\n  upFront,\n  renewalPeriod,\n  hasSaving,\n  saving,\n  badge,\n  proposition,\n  hasProposition,\n  showSetupFee,\n  showLegalCaveat,\n  legalText,\n  product,\n  pricingStrategy,\n  hasDiscount,\n  discountPerc,\n}: InnerProps) => (\n  <div style={styles.root}>\n    <div style={styles.priceWrapper}>\n      <Choose>\n        <When condition={hasSaving}>\n          <Saving\n            theme={theme}\n            colorway={colorway}\n            intlNamespace=\"usf.price\"\n            {...saving}\n          />\n        </When>\n        <When condition={Boolean(badge)}>\n          <span style={styles.badge}>\n            <Badge\n              theme={theme}\n              kind={BadgeKind.PRIMARY}\n            >\n              {badge}\n            </Badge>\n          </span>\n        </When>\n        <When condition={hasDiscount}>\n          <span style={styles.badge}>\n            <Badge\n              theme={theme}\n              kind={BadgeKind.HIGHLIGHT}\n            >\n              <FormattedMessage\n                id=\"usf.price.saving.percentage\"\n                values={{\n                  saving: `${parseInt(discountPerc, 10)}%`,\n                }}\n              />\n            </Badge>\n          </span>\n        </When>\n      </Choose>\n      <div style={styles.pricing}>\n        <If condition={hasProposition}>\n          <Heading06\n            style={styles.intro}\n            theme={theme}\n            component=\"div\"\n          >\n            <Shortcode\n              against={colorway}\n              code={proposition}\n            />\n          </Heading06>\n        </If>\n        <Display theme={theme}>\n          <FormattedMessage\n            id=\"usf.price.display\"\n            values={{\n              price: (\n                <Heading04\n                  style={styles.price}\n                  theme={theme}\n                  component=\"span\"\n                >\n                  <Prices\n                    amount={price}\n                    currency={currency}\n                  />\n                </Heading04>\n              ),\n              renewal: (\n                <Heading06\n                  style={styles.renewal}\n                  theme={theme}\n                  component=\"span\"\n                >\n                  <RenewalPeriod period={renewalPeriod}/>\n                </Heading06>\n              ),\n            }}\n          />\n        </Display>\n      </div>\n    </div>\n    <If condition={showSetupFee}>\n      <SubHeading02\n        style={styles.setupFee}\n        component=\"div\"\n        theme={theme}\n      >\n        <Display theme={theme}>\n          <FormattedMessage\n            id=\"usf.price.additionalFee\"\n            values={{\n              fee: (\n                <span style={styles.fee}>\n                  <Prices\n                    amount={upFront}\n                    currency={currency}\n                  />\n                </span>\n              ),\n            }}\n          />\n        </Display>\n      </SubHeading02>\n    </If>\n    <If condition={showLegalCaveat}>\n      <div style={styles.legalCaveat}>\n        <LegalText\n          bespoke={legalText}\n          product={product}\n          pricingStrategy={pricingStrategy}\n        />\n      </div>\n    </If>\n  </div>\n);\nconst enhance = pureEnhance<InnerProps, OuterProps>(\n  'ProductPrice', {\n    hooks: [\n      // @ts-ignore\n      mapProps(r.mergeRight({\n        showFee: true,\n        showLegalCaveat: true,\n      })),\n      withProps((ownerProps: DefaultProps) => ({\n        proposition: r.path([ 'pricingStrategy', 'proposition' ], ownerProps),\n        hasProposition: r.pathSatisfies(\n          isNotNilOrEmpty,\n          [ 'pricingStrategy', 'proposition' ],\n          ownerProps\n        ),\n        hasSaving: hasSavingValue(ownerProps),\n        showSetupFee: shouldShowSetupFee(ownerProps),\n        renewalPeriod: getDisplayPeriod(ownerProps),\n        hasBadge: hasBadge(ownerProps),\n      })),\n      withBreakpointsHook,\n      withProps(stylesheet),\n    ],\n  }\n\n);\n\nexport default enhance(PureProductPrice);\n","import { useStyles } from '@team-griffin/stylr';\nimport { gu2px } from '@ux/theme-utils';\nimport {\n  content,\n  smallprint,\n} from '@ux/type-size';\nimport {\n  percentage,\n  modifier,\n} from '@ux/style-utils';\nimport { Layout } from 'components/common/ProductPrice/constants';\nimport { getTitleColor, getContrastColor } from 'presentation/utils/colorway';\nimport { InnerProps } from './ProductPrice';\nimport { CSSProperties } from 'react';\n\nexport interface Styles {\n  root: CSSProperties,\n  intro: CSSProperties,\n  badge: CSSProperties,\n  price: CSSProperties,\n  setupFee: CSSProperties,\n  fee: CSSProperties,\n  renewal: CSSProperties,\n  legalCaveat: CSSProperties,\n  priceWrapper: CSSProperties,\n  pricing: CSSProperties,\n}\nexport default ({\n  theme,\n  isMinSm,\n  isMinLg,\n  colorway,\n  priceLayout,\n  hasProposition,\n  hasBadge,\n}: InnerProps) => {\n  const {\n    spacing,\n    typography,\n  } = theme;\n\n  return useStyles({\n    default: {\n      root: {\n        marginTop: gu2px(3, spacing),\n      },\n      intro: {\n        color: getTitleColor(theme, colorway),\n        marginTop: gu2px(2, spacing),\n        ...content(typography),\n      },\n      badge: {\n        marginLeft: gu2px(-1, spacing),\n      },\n      price: {\n        color: getContrastColor(theme, colorway),\n        marginRight: gu2px(1, spacing),\n      },\n      setupFee: {\n        color: getTitleColor(theme, colorway),\n        marginTop: gu2px(1, spacing),\n      },\n      fee: {\n        color: getContrastColor(theme, colorway),\n      },\n      renewal: {\n        color: getTitleColor(theme, colorway),\n      },\n      legalCaveat: {\n        ...smallprint(typography),\n        marginTop: gu2px(1, spacing),\n        opacity: 0.9,\n      },\n    },\n    [modifier('priceLayout', Layout.COMPACT)]: {\n      priceWrapper: {\n        display: 'flex',\n        width: percentage(100),\n        alignItems: 'center',\n        justifyContent: 'space-between',\n      },\n      pricing: {\n        flex: 1,\n        flexBasis: 'auto',\n        textAlign: 'right',\n      },\n      setupFee: {\n        textAlign: 'right',\n        marginTop: 0,\n      },\n    },\n    badgeAndNoProposition: {\n      pricing: {\n        marginTop: gu2px(2, spacing),\n      },\n    },\n  }, [\n    { isMinSm },\n    { isMinLg },\n    { priceLayout },\n    { badgeAndNoProposition: hasBadge && !hasProposition && priceLayout !== Layout.COMPACT },\n  ]);\n};","// @fabric\nimport pureEnhance from '@ux/pure-enhance';\nimport { withProps } from '@team-griffin/rehook';\nimport { createStructuredSelector } from 'reselect';\nimport { connect } from '@ux/fabric';\nimport ProductPrice from './ProductPrice';\nimport { selectors, productPrice } from '@ux/product';\nimport * as r from 'ramda';\n\nconst { shouldIncludeTax } = selectors;\n\nconst mapStateToProps = createStructuredSelector({\n  includeTax: shouldIncludeTax,\n});\n\nconst enhance = pureEnhance('ConnectedProductPrice', [\n  withProps(connect(mapStateToProps)),\n  withProps(createStructuredSelector({\n    displayInterval: r.path([ 'pricingStrategy', 'paymentIntervalDisplay' ]),\n    viewMode: r.path([ 'pricingStrategy', 'viewMode' ]),\n    interval: r.path([ 'pricingStrategy', 'pricingTier', 'paymentInterval' ]),\n    term: r.path([ 'pricingStrategy', 'pricingTier', 'term' ]),\n  })),\n  productPrice(),\n]);\n\nexport default enhance(ProductPrice);\n","import ConnectedProductPrice from './ConnectedProductPrice';\nimport LegalText from './LegalText';\n\nexport {\n  LegalText,\n};\n\nexport default ConnectedProductPrice;\n","export enum Layout {\n  COMPACT = 'COMPACT',\n  DEFAULT = 'DEFAULT',\n}\n\nexport default null;"],"sourceRoot":""}