{"version":3,"file":"LazyUtilityPage.dd93969d09eef99d.0.6737.0.js","mappings":"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","sources":["webpack://aurora-new-frontend/./packages/common/packages/core/src/utils/clamp-and-round-number.ts","webpack://aurora-new-frontend/./packages/common/packages/core/src/utils/format-currency-string.ts","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"],"sourcesContent":["export const clampAndRoundNumber = (cfg: {\n  n: number | string;\n  min?: number;\n  max?: number;\n  decimalPlaces?: number;\n}) => {\n  const { n, min, max, decimalPlaces } = cfg;\n  const safeNumber = Number(n);\n  if (Number.isNaN(safeNumber)) {\n    return undefined;\n  }\n  let value = typeof n === 'number' ? n : parseFloat(n) || 0;\n  if (min !== undefined) {\n    value = Math.max(value, min);\n  }\n  if (max !== undefined) {\n    value = Math.min(value, max);\n  }\n  if (decimalPlaces !== undefined) {\n    value = parseFloat(value.toFixed(Math.floor(decimalPlaces)));\n  }\n  return value;\n};\n","import { CURRENCIES, CurrencyTypes } from '../constants/currencies';\nimport { clampAndRoundNumber } from './clamp-and-round-number';\n\n/**\n * @deprecated\n * @see useFormatLocale.formatCurrency\n */\nexport const formatCurrencyString = (\n  value: number | string,\n  currency: CurrencyTypes,\n  customDecimalPlaces: number = 2,\n  locales?: string | string[],\n  options?: Intl.NumberFormatOptions,\n) => {\n  const clampedNumericalValue =\n    clampAndRoundNumber({\n      decimalPlaces: customDecimalPlaces,\n      n: value,\n    }) ?? 0;\n  const clampedValue = clampedNumericalValue.toLocaleString(locales, options);\n\n  if (CURRENCIES[currency].isSuffix) {\n    return `${clampedValue} ${CURRENCIES[currency].symbol}`;\n  }\n\n  if (clampedNumericalValue < 0) {\n    return `-${CURRENCIES[currency].symbol}${Math.abs(clampedNumericalValue).toLocaleString(\n      locales,\n      options,\n    )}`;\n  }\n\n  return `${CURRENCIES[currency].symbol}${clampedValue}`;\n};\n\n/**\n * @deprecated\n * @see useFormatLocale.formatCurrency\n */\nexport const formatCurrencyToFixedDecimalPlaces = (\n  amount: number | string,\n  currency: CurrencyTypes,\n  decimalPlaces: number,\n): string => {\n  const locales = undefined;\n  return formatCurrencyString(amount, currency, decimalPlaces, locales, {\n    minimumFractionDigits: decimalPlaces,\n  });\n};\n\n// Do not clamp or round input values.\nexport const formatCurrencyInputString = (\n  value: number | string,\n  currency: CurrencyTypes,\n): string => {\n  const safeNumber = Number(value);\n  const numericalValue = Number.isNaN(safeNumber) ? 0 : safeNumber;\n\n  const decimalPlaces = Number.isInteger(numericalValue) ? 0 : CURRENCIES[currency].decimalPlaces;\n  const options = {\n    maximumFractionDigits: 20,\n    minimumFractionDigits: decimalPlaces,\n  };\n  const localeString = numericalValue.toLocaleString(undefined, options);\n\n  if (CURRENCIES[currency].isSuffix) {\n    return `${localeString} ${CURRENCIES[currency].symbol}`;\n  }\n\n  if (numericalValue < 0) {\n    return `-${CURRENCIES[currency].symbol}${Math.abs(numericalValue).toLocaleString(\n      undefined,\n      options,\n    )}`;\n  }\n\n  return `${CURRENCIES[currency].symbol}${localeString}`;\n};\n\n/**\n * @deprecated\n * @see useLocaleFormat.formatCurrency\n */\nexport const formatCurrencyAddMinDecimals = (\n  value: number | string,\n  currency: CurrencyTypes,\n): string => {\n  const safeNumber = Number(value);\n  const numericalValue = Number.isNaN(safeNumber) ? 0 : safeNumber;\n\n  const { decimalPlaces } = CURRENCIES[currency];\n  const options = {\n    maximumFractionDigits: 20,\n    minimumFractionDigits: decimalPlaces,\n  };\n  const localeString = numericalValue.toLocaleString(undefined, options);\n\n  if (CURRENCIES[currency].isSuffix) {\n    return `${localeString} ${CURRENCIES[currency].symbol}`;\n  }\n\n  if (numericalValue < 0) {\n    return `-${CURRENCIES[currency].symbol}${Math.abs(numericalValue).toLocaleString(\n      undefined,\n      options,\n    )}`;\n  }\n\n  return `${CURRENCIES[currency].symbol}${localeString}`;\n};\n\nexport const formatCurrencyWithDroppedCents = (\n  amount: number | string,\n  currency: CurrencyTypes,\n  decimalPlaces: number,\n  dropCentsAmounts: number,\n  useFixedDecimalPlaces: boolean = true,\n): string => {\n  const amountNum = typeof amount === 'string' ? parseFloat(amount) : amount;\n  const shouldDropCents = amountNum >= dropCentsAmounts;\n  const decimalsToUse = shouldDropCents ? 0 : decimalPlaces;\n\n  if (useFixedDecimalPlaces) {\n    return formatCurrencyToFixedDecimalPlaces(amount, currency, decimalsToUse);\n  }\n\n  return formatCurrencyString(amount, currency, decimalsToUse);\n};\n\n/**\n * @deprecated\n * @see useFormatLocale.formatCurrency\n */\nexport const formatCurrencyWithDecimalPrecision = (\n  value: number | string,\n  currency: CurrencyTypes,\n): string => {\n  const { decimalPlaces } = CURRENCIES[currency];\n  const clampedNumericalValue =\n    clampAndRoundNumber({\n      decimalPlaces,\n      n: value,\n    }) ?? 0;\n\n  return clampedNumericalValue.toLocaleString(undefined, {\n    // When we add international support, we should also add locale to each currency\n    maximumFractionDigits: decimalPlaces,\n    minimumFractionDigits: decimalPlaces,\n  });\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'];\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 React, { useEffect, useRef, useState } from 'react';\nimport { Box } from 'reflexbox/styled-components';\n\nimport { CurrencyTypes } from '@aurorasolar/common-core/src/constants';\nimport { useDebouncedCallback } from '@aurorasolar/common-core/src/hooks';\nimport { AuroraIcon, AuroraIconType } from '@aurorasolar/common-core/src/icon';\nimport { formatCurrencyToFixedDecimalPlaces } from '@aurorasolar/common-core/src/utils';\nimport {\n  Analytics,\n  AnalyticsEventTypes,\n  AnalyticsPageTypes,\n  AppRouterNavigation,\n  useAppModule,\n} from '@aurorasolar/common-module-loader';\n\nimport { useRouteData } from '../../hooks';\nimport {\n  AnimateView,\n  BoxWithMargin,\n  Image,\n  LCAISlider,\n  SplitView,\n  TopRail,\n} 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 { useSubmitLeadCaptureUtilityBillMutation } from './utility.generated';\n\nexport const UTILITY_BILL_VALUE_TESTID = 'utility-bill-value';\n\nconst DEFAULT_BILL = 100;\nconst MIN_BILL = 25;\nconst MIN_LABEL = 'Under ';\nconst MAX_BILL = 600;\nconst MAX_LABEL = 'Over ';\n\nconst generateUtilityBillLabel = (value: number) => {\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 += formatCurrencyToFixedDecimalPlaces(value, CurrencyTypes.Usd, 0);\n\n  return label;\n};\n\ninterface UtilitySliderProps {\n  updateBill: (value: number) => void;\n}\n\nconst UtilitySlider = ({ updateBill }: UtilitySliderProps) => {\n  const [utilityBill, setUtilityBill] = useState<number>(DEFAULT_BILL);\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          {generateUtilityBillLabel(utilityBill)}\n        </LCAIText>\n      </BoxWithMargin>\n      <Box marginTop=\"48px\">\n        <LCAISlider\n          labelGenerator={generateUtilityBillLabel}\n          leftLabel={generateUtilityBillLabel(MIN_BILL)}\n          max={MAX_BILL}\n          min={MIN_BILL}\n          onChange={onBillChange}\n          rightLabel={generateUtilityBillLabel(MAX_BILL)}\n          value={utilityBill}\n        />\n      </Box>\n    </>\n  );\n};\n\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  const [submitUtilityBill] = useSubmitLeadCaptureUtilityBillMutation();\n  const { customSettings, firstCoreQuestionId, formBeforeResults, templateId } = useRouteData();\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 updateBill={updateBill} />\n            </>\n          }\n          rightContent={\n            <Image customImage={customSettings?.utilityBillPageImage} sourcePage={sourcePage} />\n          }\n        />\n      </AnimateView>\n    </>\n  );\n};\n\nexport default UtilityPage;\n"],"names":["clampAndRoundNumber","cfg","n","min","max","decimalPlaces","safeNumber","Number","isNaN","value","parseFloat","undefined","Math","toFixed","floor","formatCurrencyString","currency","customDecimalPlaces","locales","options","clampedNumericalValue","clampedValue","toLocaleString","isSuffix","symbol","abs","formatCurrencyToFixedDecimalPlaces","amount","minimumFractionDigits","defaultOptions","SubmitLeadCaptureUtilityBillDocument","UTILITY_BILL_VALUE_TESTID","generateUtilityBillLabel","label","UtilitySlider","updateBill","utilityBill","setUtilityBill","useState","color","fontWeight","type","marginTop","labelGenerator","leftLabel","onChange","rightLabel","UtilityPage","projectId","sourcePage","navigation","analytics","submitUtilityBill","baseOptions","useSubmitLeadCaptureUtilityBillMutation","customSettings","firstCoreQuestionId","formBeforeResults","templateId","billRef","useRef","bill","useEffect","page","project_id","saveUtilityBill","async","variables","id","averageMonthlyBill","current","track","url","navigate","replace","progressValue","buttons","intent","onClick","name","hasProgressBar","leftContent","rightContent","customImage","utilityBillPageImage"],"sourceRoot":""}