{"version":3,"file":"LazyUtilityPage.37bec7bef4d6db04.prod.js","mappings":"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","sources":["webpack://aurora-new-frontend/./packages/lead-capture/src/shared-components/lcai-slider.tsx","webpack://aurora-new-frontend/./packages/lead-capture/src/pages/utility/components/utility-slider.tsx","webpack://aurora-new-frontend/./packages/lead-capture/src/pages/utility/utility.generated.tsx","webpack://aurora-new-frontend/./packages/lead-capture/src/pages/utility/utility-page.tsx","webpack://aurora-new-frontend/./packages/lead-capture/src/utils/image-matcher.tsx","webpack://aurora-new-frontend/./packages/lead-capture/src/shared-components/image.tsx"],"sourcesContent":["import { Slider } from '@blueprintjs/core';\nimport { Flex } from 'reflexbox/styled-components';\nimport styled from 'styled-components';\n\nimport { Colors } from '@aurorasolar/common-core/src/colors';\nimport { LocaleFormatCurrencyFn, useLocaleFormat } from '@aurorasolar/common-core/src/hooks';\nimport { SPACES } from '@aurorasolar/common-core/src/layout';\n\nimport { LCAIText } from '../typography/lcai-text/lcai-text';\n\nexport const SLIDER_LEFT_LABEL_TESTID = 'slider-left-label';\nexport const SLIDER_RIGHT_LABEL_TESTID = 'slider-right-label';\n\nconst SLIDER_NOTCH_CLASS = 'bp3-custom-slider-label--notched';\nconst SLIDER_HIDDEN_LABEL_CLASS = 'bp3-custom-slider-label--hidden';\nconst HANDLE_SIDE_OFFSET = SPACES[2];\nconst TOOLTIP_SHADOW = '0 1px 5px rgba(164, 164, 164, 0.25)';\nconst HANDLE_SHADOW = '0 0 6px rgba(0, 0, 0, 0.25)';\nconst LABEL_COLOR = Colors.GRAY_600;\n\nconst LabelWrapper = styled.div`\n  display: flex;\n  text-align: center;\n`;\n\nconst Label = styled(LCAIText).attrs(() => ({\n  color: LABEL_COLOR,\n  fontWeight: 'medium',\n  textTransform: 'uppercase',\n  type: 'body-4',\n}))`\n  letter-spacing: 0.75px;\n`;\n\nconst StyledSlider = styled(Slider)`\n  border-left: solid ${HANDLE_SIDE_OFFSET}px transparent;\n  border-right: solid ${HANDLE_SIDE_OFFSET}px transparent;\n  height: 56px;\n  display: flex;\n  align-items: center;\n\n  .bp3-slider-axis .bp3-slider-label {\n    transform: translate(-50%, -50%);\n\n    .${SLIDER_HIDDEN_LABEL_CLASS} {\n      display: none;\n    }\n\n    .${SLIDER_NOTCH_CLASS} {\n      width: 2px;\n      color: transparent;\n      height: ${SPACES[2]}px;\n      background-color: ${Colors.GRAY_500};\n      border-radius: 1px;\n      overflow: hidden;\n    }\n  }\n\n  .bp3-slider-track {\n    background: ${Colors.GRAY_400};\n    height: 4px;\n    top: auto;\n\n    .bp3-slider-progress {\n      display: none;\n    }\n  }\n\n  .bp3-slider-handle {\n    width: ${SPACES[4]}px;\n    height: ${SPACES[4]}px;\n    top: auto;\n    box-shadow: ${HANDLE_SHADOW};\n    background: ${Colors.GRAY_800};\n    border-radius: 50%;\n\n    .bp3-slider-label {\n      background: ${Colors.WHITE};\n      border: 0.5px solid ${Colors.GRAY_300};\n      padding: ${SPACES[0]}px ${SPACES[1]}px;\n      box-shadow: ${TOOLTIP_SHADOW};\n      border-radius: 4px;\n      color: ${Colors.BLACK};\n      transform: scale(0.9) translate(calc(4px - 50%), -48px);\n      top: auto;\n      opacity: 0;\n      transition: opacity 0.2s ease, transform 0.2s ease;\n      transition-delay: 0.2s;\n      white-space: nowrap;\n\n      /* Tooltip arrow */\n      &::before {\n        content: '';\n        background: white;\n        position: absolute;\n        transform: translateX(-50%) rotate(45deg);\n        height: 14px;\n        width: 14px;\n        bottom: -8px;\n        left: 50%;\n        border-bottom: 0.5px solid ${Colors.GRAY_300};\n        border-right: 0.5px solid ${Colors.GRAY_300};\n        border-radius: 0 0 3px 0;\n      }\n    }\n\n    &:hover,\n    &.bp3-active {\n      .bp3-slider-label {\n        opacity: 1;\n        transform: scale(1) translate(calc(4px - 50%), -52px);\n        transition-delay: 0s;\n      }\n    }\n  }\n`;\n\nconst labelRenderMethod = (\n  labelGenerator: { (value: number, formatCurrency: LocaleFormatCurrencyFn): string },\n  formatCurrency: LocaleFormatCurrencyFn,\n) => {\n  return (value: number) => {\n    return (\n      <div className={SLIDER_HIDDEN_LABEL_CLASS}>\n        <LCAIText fontWeight=\"medium\" type=\"body-2\">\n          {labelGenerator(value, formatCurrency)}\n        </LCAIText>\n      </div>\n    );\n  };\n};\n\nexport interface LCAISliderProps {\n  labelGenerator: (value: number, formatCurrency: LocaleFormatCurrencyFn) => string;\n  leftLabel: string;\n  rightLabel: string;\n  min: number;\n  max: number;\n  value: number;\n  onChange: (value: number) => void;\n  stepSize?: number;\n}\n\nexport const LCAISlider = ({\n  labelGenerator,\n  leftLabel,\n  rightLabel,\n  min,\n  max,\n  value,\n  onChange,\n  stepSize = 25,\n}: LCAISliderProps) => {\n  const { formatCurrency } = useLocaleFormat();\n\n  return (\n    <Flex alignItems=\"center\">\n      {leftLabel && (\n        <LabelWrapper>\n          <Label data-testid={SLIDER_LEFT_LABEL_TESTID}>{leftLabel}</Label>\n        </LabelWrapper>\n      )}\n\n      <StyledSlider\n        labelRenderer={labelRenderMethod(labelGenerator, formatCurrency)}\n        max={max}\n        min={min}\n        onChange={onChange}\n        showTrackFill={false}\n        stepSize={stepSize}\n        value={value}\n      />\n      {rightLabel && (\n        <LabelWrapper>\n          <Label data-testid={SLIDER_RIGHT_LABEL_TESTID}>{rightLabel}</Label>\n        </LabelWrapper>\n      )}\n    </Flex>\n  );\n};\n","import { useState } from 'react';\nimport { Box } from 'reflexbox/styled-components';\n\nimport { LocaleFormatCurrencyFn, useLocaleFormat } from '@aurorasolar/common-core/src/hooks';\nimport { CurrencyTypes } from '@aurorasolar/graphql-client-schema';\n\nimport { BoxWithMargin, LCAISlider } from '../../../shared-components';\nimport { LCAIText } from '../../../typography';\nimport { HEADER_COLOR } from '../../../utils/constants';\n\nexport const UTILITY_BILL_VALUE_TESTID = 'utility-bill-value';\n\nconst MIN_BILL = 25;\nconst MIN_LABEL = 'Under ';\nconst MAX_BILL = 600;\nconst MAX_LABEL = 'Over ';\n\ninterface UtilitySliderProps {\n  currency?: string | null;\n  defaultBill: number;\n  updateBill: (value: number) => void;\n}\n\nexport const UtilitySlider = ({ currency, defaultBill, updateBill }: UtilitySliderProps) => {\n  const { formatCurrency } = useLocaleFormat({ currency: currency as CurrencyTypes });\n  const [utilityBill, setUtilityBill] = useState<number>(defaultBill);\n\n  const onBillChange = (value: number) => {\n    setUtilityBill(value);\n    updateBill(value);\n  };\n\n  return (\n    <>\n      <BoxWithMargin>\n        <LCAIText\n          color={HEADER_COLOR}\n          data-testid={UTILITY_BILL_VALUE_TESTID}\n          fontWeight=\"medium\"\n          type=\"header-1\"\n        >\n          {generateUtilitySliderLabel(utilityBill, formatCurrency)}\n        </LCAIText>\n      </BoxWithMargin>\n      <Box marginTop=\"48px\">\n        <LCAISlider\n          labelGenerator={generateUtilitySliderLabel}\n          leftLabel={generateUtilitySliderLabel(MIN_BILL, formatCurrency)}\n          max={MAX_BILL}\n          min={MIN_BILL}\n          onChange={onBillChange}\n          rightLabel={generateUtilitySliderLabel(MAX_BILL, formatCurrency)}\n          value={utilityBill}\n        />\n      </Box>\n    </>\n  );\n};\n\nconst generateUtilitySliderLabel = (value: number, formatCurrency: LocaleFormatCurrencyFn) => {\n  let label = '';\n\n  if (value === MIN_BILL) {\n    label += MIN_LABEL;\n  }\n\n  if (value === MAX_BILL) {\n    label += MAX_LABEL;\n  }\n\n  label += formatCurrency(value, { maximumFractionDigits: 0 });\n\n  return label;\n};\n","// @ts-ignore: Ignore unused { * as Types } import\nimport * as Types from '@aurorasolar/graphql-client-schema';\n\nimport { gql } from '@apollo/client';\nimport * as Apollo from '@apollo/client';\nconst defaultOptions = {} as const;\nexport type SubmitLeadCaptureUtilityBillMutationVariables = Types.Exact<{\n  id: Types.Scalars['ID']['input'];\n  utilityBill: Types.SubmittedLeadCaptureUtilityBill;\n}>;\n\n\nexport type SubmitLeadCaptureUtilityBillMutation = { __typename: 'Mutation', submitLeadCaptureUtilityBill: { __typename: 'LeadCaptureProject', id: string, utilityBill?: { __typename: 'LeadCaptureUtilityBill', averageMonthlyBill?: number | null | undefined } | null | undefined } };\n\n\nexport const SubmitLeadCaptureUtilityBillDocument = gql`\n    mutation SubmitLeadCaptureUtilityBill($id: ID!, $utilityBill: SubmittedLeadCaptureUtilityBill!) @trace_info(traceInfo: {pod: leads}) {\n  submitLeadCaptureUtilityBill(id: $id, utilityBill: $utilityBill) {\n    id\n    utilityBill {\n      averageMonthlyBill\n    }\n  }\n}\n    `;\nexport type SubmitLeadCaptureUtilityBillMutationFn = Apollo.MutationFunction<SubmitLeadCaptureUtilityBillMutation, SubmitLeadCaptureUtilityBillMutationVariables>;\n\n/**\n * __useSubmitLeadCaptureUtilityBillMutation__\n *\n * To run a mutation, you first call `useSubmitLeadCaptureUtilityBillMutation` within a React component and pass it any options that fit your needs.\n * When your component renders, `useSubmitLeadCaptureUtilityBillMutation` returns a tuple that includes:\n * - A mutate function that you can call at any time to execute the mutation\n * - An object with fields that represent the current status of the mutation's execution\n *\n * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;\n *\n * @example\n * const [submitLeadCaptureUtilityBillMutation, { data, loading, error }] = useSubmitLeadCaptureUtilityBillMutation({\n *   variables: {\n *      id: // value for 'id'\n *      utilityBill: // value for 'utilityBill'\n *   },\n * });\n */\nexport function useSubmitLeadCaptureUtilityBillMutation(baseOptions?: Apollo.MutationHookOptions<SubmitLeadCaptureUtilityBillMutation, SubmitLeadCaptureUtilityBillMutationVariables>) {\n        const options = {...defaultOptions, ...baseOptions}\n        return Apollo.useMutation<SubmitLeadCaptureUtilityBillMutation, SubmitLeadCaptureUtilityBillMutationVariables>(SubmitLeadCaptureUtilityBillDocument, options);\n      }\nexport type SubmitLeadCaptureUtilityBillMutationHookResult = ReturnType<typeof useSubmitLeadCaptureUtilityBillMutation>;\nexport type SubmitLeadCaptureUtilityBillMutationResult = Apollo.MutationResult<SubmitLeadCaptureUtilityBillMutation>;\nexport type SubmitLeadCaptureUtilityBillMutationOptions = Apollo.BaseMutationOptions<SubmitLeadCaptureUtilityBillMutation, SubmitLeadCaptureUtilityBillMutationVariables>;","import { useEffect, useRef } from 'react';\n\nimport { useDebouncedCallback } from '@aurorasolar/common-core/src/hooks';\nimport { AuroraIcon, AuroraIconType } from '@aurorasolar/common-core/src/icon';\nimport {\n  Analytics,\n  AnalyticsEventTypes,\n  AnalyticsPageTypes,\n  AppRouterNavigation,\n  useAppModule,\n} from '@aurorasolar/common-module-loader';\n\nimport { useRouteData } from '../../hooks';\nimport { AnimateView, Image, SplitView, TopRail } from '../../shared-components';\nimport { LCAIButton, LCAIButtonIntent, LCAIText } from '../../typography';\nimport { DEBOUNCE_TIME, HEADER_COLOR, PROGRESS_VALUES } from '../../utils/constants';\nimport { SourcePage } from '../../utils/source-page';\nimport { UtilitySlider } from './components/utility-slider';\n\nimport { useSubmitLeadCaptureUtilityBillMutation } from './utility.generated';\n\nconst DEFAULT_BILL = 100;\nexport interface UtilityPageProps {\n  projectId: string;\n  sourcePage: SourcePage;\n}\n\nexport const UtilityPage = ({ projectId, sourcePage }: UtilityPageProps) => {\n  const navigation = useAppModule(AppRouterNavigation);\n  const analytics = useAppModule(Analytics);\n\n  const { customSettings, currency, firstCoreQuestionId, formBeforeResults, templateId } =\n    useRouteData();\n  const [submitUtilityBill] = useSubmitLeadCaptureUtilityBillMutation();\n\n  const billRef = useRef({\n    bill: DEFAULT_BILL,\n  });\n\n  const updateBill = (value: number) => {\n    billRef.current.bill = value;\n  };\n\n  useEffect(() => {\n    analytics?.page(AnalyticsPageTypes.LeadCaptureUtility, {\n      project_id: projectId,\n    });\n  }, [analytics, projectId]);\n\n  const saveUtilityBill = useDebouncedCallback(\n    async () => {\n      submitUtilityBill({\n        variables: {\n          id: projectId,\n          utilityBill: {\n            averageMonthlyBill: billRef.current.bill,\n          },\n        },\n      });\n\n      await analytics?.track(AnalyticsEventTypes.LeadCaptureEnteredConsumption, {\n        project_id: projectId,\n      });\n\n      let url = `/projects/${projectId}/qualification/${firstCoreQuestionId}`;\n\n      if (!firstCoreQuestionId) {\n        if (formBeforeResults) {\n          url = `/projects/${projectId}/quote`;\n        } else {\n          url = `/projects/${projectId}/progress`;\n        }\n      }\n\n      navigation?.navigate(url, { replace: true });\n    },\n    [analytics, firstCoreQuestionId, formBeforeResults, projectId, navigation, submitUtilityBill],\n    DEBOUNCE_TIME,\n  );\n\n  return (\n    <>\n      <TopRail\n        progressValue={PROGRESS_VALUES.UTILITY}\n        projectId={projectId}\n        sourcePage={sourcePage}\n        templateId={templateId}\n      />\n      <AnimateView>\n        <SplitView\n          buttons={\n            <LCAIButton intent={LCAIButtonIntent.PRIMARY_LIGHT} onClick={saveUtilityBill}>\n              <AuroraIcon name={AuroraIconType.BTN_ARROW} />\n              Next\n            </LCAIButton>\n          }\n          hasProgressBar\n          leftContent={\n            <>\n              <LCAIText color={HEADER_COLOR} fontWeight=\"medium\" type=\"header-2\">\n                What is your average monthly electric bill?\n              </LCAIText>\n              <UtilitySlider\n                currency={currency}\n                defaultBill={DEFAULT_BILL}\n                updateBill={updateBill}\n              />\n            </>\n          }\n          rightContent={\n            <Image customImage={customSettings?.utilityBillPageImage} sourcePage={sourcePage} />\n          }\n        />\n      </AnimateView>\n    </>\n  );\n};\n\nexport default UtilityPage;\n","import { SourcePage } from './source-page';\n\nexport interface LCAIImage {\n  alt: string;\n  name: string;\n  position?: string;\n}\n\nexport const IMAGES = {\n  AddressImage: { alt: 'View of earth from space', name: 'location' },\n  BillUploadImage: {\n    alt: 'Bungalow with solar panels with lots of shrubs and two trees in the foreground',\n    name: 'bill-upload',\n    position: '0% 90%',\n  },\n  ComingSoonImage: {\n    alt: 'Women in kitchen with wood shelves containing dishes',\n    name: 'coming-soon',\n  },\n  DropOffImage: {\n    alt: \"Bird's-eye view of a neighborhood at sunrise showing roofs with and without solar\",\n    name: 'drop-off',\n  },\n  LandingImage: {\n    alt: 'Patio scene with solar home in background',\n    name: 'how-it-works',\n    position: 'center 30%',\n  },\n  ProfileReviewImage: {\n    alt: 'An older couple reviewing their solar needs with a solar expert',\n    name: 'profile-review',\n    position: '60% 10%',\n  },\n  QuoteImage: {\n    alt: 'Yellow brick house with solar panels with greenery in foreground',\n    name: 'get-in-touch',\n  },\n  ThankYouImage: {\n    alt: 'Open french doors to balcony containing potted plants with trees in the distance',\n    name: 'thank-you',\n  },\n  UtilityImage: {\n    alt: 'String of electric lights hanging between trees',\n    name: 'savings',\n    position: 'center 75%',\n  },\n};\n\nconst MAPPED_IMAGES = {\n  [SourcePage.ADDRESS]: IMAGES.AddressImage,\n  [SourcePage.ADDRESS_DROP]: IMAGES.DropOffImage,\n  [SourcePage.BILL_UPLOAD]: IMAGES.BillUploadImage,\n  [SourcePage.ERROR]: IMAGES.ComingSoonImage,\n  [SourcePage.GENERIC_DROP]: IMAGES.DropOffImage,\n  [SourcePage.LANDING]: IMAGES.LandingImage,\n  [SourcePage.OWNERSHIP_DROP]: IMAGES.ComingSoonImage,\n  [SourcePage.QUOTE]: IMAGES.QuoteImage,\n  [SourcePage.THANK_YOU]: IMAGES.ThankYouImage,\n  [SourcePage.UTILITY]: IMAGES.UtilityImage,\n};\n\nexport function ImageMatcher(sourcePage: SourcePage): LCAIImage {\n  return MAPPED_IMAGES[sourcePage];\n}\n","import styled from 'styled-components';\n\nimport { S3_IMAGE_LOCATION } from '../utils/constants';\nimport { ImageMatcher } from '../utils/image-matcher';\nimport { SourcePage } from '../utils/source-page';\n\nimport { CustomImageFragment } from '../lead-capture.generated';\n\nconst DEFAULT_POSITION = 'center';\n\nexport interface ImageProps {\n  customImage?: CustomImageFragment | null;\n  alt?: string;\n  children?: JSX.Element;\n  name?: string;\n  position?: string;\n  sourcePage?: SourcePage;\n}\n\nexport const Image = ({\n  alt,\n  children,\n  customImage,\n  name,\n  position = DEFAULT_POSITION,\n  sourcePage,\n}: ImageProps) => {\n  const matchedImage = sourcePage && ImageMatcher(sourcePage);\n\n  const webpSrc = `${S3_IMAGE_LOCATION + (matchedImage?.name || name)}.webp`;\n  const jpgSrc = `${S3_IMAGE_LOCATION + (matchedImage?.name || name)}.jpg`;\n\n  const url = (customImage?.isActive && customImage?.url) || webpSrc;\n  const fallbackUrl = (customImage?.isActive && customImage?.fallbackUrl) || jpgSrc;\n  const altText = (customImage?.isActive && customImage?.altText) || matchedImage?.alt || alt;\n  const positionAttr = (!customImage?.isActive && matchedImage?.position) || position;\n\n  return (\n    <ImageContainer>\n      <picture>\n        <source srcSet={url} type=\"image/webp\" />\n        <Img alt={altText} src={fallbackUrl} style={{ objectPosition: positionAttr }} />\n      </picture>\n      {children}\n    </ImageContainer>\n  );\n};\n\nconst ImageContainer = styled.div`\n  position: relative;\n  height: 100%;\n`;\n\nconst Img = styled.img`\n  object-fit: cover;\n  height: 100%;\n  width: 100%;\n`;\n"],"names":["SLIDER_HIDDEN_LABEL_CLASS","HANDLE_SIDE_OFFSET","LABEL_COLOR","GRAY_600","LabelWrapper","div","Label","attrs","color","fontWeight","textTransform","type","StyledSlider","GRAY_500","GRAY_400","GRAY_800","WHITE","GRAY_300","BLACK","labelRenderMethod","labelGenerator","formatCurrency","value","className","LCAISlider","leftLabel","rightLabel","min","max","onChange","stepSize","alignItems","labelRenderer","showTrackFill","UtilitySlider","currency","defaultBill","updateBill","utilityBill","setUtilityBill","useState","generateUtilitySliderLabel","marginTop","label","maximumFractionDigits","defaultOptions","SubmitLeadCaptureUtilityBillDocument","UtilityPage","projectId","sourcePage","navigation","analytics","customSettings","firstCoreQuestionId","formBeforeResults","templateId","submitUtilityBill","baseOptions","options","useSubmitLeadCaptureUtilityBillMutation","billRef","useRef","bill","useEffect","page","LeadCaptureUtility","project_id","saveUtilityBill","async","variables","id","averageMonthlyBill","current","track","LeadCaptureEnteredConsumption","url","navigate","replace","progressValue","UTILITY","buttons","intent","PRIMARY_LIGHT","onClick","name","BTN_ARROW","hasProgressBar","leftContent","rightContent","customImage","utilityBillPageImage","IMAGES","AddressImage","alt","BillUploadImage","position","ComingSoonImage","DropOffImage","LandingImage","ProfileReviewImage","QuoteImage","ThankYouImage","UtilityImage","MAPPED_IMAGES","ADDRESS","ADDRESS_DROP","BILL_UPLOAD","ERROR","GENERIC_DROP","LANDING","OWNERSHIP_DROP","QUOTE","THANK_YOU","Image","children","matchedImage","ImageMatcher","webpSrc","jpgSrc","isActive","fallbackUrl","altText","positionAttr","ImageContainer","srcSet","Img","src","style","objectPosition","img"],"sourceRoot":""}