\n \n ) : null}\n
\n );\n}\n\nNavBar.propTypes = {\n onNext: PropTypes.func,\n nextLabel: PropTypes.string,\n onBack: PropTypes.func,\n isLoading: PropTypes.bool,\n nextDisabled: PropTypes.bool,\n};\n\nexport default NavBar;\n","import React, { Component } from 'react';\nimport fetch from 'cross-fetch';\nimport PropTypes from 'prop-types';\nimport { withTranslation } from 'react-i18next';\nimport NavBar from './NavBar.jsx';\nimport TextField from '../bits/TextField.jsx';\n\nclass DeviceIdForm extends Component {\n state = {\n isLoading: false,\n errorCode: null,\n nextDisabled: true,\n }\n\n onSubmit = () => {\n const { onNext } = this.props;\n const { deviceEmei } = this.props.values;\n\n this.setState({\n isLoading: true,\n });\n\n fetch(`/devices/find?emei=${deviceEmei}`, {\n credentials: 'include',\n })\n .then((response) => {\n if (response.ok) {\n return response.json();\n }\n\n throw new Error(response.status === 404 ? 'device_id_form.error_imei_unknown' : 'device_id_form.error_unknown');\n })\n .then((data) => {\n if (data.claimed) {\n throw new Error('device_id_form.error_imei_claimed');\n } else if (data.expired) {\n throw new Error('device_id_form.error_imei_expired');\n } else {\n onNext({\n deviceUserGuideUrl: data.userGuideUrl,\n deviceIsPrepaid: data.isPrepaid,\n prepaidDurationDays: data.prepaidDurationDays,\n deviceModel: data.model,\n });\n }\n })\n .catch((error) => {\n this.setState({\n errorCode: error.message,\n isLoading: false,\n });\n });\n }\n\n nextDisabled = () => (this.props.values.deviceEmei.length === 0);\n\n render() {\n const { values, handleChange, t } = this.props;\n\n return (\n \n
\n );\n }\n}\n\nDeviceIdForm.propTypes = {\n onNext: PropTypes.func,\n handleChange: PropTypes.func,\n values: PropTypes.object,\n};\n\nexport default withTranslation('activation_wizard')(DeviceIdForm);\n","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"\n}), 'CheckBoxOutlineBlank');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n}), 'CheckBox');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\"\n}), 'IndeterminateCheckBox');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport SwitchBase from '../internal/SwitchBase';\nimport CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';\nimport CheckBoxIcon from '../internal/svg-icons/CheckBox';\nimport { alpha } from '../styles/colorManipulator';\nimport IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';\nimport capitalize from '../utils/capitalize';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.secondary\n },\n /* Pseudo-class applied to the root element if `checked={true}`. */\n checked: {},\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n /* Pseudo-class applied to the root element if `indeterminate={true}`. */\n indeterminate: {},\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n '&$checked': {\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n },\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n '&$checked': {\n color: theme.palette.secondary.main,\n '&:hover': {\n backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n }\n };\n};\nvar defaultCheckedIcon = /*#__PURE__*/React.createElement(CheckBoxIcon, null);\nvar defaultIcon = /*#__PURE__*/React.createElement(CheckBoxOutlineBlankIcon, null);\nvar defaultIndeterminateIcon = /*#__PURE__*/React.createElement(IndeterminateCheckBoxIcon, null);\nvar Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {\n var _props$checkedIcon = props.checkedIcon,\n checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,\n classes = props.classes,\n _props$color = props.color,\n color = _props$color === void 0 ? 'secondary' : _props$color,\n _props$icon = props.icon,\n iconProp = _props$icon === void 0 ? defaultIcon : _props$icon,\n _props$indeterminate = props.indeterminate,\n indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,\n _props$indeterminateI = props.indeterminateIcon,\n indeterminateIconProp = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,\n inputProps = props.inputProps,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"checkedIcon\", \"classes\", \"color\", \"icon\", \"indeterminate\", \"indeterminateIcon\", \"inputProps\", \"size\"]);\n var icon = indeterminate ? indeterminateIconProp : iconProp;\n var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;\n return /*#__PURE__*/React.createElement(SwitchBase, _extends({\n type: \"checkbox\",\n classes: {\n root: clsx(classes.root, classes[\"color\".concat(capitalize(color))], indeterminate && classes.indeterminate),\n checked: classes.checked,\n disabled: classes.disabled\n },\n color: color,\n inputProps: _extends({\n 'data-indeterminate': indeterminate\n }, inputProps),\n icon: /*#__PURE__*/React.cloneElement(icon, {\n fontSize: icon.props.fontSize === undefined && size === \"small\" ? size : icon.props.fontSize\n }),\n checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {\n fontSize: indeterminateIcon.props.fontSize === undefined && size === \"small\" ? size : indeterminateIcon.props.fontSize\n }),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiCheckbox'\n})(Checkbox);","import React, { Component } from 'react';\nimport fetch from 'cross-fetch';\nimport PropTypes from 'prop-types';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\n\nimport { withTranslation } from 'react-i18next';\nimport TextField from '../bits/TextField.jsx';\nimport NavBar from './NavBar.jsx';\n\nclass BasicInfoForm extends Component {\n state = {\n isLoading: false,\n errorCode: null,\n }\n\n nextDisabled = () => (this.props.values.email.length === 0);\n\n issueOtp = () => {\n const { onNext } = this.props;\n const { email } = this.props.values;\n\n return fetch('/users/issue-otp', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify({ email }),\n })\n .then((response) => {\n if (response.ok) {\n onNext(false);\n return true;\n }\n\n throw new Error('basic_info_form.error_invalid_email');\n });\n };\n\n onSubmit = () => {\n const { onNext } = this.props;\n const { email } = this.props.values;\n\n this.setState({\n isLoading: true,\n });\n\n fetch('/users/check-email', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify({ email }),\n })\n .then((response) => {\n if (response.ok) {\n return response.json();\n }\n\n throw new Error('basic_info_form.error_generic');\n })\n .then((data) => {\n switch (data.validation_result) {\n case 'email_invalid':\n throw new Error('basic_info_form.error_invalid_email');\n case 'email_taken':\n return this.issueOtp();\n default:\n // This is a new account\n onNext(true);\n return true;\n }\n })\n .catch((error) => {\n this.setState({\n errorCode: error.message,\n isLoading: false,\n });\n });\n };\n\n render() {\n const {\n onBack,\n values,\n handleChange,\n t,\n vineEnabled,\n } = this.props;\n\n return (\n {t('device_id_form.title')}
\n\n\n
\n \n {t('device_id_form.description')}\n
\n\n
\n );\n }\n}\n\nBasicInfoForm.propTypes = {\n onNext: PropTypes.func.isRequired,\n onBack: PropTypes.func.isRequired,\n values: PropTypes.object.isRequired,\n handleChange: PropTypes.func.isRequired,\n vineEnabled: PropTypes.bool.isRequired,\n};\n\nexport default withTranslation('activation_wizard')(BasicInfoForm);\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n boxSizing: 'border-box',\n lineHeight: '48px',\n listStyle: 'none',\n color: theme.palette.text.secondary,\n fontFamily: theme.typography.fontFamily,\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.pxToRem(14)\n },\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n color: theme.palette.primary.main\n },\n /* Styles applied to the root element if `color=\"inherit\"`. */\n colorInherit: {\n color: 'inherit'\n },\n /* Styles applied to the inner `component` element if `disableGutters={false}`. */\n gutters: {\n paddingLeft: 16,\n paddingRight: 16\n },\n /* Styles applied to the root element if `inset={true}`. */\n inset: {\n paddingLeft: 72\n },\n /* Styles applied to the root element if `disableSticky={false}`. */\n sticky: {\n position: 'sticky',\n top: 0,\n zIndex: 1,\n backgroundColor: 'inherit'\n }\n };\n};\nvar ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'default' : _props$color,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'li' : _props$component,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n _props$disableSticky = props.disableSticky,\n disableSticky = _props$disableSticky === void 0 ? false : _props$disableSticky,\n _props$inset = props.inset,\n inset = _props$inset === void 0 ? false : _props$inset,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"color\", \"component\", \"disableGutters\", \"disableSticky\", \"inset\"]);\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, color !== 'default' && classes[\"color\".concat(capitalize(color))], inset && classes.inset, !disableSticky && classes.sticky, !disableGutters && classes.gutters),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiListSubheader'\n})(ListSubheader);","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n}), 'Cancel');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport CancelIcon from '../internal/svg-icons/Cancel';\nimport withStyles from '../styles/withStyles';\nimport { emphasize, alpha } from '../styles/colorManipulator';\nimport useForkRef from '../utils/useForkRef';\nimport capitalize from '../utils/capitalize';\nimport ButtonBase from '../ButtonBase';\nexport var styles = function styles(theme) {\n var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];\n var deleteIconColor = alpha(theme.palette.text.primary, 0.26);\n return {\n /* Styles applied to the root element. */\n root: {\n fontFamily: theme.typography.fontFamily,\n fontSize: theme.typography.pxToRem(13),\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: 32,\n color: theme.palette.getContrastText(backgroundColor),\n backgroundColor: backgroundColor,\n borderRadius: 32 / 2,\n whiteSpace: 'nowrap',\n transition: theme.transitions.create(['background-color', 'box-shadow']),\n // label will inherit this from root, then `clickable` class overrides this for both\n cursor: 'default',\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n textDecoration: 'none',\n border: 'none',\n // Remove `button` border\n padding: 0,\n // Remove `button` padding\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n '&$disabled': {\n opacity: 0.5,\n pointerEvents: 'none'\n },\n '& $avatar': {\n marginLeft: 5,\n marginRight: -6,\n width: 24,\n height: 24,\n color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],\n fontSize: theme.typography.pxToRem(12)\n },\n '& $avatarColorPrimary': {\n color: theme.palette.primary.contrastText,\n backgroundColor: theme.palette.primary.dark\n },\n '& $avatarColorSecondary': {\n color: theme.palette.secondary.contrastText,\n backgroundColor: theme.palette.secondary.dark\n },\n '& $avatarSmall': {\n marginLeft: 4,\n marginRight: -4,\n width: 18,\n height: 18,\n fontSize: theme.typography.pxToRem(10)\n }\n },\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n height: 24\n },\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText\n },\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText\n },\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */\n clickable: {\n userSelect: 'none',\n WebkitTapHighlightColor: 'transparent',\n cursor: 'pointer',\n '&:hover, &:focus': {\n backgroundColor: emphasize(backgroundColor, 0.08)\n },\n '&:active': {\n boxShadow: theme.shadows[1]\n }\n },\n /* Styles applied to the root element if `onClick` and `color=\"primary\"` is defined or `clickable={true}`. */\n clickableColorPrimary: {\n '&:hover, &:focus': {\n backgroundColor: emphasize(theme.palette.primary.main, 0.08)\n }\n },\n /* Styles applied to the root element if `onClick` and `color=\"secondary\"` is defined or `clickable={true}`. */\n clickableColorSecondary: {\n '&:hover, &:focus': {\n backgroundColor: emphasize(theme.palette.secondary.main, 0.08)\n }\n },\n /* Styles applied to the root element if `onDelete` is defined. */\n deletable: {\n '&:focus': {\n backgroundColor: emphasize(backgroundColor, 0.08)\n }\n },\n /* Styles applied to the root element if `onDelete` and `color=\"primary\"` is defined. */\n deletableColorPrimary: {\n '&:focus': {\n backgroundColor: emphasize(theme.palette.primary.main, 0.2)\n }\n },\n /* Styles applied to the root element if `onDelete` and `color=\"secondary\"` is defined. */\n deletableColorSecondary: {\n '&:focus': {\n backgroundColor: emphasize(theme.palette.secondary.main, 0.2)\n }\n },\n /* Styles applied to the root element if `variant=\"outlined\"`. */\n outlined: {\n backgroundColor: 'transparent',\n border: \"1px solid \".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),\n '$clickable&:hover, $clickable&:focus, $deletable&:focus': {\n backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)\n },\n '& $avatar': {\n marginLeft: 4\n },\n '& $avatarSmall': {\n marginLeft: 2\n },\n '& $icon': {\n marginLeft: 4\n },\n '& $iconSmall': {\n marginLeft: 2\n },\n '& $deleteIcon': {\n marginRight: 5\n },\n '& $deleteIconSmall': {\n marginRight: 3\n }\n },\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`. */\n outlinedPrimary: {\n color: theme.palette.primary.main,\n border: \"1px solid \".concat(theme.palette.primary.main),\n '$clickable&:hover, $clickable&:focus, $deletable&:focus': {\n backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)\n }\n },\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`. */\n outlinedSecondary: {\n color: theme.palette.secondary.main,\n border: \"1px solid \".concat(theme.palette.secondary.main),\n '$clickable&:hover, $clickable&:focus, $deletable&:focus': {\n backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity)\n }\n },\n // TODO v5: remove\n\n /* Styles applied to the `avatar` element. */\n avatar: {},\n /* Styles applied to the `avatar` element if `size=\"small\"`. */\n avatarSmall: {},\n /* Styles applied to the `avatar` element if `color=\"primary\"`. */\n avatarColorPrimary: {},\n /* Styles applied to the `avatar` element if `color=\"secondary\"`. */\n avatarColorSecondary: {},\n /* Styles applied to the `icon` element. */\n icon: {\n color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],\n marginLeft: 5,\n marginRight: -6\n },\n /* Styles applied to the `icon` element if `size=\"small\"`. */\n iconSmall: {\n width: 18,\n height: 18,\n marginLeft: 4,\n marginRight: -4\n },\n /* Styles applied to the `icon` element if `color=\"primary\"`. */\n iconColorPrimary: {\n color: 'inherit'\n },\n /* Styles applied to the `icon` element if `color=\"secondary\"`. */\n iconColorSecondary: {\n color: 'inherit'\n },\n /* Styles applied to the label `span` element. */\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n paddingLeft: 12,\n paddingRight: 12,\n whiteSpace: 'nowrap'\n },\n /* Styles applied to the label `span` element if `size=\"small\"`. */\n labelSmall: {\n paddingLeft: 8,\n paddingRight: 8\n },\n /* Styles applied to the `deleteIcon` element. */\n deleteIcon: {\n WebkitTapHighlightColor: 'transparent',\n color: deleteIconColor,\n height: 22,\n width: 22,\n cursor: 'pointer',\n margin: '0 5px 0 -6px',\n '&:hover': {\n color: alpha(deleteIconColor, 0.4)\n }\n },\n /* Styles applied to the `deleteIcon` element if `size=\"small\"`. */\n deleteIconSmall: {\n height: 16,\n width: 16,\n marginRight: 4,\n marginLeft: -4\n },\n /* Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"default\"`. */\n deleteIconColorPrimary: {\n color: alpha(theme.palette.primary.contrastText, 0.7),\n '&:hover, &:active': {\n color: theme.palette.primary.contrastText\n }\n },\n /* Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"default\"`. */\n deleteIconColorSecondary: {\n color: alpha(theme.palette.secondary.contrastText, 0.7),\n '&:hover, &:active': {\n color: theme.palette.secondary.contrastText\n }\n },\n /* Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"outlined\"`. */\n deleteIconOutlinedColorPrimary: {\n color: alpha(theme.palette.primary.main, 0.7),\n '&:hover, &:active': {\n color: theme.palette.primary.main\n }\n },\n /* Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"outlined\"`. */\n deleteIconOutlinedColorSecondary: {\n color: alpha(theme.palette.secondary.main, 0.7),\n '&:hover, &:active': {\n color: theme.palette.secondary.main\n }\n }\n };\n};\nfunction isDeleteKeyboardEvent(keyboardEvent) {\n return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';\n}\n/**\n * Chips represent complex entities in small blocks, such as a contact.\n */\n\nvar Chip = /*#__PURE__*/React.forwardRef(function Chip(props, ref) {\n var avatarProp = props.avatar,\n classes = props.classes,\n className = props.className,\n clickableProp = props.clickable,\n _props$color = props.color,\n color = _props$color === void 0 ? 'default' : _props$color,\n ComponentProp = props.component,\n deleteIconProp = props.deleteIcon,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n iconProp = props.icon,\n label = props.label,\n onClick = props.onClick,\n onDelete = props.onDelete,\n onKeyDown = props.onKeyDown,\n onKeyUp = props.onKeyUp,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'default' : _props$variant,\n other = _objectWithoutProperties(props, [\"avatar\", \"classes\", \"className\", \"clickable\", \"color\", \"component\", \"deleteIcon\", \"disabled\", \"icon\", \"label\", \"onClick\", \"onDelete\", \"onKeyDown\", \"onKeyUp\", \"size\", \"variant\"]);\n var chipRef = React.useRef(null);\n var handleRef = useForkRef(chipRef, ref);\n var handleDeleteIconClick = function handleDeleteIconClick(event) {\n // Stop the event from bubbling up to the `Chip`\n event.stopPropagation();\n if (onDelete) {\n onDelete(event);\n }\n };\n var handleKeyDown = function handleKeyDown(event) {\n // Ignore events from children of `Chip`.\n if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {\n // will be handled in keyUp, otherwise some browsers\n // might init navigation\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n };\n var handleKeyUp = function handleKeyUp(event) {\n // Ignore events from children of `Chip`.\n if (event.currentTarget === event.target) {\n if (onDelete && isDeleteKeyboardEvent(event)) {\n onDelete(event);\n } else if (event.key === 'Escape' && chipRef.current) {\n chipRef.current.blur();\n }\n }\n if (onKeyUp) {\n onKeyUp(event);\n }\n };\n var clickable = clickableProp !== false && onClick ? true : clickableProp;\n var small = size === 'small';\n var Component = ComponentProp || (clickable ? ButtonBase : 'div');\n var moreProps = Component === ButtonBase ? {\n component: 'div'\n } : {};\n var deleteIcon = null;\n if (onDelete) {\n var customClasses = clsx(color !== 'default' && (variant === \"default\" ? classes[\"deleteIconColor\".concat(capitalize(color))] : classes[\"deleteIconOutlinedColor\".concat(capitalize(color))]), small && classes.deleteIconSmall);\n deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {\n className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),\n onClick: handleDeleteIconClick\n }) : /*#__PURE__*/React.createElement(CancelIcon, {\n className: clsx(classes.deleteIcon, customClasses),\n onClick: handleDeleteIconClick\n });\n }\n var avatar = null;\n if (avatarProp && /*#__PURE__*/React.isValidElement(avatarProp)) {\n avatar = /*#__PURE__*/React.cloneElement(avatarProp, {\n className: clsx(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes[\"avatarColor\".concat(capitalize(color))])\n });\n }\n var icon = null;\n if (iconProp && /*#__PURE__*/React.isValidElement(iconProp)) {\n icon = /*#__PURE__*/React.cloneElement(iconProp, {\n className: clsx(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes[\"iconColor\".concat(capitalize(color))])\n });\n }\n if (process.env.NODE_ENV !== 'production') {\n if (avatar && icon) {\n console.error('Material-UI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');\n }\n }\n return /*#__PURE__*/React.createElement(Component, _extends({\n role: clickable || onDelete ? 'button' : undefined,\n className: clsx(classes.root, className, color !== 'default' && [classes[\"color\".concat(capitalize(color))], clickable && classes[\"clickableColor\".concat(capitalize(color))], onDelete && classes[\"deletableColor\".concat(capitalize(color))]], variant !== \"default\" && [classes.outlined, {\n 'primary': classes.outlinedPrimary,\n 'secondary': classes.outlinedSecondary\n }[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),\n \"aria-disabled\": disabled ? true : undefined,\n tabIndex: clickable || onDelete ? 0 : undefined,\n onClick: onClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n ref: handleRef\n }, moreProps, other), avatar || icon, /*#__PURE__*/React.createElement(\"span\", {\n className: clsx(classes.label, small && classes.labelSmall)\n }, label), deleteIcon);\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiChip'\n})(Chip);","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 10l5 5 5-5z\"\n}), 'ArrowDropDown');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\n\n/* eslint-disable no-constant-condition */\nimport * as React from 'react';\nimport { setRef, useEventCallback, useControlled, unstable_useId as useId } from '@material-ui/core/utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript\n// Give up on IE 11 support for this feature\n\nfunction stripDiacritics(string) {\n return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '') : string;\n}\nexport function createFilterOptions() {\n var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var _config$ignoreAccents = config.ignoreAccents,\n ignoreAccents = _config$ignoreAccents === void 0 ? true : _config$ignoreAccents,\n _config$ignoreCase = config.ignoreCase,\n ignoreCase = _config$ignoreCase === void 0 ? true : _config$ignoreCase,\n limit = config.limit,\n _config$matchFrom = config.matchFrom,\n matchFrom = _config$matchFrom === void 0 ? 'any' : _config$matchFrom,\n stringify = config.stringify,\n _config$trim = config.trim,\n trim = _config$trim === void 0 ? false : _config$trim;\n return function (options, _ref) {\n var inputValue = _ref.inputValue,\n getOptionLabel = _ref.getOptionLabel;\n var input = trim ? inputValue.trim() : inputValue;\n if (ignoreCase) {\n input = input.toLowerCase();\n }\n if (ignoreAccents) {\n input = stripDiacritics(input);\n }\n var filteredOptions = options.filter(function (option) {\n var candidate = (stringify || getOptionLabel)(option);\n if (ignoreCase) {\n candidate = candidate.toLowerCase();\n }\n if (ignoreAccents) {\n candidate = stripDiacritics(candidate);\n }\n return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;\n });\n return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;\n };\n} // To replace with .findIndex() once we stop IE 11 support.\n\nfunction findIndex(array, comp) {\n for (var i = 0; i < array.length; i += 1) {\n if (comp(array[i])) {\n return i;\n }\n }\n return -1;\n}\nvar defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used.\n\nvar pageSize = 5;\nexport default function useAutocomplete(props) {\n var _props$autoComplete = props.autoComplete,\n autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,\n _props$autoHighlight = props.autoHighlight,\n autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,\n _props$autoSelect = props.autoSelect,\n autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,\n _props$blurOnSelect = props.blurOnSelect,\n blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,\n _props$clearOnBlur = props.clearOnBlur,\n clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,\n _props$clearOnEscape = props.clearOnEscape,\n clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,\n _props$componentName = props.componentName,\n componentName = _props$componentName === void 0 ? 'useAutocomplete' : _props$componentName,\n _props$debug = props.debug,\n debug = _props$debug === void 0 ? false : _props$debug,\n _props$defaultValue = props.defaultValue,\n defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,\n _props$disableClearab = props.disableClearable,\n disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,\n _props$disableCloseOn = props.disableCloseOnSelect,\n disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,\n _props$disabledItemsF = props.disabledItemsFocusable,\n disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,\n _props$disableListWra = props.disableListWrap,\n disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,\n _props$filterOptions = props.filterOptions,\n filterOptions = _props$filterOptions === void 0 ? defaultFilterOptions : _props$filterOptions,\n _props$filterSelected = props.filterSelectedOptions,\n filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,\n _props$freeSolo = props.freeSolo,\n freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,\n getOptionDisabled = props.getOptionDisabled,\n _props$getOptionLabel = props.getOptionLabel,\n getOptionLabelProp = _props$getOptionLabel === void 0 ? function (option) {\n return option;\n } : _props$getOptionLabel,\n _props$getOptionSelec = props.getOptionSelected,\n getOptionSelected = _props$getOptionSelec === void 0 ? function (option, value) {\n return option === value;\n } : _props$getOptionSelec,\n groupBy = props.groupBy,\n _props$handleHomeEndK = props.handleHomeEndKeys,\n handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,\n idProp = props.id,\n _props$includeInputIn = props.includeInputInList,\n includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,\n inputValueProp = props.inputValue,\n _props$multiple = props.multiple,\n multiple = _props$multiple === void 0 ? false : _props$multiple,\n onChange = props.onChange,\n onClose = props.onClose,\n onHighlightChange = props.onHighlightChange,\n onInputChange = props.onInputChange,\n onOpen = props.onOpen,\n openProp = props.open,\n _props$openOnFocus = props.openOnFocus,\n openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,\n options = props.options,\n _props$selectOnFocus = props.selectOnFocus,\n selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,\n valueProp = props.value;\n var id = useId(idProp);\n var getOptionLabel = getOptionLabelProp;\n if (process.env.NODE_ENV !== 'production') {\n getOptionLabel = function getOptionLabel(option) {\n var optionLabel = getOptionLabelProp(option);\n if (typeof optionLabel !== 'string') {\n var erroneousReturn = optionLabel === undefined ? 'undefined' : \"\".concat(_typeof(optionLabel), \" (\").concat(optionLabel, \")\");\n console.error(\"Material-UI: The `getOptionLabel` method of \".concat(componentName, \" returned \").concat(erroneousReturn, \" instead of a string for \").concat(JSON.stringify(option), \".\"));\n }\n return optionLabel;\n };\n }\n var ignoreFocus = React.useRef(false);\n var firstFocus = React.useRef(true);\n var inputRef = React.useRef(null);\n var listboxRef = React.useRef(null);\n var _React$useState = React.useState(null),\n anchorEl = _React$useState[0],\n setAnchorEl = _React$useState[1];\n var _React$useState2 = React.useState(-1),\n focusedTag = _React$useState2[0],\n setFocusedTag = _React$useState2[1];\n var defaultHighlighted = autoHighlight ? 0 : -1;\n var highlightedIndexRef = React.useRef(defaultHighlighted);\n var _useControlled = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: componentName\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n value = _useControlled2[0],\n setValue = _useControlled2[1];\n var _useControlled3 = useControlled({\n controlled: inputValueProp,\n default: '',\n name: componentName,\n state: 'inputValue'\n }),\n _useControlled4 = _slicedToArray(_useControlled3, 2),\n inputValue = _useControlled4[0],\n setInputValue = _useControlled4[1];\n var _React$useState3 = React.useState(false),\n focused = _React$useState3[0],\n setFocused = _React$useState3[1];\n var resetInputValue = useEventCallback(function (event, newValue) {\n var newInputValue;\n if (multiple) {\n newInputValue = '';\n } else if (newValue == null) {\n newInputValue = '';\n } else {\n var optionLabel = getOptionLabel(newValue);\n newInputValue = typeof optionLabel === 'string' ? optionLabel : '';\n }\n if (inputValue === newInputValue) {\n return;\n }\n setInputValue(newInputValue);\n if (onInputChange) {\n onInputChange(event, newInputValue, 'reset');\n }\n });\n React.useEffect(function () {\n resetInputValue(null, value);\n }, [value, resetInputValue]);\n var _useControlled5 = useControlled({\n controlled: openProp,\n default: false,\n name: componentName,\n state: 'open'\n }),\n _useControlled6 = _slicedToArray(_useControlled5, 2),\n open = _useControlled6[0],\n setOpenState = _useControlled6[1];\n var inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);\n var popupOpen = open;\n var filteredOptions = popupOpen ? filterOptions(options.filter(function (option) {\n if (filterSelectedOptions && (multiple ? value : [value]).some(function (value2) {\n return value2 !== null && getOptionSelected(option, value2);\n })) {\n return false;\n }\n return true;\n }),\n // we use the empty string to manipulate `filterOptions` to not filter any options\n // i.e. the filter predicate always returns true\n {\n inputValue: inputValueIsSelectedValue ? '' : inputValue,\n getOptionLabel: getOptionLabel\n }) : [];\n if (process.env.NODE_ENV !== 'production') {\n if (value !== null && !freeSolo && options.length > 0) {\n var missingValue = (multiple ? value : [value]).filter(function (value2) {\n return !options.some(function (option) {\n return getOptionSelected(option, value2);\n });\n });\n if (missingValue.length > 0) {\n console.warn([\"Material-UI: The value provided to \".concat(componentName, \" is invalid.\"), \"None of the options match with `\".concat(missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0]), \"`.\"), 'You can use the `getOptionSelected` prop to customize the equality test.'].join('\\n'));\n }\n }\n }\n var focusTag = useEventCallback(function (tagToFocus) {\n if (tagToFocus === -1) {\n inputRef.current.focus();\n } else {\n anchorEl.querySelector(\"[data-tag-index=\\\"\".concat(tagToFocus, \"\\\"]\")).focus();\n }\n }); // Ensure the focusedTag is never inconsistent\n\n React.useEffect(function () {\n if (multiple && focusedTag > value.length - 1) {\n setFocusedTag(-1);\n focusTag(-1);\n }\n }, [value, multiple, focusedTag, focusTag]);\n function validOptionIndex(index, direction) {\n if (!listboxRef.current || index === -1) {\n return -1;\n }\n var nextFocus = index;\n while (true) {\n // Out of range\n if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {\n return -1;\n }\n var option = listboxRef.current.querySelector(\"[data-option-index=\\\"\".concat(nextFocus, \"\\\"]\")); // Same logic as MenuList.js\n\n var nextFocusDisabled = disabledItemsFocusable ? false : option && (option.disabled || option.getAttribute('aria-disabled') === 'true');\n if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {\n // Move to the next element.\n nextFocus += direction === 'next' ? 1 : -1;\n } else {\n return nextFocus;\n }\n }\n }\n var setHighlightedIndex = useEventCallback(function (_ref2) {\n var event = _ref2.event,\n index = _ref2.index,\n _ref2$reason = _ref2.reason,\n reason = _ref2$reason === void 0 ? 'auto' : _ref2$reason;\n highlightedIndexRef.current = index; // does the index exist?\n\n if (index === -1) {\n inputRef.current.removeAttribute('aria-activedescendant');\n } else {\n inputRef.current.setAttribute('aria-activedescendant', \"\".concat(id, \"-option-\").concat(index));\n }\n if (onHighlightChange) {\n onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);\n }\n if (!listboxRef.current) {\n return;\n }\n var prev = listboxRef.current.querySelector('[data-focus]');\n if (prev) {\n prev.removeAttribute('data-focus');\n }\n var listboxNode = listboxRef.current.parentElement.querySelector('[role=\"listbox\"]'); // \"No results\"\n\n if (!listboxNode) {\n return;\n }\n if (index === -1) {\n listboxNode.scrollTop = 0;\n return;\n }\n var option = listboxRef.current.querySelector(\"[data-option-index=\\\"\".concat(index, \"\\\"]\"));\n if (!option) {\n return;\n }\n option.setAttribute('data-focus', 'true'); // Scroll active descendant into view.\n // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js\n //\n // Consider this API instead once it has a better browser support:\n // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });\n\n if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {\n var element = option;\n var scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;\n var elementBottom = element.offsetTop + element.offsetHeight;\n if (elementBottom > scrollBottom) {\n listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;\n } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {\n listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);\n }\n }\n });\n var changeHighlightedIndex = useEventCallback(function (_ref3) {\n var event = _ref3.event,\n diff = _ref3.diff,\n _ref3$direction = _ref3.direction,\n direction = _ref3$direction === void 0 ? 'next' : _ref3$direction,\n _ref3$reason = _ref3.reason,\n reason = _ref3$reason === void 0 ? 'auto' : _ref3$reason;\n if (!popupOpen) {\n return;\n }\n var getNextIndex = function getNextIndex() {\n var maxIndex = filteredOptions.length - 1;\n if (diff === 'reset') {\n return defaultHighlighted;\n }\n if (diff === 'start') {\n return 0;\n }\n if (diff === 'end') {\n return maxIndex;\n }\n var newIndex = highlightedIndexRef.current + diff;\n if (newIndex < 0) {\n if (newIndex === -1 && includeInputInList) {\n return -1;\n }\n if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {\n return 0;\n }\n return maxIndex;\n }\n if (newIndex > maxIndex) {\n if (newIndex === maxIndex + 1 && includeInputInList) {\n return -1;\n }\n if (disableListWrap || Math.abs(diff) > 1) {\n return maxIndex;\n }\n return 0;\n }\n return newIndex;\n };\n var nextIndex = validOptionIndex(getNextIndex(), direction);\n setHighlightedIndex({\n index: nextIndex,\n reason: reason,\n event: event\n }); // Sync the content of the input with the highlighted option.\n\n if (autoComplete && diff !== 'reset') {\n if (nextIndex === -1) {\n inputRef.current.value = inputValue;\n } else {\n var option = getOptionLabel(filteredOptions[nextIndex]);\n inputRef.current.value = option; // The portion of the selected suggestion that has not been typed by the user,\n // a completion string, appears inline after the input cursor in the textbox.\n\n var index = option.toLowerCase().indexOf(inputValue.toLowerCase());\n if (index === 0 && inputValue.length > 0) {\n inputRef.current.setSelectionRange(inputValue.length, option.length);\n }\n }\n }\n });\n var syncHighlightedIndex = React.useCallback(function () {\n if (!popupOpen) {\n return;\n }\n var valueItem = multiple ? value[0] : value; // The popup is empty, reset\n\n if (filteredOptions.length === 0 || valueItem == null) {\n changeHighlightedIndex({\n diff: 'reset'\n });\n return;\n }\n if (!listboxRef.current) {\n return;\n } // Synchronize the value with the highlighted index\n\n if (!filterSelectedOptions && valueItem != null) {\n var currentOption = filteredOptions[highlightedIndexRef.current]; // Keep the current highlighted index if possible\n\n if (multiple && currentOption && findIndex(value, function (val) {\n return getOptionSelected(currentOption, val);\n }) !== -1) {\n return;\n }\n var itemIndex = findIndex(filteredOptions, function (optionItem) {\n return getOptionSelected(optionItem, valueItem);\n });\n if (itemIndex === -1) {\n changeHighlightedIndex({\n diff: 'reset'\n });\n } else {\n setHighlightedIndex({\n index: itemIndex\n });\n }\n return;\n } // Prevent the highlighted index to leak outside the boundaries.\n\n if (highlightedIndexRef.current >= filteredOptions.length - 1) {\n setHighlightedIndex({\n index: filteredOptions.length - 1\n });\n return;\n } // Restore the focus to the previous index.\n\n setHighlightedIndex({\n index: highlightedIndexRef.current\n }); // Ignore filteredOptions (and options, getOptionSelected, getOptionLabel) not to break the scroll position\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n // Only sync the highlighted index when the option switch between empty and not\n // eslint-disable-next-line react-hooks/exhaustive-deps\n filteredOptions.length === 0,\n // Don't sync the highlighted index with the value when multiple\n // eslint-disable-next-line react-hooks/exhaustive-deps\n multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);\n var handleListboxRef = useEventCallback(function (node) {\n setRef(listboxRef, node);\n if (!node) {\n return;\n }\n syncHighlightedIndex();\n });\n React.useEffect(function () {\n syncHighlightedIndex();\n }, [syncHighlightedIndex]);\n var handleOpen = function handleOpen(event) {\n if (open) {\n return;\n }\n setOpenState(true);\n if (onOpen) {\n onOpen(event);\n }\n };\n var handleClose = function handleClose(event, reason) {\n if (!open) {\n return;\n }\n setOpenState(false);\n if (onClose) {\n onClose(event, reason);\n }\n };\n var handleValue = function handleValue(event, newValue, reason, details) {\n if (value === newValue) {\n return;\n }\n if (onChange) {\n onChange(event, newValue, reason, details);\n }\n setValue(newValue);\n };\n var isTouch = React.useRef(false);\n var selectNewValue = function selectNewValue(event, option) {\n var reasonProp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'select-option';\n var origin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'options';\n var reason = reasonProp;\n var newValue = option;\n if (multiple) {\n newValue = Array.isArray(value) ? value.slice() : [];\n if (process.env.NODE_ENV !== 'production') {\n var matches = newValue.filter(function (val) {\n return getOptionSelected(option, val);\n });\n if (matches.length > 1) {\n console.error([\"Material-UI: The `getOptionSelected` method of \".concat(componentName, \" do not handle the arguments correctly.\"), \"The component expects a single value to match a given option but found \".concat(matches.length, \" matches.\")].join('\\n'));\n }\n }\n var itemIndex = findIndex(newValue, function (valueItem) {\n return getOptionSelected(option, valueItem);\n });\n if (itemIndex === -1) {\n newValue.push(option);\n } else if (origin !== 'freeSolo') {\n newValue.splice(itemIndex, 1);\n reason = 'remove-option';\n }\n }\n resetInputValue(event, newValue);\n handleValue(event, newValue, reason, {\n option: option\n });\n if (!disableCloseOnSelect) {\n handleClose(event, reason);\n }\n if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {\n inputRef.current.blur();\n }\n };\n function validTagIndex(index, direction) {\n if (index === -1) {\n return -1;\n }\n var nextFocus = index;\n while (true) {\n // Out of range\n if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {\n return -1;\n }\n var option = anchorEl.querySelector(\"[data-tag-index=\\\"\".concat(nextFocus, \"\\\"]\")); // Same logic as MenuList.js\n\n if (option && (!option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true')) {\n nextFocus += direction === 'next' ? 1 : -1;\n } else {\n return nextFocus;\n }\n }\n }\n var handleFocusTag = function handleFocusTag(event, direction) {\n if (!multiple) {\n return;\n }\n handleClose(event, 'toggleInput');\n var nextTag = focusedTag;\n if (focusedTag === -1) {\n if (inputValue === '' && direction === 'previous') {\n nextTag = value.length - 1;\n }\n } else {\n nextTag += direction === 'next' ? 1 : -1;\n if (nextTag < 0) {\n nextTag = 0;\n }\n if (nextTag === value.length) {\n nextTag = -1;\n }\n }\n nextTag = validTagIndex(nextTag, direction);\n setFocusedTag(nextTag);\n focusTag(nextTag);\n };\n var handleClear = function handleClear(event) {\n ignoreFocus.current = true;\n setInputValue('');\n if (onInputChange) {\n onInputChange(event, '', 'clear');\n }\n handleValue(event, multiple ? [] : null, 'clear');\n };\n var handleKeyDown = function handleKeyDown(other) {\n return function (event) {\n if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {\n setFocusedTag(-1);\n focusTag(-1);\n }\n switch (event.key) {\n case 'Home':\n if (popupOpen && handleHomeEndKeys) {\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: 'start',\n direction: 'next',\n reason: 'keyboard',\n event: event\n });\n }\n break;\n case 'End':\n if (popupOpen && handleHomeEndKeys) {\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: 'end',\n direction: 'previous',\n reason: 'keyboard',\n event: event\n });\n }\n break;\n case 'PageUp':\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: -pageSize,\n direction: 'previous',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n case 'PageDown':\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: pageSize,\n direction: 'next',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n case 'ArrowDown':\n // Prevent cursor move\n event.preventDefault();\n changeHighlightedIndex({\n diff: 1,\n direction: 'next',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n case 'ArrowUp':\n // Prevent cursor move\n event.preventDefault();\n changeHighlightedIndex({\n diff: -1,\n direction: 'previous',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n case 'ArrowLeft':\n handleFocusTag(event, 'previous');\n break;\n case 'ArrowRight':\n handleFocusTag(event, 'next');\n break;\n case 'Enter':\n // Wait until IME is settled.\n if (event.which === 229) {\n break;\n }\n if (highlightedIndexRef.current !== -1 && popupOpen) {\n var option = filteredOptions[highlightedIndexRef.current];\n var disabled = getOptionDisabled ? getOptionDisabled(option) : false; // We don't want to validate the form.\n\n event.preventDefault();\n if (disabled) {\n return;\n }\n selectNewValue(event, option, 'select-option'); // Move the selection to the end.\n\n if (autoComplete) {\n inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);\n }\n } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {\n if (multiple) {\n // Allow people to add new values before they submit the form.\n event.preventDefault();\n }\n selectNewValue(event, inputValue, 'create-option', 'freeSolo');\n }\n break;\n case 'Escape':\n if (popupOpen) {\n // Avoid Opera to exit fullscreen mode.\n event.preventDefault(); // Avoid the Modal to handle the event.\n\n event.stopPropagation();\n handleClose(event, 'escape');\n } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {\n // Avoid Opera to exit fullscreen mode.\n event.preventDefault(); // Avoid the Modal to handle the event.\n\n event.stopPropagation();\n handleClear(event);\n }\n break;\n case 'Backspace':\n if (multiple && inputValue === '' && value.length > 0) {\n var index = focusedTag === -1 ? value.length - 1 : focusedTag;\n var newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'remove-option', {\n option: value[index]\n });\n }\n break;\n default:\n }\n if (other.onKeyDown) {\n other.onKeyDown(event);\n }\n };\n };\n var handleFocus = function handleFocus(event) {\n setFocused(true);\n if (openOnFocus && !ignoreFocus.current) {\n handleOpen(event);\n }\n };\n var handleBlur = function handleBlur(event) {\n // Ignore the event when using the scrollbar with IE 11\n if (listboxRef.current !== null && document.activeElement === listboxRef.current.parentElement) {\n inputRef.current.focus();\n return;\n }\n setFocused(false);\n firstFocus.current = true;\n ignoreFocus.current = false;\n if (debug && inputValue !== '') {\n return;\n }\n if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {\n selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');\n } else if (autoSelect && freeSolo && inputValue !== '') {\n selectNewValue(event, inputValue, 'blur', 'freeSolo');\n } else if (clearOnBlur) {\n resetInputValue(event, value);\n }\n handleClose(event, 'blur');\n };\n var handleInputChange = function handleInputChange(event) {\n var newValue = event.target.value;\n if (inputValue !== newValue) {\n setInputValue(newValue);\n if (onInputChange) {\n onInputChange(event, newValue, 'input');\n }\n }\n if (newValue === '') {\n if (!disableClearable && !multiple) {\n handleValue(event, null, 'clear');\n }\n } else {\n handleOpen(event);\n }\n };\n var handleOptionMouseOver = function handleOptionMouseOver(event) {\n setHighlightedIndex({\n event: event,\n index: Number(event.currentTarget.getAttribute('data-option-index')),\n reason: 'mouse'\n });\n };\n var handleOptionTouchStart = function handleOptionTouchStart() {\n isTouch.current = true;\n };\n var handleOptionClick = function handleOptionClick(event) {\n var index = Number(event.currentTarget.getAttribute('data-option-index'));\n selectNewValue(event, filteredOptions[index], 'select-option');\n isTouch.current = false;\n };\n var handleTagDelete = function handleTagDelete(index) {\n return function (event) {\n var newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'remove-option', {\n option: value[index]\n });\n };\n };\n var handlePopupIndicator = function handlePopupIndicator(event) {\n if (open) {\n handleClose(event, 'toggleInput');\n } else {\n handleOpen(event);\n }\n }; // Prevent input blur when interacting with the combobox\n\n var handleMouseDown = function handleMouseDown(event) {\n if (event.target.getAttribute('id') !== id) {\n event.preventDefault();\n }\n }; // Focus the input when interacting with the combobox\n\n var handleClick = function handleClick() {\n inputRef.current.focus();\n if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {\n inputRef.current.select();\n }\n firstFocus.current = false;\n };\n var handleInputMouseDown = function handleInputMouseDown(event) {\n if (inputValue === '' || !open) {\n handlePopupIndicator(event);\n }\n };\n var dirty = freeSolo && inputValue.length > 0;\n dirty = dirty || (multiple ? value.length > 0 : value !== null);\n var groupedOptions = filteredOptions;\n if (groupBy) {\n // used to keep track of key and indexes in the result array\n var indexBy = new Map();\n var warn = false;\n groupedOptions = filteredOptions.reduce(function (acc, option, index) {\n var group = groupBy(option);\n if (acc.length > 0 && acc[acc.length - 1].group === group) {\n acc[acc.length - 1].options.push(option);\n } else {\n if (process.env.NODE_ENV !== 'production') {\n if (indexBy.get(group) && !warn) {\n console.warn(\"Material-UI: The options provided combined with the `groupBy` method of \".concat(componentName, \" returns duplicated headers.\"), 'You can solve the issue by sorting the options with the output of `groupBy`.');\n warn = true;\n }\n indexBy.set(group, true);\n }\n acc.push({\n key: index,\n index: index,\n group: group,\n options: [option]\n });\n }\n return acc;\n }, []);\n }\n return {\n getRootProps: function getRootProps() {\n var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n return _extends({\n 'aria-owns': popupOpen ? \"\".concat(id, \"-popup\") : null,\n role: 'combobox',\n 'aria-expanded': popupOpen\n }, other, {\n onKeyDown: handleKeyDown(other),\n onMouseDown: handleMouseDown,\n onClick: handleClick\n });\n },\n getInputLabelProps: function getInputLabelProps() {\n return {\n id: \"\".concat(id, \"-label\"),\n htmlFor: id\n };\n },\n getInputProps: function getInputProps() {\n return {\n id: id,\n value: inputValue,\n onBlur: handleBlur,\n onFocus: handleFocus,\n onChange: handleInputChange,\n onMouseDown: handleInputMouseDown,\n // if open then this is handled imperativeley so don't let react override\n // only have an opinion about this when closed\n 'aria-activedescendant': popupOpen ? '' : null,\n 'aria-autocomplete': autoComplete ? 'both' : 'list',\n 'aria-controls': popupOpen ? \"\".concat(id, \"-popup\") : null,\n // Disable browser's suggestion that might overlap with the popup.\n // Handle autocomplete but not autofill.\n autoComplete: 'off',\n ref: inputRef,\n autoCapitalize: 'none',\n spellCheck: 'false'\n };\n },\n getClearProps: function getClearProps() {\n return {\n tabIndex: -1,\n onClick: handleClear\n };\n },\n getPopupIndicatorProps: function getPopupIndicatorProps() {\n return {\n tabIndex: -1,\n onClick: handlePopupIndicator\n };\n },\n getTagProps: function getTagProps(_ref4) {\n var index = _ref4.index;\n return {\n key: index,\n 'data-tag-index': index,\n tabIndex: -1,\n onDelete: handleTagDelete(index)\n };\n },\n getListboxProps: function getListboxProps() {\n return {\n role: 'listbox',\n id: \"\".concat(id, \"-popup\"),\n 'aria-labelledby': \"\".concat(id, \"-label\"),\n ref: handleListboxRef,\n onMouseDown: function onMouseDown(event) {\n // Prevent blur\n event.preventDefault();\n }\n };\n },\n getOptionProps: function getOptionProps(_ref5) {\n var index = _ref5.index,\n option = _ref5.option;\n var selected = (multiple ? value : [value]).some(function (value2) {\n return value2 != null && getOptionSelected(option, value2);\n });\n var disabled = getOptionDisabled ? getOptionDisabled(option) : false;\n return {\n key: index,\n tabIndex: -1,\n role: 'option',\n id: \"\".concat(id, \"-option-\").concat(index),\n onMouseOver: handleOptionMouseOver,\n onClick: handleOptionClick,\n onTouchStart: handleOptionTouchStart,\n 'data-option-index': index,\n 'aria-disabled': disabled,\n 'aria-selected': selected\n };\n },\n id: id,\n inputValue: inputValue,\n value: value,\n dirty: dirty,\n popupOpen: popupOpen,\n focused: focused || focusedTag !== -1,\n anchorEl: anchorEl,\n setAnchorEl: setAnchorEl,\n focusedTag: focusedTag,\n groupedOptions: groupedOptions\n };\n}","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { withStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport Paper from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Chip from '@material-ui/core/Chip';\nimport CloseIcon from '../internal/svg-icons/Close';\nimport ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';\nimport useAutocomplete, { createFilterOptions } from '../useAutocomplete';\nexport { createFilterOptions };\nexport var styles = function styles(theme) {\n var _option;\n return {\n /* Styles applied to the root element. */\n root: {\n '&$focused $clearIndicatorDirty': {\n visibility: 'visible'\n },\n /* Avoid double tap issue on iOS */\n '@media (pointer: fine)': {\n '&:hover $clearIndicatorDirty': {\n visibility: 'visible'\n }\n }\n },\n /* Styles applied to the root element if `fullWidth={true}`. */\n fullWidth: {\n width: '100%'\n },\n /* Pseudo-class applied to the root element if focused. */\n focused: {},\n /* Styles applied to the tag elements, e.g. the chips. */\n tag: {\n margin: 3,\n maxWidth: 'calc(100% - 6px)'\n },\n /* Styles applied to the tag elements, e.g. the chips if `size=\"small\"`. */\n tagSizeSmall: {\n margin: 2,\n maxWidth: 'calc(100% - 4px)'\n },\n /* Styles applied when the popup icon is rendered. */\n hasPopupIcon: {},\n /* Styles applied when the clear icon is rendered. */\n hasClearIcon: {},\n /* Styles applied to the Input element. */\n inputRoot: {\n flexWrap: 'wrap',\n '$hasPopupIcon &, $hasClearIcon &': {\n paddingRight: 26 + 4\n },\n '$hasPopupIcon$hasClearIcon &': {\n paddingRight: 52 + 4\n },\n '& $input': {\n width: 0,\n minWidth: 30\n },\n '&[class*=\"MuiInput-root\"]': {\n paddingBottom: 1,\n '& $input': {\n padding: 4\n },\n '& $input:first-child': {\n padding: '6px 0'\n }\n },\n '&[class*=\"MuiInput-root\"][class*=\"MuiInput-marginDense\"]': {\n '& $input': {\n padding: '4px 4px 5px'\n },\n '& $input:first-child': {\n padding: '3px 0 6px'\n }\n },\n '&[class*=\"MuiOutlinedInput-root\"]': {\n padding: 9,\n '$hasPopupIcon &, $hasClearIcon &': {\n paddingRight: 26 + 4 + 9\n },\n '$hasPopupIcon$hasClearIcon &': {\n paddingRight: 52 + 4 + 9\n },\n '& $input': {\n padding: '9.5px 4px'\n },\n '& $input:first-child': {\n paddingLeft: 6\n },\n '& $endAdornment': {\n right: 9\n }\n },\n '&[class*=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]': {\n padding: 6,\n '& $input': {\n padding: '4.5px 4px'\n }\n },\n '&[class*=\"MuiFilledInput-root\"]': {\n paddingTop: 19,\n paddingLeft: 8,\n '$hasPopupIcon &, $hasClearIcon &': {\n paddingRight: 26 + 4 + 9\n },\n '$hasPopupIcon$hasClearIcon &': {\n paddingRight: 52 + 4 + 9\n },\n '& $input': {\n padding: '9px 4px'\n },\n '& $endAdornment': {\n right: 9\n }\n },\n '&[class*=\"MuiFilledInput-root\"][class*=\"MuiFilledInput-marginDense\"]': {\n paddingBottom: 1,\n '& $input': {\n padding: '4.5px 4px'\n }\n }\n },\n /* Styles applied to the input element. */\n input: {\n flexGrow: 1,\n textOverflow: 'ellipsis',\n opacity: 0\n },\n /* Styles applied to the input element if tag focused. */\n inputFocused: {\n opacity: 1\n },\n /* Styles applied to the endAdornment element. */\n endAdornment: {\n // We use a position absolute to support wrapping tags.\n position: 'absolute',\n right: 0,\n top: 'calc(50% - 14px)' // Center vertically\n },\n\n /* Styles applied to the clear indicator. */\n clearIndicator: {\n marginRight: -2,\n padding: 4,\n visibility: 'hidden'\n },\n /* Styles applied to the clear indicator if the input is dirty. */\n clearIndicatorDirty: {},\n /* Styles applied to the popup indicator. */\n popupIndicator: {\n padding: 2,\n marginRight: -2\n },\n /* Styles applied to the popup indicator if the popup is open. */\n popupIndicatorOpen: {\n transform: 'rotate(180deg)'\n },\n /* Styles applied to the popper element. */\n popper: {\n zIndex: theme.zIndex.modal\n },\n /* Styles applied to the popper element if `disablePortal={true}`. */\n popperDisablePortal: {\n position: 'absolute'\n },\n /* Styles applied to the `Paper` component. */\n paper: _extends({}, theme.typography.body1, {\n overflow: 'hidden',\n margin: '4px 0'\n }),\n /* Styles applied to the `listbox` component. */\n listbox: {\n listStyle: 'none',\n margin: 0,\n padding: '8px 0',\n maxHeight: '40vh',\n overflow: 'auto'\n },\n /* Styles applied to the loading wrapper. */\n loading: {\n color: theme.palette.text.secondary,\n padding: '14px 16px'\n },\n /* Styles applied to the no option wrapper. */\n noOptions: {\n color: theme.palette.text.secondary,\n padding: '14px 16px'\n },\n /* Styles applied to the option elements. */\n option: (_option = {\n minHeight: 48,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n cursor: 'pointer',\n paddingTop: 6,\n boxSizing: 'border-box',\n outline: '0',\n WebkitTapHighlightColor: 'transparent',\n paddingBottom: 6,\n paddingLeft: 16,\n paddingRight: 16\n }, _defineProperty(_option, theme.breakpoints.up('sm'), {\n minHeight: 'auto'\n }), _defineProperty(_option, '&[aria-selected=\"true\"]', {\n backgroundColor: theme.palette.action.selected\n }), _defineProperty(_option, '&[data-focus=\"true\"]', {\n backgroundColor: theme.palette.action.hover\n }), _defineProperty(_option, '&:active', {\n backgroundColor: theme.palette.action.selected\n }), _defineProperty(_option, '&[aria-disabled=\"true\"]', {\n opacity: theme.palette.action.disabledOpacity,\n pointerEvents: 'none'\n }), _option),\n /* Styles applied to the group's label elements. */\n groupLabel: {\n backgroundColor: theme.palette.background.paper,\n top: -8\n },\n /* Styles applied to the group's ul elements. */\n groupUl: {\n padding: 0,\n '& $option': {\n paddingLeft: 24\n }\n }\n };\n};\nfunction DisablePortal(props) {\n // eslint-disable-next-line react/prop-types\n var anchorEl = props.anchorEl,\n open = props.open,\n other = _objectWithoutProperties(props, [\"anchorEl\", \"open\"]);\n return /*#__PURE__*/React.createElement(\"div\", other);\n}\nvar _ref = /*#__PURE__*/React.createElement(CloseIcon, {\n fontSize: \"small\"\n});\nvar _ref2 = /*#__PURE__*/React.createElement(ArrowDropDownIcon, null);\nvar Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(props, ref) {\n /* eslint-disable no-unused-vars */\n var _props$autoComplete = props.autoComplete,\n autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,\n _props$autoHighlight = props.autoHighlight,\n autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,\n _props$autoSelect = props.autoSelect,\n autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,\n _props$blurOnSelect = props.blurOnSelect,\n blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,\n ChipProps = props.ChipProps,\n classes = props.classes,\n className = props.className,\n _props$clearOnBlur = props.clearOnBlur,\n clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,\n _props$clearOnEscape = props.clearOnEscape,\n clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,\n _props$clearText = props.clearText,\n clearText = _props$clearText === void 0 ? 'Clear' : _props$clearText,\n _props$closeIcon = props.closeIcon,\n closeIcon = _props$closeIcon === void 0 ? _ref : _props$closeIcon,\n _props$closeText = props.closeText,\n closeText = _props$closeText === void 0 ? 'Close' : _props$closeText,\n _props$debug = props.debug,\n debug = _props$debug === void 0 ? false : _props$debug,\n _props$defaultValue = props.defaultValue,\n defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,\n _props$disableClearab = props.disableClearable,\n disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,\n _props$disableCloseOn = props.disableCloseOnSelect,\n disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disabledItemsF = props.disabledItemsFocusable,\n disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,\n _props$disableListWra = props.disableListWrap,\n disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,\n _props$disablePortal = props.disablePortal,\n disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,\n filterOptions = props.filterOptions,\n _props$filterSelected = props.filterSelectedOptions,\n filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,\n _props$forcePopupIcon = props.forcePopupIcon,\n forcePopupIcon = _props$forcePopupIcon === void 0 ? 'auto' : _props$forcePopupIcon,\n _props$freeSolo = props.freeSolo,\n freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,\n _props$fullWidth = props.fullWidth,\n fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,\n _props$getLimitTagsTe = props.getLimitTagsText,\n getLimitTagsText = _props$getLimitTagsTe === void 0 ? function (more) {\n return \"+\".concat(more);\n } : _props$getLimitTagsTe,\n getOptionDisabled = props.getOptionDisabled,\n _props$getOptionLabel = props.getOptionLabel,\n getOptionLabel = _props$getOptionLabel === void 0 ? function (x) {\n return x;\n } : _props$getOptionLabel,\n getOptionSelected = props.getOptionSelected,\n groupBy = props.groupBy,\n _props$handleHomeEndK = props.handleHomeEndKeys,\n handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,\n idProp = props.id,\n _props$includeInputIn = props.includeInputInList,\n includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,\n inputValueProp = props.inputValue,\n _props$limitTags = props.limitTags,\n limitTags = _props$limitTags === void 0 ? -1 : _props$limitTags,\n _props$ListboxCompone = props.ListboxComponent,\n ListboxComponent = _props$ListboxCompone === void 0 ? 'ul' : _props$ListboxCompone,\n ListboxProps = props.ListboxProps,\n _props$loading = props.loading,\n loading = _props$loading === void 0 ? false : _props$loading,\n _props$loadingText = props.loadingText,\n loadingText = _props$loadingText === void 0 ? 'Loading…' : _props$loadingText,\n _props$multiple = props.multiple,\n multiple = _props$multiple === void 0 ? false : _props$multiple,\n _props$noOptionsText = props.noOptionsText,\n noOptionsText = _props$noOptionsText === void 0 ? 'No options' : _props$noOptionsText,\n onChange = props.onChange,\n onClose = props.onClose,\n onHighlightChange = props.onHighlightChange,\n onInputChange = props.onInputChange,\n onOpen = props.onOpen,\n open = props.open,\n _props$openOnFocus = props.openOnFocus,\n openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,\n _props$openText = props.openText,\n openText = _props$openText === void 0 ? 'Open' : _props$openText,\n options = props.options,\n _props$PaperComponent = props.PaperComponent,\n PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,\n _props$PopperComponen = props.PopperComponent,\n PopperComponentProp = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,\n _props$popupIcon = props.popupIcon,\n popupIcon = _props$popupIcon === void 0 ? _ref2 : _props$popupIcon,\n renderGroupProp = props.renderGroup,\n renderInput = props.renderInput,\n renderOptionProp = props.renderOption,\n renderTags = props.renderTags,\n _props$selectOnFocus = props.selectOnFocus,\n selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n valueProp = props.value,\n other = _objectWithoutProperties(props, [\"autoComplete\", \"autoHighlight\", \"autoSelect\", \"blurOnSelect\", \"ChipProps\", \"classes\", \"className\", \"clearOnBlur\", \"clearOnEscape\", \"clearText\", \"closeIcon\", \"closeText\", \"debug\", \"defaultValue\", \"disableClearable\", \"disableCloseOnSelect\", \"disabled\", \"disabledItemsFocusable\", \"disableListWrap\", \"disablePortal\", \"filterOptions\", \"filterSelectedOptions\", \"forcePopupIcon\", \"freeSolo\", \"fullWidth\", \"getLimitTagsText\", \"getOptionDisabled\", \"getOptionLabel\", \"getOptionSelected\", \"groupBy\", \"handleHomeEndKeys\", \"id\", \"includeInputInList\", \"inputValue\", \"limitTags\", \"ListboxComponent\", \"ListboxProps\", \"loading\", \"loadingText\", \"multiple\", \"noOptionsText\", \"onChange\", \"onClose\", \"onHighlightChange\", \"onInputChange\", \"onOpen\", \"open\", \"openOnFocus\", \"openText\", \"options\", \"PaperComponent\", \"PopperComponent\", \"popupIcon\", \"renderGroup\", \"renderInput\", \"renderOption\", \"renderTags\", \"selectOnFocus\", \"size\", \"value\"]);\n /* eslint-enable no-unused-vars */\n\n var PopperComponent = disablePortal ? DisablePortal : PopperComponentProp;\n var _useAutocomplete = useAutocomplete(_extends({}, props, {\n componentName: 'Autocomplete'\n })),\n getRootProps = _useAutocomplete.getRootProps,\n getInputProps = _useAutocomplete.getInputProps,\n getInputLabelProps = _useAutocomplete.getInputLabelProps,\n getPopupIndicatorProps = _useAutocomplete.getPopupIndicatorProps,\n getClearProps = _useAutocomplete.getClearProps,\n getTagProps = _useAutocomplete.getTagProps,\n getListboxProps = _useAutocomplete.getListboxProps,\n getOptionProps = _useAutocomplete.getOptionProps,\n value = _useAutocomplete.value,\n dirty = _useAutocomplete.dirty,\n id = _useAutocomplete.id,\n popupOpen = _useAutocomplete.popupOpen,\n focused = _useAutocomplete.focused,\n focusedTag = _useAutocomplete.focusedTag,\n anchorEl = _useAutocomplete.anchorEl,\n setAnchorEl = _useAutocomplete.setAnchorEl,\n inputValue = _useAutocomplete.inputValue,\n groupedOptions = _useAutocomplete.groupedOptions;\n var startAdornment;\n if (multiple && value.length > 0) {\n var getCustomizedTagProps = function getCustomizedTagProps(params) {\n return _extends({\n className: clsx(classes.tag, size === 'small' && classes.tagSizeSmall),\n disabled: disabled\n }, getTagProps(params));\n };\n if (renderTags) {\n startAdornment = renderTags(value, getCustomizedTagProps);\n } else {\n startAdornment = value.map(function (option, index) {\n return /*#__PURE__*/React.createElement(Chip, _extends({\n label: getOptionLabel(option),\n size: size\n }, getCustomizedTagProps({\n index: index\n }), ChipProps));\n });\n }\n }\n if (limitTags > -1 && Array.isArray(startAdornment)) {\n var more = startAdornment.length - limitTags;\n if (!focused && more > 0) {\n startAdornment = startAdornment.splice(0, limitTags);\n startAdornment.push( /*#__PURE__*/React.createElement(\"span\", {\n className: classes.tag,\n key: startAdornment.length\n }, getLimitTagsText(more)));\n }\n }\n var defaultRenderGroup = function defaultRenderGroup(params) {\n return /*#__PURE__*/React.createElement(\"li\", {\n key: params.key\n }, /*#__PURE__*/React.createElement(ListSubheader, {\n className: classes.groupLabel,\n component: \"div\"\n }, params.group), /*#__PURE__*/React.createElement(\"ul\", {\n className: classes.groupUl\n }, params.children));\n };\n var renderGroup = renderGroupProp || defaultRenderGroup;\n var renderOption = renderOptionProp || getOptionLabel;\n var renderListOption = function renderListOption(option, index) {\n var optionProps = getOptionProps({\n option: option,\n index: index\n });\n return /*#__PURE__*/React.createElement(\"li\", _extends({}, optionProps, {\n className: classes.option\n }), renderOption(option, {\n selected: optionProps['aria-selected'],\n inputValue: inputValue\n }));\n };\n var hasClearIcon = !disableClearable && !disabled;\n var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref,\n className: clsx(classes.root, className, focused && classes.focused, fullWidth && classes.fullWidth, hasClearIcon && classes.hasClearIcon, hasPopupIcon && classes.hasPopupIcon)\n }, getRootProps(other)), renderInput({\n id: id,\n disabled: disabled,\n fullWidth: true,\n size: size === 'small' ? 'small' : undefined,\n InputLabelProps: getInputLabelProps(),\n InputProps: {\n ref: setAnchorEl,\n className: classes.inputRoot,\n startAdornment: startAdornment,\n endAdornment: /*#__PURE__*/React.createElement(\"div\", {\n className: classes.endAdornment\n }, hasClearIcon ? /*#__PURE__*/React.createElement(IconButton, _extends({}, getClearProps(), {\n \"aria-label\": clearText,\n title: clearText,\n className: clsx(classes.clearIndicator, dirty && classes.clearIndicatorDirty)\n }), closeIcon) : null, hasPopupIcon ? /*#__PURE__*/React.createElement(IconButton, _extends({}, getPopupIndicatorProps(), {\n disabled: disabled,\n \"aria-label\": popupOpen ? closeText : openText,\n title: popupOpen ? closeText : openText,\n className: clsx(classes.popupIndicator, popupOpen && classes.popupIndicatorOpen)\n }), popupIcon) : null)\n },\n inputProps: _extends({\n className: clsx(classes.input, focusedTag === -1 && classes.inputFocused),\n disabled: disabled\n }, getInputProps())\n })), popupOpen && anchorEl ? /*#__PURE__*/React.createElement(PopperComponent, {\n className: clsx(classes.popper, disablePortal && classes.popperDisablePortal),\n style: {\n width: anchorEl ? anchorEl.clientWidth : null\n },\n role: \"presentation\",\n anchorEl: anchorEl,\n open: true\n }, /*#__PURE__*/React.createElement(PaperComponent, {\n className: classes.paper\n }, loading && groupedOptions.length === 0 ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.loading\n }, loadingText) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.noOptions\n }, noOptionsText) : null, groupedOptions.length > 0 ? /*#__PURE__*/React.createElement(ListboxComponent, _extends({\n className: classes.listbox\n }, getListboxProps(), ListboxProps), groupedOptions.map(function (option, index) {\n if (groupBy) {\n return renderGroup({\n key: option.key,\n group: option.group,\n children: option.options.map(function (option2, index2) {\n return renderListOption(option2, option.index + index2);\n })\n });\n }\n return renderListOption(option, index);\n })) : null)) : null);\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiAutocomplete'\n})(Autocomplete);","import React, { Component } from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport PropTypes from 'prop-types';\nimport fetch from 'cross-fetch';\nimport TextField from '../bits/TextField.jsx';\n\n// ISO 3166-1 alpha-2\n// ⚠️ No support for IE 11\nfunction countryToFlag(isoCode) {\n return typeof String.fromCodePoint !== 'undefined'\n ? isoCode.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397))\n : isoCode;\n}\n\nclass CountrySelect extends Component {\n state = {\n isLoading: true,\n selectedCountryCode: null,\n inputValue: '',\n countries: [\n { code: 'VU', label: 'Vanuatu', phone: '678' },\n { code: 'WF', label: 'Wallis and Futuna', phone: '681' },\n ],\n };\n\n componentDidMount() {\n // Load countries list\n // Populate selected country if props.useGeoDefault is true\n this.loadCountriesList();\n }\n\n loadCountriesList = () => fetch('/countries', {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n })\n .then((response) => {\n if (!response.ok) {\n throw new Error('Unable to load countries');\n }\n\n return response.json();\n })\n .then((json) => {\n this.setState({\n countries: json.availableCountries,\n isLoading: false,\n });\n\n if (this.props.defaultToGeoCountry) {\n this.setCountryCode(json.geoCountryCode || 'US');\n }\n })\n .catch((error) => {\n this.setState({\n errorMsg: error.message,\n isLoading: false,\n });\n\n throw error;\n });\n\n handleCountryChange = (event, newValue) => {\n const selectedCountryCode = newValue && newValue.code ? newValue.code : null;\n this.setCountryCode(selectedCountryCode);\n }\n\n setCountryCode = (selectedCountryCode) => {\n this.setState({ selectedCountryCode });\n this.props.onChange(selectedCountryCode);\n }\n\n render() {\n const { label } = this.props;\n\n return (\n {t('basic_info_form.title')}
\n\n handleChange('isAmazonReviewer')({ target: { value: e.target.checked } })}\n name=\"checkedB\"\n color=\"primary\"\n />\n }\n label={t('basic_info_form.vine_checkbox_desc')}\n />\n )}\n
\n \n \n \n {t(this.state.generalErrorCode)}\n \n \n\n
\n );\n }\n}\n\nAccountCreateForm.propTypes = {\n onNext: PropTypes.func,\n onBack: PropTypes.func,\n handleChange: PropTypes.func,\n values: PropTypes.object,\n};\n\nexport default withTranslation('activation_wizard')(AccountCreateForm);\n","import React, { Component } from 'react';\nimport fetch from 'cross-fetch';\nimport PropTypes from 'prop-types';\nimport { withTranslation } from 'react-i18next';\nimport TextField from '../bits/TextField.jsx';\nimport NavBar from './NavBar.jsx';\n\nclass AuthForm extends Component {\n state = {\n isLoading: false,\n errorCode: null,\n otp: '',\n }\n\n nextDisabled = () => (this.state.otp.length === 0);\n\n onSubmit = () => {\n this.setState({\n isLoading: true,\n });\n\n fetch('/users/auth', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify({\n email: this.props.values.email,\n method: 'otp',\n value: this.state.otp,\n }),\n })\n .then((response) => {\n if (!response.ok) {\n throw new Error('auth_form.error_generic');\n }\n\n return response.json();\n })\n .then((json) => {\n if (!json.result) {\n this.setState({\n errorCode: 'auth_form.error_invalid_code',\n isLoading: false,\n });\n return;\n }\n\n this.props.onNext();\n })\n .catch((e) => {\n this.setState({\n errorCode: 'auth_form.error_generic',\n isLoading: false,\n });\n\n // Unexpected errors, so re throw\n throw e;\n });\n };\n\n handleChange = input => (e) => {\n this.setState({ [input]: e.target.value });\n }\n\n render() {\n const { onBack, t } = this.props;\n\n return (\n {t('account_create_form.title')}
\n\n this.setState({ emailConfirm: e.target.value })}\n fullWidth\n margin=\"normal\"\n error={Boolean(this.state.fieldErrors.email_confirm)}\n helperText={this.fieldErrorDescription(this.state.fieldErrors.email_confirm)}\n />\n\n handleChange('countryCode')({ target: { value: code } }) }\n defaultToGeoCountry={true}\n />\n
\n\n \n
\n );\n }\n}\n\nAuthForm.propTypes = {\n onNext: PropTypes.func.isRequired,\n onBack: PropTypes.func.isRequired,\n values: PropTypes.object.isRequired,\n handleChange: PropTypes.func.isRequired,\n};\n\nexport default withTranslation('activation_wizard')(AuthForm);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useTranslation } from 'react-i18next';\nimport LoadingButton from '../LoadingButton.jsx';\n\n\nconst NavBar = styled.div`\n margin-top:25px;\n`;\n\nconst SkipButtonStyled = styled.button`\n display: block;\n margin-top: 15px;\n width: 100%;\n margin-bottom: 5px;\n border: none;\n font-size: 18px;\n padding: 0.75rem;\n font-weight: 300;\n background: none;\n`;\n\nfunction NextButton({\n isLoading, onClick, disabled, label,\n}) {\n const { t } = useTranslation('activation_wizard');\n\n return (\n {t('auth_form.title')}
\n{t('auth_form.instruction')}
\n\n
\n \n \n \n
\n );\n }\n}\n\nAmazonVineForm.propTypes = {\n onNext: PropTypes.func,\n onBack: PropTypes.func,\n onSkip: PropTypes.func,\n handleChange: PropTypes.func,\n values: PropTypes.object,\n};\n\n\nexport default withTranslation('activation_wizard')(AmazonVineForm);\n","import React, { Component } from 'react';\nimport fetch from 'cross-fetch';\nimport PropTypes from 'prop-types';\n\nimport { withTranslation } from 'react-i18next';\nimport NavBar, { NextButton, BackButton } from './NavBar2.jsx';\n\nclass AmazonVineFinalizeForm extends Component {\n state = {\n isLoading: false,\n errorCode: null,\n };\n\n handleSubmit = () => {\n const { onNext } = this.props;\n const { deviceEmei, validatedPromoCode } = this.props.values;\n\n this.setState({ isLoading: true });\n\n this.activateDevice(deviceEmei, validatedPromoCode)\n .then((activateJson) => {\n this.setState({ isLoading: false });\n onNext({ devicePlatform: activateJson.devicePlatform });\n })\n .catch((e) => {\n this.setState({\n isLoading: false,\n errorCode: e,\n });\n });\n };\n\n activateDevice = (deviceEmei, promoCode) => fetch('/sessions/me/activate-device', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify({\n deviceEmei,\n promoCode,\n }),\n })\n .then((response) => {\n if (!response.ok) {\n // TODO: Need more informative error\n throw new Error('Failed to activate device');\n }\n\n return response.json();\n });\n\n render() {\n const { onBack, t } = this.props;\n\n return (\n {t('vine_entry_form.title')}
\n\n this.setState({ vineOrderId: e.target.value })}\n fullWidth\n margin=\"normal\"\n error={Boolean(this.state.errorCode)}\n helperText={t(this.state.errorCode)}\n />\n
\n\n \n {t('vine_entry_form.instruction')}\n
\n\n \n \n
\n );\n }\n}\n\nAmazonVineFinalizeForm.propTypes = {\n onNext: PropTypes.func,\n onBack: PropTypes.func,\n handleChange: PropTypes.func,\n values: PropTypes.object,\n};\n\n\nexport default withTranslation('activation_wizard')(AmazonVineFinalizeForm);\n","const CURRENCY_SYMBOLS = {\n USD: String.fromCharCode(36),\n GBP: String.fromCharCode(163),\n CAD: `CDN${String.fromCharCode(36)} `, // Space at the end is intentional\n EUR: String.fromCharCode(128),\n};\n\nconst currencySymbol = currencyCode => CURRENCY_SYMBOLS[currencyCode] || String.fromCharCode(36);\n\nconst formatPrice = price => Number(price).toFixed(2);\n\nexport { currencySymbol, formatPrice };\n","import React, { Component } from 'react';\nimport { withTranslation } from 'react-i18next';\nimport { currencySymbol, formatPrice } from '../../services/CurrencyUtils';\n\n\nclass PlanTile extends Component {\n renderFeatureList = features => features.map(featureText => (\n {t('vine_complete_form.title')}
\n\n
\n\n \n {t('vine_complete_form.paragraph_1')}\n
\n\n {t('vine_complete_form.paragraph_2')}\n
\n\n
\n );\n }\n}\n\nexport default withTranslation('activation_wizard')(PlanTile);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nfunction PlanIntervalToggleBtn(props) {\n const classes = clsx({\n planTypeToggleBtn: true,\n 'planTypeToggleBtn--selected': props.selected,\n });\n\n return (\n \n \n
\n {name}
\n\n {currencySymbol(currency)}\n {formatPrice(effectiveMonthlyPrice)}\n
\n/{t('plan_select_form.interval_per_month_title')}
\n {interval === 'annually' ? (\n\n {t(\n 'plan_select_form.billing_description_annual',\n {\n currencySymbol: currencySymbol(currency),\n amount: formatPrice(price),\n },\n )}\n
\n ) : null}\n\n
\n - \n {this.renderFeatureList(features)}\n
\n \n {this.buttonText()}\n \n
\n {props.name}
\n {props.subtitle}
\n \n );\n}\n\nclass PlanIntervalToggleBar extends Component {\n handlePlanIntervalChange = (interval) => {\n this.props.onPlanIntervalChange(interval);\n }\n\n render() {\n const { intervals, selectedPlanInterval } = this.props;\n\n return (\n \n {intervals.map(interval => (\n this.handlePlanIntervalChange(interval.key)}\n />\n ))}\n
\n );\n }\n}\n\nPlanIntervalToggleBar.propTypes = {\n intervals: PropTypes.array.isRequired,\n selectedPlanInterval: PropTypes.string.isRequired,\n onPlanIntervalChange: PropTypes.func.isRequired,\n};\n\nexport default PlanIntervalToggleBar;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport PlanTile from './PlanTile.jsx';\nimport PlanIntervalToggleBar from './PlanIntervalToggleBar.jsx';\n\nclass PlanSelector extends Component {\n renderPlanTiles = plans => plans.map(plan => (\n \n { availablePlanIntervals.length > 1 ? (\n
\n );\n }\n}\n\nPlanSelector.propTypes = {\n plans: PropTypes.array.isRequired,\n availablePlanIntervals: PropTypes.array.isRequired,\n selectedPlanInterval: PropTypes.string.isRequired,\n selectedPlanId: PropTypes.number,\n onPlanSelect: PropTypes.func.isRequired,\n onPlanIntervalChange: PropTypes.func.isRequired,\n};\n\nexport default PlanSelector;","import React, { Component, createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport fetch from 'cross-fetch';\nimport { withTranslation } from 'react-i18next';\nimport smoothscroll from 'smoothscroll-polyfill';\nimport Loading from '../account_dashboard/Loading.jsx';\n\nimport NavBar from './NavBar.jsx';\nimport PlanSelector from './PlanSelector.jsx';\n\nsmoothscroll.polyfill();\n\n/**\n * Sorts a given array of strings by corresponding weights.\n *\n * @param arr An array of strings that need to be sorted by some given weights\n * @param weights an array of objects that maps a string to a given weight\n * @returns The originally arr sorted based off the weights, lowest weight first\n */\nfunction sortByWeight(arr, weights) {\n let weightedArray = arr.map(e => ({\n value: e,\n weight: weights[e] !== undefined ? weights[e] : 999,\n }));\n\n weightedArray.sort((e1, e2) => e1.weight - e2.weight);\n\n return weightedArray.map(e => e.value);\n}\n\nconst PLAN_INTERVAL_SORT_WEIGHTS = {\n monthly: 0,\n annually: 1,\n};\n\nclass PlanSelectForm extends Component {\n state = {\n isLoading: true,\n errorMessage: null,\n isNextLoading: false,\n }\n\n availablePlans = [];\n\n navBarRef = createRef();\n\n componentDidMount() {\n // Load countries list\n // Populate selected country if props.useGeoDefault is true\n this.loadAvailablePlans();\n }\n\n loadAvailablePlans = () => {\n const { deviceEmei } = this.props.values;\n const { i18n: { language } } = this.props;\n\n fetch(`/api/available-plans?imei=${deviceEmei}&locale=${language}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n })\n .then((response) => {\n if (!response.ok) {\n // Possibly due to user not logged in etc\n throw new Error('Unable to load available plans');\n }\n\n return response.json();\n })\n .then((json) => {\n const { selectedPlanInterval } = this.props.values;\n\n this.availablePlans = json;\n\n // Needed if say a different set of plans is loaded that doesn't match\n // the previously selected and stored interval selection state\n if (!this.availablePlanIntervalKeys().includes(selectedPlanInterval)) {\n this.handlePlanIntervalChange('monthly');\n }\n\n this.setState({\n isLoading: false,\n });\n })\n .catch((error) => {\n this.setState({\n errorMessage: error.message,\n isLoading: false,\n });\n throw error;\n });\n }\n\n availablePlanIntervalKeys = () => {\n const uniqueAvailPlans = new Set(this.availablePlans.map(plan => plan.interval));\n return sortByWeight(Array.from(uniqueAvailPlans), PLAN_INTERVAL_SORT_WEIGHTS);\n }\n\n availablePlanIntervals = () => {\n const { t } = this.props;\n\n const intervalKeys = this.availablePlanIntervalKeys();\n return intervalKeys.map(key => ({\n key,\n title: t(`plan_select_form.interval_${key}_title`),\n subtitle: t(`plan_select_form.interval_${key}_subtitle`),\n }));\n }\n\n nextDisabled = () => (this.props.values.selectedPlan === null);\n\n handlePlanSelect = (plan) => {\n this.props.handleChange('selectedPlan')({ target: { value: plan } });\n this.props.handleChange('devicePlatform')({ target: { value: plan.devicePlatform } });\n\n // Doesn't seem to work without the timeout\n setTimeout(() => {\n this.navBarRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n inline: 'nearest',\n });\n }, 100);\n }\n\n handlePlanIntervalChange = (interval) => {\n // Ensure plan is unselected\n this.props.handleChange('selectedPlan')({ target: { value: null } });\n this.props.handleChange('selectedPlanInterval')({ target: { value: interval } });\n }\n\n getAvailablePlans = (interval) => {\n return this.availablePlans.filter(plan => plan.interval === interval) || [];\n }\n\n renderContent = () => {\n const { t } = this.props;\n const { selectedPlanInterval, selectedPlan, deviceModel } = this.props.values;\n const { onBack } = this.props;\n\n if (this.state.isLoading) {\n return \n {t('contact_us')} support@shieldgps.co.\n
\n )}\n\n \n
\n \n Error: {this.state.errorMessage}\n
\n );\n }\n\n return false;\n };\n\n render() {\n const { t } = this.props;\n\n return (\n \n
\n );\n }\n}\n\nPlanSelectForm.propTypes = {\n onBack: PropTypes.func.isRequired,\n values: PropTypes.object.isRequired,\n handleChange: PropTypes.func.isRequired,\n encodeState: PropTypes.func,\n};\n\n\nexport default withTranslation('activation_wizard')(PlanSelectForm);\n","import e from \"void-elements\";\nvar t = /\\s([^'\"/\\s><]+?)[\\s/>]|([^\\s=]+)=\\s?(\".*?\"|'.*?')/g;\nfunction n(n) {\n var r = {\n type: \"tag\",\n name: \"\",\n voidElement: !1,\n attrs: {},\n children: []\n },\n i = n.match(/<\\/?([^\\s]+?)[/\\s>]/);\n if (i && (r.name = i[1], (e[i[1]] || \"/\" === n.charAt(n.length - 2)) && (r.voidElement = !0), r.name.startsWith(\"!--\"))) {\n var s = n.indexOf(\"--\\x3e\");\n return {\n type: \"comment\",\n comment: -1 !== s ? n.slice(4, s) : \"\"\n };\n }\n for (var a = new RegExp(t), c = null; null !== (c = a.exec(n));) if (c[0].trim()) if (c[1]) {\n var o = c[1].trim(),\n l = [o, \"\"];\n o.indexOf(\"=\") > -1 && (l = o.split(\"=\")), r.attrs[l[0]] = l[1], a.lastIndex--;\n } else c[2] && (r.attrs[c[2]] = c[3].trim().substring(1, c[3].length - 1));\n return r;\n}\nvar r = /<[a-zA-Z0-9\\-\\!\\/](?:\"[^\"]*\"|'[^']*'|[^'\">])*>/g,\n i = /^\\s*$/,\n s = Object.create(null);\nfunction a(e, t) {\n switch (t.type) {\n case \"text\":\n return e + t.content;\n case \"tag\":\n return e += \"<\" + t.name + (t.attrs ? function (e) {\n var t = [];\n for (var n in e) t.push(n + '=\"' + e[n] + '\"');\n return t.length ? \" \" + t.join(\" \") : \"\";\n }(t.attrs) : \"\") + (t.voidElement ? \"/>\" : \">\"), t.voidElement ? e : e + t.children.reduce(a, \"\") + \"\";\n case \"comment\":\n return e + \"\\x3c!--\" + t.comment + \"--\\x3e\";\n }\n}\nvar c = {\n parse: function parse(e, t) {\n t || (t = {}), t.components || (t.components = s);\n var a,\n c = [],\n o = [],\n l = -1,\n m = !1;\n if (0 !== e.indexOf(\"<\")) {\n var u = e.indexOf(\"<\");\n c.push({\n type: \"text\",\n content: -1 === u ? e : e.substring(0, u)\n });\n }\n return e.replace(r, function (r, s) {\n if (m) {\n if (r !== \"\") return;\n m = !1;\n }\n var u,\n f = \"/\" !== r.charAt(1),\n h = r.startsWith(\"\\x3c!--\"),\n p = s + r.length,\n d = e.charAt(p);\n if (h) {\n var v = n(r);\n return l < 0 ? (c.push(v), c) : ((u = o[l]).children.push(v), c);\n }\n if (f && (l++, \"tag\" === (a = n(r)).type && t.components[a.name] && (a.type = \"component\", m = !0), a.voidElement || m || !d || \"<\" === d || a.children.push({\n type: \"text\",\n content: e.slice(p, e.indexOf(\"<\", p))\n }), 0 === l && c.push(a), (u = o[l - 1]) && u.children.push(a), o[l] = a), (!f || a.voidElement) && (l > -1 && (a.voidElement || a.name === r.slice(2, -1)) && (l--, a = -1 === l ? c : o[l]), !m && \"<\" !== d && d)) {\n u = -1 === l ? c : o[l].children;\n var x = e.indexOf(\"<\", p),\n g = e.slice(p, -1 === x ? void 0 : x);\n i.test(g) && (g = \" \"), (x > -1 && l + u.length >= 0 || \" \" !== g) && u.push({\n type: \"text\",\n content: g\n });\n }\n }), c;\n },\n stringify: function stringify(e) {\n return e.reduce(function (e, t) {\n return e + a(\"\", t);\n }, \"\");\n }\n};\nexport default c;","import _objectWithoutProperties from \"@babel/runtime/helpers/objectWithoutProperties\";\nimport _typeof from \"@babel/runtime/helpers/typeof\";\nimport _defineProperty from \"@babel/runtime/helpers/defineProperty\";\nvar _excluded = [\"format\"],\n _excluded2 = [\"children\", \"count\", \"parent\", \"i18nKey\", \"context\", \"tOptions\", \"values\", \"defaults\", \"components\", \"ns\", \"i18n\", \"t\", \"shouldUnescape\"];\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n if (enumerableOnly) {\n symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n });\n }\n keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? arguments[i] : {};\n if (i % 2) {\n ownKeys(Object(source), true).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n });\n } else if (Object.getOwnPropertyDescriptors) {\n Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));\n } else {\n ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n }\n return target;\n}\nimport { useContext, isValidElement, cloneElement, createElement } from 'react';\nimport HTML from 'html-parse-stringify';\nimport { getI18n, I18nContext, getDefaults } from './context';\nimport { warn, warnOnce } from './utils';\nfunction hasChildren(node, checkLength) {\n if (!node) return false;\n var base = node.props ? node.props.children : node.children;\n if (checkLength) return base.length > 0;\n return !!base;\n}\nfunction getChildren(node) {\n if (!node) return [];\n return node.props ? node.props.children : node.children;\n}\nfunction hasValidReactChildren(children) {\n if (Object.prototype.toString.call(children) !== '[object Array]') return false;\n return children.every(function (child) {\n return /*#__PURE__*/isValidElement(child);\n });\n}\nfunction getAsArray(data) {\n return Array.isArray(data) ? data : [data];\n}\nfunction mergeProps(source, target) {\n var newTarget = _objectSpread({}, target);\n newTarget.props = Object.assign(source.props, target.props);\n return newTarget;\n}\nexport function nodesToString(children, i18nOptions) {\n if (!children) return '';\n var stringNode = '';\n var childrenArray = getAsArray(children);\n var keepArray = i18nOptions.transSupportBasicHtmlNodes && i18nOptions.transKeepBasicHtmlNodesFor ? i18nOptions.transKeepBasicHtmlNodesFor : [];\n childrenArray.forEach(function (child, childIndex) {\n if (typeof child === 'string') {\n stringNode += \"\".concat(child);\n } else if ( /*#__PURE__*/isValidElement(child)) {\n var childPropsCount = Object.keys(child.props).length;\n var shouldKeepChild = keepArray.indexOf(child.type) > -1;\n var childChildren = child.props.children;\n if (!childChildren && shouldKeepChild && childPropsCount === 0) {\n stringNode += \"<\".concat(child.type, \"/>\");\n } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {\n stringNode += \"<\".concat(childIndex, \">\");\n } else if (child.props.i18nIsDynamicList) {\n stringNode += \"<\".concat(childIndex, \">\");\n } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {\n stringNode += \"<\".concat(child.type, \">\").concat(childChildren, \"\");\n } else {\n var content = nodesToString(childChildren, i18nOptions);\n stringNode += \"<\".concat(childIndex, \">\").concat(content, \"\");\n }\n } else if (child === null) {\n warn(\"Trans: the passed in value is invalid - seems you passed in a null child.\");\n } else if (_typeof(child) === 'object') {\n var format = child.format,\n clone = _objectWithoutProperties(child, _excluded);\n var keys = Object.keys(clone);\n if (keys.length === 1) {\n var value = format ? \"\".concat(keys[0], \", \").concat(format) : keys[0];\n stringNode += \"{{\".concat(value, \"}}\");\n } else {\n warn(\"react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.\", child);\n }\n } else {\n warn(\"Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.\", child);\n }\n });\n return stringNode;\n}\nfunction renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {\n if (targetString === '') return [];\n var keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];\n var emptyChildrenButNeedsHandling = targetString && new RegExp(keepArray.join('|')).test(targetString);\n if (!children && !emptyChildrenButNeedsHandling) return [targetString];\n var data = {};\n function getData(childs) {\n var childrenArray = getAsArray(childs);\n childrenArray.forEach(function (child) {\n if (typeof child === 'string') return;\n if (hasChildren(child)) getData(getChildren(child));else if (_typeof(child) === 'object' && ! /*#__PURE__*/isValidElement(child)) Object.assign(data, child);\n });\n }\n getData(children);\n var ast = HTML.parse(\"<0>\".concat(targetString, \"\"));\n var opts = _objectSpread(_objectSpread({}, data), combinedTOpts);\n function renderInner(child, node, rootReactNode) {\n var childs = getChildren(child);\n var mappedChildren = mapAST(childs, node.children, rootReactNode);\n return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;\n }\n function pushTranslatedJSX(child, inner, mem, i, isVoid) {\n if (child.dummy) child.children = inner;\n mem.push( /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {\n key: i\n }), isVoid ? undefined : inner));\n }\n function mapAST(reactNode, astNode, rootReactNode) {\n var reactNodes = getAsArray(reactNode);\n var astNodes = getAsArray(astNode);\n return astNodes.reduce(function (mem, node, i) {\n var translationContent = node.children && node.children[0] && node.children[0].content && i18n.services.interpolator.interpolate(node.children[0].content, opts, i18n.language);\n if (node.type === 'tag') {\n var tmp = reactNodes[parseInt(node.name, 10)];\n if (!tmp && rootReactNode.length === 1 && rootReactNode[0][node.name]) tmp = rootReactNode[0][node.name];\n if (!tmp) tmp = {};\n var child = Object.keys(node.attrs).length !== 0 ? mergeProps({\n props: node.attrs\n }, tmp) : tmp;\n var isElement = /*#__PURE__*/isValidElement(child);\n var isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;\n var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof(child) === 'object' && child.dummy && !isElement;\n var isKnownComponent = _typeof(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);\n if (typeof child === 'string') {\n var value = i18n.services.interpolator.interpolate(child, opts, i18n.language);\n mem.push(value);\n } else if (hasChildren(child) || isValidTranslationWithChildren) {\n var inner = renderInner(child, node, rootReactNode);\n pushTranslatedJSX(child, inner, mem, i);\n } else if (isEmptyTransWithHTML) {\n var _inner = mapAST(reactNodes, node.children, rootReactNode);\n mem.push( /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {\n key: i\n }), _inner));\n } else if (Number.isNaN(parseFloat(node.name))) {\n if (isKnownComponent) {\n var _inner2 = renderInner(child, node, rootReactNode);\n pushTranslatedJSX(child, _inner2, mem, i, node.voidElement);\n } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {\n if (node.voidElement) {\n mem.push( /*#__PURE__*/createElement(node.name, {\n key: \"\".concat(node.name, \"-\").concat(i)\n }));\n } else {\n var _inner3 = mapAST(reactNodes, node.children, rootReactNode);\n mem.push( /*#__PURE__*/createElement(node.name, {\n key: \"\".concat(node.name, \"-\").concat(i)\n }, _inner3));\n }\n } else if (node.voidElement) {\n mem.push(\"<\".concat(node.name, \" />\"));\n } else {\n var _inner4 = mapAST(reactNodes, node.children, rootReactNode);\n mem.push(\"<\".concat(node.name, \">\").concat(_inner4, \"\"));\n }\n } else if (_typeof(child) === 'object' && !isElement) {\n var content = node.children[0] ? translationContent : null;\n if (content) mem.push(content);\n } else if (node.children.length === 1 && translationContent) {\n mem.push( /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {\n key: i\n }), translationContent));\n } else {\n mem.push( /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {\n key: i\n })));\n }\n } else if (node.type === 'text') {\n var wrapTextNodes = i18nOptions.transWrapTextNodes;\n var _content = shouldUnescape ? i18nOptions.unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);\n if (wrapTextNodes) {\n mem.push( /*#__PURE__*/createElement(wrapTextNodes, {\n key: \"\".concat(node.name, \"-\").concat(i)\n }, _content));\n } else {\n mem.push(_content);\n }\n }\n return mem;\n }, []);\n }\n var result = mapAST([{\n dummy: true,\n children: children || []\n }], ast, getAsArray(children || []));\n return getChildren(result[0]);\n}\nexport function Trans(_ref) {\n var children = _ref.children,\n count = _ref.count,\n parent = _ref.parent,\n i18nKey = _ref.i18nKey,\n context = _ref.context,\n _ref$tOptions = _ref.tOptions,\n tOptions = _ref$tOptions === void 0 ? {} : _ref$tOptions,\n values = _ref.values,\n defaults = _ref.defaults,\n components = _ref.components,\n ns = _ref.ns,\n i18nFromProps = _ref.i18n,\n tFromProps = _ref.t,\n shouldUnescape = _ref.shouldUnescape,\n additionalProps = _objectWithoutProperties(_ref, _excluded2);\n var _ref2 = useContext(I18nContext) || {},\n i18nFromContext = _ref2.i18n,\n defaultNSFromContext = _ref2.defaultNS;\n var i18n = i18nFromProps || i18nFromContext || getI18n();\n if (!i18n) {\n warnOnce('You will need to pass in an i18next instance by using i18nextReactModule');\n return children;\n }\n var t = tFromProps || i18n.t.bind(i18n) || function (k) {\n return k;\n };\n if (context) tOptions.context = context;\n var reactI18nextOptions = _objectSpread(_objectSpread({}, getDefaults()), i18n.options && i18n.options.react);\n var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;\n namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];\n var defaultValue = defaults || nodesToString(children, reactI18nextOptions) || reactI18nextOptions.transEmptyNodeValue || i18nKey;\n var hashTransKey = reactI18nextOptions.hashTransKey;\n var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);\n var interpolationOverride = values ? tOptions.interpolation : {\n interpolation: _objectSpread(_objectSpread({}, tOptions.interpolation), {}, {\n prefix: '#$?',\n suffix: '?$#'\n })\n };\n var combinedTOpts = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tOptions), {}, {\n count: count\n }, values), interpolationOverride), {}, {\n defaultValue: defaultValue,\n ns: namespaces\n });\n var translation = key ? t(key, combinedTOpts) : defaultValue;\n var content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);\n var useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;\n return useAsParent ? /*#__PURE__*/createElement(useAsParent, additionalProps, content) : content;\n}","import fetch from 'cross-fetch';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport { Trans, withTranslation } from 'react-i18next';\nimport NavBar, { BackButton, NextButton } from './NavBar2.jsx';\n\nclass PrepaidDeviceActivationForm extends Component {\n state = {\n isLoading: false,\n errorCode: null,\n }\n\n handleSubmit = () => {\n const { onNext } = this.props;\n const { deviceEmei } = this.props.values;\n\n this.setState({ isLoading: true });\n\n this.activateDevice(deviceEmei)\n .then((activateJson) => {\n this.setState({ isLoading: false });\n onNext({ devicePlatform: activateJson.devicePlatform });\n })\n .catch((e) => {\n this.setState({\n isLoading: false,\n errorCode: e,\n });\n });\n };\n\n activateDevice = deviceEmei => fetch('/sessions/me/activate-device', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify({\n /** No additional params needed because this device is prepaid, and should have a factory set promo code */\n deviceEmei,\n }),\n })\n .then((response) => {\n if (!response.ok) {\n // TODO: Need more informative error\n throw new Error('Failed to activate device');\n }\n\n\n return response.json();\n });\n\n prepaidDurationDescription = (durationDays) => {\n // 20Sep24: Just convert days to number of months rounded. That should do fine.\n // 365 -> 12 months\n // 60 -> 2 months\n // 5 -> 5 days\n\n if (durationDays < 30) {\n return `${durationDays} days`;\n }\n\n const numMonths = Math.floor(durationDays / 30);\n return numMonths === 1 ? '1 month' : `${numMonths} months`;\n }\n\n render() {\n const { onBack, t } = this.props;\n const { prepaidDurationDays } = this.props.values;\n\n return (\n {t('plan_select_form.title')}
\n {this.renderContent()}\n\n \n \n
\n );\n }\n}\n\nPrepaidDeviceActivationForm.propTypes = {\n onNext: PropTypes.func,\n onBack: PropTypes.func,\n values: PropTypes.object,\n handleChange: PropTypes.func,\n};\n\n\nexport default withTranslation('activation_wizard')(PrepaidDeviceActivationForm);\n","import React from 'react';\nimport { useTranslation, Trans } from 'react-i18next';\nimport iosDownloadButton from '../../../../images/buttons/ios_download_button.svg';\nimport androidDownloadButton from '../../../../images/buttons/android_download_button.svg';\n\nfunction TracksolidSuccessScreen() {\n const { t } = useTranslation('activation_wizard');\n\n return (\n {t('prepaid_device_activation_form.title')}
\n\n
\n\n \n
\n {t('prepaid_device_activation_form.paragraph_2')}\n
\n\n
\n );\n}\n\nfunction ShieldGPSSuccessScreen() {\n const { t } = useTranslation('activation_wizard');\n\n return (\n {t('success_screen.title')}
\n{t('success_screen.tracksolid.instruction_1')}
\n\n
\n \n 
\n \n \n 
\n \n
\n \n
\n );\n}\n\nfunction SuccessScreen(props) {\n if (props.devicePlatform === 'tracksolid') {\n return {t('success_screen.title')}
\n{t('success_screen.shieldgps.instruction_1')}
\n\n
\n \n \n \n \n \n \n
\n \n \n {menuItems()}\n \n
\n );\n}\n\nexport default LanguageSelector;\n","import React, { Component } from 'react';\nimport * as Sentry from '@sentry/react';\nimport { withTranslation } from 'react-i18next';\n\nimport DeviceIdForm from './DeviceIdForm.jsx';\nimport BasicInfoForm from './BasicInfoForm.jsx';\nimport AccountCreateForm from './AccountCreateForm.jsx';\nimport AuthForm from './AuthForm.jsx';\nimport AmazonVineForm from './AmazonVineForm.jsx';\nimport AmazonVineFinalizeForm from './AmazonVineFinalizeForm.jsx';\nimport PlanSelectForm from './PlanSelectForm.jsx';\nimport PrepaidDeviceActivationForm from './PrepaidDeviceActivationForm.jsx';\nimport SuccessScreen from './SuccessScreen.jsx';\nimport logo from '../../../../images/shieldgps-logo1.svg';\nimport LanguageSelector from '../bits/LanguageSelector.jsx';\n\nwindow.Sentry = Sentry;\nif (process.env.NODE_ENV === 'production') {\n Sentry.init({\n dsn: 'https://c03f6946d09147d1a64f6d7990cadba7@sentry.io/5175130',\n release: process.env.VERSION,\n environment: process.env.NODE_ENV,\n });\n}\n\nclass ActivationWizard extends Component {\n state = {\n navStack: [\n 'deviceIdForm',\n ],\n email: '',\n firstName: '',\n lastName: '',\n password: '',\n countryCode: null,\n deviceEmei: '',\n deviceModel: null,\n\n // To support annual plan activation \n // AND to support various prepaid plans\n deviceIsPrepaid: false,\n prepaidDurationDays: null,\n\n selectedPlan: null,\n selectedPlanInterval: 'annually',\n devicePlatform: null,\n deviceUserGuideUrl: null,\n languages: [\n { id: 'en', name: 'English' },\n { id: 'fr', name: 'Français' },\n { id: 'de', name: 'Deutsch' },\n { id: 'it', name: 'Italiano' },\n ],\n selectedLanguageId: null,\n validatedPromoCode: '',\n isAmazonReviewer: false,\n\n }\n\n componentDidMount() {\n this.setState({\n selectedLanguageId: this.activateLanguage(),\n });\n\n\n const urlParams = new URLSearchParams(window.location.search);\n const initialState = urlParams.get('istate');\n const paymentResult = urlParams.get('presult');\n\n if (initialState) {\n const initialStateObj = JSON.parse(atob(initialState));\n this.setState(initialStateObj);\n\n if (paymentResult && paymentResult === 'success') {\n this.goToStep('successScreen');\n } else if (paymentResult && paymentResult === 'cancel') {\n // NOOP\n }\n }\n }\n\n encodeState() {\n // navStack, email, countryCode, deviceImei, selectedPlan, selectedPlanInterval, devicePlatform, validatedPromoCode, isAmazonReviewer\n const STATE_WHITELIST = [\n 'navStack',\n 'email',\n 'countryCode',\n 'deviceEmei',\n 'deviceModel',\n 'selectedPlan',\n 'selectedPlanInterval',\n 'devicePlatform',\n 'validatedPromoCode',\n 'isAmazonReviewer',\n ];\n\n const serializableState = Object.fromEntries(\n Object.entries(this.state).filter(([k]) => STATE_WHITELIST.includes(k)),\n );\n\n const jsonStr = JSON.stringify(serializableState);\n return btoa(jsonStr);\n }\n\n activateLanguage = () => {\n const { i18n } = this.props;\n\n const supportedLanguages = this.state.languages.map(lang => lang.id);\n\n // i18n.languages should always contain at least 'en' since that is configured\n // as the fallback lang.\n return i18n.languages.find(lang => supportedLanguages.includes(lang));\n }\n\n goToStep = (stepId, obj) => {\n const newState = {\n navStack: this.state.navStack.concat(stepId),\n };\n\n if (obj) {\n // Allow callers of nextStep to optionally push up new state\n Object.assign(newState, obj);\n }\n\n this.setState(newState);\n }\n\n goBackNSteps = numSteps => () => {\n this.setState({\n navStack: this.state.navStack.slice(0, -1 * numSteps),\n });\n }\n\n handleChange = input => (e) => {\n this.setState({ [input]: e.target.value });\n }\n\n currentStep = () => this.state.navStack[this.state.navStack.length - 1];\n\n /** Sends user to plan selection phase of the flow. Which screen they see depends on a few things. */\n goToPreActivationStep = () => {\n if (this.state.deviceIsPrepaid) {\n return this.goToStep('prepaidDeviceActivationForm');\n }\n\n if (this.state.isAmazonReviewer) {\n return this.goToStep('amazonVineForm');\n }\n\n return this.goToStep('planSelectForm');\n };\n\n renderStep = () => {\n const stepId = this.currentStep();\n\n switch (stepId) {\n case 'deviceIdForm':\n return (\n Unknown step
\n );\n }\n }\n\n renderStepProgress = () => {\n const { t } = this.props;\n\n if (this.currentStep() === 'successScreen') {\n return false;\n }\n\n return (\n\n {t('step_description', { currentStep: this.state.navStack.length, totalSteps: 5 })}\n
\n );\n }\n\n handleLanguageSelect = (languageId) => {\n this.setState({ selectedLanguageId: languageId });\n const { i18n } = this.props;\n i18n.changeLanguage(languageId);\n };\n\n render() {\n const { t } = this.props;\n\n return (\n\n
\n );\n }\n}\n\nexport default withTranslation('activation_wizard')(ActivationWizard);\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './i18n';\nimport ActivationWizard from '../src/javascript/components/activation_wizard/ActivationWizard.jsx';\n\nimport '../src/stylesheets/activation_wizard.scss';\nimport 'bootstrap/dist/js/bootstrap';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n 
\n \n
\n {this.renderStepProgress()}\n {t('title')}
\n {this.renderStep()}\n\n {t('contact_us')} support@shieldgps.co.\n
\n