} props\r\n */\r\nfunction PlanPickerOption(props) {\r\n const { className, data, label, isDisabled, isFocused, isSelected } = props;\r\n\r\n const optionWrapperClasses = classNames(\r\n className,\r\n 'asc-select__option asc-select__option--custom',\r\n `dca-plan-picker__option dca-plan-picker__option--${data.status}`,\r\n typeof data.ix !== 'undefined' &&\r\n `dca-plan-picker__option--${data.ix % 2 === 0 ? 'even' : 'odd'}`,\r\n data.status === 'loaded' && `dca-plan-picker__option--${data.kind}`,\r\n {\r\n 'asc-select__option--is-disabled is-disabled': isDisabled,\r\n 'asc-select__option--is-focused': isFocused,\r\n 'asc-select__option--is-selected': isSelected\r\n }\r\n );\r\n\r\n return (\r\n \r\n {data.status === 'loaded' ? (\r\n \r\n {label}\r\n {data.moneyValue}\r\n
\r\n ) : (\r\n \r\n {label}\r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\nPlanPickerOption.propTypes = {\r\n className: PropTypes.string,\r\n data: PropTypes.object.isRequired,\r\n innerProps: PropTypes.object,\r\n isDisabled: PropTypes.bool,\r\n isFocused: PropTypes.bool,\r\n isSelected: PropTypes.bool,\r\n label: PropTypes.string.isRequired\r\n};\r\n\r\nexport default memo(PlanPickerOption);\r\n","import React from 'react';\r\nimport { components } from 'react-select';\r\n\r\nfunction PlanPickerInput(props) {\r\n /*\r\n Setting autoComplete to \"off\" and type to \"search\" seems to disable\r\n the browser autofill menu. See:\r\n\r\n - https://github.com/JedWatson/react-select/issues/3500\r\n - https://github.com/JedWatson/react-select/issues/3500#issuecomment-1246638994\r\n */\r\n return ;\r\n}\r\n\r\nexport default PlanPickerInput;\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { components } from 'react-select';\r\nimport Select from '@pattern-library/select';\r\nimport { getOptionValue, getOptionLabel, isOptionDisabled } from './usePlanPickerApi/items';\r\nimport { PlanPickerProvider, usePlanPickerContext } from './PlanPickerContext';\r\nimport VirtualizedPlanPickerMenuList from './VirtualizedPlanPickerMenuList';\r\nimport PlanPickerOption from './PlanPickerOption';\r\nimport PlanPickerInput from './PlanPickerInput';\r\n\r\nfunction PlanPickerSelect(textContent) {\r\n const { label, placeholder, loadingMessage, noOptionsMessage } = textContent;\r\n\r\n const {\r\n mode,\r\n dataStrategy,\r\n options = [],\r\n total,\r\n isWaitingForInitialData,\r\n updateSearchQuery,\r\n selectedId,\r\n value,\r\n onChange,\r\n selectRef\r\n } = usePlanPickerContext();\r\n\r\n // Under very specific circumstances, it's a better UX to\r\n // hide the placeholder temporarily while the initial data\r\n // is loading. Without this mitigation, the user could see\r\n // the placeholder flash briefly before the selected plan\r\n // name replaces it.\r\n //\r\n // We reference `selectedId` here rather than `value` because\r\n // in async mode, value always starts as `null` while we're\r\n // fetching the initial data. The true indicator of whether\r\n // there's a selected item or not is whether `selectedId`\r\n // exists.\r\n const shouldHidePlaceholder =\r\n dataStrategy === 'async' &&\r\n mode === 'list' &&\r\n isWaitingForInitialData &&\r\n selectedId !== null;\r\n\r\n return (\r\n \r\n 10}\r\n placeholder={shouldHidePlaceholder ? '' : placeholder}\r\n options={options}\r\n componentsOverride={useMemo(\r\n () => ({\r\n Input: PlanPickerInput,\r\n MenuList:\r\n dataStrategy === 'async'\r\n ? VirtualizedPlanPickerMenuList\r\n : components.MenuList,\r\n Option: PlanPickerOption\r\n }),\r\n [dataStrategy]\r\n )}\r\n reactSelectProps={{\r\n ref: selectRef,\r\n value,\r\n onChange,\r\n // PlanPickerContext handles filtering for us, either by querying the\r\n // server or synchronously filtering the options before passing them down\r\n // to this component.\r\n filterOption: null,\r\n getOptionLabel,\r\n getOptionValue,\r\n isOptionDisabled,\r\n isLoading: isWaitingForInitialData,\r\n loadingMessage: useCallback(() => loadingMessage, []),\r\n noOptionsMessage: useCallback(() => noOptionsMessage, []),\r\n onInputChange: updateSearchQuery\r\n }}\r\n />\r\n
\r\n );\r\n}\r\n\r\n/**\r\n * @param {PlanPickerProps} props\r\n * @returns {import('./usePlanPickerSideEffects').PlanChangeAction}\r\n */\r\nconst determinePlanChangeAction = ({ onPlanChange, onPlanChangeTargetId, targetId }) => {\r\n if (onPlanChange) {\r\n return {\r\n kind: 'callAngularMethod',\r\n methodName: onPlanChange,\r\n targetId: onPlanChangeTargetId\r\n };\r\n } else if (targetId) {\r\n return {\r\n kind: 'loadHtml',\r\n targetId\r\n };\r\n } else {\r\n return { kind: 'redirect' };\r\n }\r\n};\r\n\r\n/**\r\n * @param {PlanPickerProps} props\r\n */\r\nfunction PlanPicker(props) {\r\n const { filterUrl, planDataToken, initialId, initialIndex, items, textContent } = props;\r\n\r\n const sharedProps = {\r\n action: determinePlanChangeAction(props),\r\n initialId,\r\n initialIndex\r\n };\r\n\r\n /** @type {import('./PlanPickerContext/PlanPickerProvider').PlanPickerProviderProps} */\r\n const providerProps = filterUrl\r\n ? {\r\n ...sharedProps,\r\n dataStrategy: 'async',\r\n apiParams: { url: '/' + filterUrl, token: planDataToken }\r\n }\r\n : {\r\n ...sharedProps,\r\n dataStrategy: 'sync',\r\n items\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nPlanPicker.propTypes = {\r\n items: PropTypes.arrayOf(PropTypes.object),\r\n filterUrl: PropTypes.string,\r\n planDataToken: PropTypes.string,\r\n initialId: PropTypes.string,\r\n initialIndex: PropTypes.number,\r\n onPlanChange: PropTypes.string,\r\n onPlanChangeTargetId: PropTypes.string,\r\n targetId: PropTypes.string,\r\n textContent: PropTypes.object\r\n};\r\n\r\nexport default PlanPicker;\r\n\r\n/**\r\n * @typedef {object} PlanPickerProps\r\n * @prop {import('./usePlanPickerApi/items').RawPlanPickerItem[]} [items]\r\n * @prop {string} [filterUrl]\r\n * @prop {string} [planDataToken]\r\n * @prop {string} [initialId]\r\n * @prop {number} [initialIndex]\r\n * @prop {string} [onPlanChange]\r\n * @prop {string} [onPlanChangeTargetId]\r\n * @prop {string} [targetId]\r\n * @prop {PlanPickerTextContent} [textContent]\r\n */\r\n\r\n/**\r\n * @typedef {object} PlanPickerTextContent\r\n * @prop {string} label\r\n * @prop {string} placeholder\r\n * @prop {string} noOptionsMessage\r\n * @prop {string} loadingMessage\r\n */\r\n","import React from 'react';\r\nimport Banner from '@pattern-library/banner';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst propTypes = {\r\n customAttrs: PropTypes.string,\r\n hasCloseButton: PropTypes.bool,\r\n customClass: PropTypes.string,\r\n message: PropTypes.string,\r\n messageRichText: PropTypes.string,\r\n type: PropTypes.string\r\n};\r\n\r\nfunction PDXBanner({ customAttrs, hasCloseButton, customClass, message, messageRichText, type }) {\r\n const text = () => {\r\n const markup = { __html: messageRichText };\r\n return ;\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nPDXBanner.propTypes = propTypes;\r\n\r\nexport default PDXBanner;\r\n","import React, { useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { SearchSelect } from '@pattern-library/select';\r\n\r\nconst propTypes = {\r\n selectProps: PropTypes.shape({\r\n defaultOptions: PropTypes.bool,\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n hideLabel: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n isRequired: PropTypes.bool,\r\n loadingMessage: PropTypes.string,\r\n noOptionsMessage: PropTypes.string,\r\n placeholder: PropTypes.string\r\n }),\r\n selectedItem: PropTypes.shape({\r\n description: PropTypes.string,\r\n value: PropTypes.string,\r\n type: PropTypes.string\r\n }),\r\n getPlansAndCompaniesUrl: PropTypes.string.isRequired,\r\n addToWorkingSetUrl: PropTypes.string.isRequired\r\n};\r\n\r\nconst defaultProps = {};\r\n\r\nfunction InternalPlanPicker({\r\n selectProps: { loadingMessage, noOptionsMessage, ...restSelectProps },\r\n selectedItem, getPlansAndCompaniesUrl: getPlansAndCompaniesUrlString,\r\n addToWorkingSetUrl: addToWorkingSetUrlString\r\n}) {\r\n const [value, setValue] = useState(selectedItem.description && selectedItem.value ? selectedItem : { description: '', value: '', type: '' });\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [hasError, setHasError] = useState(false);\r\n\r\n const showLessThanThreeCharsMessage = useCallback((queryString, message) => {\r\n if (queryString.inputValue.length < 3) {\r\n return \"Please type 3 or more characters\";\r\n } else {\r\n return message;\r\n }\r\n }, [loadingMessage, noOptionsMessage]);\r\n\r\n const loadOptions = useCallback((queryString) => {\r\n if (queryString.length < 3) {\r\n setHasError(false);\r\n return;\r\n } else {\r\n return new Promise(async (resolve, reject) => {\r\n const urlSearchParams = new URLSearchParams({ searchValue: queryString });\r\n const getPlansUrl = `${getPlansAndCompaniesUrlString}?${urlSearchParams.toString()}`;\r\n\r\n setIsLoading(true);\r\n\r\n try {\r\n const res = await fetch(getPlansUrl, {\r\n headers: {\r\n 'X-Requested-With': 'XMLHttpRequest'\r\n }\r\n });\r\n\r\n if (!res.ok) {\r\n setHasError(true);\r\n reject();\r\n }\r\n\r\n const data = await res.json();\r\n\r\n resolve(data);\r\n }\r\n catch (e) {\r\n setHasError(true);\r\n reject();\r\n }\r\n\r\n setIsLoading(false);\r\n });\r\n }\r\n }, [setHasError, setIsLoading, getPlansAndCompaniesUrlString]);\r\n\r\n const onChange = useCallback((option) => {\r\n if (!option) {\r\n setValue({ description: '', value: '', type: '' });\r\n return;\r\n }\r\n\r\n npg.showBusyIndicator();\r\n\r\n setValue(option);\r\n\r\n const { value, type } = option;\r\n const urlSearchParams = new URLSearchParams({ value, type });\r\n\r\n window.location.href = `${addToWorkingSetUrlString}?${urlSearchParams.toString()}`;\r\n }, [addToWorkingSetUrlString]);\r\n\r\n return (\r\n \r\n showLessThanThreeCharsMessage(queryString, loadingMessage)}\r\n noOptionsMessage={(queryString) => showLessThanThreeCharsMessage(queryString, noOptionsMessage)}\r\n onChange={onChange}\r\n reactSelectProps={{\r\n getOptionLabel: (option) => (option.description)\r\n }}\r\n value={value}\r\n {...restSelectProps}\r\n />\r\n
\r\n );\r\n}\r\n\r\nInternalPlanPicker.propTypes = propTypes;\r\nInternalPlanPicker.defaultProps = defaultProps;\r\n\r\nexport default InternalPlanPicker;","import React, { useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button } from '@pattern-library/buttons';\r\nimport Modal from '@pattern-library/modal';\r\nimport { sendAnalyticsEvent } from '../../utils/analytics';\r\n\r\nconst propTypes = {\r\n triggerButtonLabel: PropTypes.string.isRequired,\r\n header: PropTypes.string.isRequired,\r\n continueButtonLabel: PropTypes.string,\r\n message: PropTypes.string.isRequired,\r\n isPending: PropTypes.bool,\r\n analytics: PropTypes.string\r\n};\r\n\r\nconst defaultProps = {\r\n isPending: false\r\n};\r\n\r\nfunction ManagedAccountWarningModal({ analytics, triggerButtonLabel, header, continueButtonLabel, message, isPending }) {\r\n const [isModalActive, setIsModalActive] = useState(false);\r\n const triggerButtonRef = useRef();\r\n\r\n const onButtonClick = () => {\r\n setIsModalActive(true);\r\n };\r\n \r\n const handleContinue = () => {\r\n sendAnalyticsEvent(analytics);\r\n };\r\n\r\n const footerChilden = isPending ? undefined : (\r\n \r\n {continueButtonLabel}\r\n \r\n );\r\n return (\r\n <>\r\n \r\n setIsModalActive(false)}\r\n hasFooter\r\n isActive={isModalActive}\r\n triggerButtonRef={triggerButtonRef}\r\n hasFooterClose={isPending}\r\n footerCloseButtonText={continueButtonLabel}\r\n footerCloseButtonClasses='asc-btn--small'\r\n widthClassNames=\"asc-col-9\"\r\n footerChildren={footerChilden}\r\n >\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nManagedAccountWarningModal.propTypes = propTypes;\r\nManagedAccountWarningModal.defaultProps = defaultProps;\r\nexport default ManagedAccountWarningModal;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Card from '@pattern-library/card';\r\nimport { HandshakeIcon } from '@pattern-library/icon';\r\nimport classNames from 'classnames';\r\nimport { sendAnalyticsEvent } from '../../utils/analytics';\r\n\r\nconst propTypes = {\r\n planName: PropTypes.string,\r\n planId: PropTypes.string,\r\n maEnrollmentCount: PropTypes.number,\r\n maPlanCount: PropTypes.number,\r\n arkManagedAcctProductCode: PropTypes.string,\r\n content: PropTypes.object.isRequired\r\n};\r\n\r\nfunction ManagedAccountBannerBody({ content, planName, planId, maEnrollmentCount, maPlanCount, arkManagedAcctProductCode }) {\r\n if(maPlanCount === 0) { \r\n return (<>);\r\n }\r\n\r\n const cardClassNames = classNames('managed-account-banner', {'managed-account-banner_enrolled' : maEnrollmentCount > 0, 'managed-account-banner_unenrolled': maEnrollmentCount === 0});\r\n const bannerLabelsClassName=\"mananaged-account-banner-labels\"\r\n const bannerTitleMarkup = {content.title}
;\r\n const planNameMarkup = ;\r\n \r\n let labelsContent;\r\n let buttonClass;\r\n let bannerContent;\r\n \r\n if(maEnrollmentCount > 0) {\r\n buttonClass = 'asc-btn asc-btn--tertiary';\r\n\r\n if (maEnrollmentCount === 1 && maPlanCount === 1) {\r\n bannerContent = content.enrolled.onePlan;\r\n labelsContent = (\r\n \r\n {bannerTitleMarkup}\r\n {planNameMarkup}\r\n
\r\n );\r\n } else {\r\n labelsContent = (\r\n \r\n {bannerTitleMarkup}\r\n
\r\n );\r\n if (maEnrollmentCount === maPlanCount) {\r\n bannerContent = content.enrolled.allPlans;\r\n } else {\r\n bannerContent = content.enrolled.somePlans;\r\n }\r\n }\r\n } else {\r\n bannerContent = content.notEnrolled;\r\n buttonClass = 'asc-btn asc-btn--pill';\r\n if(maPlanCount === 1) {\r\n labelsContent = (\r\n \r\n {planNameMarkup}\r\n
\r\n );\r\n }\r\n }\r\n\r\n const handleClick = () => {\r\n sendAnalyticsEvent(`MA ${maPlanCount > 0 ? 'E' : 'U'} Dashboard ${arkManagedAcctProductCode}`);\r\n };\r\n\r\n return (\r\n \r\n \r\n {labelsContent && labelsContent}\r\n \r\n
{bannerContent.bodyText}
\r\n