{"version":3,"file":"js/styleguide-components-SubscriptionForm-SubscriptionForm-30880a938af0fb19c491.chunk.js","mappings":"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","sources":["webpack://printivity/./client/app/styleguide/components/DiscountTooltipContent/DiscountTooltipContent.tsx","webpack://printivity/./client/app/styleguide/components/SubscriptionForm/SubscriptionForm.tsx","webpack://printivity/./client/app/styleguide/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\n\nconst DiscountToolTipContent = () => (\n  <div>\n    <p className=\"paragraph-desktop\">\n      <strong>\n        How to Redeem\n        <br />\n      </strong>\n    </p>\n    <ol className=\"ml-5\">\n      <li>Register an account.</li>\n      <li>Log into your account.</li>\n      <li>Enter the promo code into your shopping cart.</li>\n    </ol>\n    <p className=\"paragraph-desktop\">\n      <strong>\n        Terms &amp; Conditions\n        <br />\n      </strong>\n    </p>\n    <ul className=\"list-inside\">\n      <li>Must have never placed an order with Printivity, formerly MGX Copy.</li>\n      <li>The 20% off promotion only applies to a single line item.</li>\n      <li>The maximum discount is $500.</li>\n      <li>Promotion does not apply to Hardcover Books</li>\n      <li>Promotion cannot be used with other discounts.</li>\n      <li>Promotion cannot be used more than once.</li>\n      <li>\n        We reserve the right to verify eligibility and adjust your order total even after you&apos;ve placed\n        your order.\n      </li>\n    </ul>\n  </div>\n);\n\nexport default DiscountToolTipContent;\n","import * as React from 'react';\nimport { useLocation } from 'react-router-dom';\nimport Span from 'styleguide/components/Span/Span';\nimport ButtonAsNativeLink from 'styleguide/components/Button/ButtonAsNativeLink';\nimport { clickSignUpPdp } from 'api/gtm';\nimport { isProductPage } from 'libs/utils/pageUtils';\nimport AppContext from 'contexts/AppContext/AppContext';\nimport LazyLoad from 'react-lazyload';\nimport LoaderWrapper from 'styleguide/components/LoaderWrapper/LoaderWrapper';\nimport { Tooltip } from 'styleguide/components/Tooltip/Tooltip';\nimport ToolTipContent from 'styleguide/components/DiscountTooltipContent/DiscountTooltipContent';\n\nconst SubscriptionForm = () => {\n  const appContext = React.useContext(AppContext);\n  const location = useLocation();\n\n  return (\n    <LazyLoad once placeholder={LoaderWrapper('h-[405px] flex items-center justify-center')}>\n      <div\n        className=\"w-full border border-solid border-gray-50 p-4 mt-10 flex flex-col justify-center\n                   items-center gap-4 md:flex-row\"\n      >\n        <div\n          className=\"flex flex-col items-center justify-center !text-base max-w-full md:items-start\n                     md:!text-lg sm:min-w-[345px]\"\n        >\n          <Span className=\"!mb-2 !font-hvBold !text-xl text-center\">Get up to 20% off your first order.</Span>\n          <div className=\"flex items-center mb-2\">\n            <Span className=\"max-w-xs !font-hvRoman !text-base -md:text-center\">\n              We&apos;ll send info on exclusive promotions, product launches, and much more.\n            </Span>\n          </div>\n          <Tooltip\n            placement=\"bottom\"\n            content={<ToolTipContent />}\n            withArrow\n            className=\"!z-100 sm:w-max max-w-[500px] rounded-lg bg-shades-0 px-5 py-4 text-sm shadow-xl !text-default\"\n            action=\"click\"\n            renderOpener={tooltipProps => (\n              <div {...tooltipProps} className=\"text-xs font-hvBold cursor-pointer\">\n                See rules and conditions\n              </div>\n            )}\n          />\n        </div>\n        <div className=\"flex items-center justify-center\">\n          <ButtonAsNativeLink\n            buttonType=\"link\"\n            target={{\n              pathname: '/sign-up',\n              state: { from: location.pathname },\n            }}\n            color=\"orange\"\n            className=\"!font-hvMedium !text-sm -lg:mt-[0.5em]\"\n            onClick={() => {\n              if (isProductPage(location.pathname, appContext.store.cmsPages)) {\n                clickSignUpPdp();\n              }\n            }}\n          >\n            Sign Up - Get up to 20% Off\n          </ButtonAsNativeLink>\n        </div>\n      </div>\n    </LazyLoad>\n  );\n};\n\nexport default SubscriptionForm;\n","import * as React from 'react';\nimport {\n  ReferenceType,\n  offset,\n  shift,\n  flip,\n  useFloating,\n  autoUpdate,\n  useInteractions,\n  useHover,\n  useFocus,\n  useDismiss,\n  useRole,\n  useClick,\n  arrow,\n  FloatingArrow,\n  useTransitionStyles,\n  Placement,\n} from '@floating-ui/react';\nimport cn from 'classnames';\n\nexport interface RenderOpenerProps extends Record<string, unknown> {\n  ref: (node: ReferenceType | null) => void;\n}\n\nexport interface TooltipProps {\n  content?: React.ReactNode;\n  renderOpener: (props: RenderOpenerProps) => React.ReactNode;\n  placement?: Placement;\n  withArrow?: boolean;\n  className?: string;\n  bodyOffset?: number;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  onDisplay?: () => void;\n  onDismiss?: () => void;\n  action?: 'hover' | 'click';\n  forcePlacement?: boolean;\n  noWrap?: boolean;\n}\n\nexport const Tooltip = ({\n  content,\n  renderOpener,\n  placement,\n  className,\n  withArrow,\n  bodyOffset = 5,\n  onMouseEnter,\n  onMouseLeave,\n  onDisplay,\n  onDismiss,\n  action = 'hover',\n  forcePlacement,\n  noWrap,\n}: TooltipProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const arrowRef = React.useRef(null);\n  const parentDivRef = React.useRef(null);\n  const [arrowColor, setArrowColor] = React.useState('');\n\n  const {\n    refs: { setReference, setFloating },\n    floatingStyles,\n    context,\n  } = useFloating({\n    open: isOpen,\n    onOpenChange(nextOpen, event, reason) {\n      setIsOpen(nextOpen);\n      if ((reason === 'click' || reason === 'focus') && nextOpen) {\n        onDisplay?.();\n      }\n      if (reason === 'escape-key' || reason === 'outside-press') {\n        onDismiss?.();\n      }\n    },\n    placement,\n    middleware: [\n      offset(bodyOffset),\n      !forcePlacement && flip(),\n      shift(),\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, { move: false, enabled: action === 'hover' });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n  const click = useClick(context, { enabled: action === 'click' });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role, click]);\n\n  const { styles: transitionStyles } = useTransitionStyles(context, {\n    initial: {\n      opacity: 0,\n      transform: 'scale(0.8)',\n    },\n  });\n\n  React.useEffect(() => {\n    if (parentDivRef.current) {\n      const computedStyle = getComputedStyle(parentDivRef.current);\n      setArrowColor(computedStyle.backgroundColor);\n    }\n  }, [isOpen, content]);\n\n  return (\n    <>\n      {renderOpener({ ref: setReference, onMouseEnter, ...getReferenceProps(), onMouseLeave })}\n      {isOpen && content && (\n        <div ref={setFloating} style={{ ...floatingStyles, zIndex: 100 }} {...getFloatingProps()}>\n          <div\n            ref={parentDivRef}\n            style={transitionStyles}\n            className={cn(\n              'rounded bg-blue text-white py-2 px-3 text-sm',\n              noWrap && 'whitespace-nowrap',\n              className,\n            )}\n          >\n            {withArrow && (\n              <FloatingArrow fill={arrowColor} tipRadius={2} height={8} ref={arrowRef} context={context} />\n            )}\n            {content}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["React","className","appContext","AppContext","location","useLocation","LazyLoad","once","placeholder","LoaderWrapper","Span","Tooltip","placement","content","ToolTipContent","withArrow","action","renderOpener","tooltipProps","Object","assign","ButtonAsNativeLink","buttonType","target","pathname","state","from","color","onClick","isProductPage","store","cmsPages","clickSignUpPdp","_ref","_ref$bodyOffset","bodyOffset","onMouseEnter","onMouseLeave","onDisplay","onDismiss","_ref$action","forcePlacement","noWrap","_React$useState2","_slicedToArray","isOpen","setIsOpen","arrowRef","parentDivRef","_React$useState4","arrowColor","setArrowColor","_useFloating","useFloating","open","onOpenChange","nextOpen","event","reason","middleware","offset","flip","shift","arrow","element","whileElementsMounted","autoUpdate","_useFloating$refs","refs","setReference","setFloating","floatingStyles","context","hover","useHover","move","enabled","focus","useFocus","dismiss","useDismiss","role","useRole","click","useClick","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","transitionStyles","useTransitionStyles","initial","opacity","transform","styles","current","computedStyle","getComputedStyle","backgroundColor","_objectSpread","ref","style","zIndex","cn","FloatingArrow","fill","tipRadius","height"],"sourceRoot":""}