![\"not](\"/images/notfound.png\")
\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n render() {\r\n const { isSubmitting, email } = this.state\r\n\r\n return (\r\n <>\r\n \r\n
Verify it's you
\r\nWe sent verification code to {email}. Please check your inbox and enter the code below.
\r\n \r\nDidn't receive an email?
\n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * - \r\n
- \r\n \r\n {\r\n isNotNull(data) && isNotNull(data.letter)\r\n ? !data.letter\r\n ? \r\n : \r\n : \r\n }\r\n \r\n At least one lowercase\r\n \r\n
- \r\n \r\n {\r\n isNotNull(data) && isNotNull(data.capital)\r\n ? !data.capital\r\n ? \r\n : \r\n : \r\n }\r\n \r\n At least one uppercase\r\n \r\n
- \r\n \r\n {\r\n isNotNull(data) && isNotNull(data.number)\r\n ? !data.number\r\n ? \r\n : \r\n : \r\n }\r\n \r\n At least one number\r\n \r\n
- \r\n \r\n {\r\n isNotNull(data) && isNotNull(data.special)\r\n ? !data.special\r\n ? \r\n : \r\n : \r\n }\r\n \r\n At least one special character\r\n \r\n
- \r\n \r\n {\r\n isNotNull(data) && isNotNull(data.size)\r\n ? !data.size\r\n ? \r\n : \r\n : \r\n }\r\n \r\n Be at least 6-12 characters\r\n \r\n {\r\n isNotNull(confirm) && confirm &&\r\n
- \r\n \r\n {\r\n isNotNull(data) && isNotNull(data.match)\r\n ? !data.match\r\n ? \r\n : \r\n : \r\n }\r\n \r\n Password must match\r\n \r\n }\r\n
\n * {hello ?
\n * );\n * ```\n */\n\n\nexport default function useTimeout() {\n var isMounted = useMounted(); // types are confused between node and web here IDK\n\n var handleRef = useRef();\n useWillUnmount(function () {\n return clearTimeout(handleRef.current);\n });\n return useMemo(function () {\n var clear = function clear() {\n return clearTimeout(handleRef.current);\n };\n\n function set(fn, delayMs) {\n if (delayMs === void 0) {\n delayMs = 0;\n }\n\n if (!isMounted()) return;\n clear();\n\n if (delayMs <= MAX_DELAY_MS) {\n // For simplicity, if the timeout is short, just set a normal timeout.\n handleRef.current = setTimeout(fn, delayMs);\n } else {\n setChainedTimeout(handleRef, fn, Date.now() + delayMs);\n }\n }\n\n return {\n set: set,\n clear: clear\n };\n }, []);\n}","import invariant from 'invariant';\n\nvar noop = function noop() {};\n\nfunction readOnlyPropType(handler, name) {\n return function (props, propName) {\n if (props[propName] !== undefined) {\n if (!props[handler]) {\n return new Error(\"You have provided a `\" + propName + \"` prop to `\" + name + \"` \" + (\"without an `\" + handler + \"` handler prop. This will render a read-only field. \") + (\"If the field should be mutable use `\" + defaultKey(propName) + \"`. \") + (\"Otherwise, set `\" + handler + \"`.\"));\n }\n }\n };\n}\n\nexport function uncontrolledPropTypes(controlledValues, displayName) {\n var propTypes = {};\n Object.keys(controlledValues).forEach(function (prop) {\n // add default propTypes for folks that use runtime checks\n propTypes[defaultKey(prop)] = noop;\n\n if (process.env.NODE_ENV !== 'production') {\n var handler = controlledValues[prop];\n !(typeof handler === 'string' && handler.trim().length) ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Uncontrollable - [%s]: the prop `%s` needs a valid handler key name in order to make it uncontrollable', displayName, prop) : invariant(false) : void 0;\n propTypes[prop] = readOnlyPropType(handler, displayName);\n }\n });\n return propTypes;\n}\nexport function isProp(props, prop) {\n return props[prop] !== undefined;\n}\nexport function defaultKey(key) {\n return 'default' + key.charAt(0).toUpperCase() + key.substr(1);\n}\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nexport function canAcceptRef(component) {\n return !!component && (typeof component !== 'function' || component.prototype && component.prototype.isReactComponent);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\n\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return typeof key === \"symbol\" ? key : String(key); }\n\nfunction _toPrimitive(input, hint) { if (typeof input !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (typeof res !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\n\nimport { useCallback, useRef, useState } from 'react';\nimport * as Utils from './utils';\n\nfunction useUncontrolledProp(propValue, defaultValue, handler) {\n var wasPropRef = useRef(propValue !== undefined);\n\n var _useState = useState(defaultValue),\n stateValue = _useState[0],\n setState = _useState[1];\n\n var isProp = propValue !== undefined;\n var wasProp = wasPropRef.current;\n wasPropRef.current = isProp;\n /**\n * If a prop switches from controlled to Uncontrolled\n * reset its value to the defaultValue\n */\n\n if (!isProp && wasProp && stateValue !== defaultValue) {\n setState(defaultValue);\n }\n\n return [isProp ? propValue : stateValue, useCallback(function (value) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n if (handler) handler.apply(void 0, [value].concat(args));\n setState(value);\n }, [handler])];\n}\n\nexport { useUncontrolledProp };\nexport default function useUncontrolled(props, config) {\n return Object.keys(config).reduce(function (result, fieldName) {\n var _extends2;\n\n var _ref = result,\n defaultValue = _ref[Utils.defaultKey(fieldName)],\n propsValue = _ref[fieldName],\n rest = _objectWithoutPropertiesLoose(_ref, [Utils.defaultKey(fieldName), fieldName].map(_toPropertyKey));\n\n var handlerName = config[fieldName];\n\n var _useUncontrolledProp = useUncontrolledProp(propsValue, defaultValue, props[handlerName]),\n value = _useUncontrolledProp[0],\n handler = _useUncontrolledProp[1];\n\n return _extends({}, rest, (_extends2 = {}, _extends2[fieldName] = value, _extends2[handlerName] = handler, _extends2));\n }, props);\n}","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nfunction componentWillMount() {\n // Call this.constructor.gDSFP to support sub-classes.\n var state = this.constructor.getDerivedStateFromProps(this.props, this.state);\n if (state !== null && state !== undefined) {\n this.setState(state);\n }\n}\n\nfunction componentWillReceiveProps(nextProps) {\n // Call this.constructor.gDSFP to support sub-classes.\n // Use the setState() updater to ensure state isn't stale in certain edge cases.\n function updater(prevState) {\n var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);\n return state !== null && state !== undefined ? state : null;\n }\n // Binding \"this\" is important for shallow renderer support.\n this.setState(updater.bind(this));\n}\n\nfunction componentWillUpdate(nextProps, nextState) {\n try {\n var prevProps = this.props;\n var prevState = this.state;\n this.props = nextProps;\n this.state = nextState;\n this.__reactInternalSnapshotFlag = true;\n this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(\n prevProps,\n prevState\n );\n } finally {\n this.props = prevProps;\n this.state = prevState;\n }\n}\n\n// React may warn about cWM/cWRP/cWU methods being deprecated.\n// Add a flag to suppress these warnings for this special case.\ncomponentWillMount.__suppressDeprecationWarning = true;\ncomponentWillReceiveProps.__suppressDeprecationWarning = true;\ncomponentWillUpdate.__suppressDeprecationWarning = true;\n\nfunction polyfill(Component) {\n var prototype = Component.prototype;\n\n if (!prototype || !prototype.isReactComponent) {\n throw new Error('Can only polyfill class components');\n }\n\n if (\n typeof Component.getDerivedStateFromProps !== 'function' &&\n typeof prototype.getSnapshotBeforeUpdate !== 'function'\n ) {\n return Component;\n }\n\n // If new component APIs are defined, \"unsafe\" lifecycles won't be called.\n // Error if any of these lifecycles are present,\n // Because they would work differently between older and newer (16.3+) versions of React.\n var foundWillMountName = null;\n var foundWillReceivePropsName = null;\n var foundWillUpdateName = null;\n if (typeof prototype.componentWillMount === 'function') {\n foundWillMountName = 'componentWillMount';\n } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {\n foundWillMountName = 'UNSAFE_componentWillMount';\n }\n if (typeof prototype.componentWillReceiveProps === 'function') {\n foundWillReceivePropsName = 'componentWillReceiveProps';\n } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {\n foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';\n }\n if (typeof prototype.componentWillUpdate === 'function') {\n foundWillUpdateName = 'componentWillUpdate';\n } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {\n foundWillUpdateName = 'UNSAFE_componentWillUpdate';\n }\n if (\n foundWillMountName !== null ||\n foundWillReceivePropsName !== null ||\n foundWillUpdateName !== null\n ) {\n var componentName = Component.displayName || Component.name;\n var newApiName =\n typeof Component.getDerivedStateFromProps === 'function'\n ? 'getDerivedStateFromProps()'\n : 'getSnapshotBeforeUpdate()';\n\n throw Error(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n componentName +\n ' uses ' +\n newApiName +\n ' but also contains the following legacy lifecycles:' +\n (foundWillMountName !== null ? '\\n ' + foundWillMountName : '') +\n (foundWillReceivePropsName !== null\n ? '\\n ' + foundWillReceivePropsName\n : '') +\n (foundWillUpdateName !== null ? '\\n ' + foundWillUpdateName : '') +\n '\\n\\nThe above lifecycles should be removed. Learn more about this warning here:\\n' +\n 'https://fb.me/react-async-component-lifecycle-hooks'\n );\n }\n\n // React <= 16.2 does not support static getDerivedStateFromProps.\n // As a workaround, use cWM and cWRP to invoke the new static lifecycle.\n // Newer versions of React will ignore these lifecycles if gDSFP exists.\n if (typeof Component.getDerivedStateFromProps === 'function') {\n prototype.componentWillMount = componentWillMount;\n prototype.componentWillReceiveProps = componentWillReceiveProps;\n }\n\n // React <= 16.2 does not support getSnapshotBeforeUpdate.\n // As a workaround, use cWU to invoke the new lifecycle.\n // Newer versions of React will ignore that lifecycle if gSBU exists.\n if (typeof prototype.getSnapshotBeforeUpdate === 'function') {\n if (typeof prototype.componentDidUpdate !== 'function') {\n throw new Error(\n 'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'\n );\n }\n\n prototype.componentWillUpdate = componentWillUpdate;\n\n var componentDidUpdate = prototype.componentDidUpdate;\n\n prototype.componentDidUpdate = function componentDidUpdatePolyfill(\n prevProps,\n prevState,\n maybeSnapshot\n ) {\n // 16.3+ will not execute our will-update method;\n // It will pass a snapshot value to did-update though.\n // Older versions will require our polyfilled will-update value.\n // We need to handle both cases, but can't just check for the presence of \"maybeSnapshot\",\n // Because for <= 15.x versions this might be a \"prevContext\" object.\n // We also can't just check \"__reactInternalSnapshot\",\n // Because get-snapshot might return a falsy value.\n // So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.\n var snapshot = this.__reactInternalSnapshotFlag\n ? this.__reactInternalSnapshot\n : maybeSnapshot;\n\n componentDidUpdate.call(this, prevProps, prevState, snapshot);\n };\n }\n\n return Component;\n}\n\nexport { polyfill };\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nvar _excluded = [\"trigger\", \"overlay\", \"children\", \"popperConfig\", \"show\", \"defaultShow\", \"onToggle\", \"delay\", \"placement\", \"flip\"];\nimport contains from 'dom-helpers/contains';\nimport React, { cloneElement, useCallback, useRef } from 'react';\nimport useTimeout from '@restart/hooks/useTimeout';\nimport safeFindDOMNode from 'react-overlays/safeFindDOMNode';\nimport warning from 'warning';\nimport { useUncontrolledProp } from 'uncontrollable';\nimport Overlay from './Overlay';\n\nvar RefHolder = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(RefHolder, _React$Component);\n\n function RefHolder() {\n return _React$Component.apply(this, arguments) || this;\n }\n\n var _proto = RefHolder.prototype;\n\n _proto.render = function render() {\n return this.props.children;\n };\n\n return RefHolder;\n}(React.Component);\n\nfunction normalizeDelay(delay) {\n return delay && typeof delay === 'object' ? delay : {\n show: delay,\n hide: delay\n };\n} // Simple implementation of mouseEnter and mouseLeave.\n// React's built version is broken: https://github.com/facebook/react/issues/4251\n// for cases when the trigger is disabled and mouseOut/Over can cause flicker\n// moving from one child element to another.\n\n\nfunction handleMouseOverOut( // eslint-disable-next-line @typescript-eslint/no-shadow\nhandler, args, relatedNative) {\n var e = args[0];\n var target = e.currentTarget;\n var related = e.relatedTarget || e.nativeEvent[relatedNative];\n\n if ((!related || related !== target) && !contains(target, related)) {\n handler.apply(void 0, args);\n }\n}\n\nvar defaultProps = {\n defaultShow: false,\n trigger: ['hover', 'focus']\n};\n\nfunction OverlayTrigger(_ref) {\n var trigger = _ref.trigger,\n overlay = _ref.overlay,\n children = _ref.children,\n _ref$popperConfig = _ref.popperConfig,\n popperConfig = _ref$popperConfig === void 0 ? {} : _ref$popperConfig,\n propsShow = _ref.show,\n _ref$defaultShow = _ref.defaultShow,\n defaultShow = _ref$defaultShow === void 0 ? false : _ref$defaultShow,\n onToggle = _ref.onToggle,\n propsDelay = _ref.delay,\n placement = _ref.placement,\n _ref$flip = _ref.flip,\n flip = _ref$flip === void 0 ? placement && placement.indexOf('auto') !== -1 : _ref$flip,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n var triggerNodeRef = useRef(null);\n var timeout = useTimeout();\n var hoverStateRef = useRef('');\n\n var _useUncontrolledProp = useUncontrolledProp(propsShow, defaultShow, onToggle),\n show = _useUncontrolledProp[0],\n setShow = _useUncontrolledProp[1];\n\n var delay = normalizeDelay(propsDelay);\n\n var _ref2 = typeof children !== 'function' ? React.Children.only(children).props : {},\n onFocus = _ref2.onFocus,\n onBlur = _ref2.onBlur,\n onClick = _ref2.onClick;\n\n var getTarget = useCallback(function () {\n return safeFindDOMNode(triggerNodeRef.current);\n }, []);\n var handleShow = useCallback(function () {\n timeout.clear();\n hoverStateRef.current = 'show';\n\n if (!delay.show) {\n setShow(true);\n return;\n }\n\n timeout.set(function () {\n if (hoverStateRef.current === 'show') setShow(true);\n }, delay.show);\n }, [delay.show, setShow, timeout]);\n var handleHide = useCallback(function () {\n timeout.clear();\n hoverStateRef.current = 'hide';\n\n if (!delay.hide) {\n setShow(false);\n return;\n }\n\n timeout.set(function () {\n if (hoverStateRef.current === 'hide') setShow(false);\n }, delay.hide);\n }, [delay.hide, setShow, timeout]);\n var handleFocus = useCallback(function () {\n handleShow();\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n onFocus == null ? void 0 : onFocus.apply(void 0, args);\n }, [handleShow, onFocus]);\n var handleBlur = useCallback(function () {\n handleHide();\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n onBlur == null ? void 0 : onBlur.apply(void 0, args);\n }, [handleHide, onBlur]);\n var handleClick = useCallback(function () {\n setShow(!show);\n if (onClick) onClick.apply(void 0, arguments);\n }, [onClick, setShow, show]);\n var handleMouseOver = useCallback(function () {\n for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n args[_key3] = arguments[_key3];\n }\n\n handleMouseOverOut(handleShow, args, 'fromElement');\n }, [handleShow]);\n var handleMouseOut = useCallback(function () {\n for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n args[_key4] = arguments[_key4];\n }\n\n handleMouseOverOut(handleHide, args, 'toElement');\n }, [handleHide]);\n var triggers = trigger == null ? [] : [].concat(trigger);\n var triggerProps = {};\n\n if (triggers.indexOf('click') !== -1) {\n triggerProps.onClick = handleClick;\n }\n\n if (triggers.indexOf('focus') !== -1) {\n triggerProps.onFocus = handleFocus;\n triggerProps.onBlur = handleBlur;\n }\n\n if (triggers.indexOf('hover') !== -1) {\n process.env.NODE_ENV !== \"production\" ? warning(triggers.length > 1, '[react-bootstrap] Specifying only the `\"hover\"` trigger limits the visibility of the overlay to just mouse users. Consider also including the `\"focus\"` trigger so that touch and keyboard only users can see the overlay as well.') : void 0;\n triggerProps.onMouseOver = handleMouseOver;\n triggerProps.onMouseOut = handleMouseOut;\n }\n\n return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(_extends({}, triggerProps, {\n ref: triggerNodeRef\n })) : /*#__PURE__*/React.createElement(RefHolder, {\n ref: triggerNodeRef\n }, /*#__PURE__*/cloneElement(children, triggerProps)), /*#__PURE__*/React.createElement(Overlay, _extends({}, props, {\n show: show,\n onHide: handleHide,\n flip: flip,\n placement: placement,\n popperConfig: popperConfig,\n target: getTarget\n }), overlay));\n}\n\nOverlayTrigger.defaultProps = defaultProps;\nexport default OverlayTrigger;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"placement\", \"className\", \"style\", \"children\", \"arrowProps\", \"popper\", \"show\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar defaultProps = {\n placement: 'right'\n};\nvar Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n placement = _ref.placement,\n className = _ref.className,\n style = _ref.style,\n children = _ref.children,\n arrowProps = _ref.arrowProps,\n _ = _ref.popper,\n _2 = _ref.show,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'tooltip');\n\n var _ref2 = (placement == null ? void 0 : placement.split('-')) || [],\n primaryPlacement = _ref2[0];\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref,\n style: style,\n role: \"tooltip\",\n \"x-placement\": primaryPlacement,\n className: classNames(className, bsPrefix, \"bs-tooltip-\" + primaryPlacement)\n }, props), /*#__PURE__*/React.createElement(\"div\", _extends({\n className: \"arrow\"\n }, arrowProps)), /*#__PURE__*/React.createElement(\"div\", {\n className: bsPrefix + \"-inner\"\n }, children));\n});\nTooltip.defaultProps = defaultProps;\nTooltip.displayName = 'Tooltip';\nexport default Tooltip;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"className\", \"as\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar NavbarBrand = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-brand');\n var Component = as || (props.href ? 'a' : 'span');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix)\n }));\n});\nNavbarBrand.displayName = 'NavbarBrand';\nexport default NavbarBrand;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"className\", \"children\", \"dimension\", \"getDimensionValue\"];\n\nvar _collapseStyles;\n\nimport classNames from 'classnames';\nimport css from 'dom-helpers/css';\nimport React, { useMemo } from 'react';\nimport Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';\nimport transitionEndListener from './transitionEndListener';\nimport createChainedFunction from './createChainedFunction';\nimport triggerBrowserReflow from './triggerBrowserReflow';\nvar MARGINS = {\n height: ['marginTop', 'marginBottom'],\n width: ['marginLeft', 'marginRight']\n};\n\nfunction getDefaultDimensionValue(dimension, elem) {\n var offset = \"offset\" + dimension[0].toUpperCase() + dimension.slice(1);\n var value = elem[offset];\n var margins = MARGINS[dimension];\n return value + // @ts-ignore\n parseInt(css(elem, margins[0]), 10) + // @ts-ignore\n parseInt(css(elem, margins[1]), 10);\n}\n\nvar collapseStyles = (_collapseStyles = {}, _collapseStyles[EXITED] = 'collapse', _collapseStyles[EXITING] = 'collapsing', _collapseStyles[ENTERING] = 'collapsing', _collapseStyles[ENTERED] = 'collapse show', _collapseStyles);\nvar defaultProps = {\n in: false,\n timeout: 300,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n getDimensionValue: getDefaultDimensionValue\n};\nvar Collapse = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var onEnter = _ref.onEnter,\n onEntering = _ref.onEntering,\n onEntered = _ref.onEntered,\n onExit = _ref.onExit,\n onExiting = _ref.onExiting,\n className = _ref.className,\n children = _ref.children,\n _ref$dimension = _ref.dimension,\n dimension = _ref$dimension === void 0 ? 'height' : _ref$dimension,\n _ref$getDimensionValu = _ref.getDimensionValue,\n getDimensionValue = _ref$getDimensionValu === void 0 ? getDefaultDimensionValue : _ref$getDimensionValu,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n /* Compute dimension */\n var computedDimension = typeof dimension === 'function' ? dimension() : dimension;\n /* -- Expanding -- */\n\n var handleEnter = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = '0';\n }, onEnter);\n }, [computedDimension, onEnter]);\n var handleEntering = useMemo(function () {\n return createChainedFunction(function (elem) {\n var scroll = \"scroll\" + computedDimension[0].toUpperCase() + computedDimension.slice(1);\n elem.style[computedDimension] = elem[scroll] + \"px\";\n }, onEntering);\n }, [computedDimension, onEntering]);\n var handleEntered = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = null;\n }, onEntered);\n }, [computedDimension, onEntered]);\n /* -- Collapsing -- */\n\n var handleExit = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = getDimensionValue(computedDimension, elem) + \"px\";\n triggerBrowserReflow(elem);\n }, onExit);\n }, [onExit, getDimensionValue, computedDimension]);\n var handleExiting = useMemo(function () {\n return createChainedFunction(function (elem) {\n elem.style[computedDimension] = null;\n }, onExiting);\n }, [computedDimension, onExiting]);\n return /*#__PURE__*/React.createElement(Transition // @ts-ignore\n , _extends({\n ref: ref,\n addEndListener: transitionEndListener\n }, props, {\n \"aria-expanded\": props.role ? props.in : null,\n onEnter: handleEnter,\n onEntering: handleEntering,\n onEntered: handleEntered,\n onExit: handleExit,\n onExiting: handleExiting\n }), function (state, innerProps) {\n return /*#__PURE__*/React.cloneElement(children, _extends({}, innerProps, {\n className: classNames(className, children.props.className, collapseStyles[state], computedDimension === 'width' && 'width')\n }));\n });\n}); // @ts-ignore\n\n// @ts-ignore\nCollapse.defaultProps = defaultProps;\nexport default Collapse;","import React from 'react'; // TODO: check\n\nvar context = /*#__PURE__*/React.createContext(null);\ncontext.displayName = 'NavbarContext';\nexport default context;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"children\", \"bsPrefix\"];\nimport React from 'react';\nimport Collapse from './Collapse';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nvar NavbarCollapse = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var children = _ref.children,\n bsPrefix = _ref.bsPrefix,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-collapse');\n return /*#__PURE__*/React.createElement(NavbarContext.Consumer, null, function (context) {\n return /*#__PURE__*/React.createElement(Collapse, _extends({\n in: !!(context && context.expanded)\n }, props), /*#__PURE__*/React.createElement(\"div\", {\n ref: ref,\n className: bsPrefix\n }, children));\n });\n});\nNavbarCollapse.displayName = 'NavbarCollapse';\nexport default NavbarCollapse;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"className\", \"children\", \"label\", \"as\", \"onClick\"];\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nvar defaultProps = {\n label: 'Toggle navigation'\n};\nvar NavbarToggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n children = _ref.children,\n label = _ref.label,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'button' : _ref$as,\n onClick = _ref.onClick,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-toggler');\n\n var _ref2 = useContext(NavbarContext) || {},\n onToggle = _ref2.onToggle,\n expanded = _ref2.expanded;\n\n var handleClick = useEventCallback(function (e) {\n if (onClick) onClick(e);\n if (onToggle) onToggle();\n });\n\n if (Component === 'button') {\n props.type = 'button';\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n onClick: handleClick,\n \"aria-label\": label,\n className: classNames(className, bsPrefix, !expanded && 'collapsed')\n }), children || /*#__PURE__*/React.createElement(\"span\", {\n className: bsPrefix + \"-icon\"\n }));\n});\nNavbarToggle.displayName = 'NavbarToggle';\nNavbarToggle.defaultProps = defaultProps;\nexport default NavbarToggle;","import React from 'react'; // TODO (apparently this is a bare \"onSelect\"?)\n\nvar SelectableContext = /*#__PURE__*/React.createContext(null);\nexport var makeEventKey = function makeEventKey(eventKey, href) {\n if (href === void 0) {\n href = null;\n }\n\n if (eventKey != null) return String(eventKey);\n return href || null;\n};\nexport default SelectableContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"expand\", \"variant\", \"bg\", \"fixed\", \"sticky\", \"className\", \"children\", \"as\", \"expanded\", \"onToggle\", \"onSelect\", \"collapseOnSelect\"];\nimport classNames from 'classnames';\nimport React, { useCallback, useMemo } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport createWithBsPrefix from './createWithBsPrefix';\nimport NavbarBrand from './NavbarBrand';\nimport NavbarCollapse from './NavbarCollapse';\nimport NavbarToggle from './NavbarToggle';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nimport SelectableContext from './SelectableContext';\nvar NavbarText = createWithBsPrefix('navbar-text', {\n Component: 'span'\n});\nvar defaultProps = {\n expand: true,\n variant: 'light',\n collapseOnSelect: false\n};\nvar Navbar = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var _useUncontrolled = useUncontrolled(props, {\n expanded: 'onToggle'\n }),\n initialBsPrefix = _useUncontrolled.bsPrefix,\n expand = _useUncontrolled.expand,\n variant = _useUncontrolled.variant,\n bg = _useUncontrolled.bg,\n fixed = _useUncontrolled.fixed,\n sticky = _useUncontrolled.sticky,\n className = _useUncontrolled.className,\n children = _useUncontrolled.children,\n _useUncontrolled$as = _useUncontrolled.as,\n Component = _useUncontrolled$as === void 0 ? 'nav' : _useUncontrolled$as,\n expanded = _useUncontrolled.expanded,\n _onToggle = _useUncontrolled.onToggle,\n onSelect = _useUncontrolled.onSelect,\n collapseOnSelect = _useUncontrolled.collapseOnSelect,\n controlledProps = _objectWithoutPropertiesLoose(_useUncontrolled, _excluded);\n\n var bsPrefix = useBootstrapPrefix(initialBsPrefix, 'navbar');\n var handleCollapse = useCallback(function () {\n if (onSelect) onSelect.apply(void 0, arguments);\n\n if (collapseOnSelect && expanded) {\n if (_onToggle) {\n _onToggle(false);\n }\n }\n }, [onSelect, collapseOnSelect, expanded, _onToggle]); // will result in some false positives but that seems better\n // than false negatives. strict `undefined` check allows explicit\n // \"nulling\" of the role if the user really doesn't want one\n\n if (controlledProps.role === undefined && Component !== 'nav') {\n controlledProps.role = 'navigation';\n }\n\n var expandClass = bsPrefix + \"-expand\";\n if (typeof expand === 'string') expandClass = expandClass + \"-\" + expand;\n var navbarContext = useMemo(function () {\n return {\n onToggle: function onToggle() {\n return _onToggle && _onToggle(!expanded);\n },\n bsPrefix: bsPrefix,\n expanded: !!expanded\n };\n }, [bsPrefix, expanded, _onToggle]);\n return /*#__PURE__*/React.createElement(NavbarContext.Provider, {\n value: navbarContext\n }, /*#__PURE__*/React.createElement(SelectableContext.Provider, {\n value: handleCollapse\n }, /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref\n }, controlledProps, {\n className: classNames(className, bsPrefix, expand && expandClass, variant && bsPrefix + \"-\" + variant, bg && \"bg-\" + bg, sticky && \"sticky-\" + sticky, fixed && \"fixed-\" + fixed)\n }), children)));\n});\nNavbar.defaultProps = defaultProps;\nNavbar.displayName = 'Navbar';\nNavbar.Brand = NavbarBrand;\nNavbar.Toggle = NavbarToggle;\nNavbar.Collapse = NavbarCollapse;\nNavbar.Text = NavbarText;\nexport default Navbar;","import React from 'react';\nvar context = /*#__PURE__*/React.createContext(null);\ncontext.displayName = 'CardContext';\nexport default context;","var toArray = Function.prototype.bind.call(Function.prototype.call, [].slice);\n/**\n * Runs `querySelectorAll` on a given element.\n * \n * @param element the element\n * @param selector the selector\n */\n\nexport default function qsa(element, selector) {\n return toArray(element.querySelectorAll(selector));\n}","import { useReducer } from 'react';\n/**\n * Returns a function that triggers a component update. the hook equivalent to\n * `this.forceUpdate()` in a class component. In most cases using a state value directly\n * is preferable but may be required in some advanced usages of refs for interop or\n * when direct DOM manipulation is required.\n *\n * ```ts\n * const forceUpdate = useForceUpdate();\n *\n * const updateOnClick = useCallback(() => {\n * forceUpdate()\n * }, [forceUpdate])\n *\n * return \n * ```\n */\n\nexport default function useForceUpdate() {\n // The toggling state value is designed to defeat React optimizations for skipping\n // updates when they are stricting equal to the last state value\n var _useReducer = useReducer(function (state) {\n return !state;\n }, false),\n dispatch = _useReducer[1];\n\n return dispatch;\n}","import React from 'react'; // TODO: check this\n\nvar NavContext = /*#__PURE__*/React.createContext(null);\nNavContext.displayName = 'NavContext';\nexport default NavContext;","import React from 'react';\nvar TabContext = /*#__PURE__*/React.createContext(null);\nexport default TabContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"as\", \"onSelect\", \"activeKey\", \"role\", \"onKeyDown\"];\nimport qsa from 'dom-helpers/querySelectorAll';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport useForceUpdate from '@restart/hooks/useForceUpdate';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nimport TabContext from './TabContext';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nvar noop = function noop() {};\n\nvar AbstractNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'ul' : _ref$as,\n onSelect = _ref.onSelect,\n activeKey = _ref.activeKey,\n role = _ref.role,\n onKeyDown = _ref.onKeyDown,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n // A ref and forceUpdate for refocus, b/c we only want to trigger when needed\n // and don't want to reset the set in the effect\n var forceUpdate = useForceUpdate();\n var needsRefocusRef = useRef(false);\n var parentOnSelect = useContext(SelectableContext);\n var tabContext = useContext(TabContext);\n var getControlledId, getControllerId;\n\n if (tabContext) {\n role = role || 'tablist';\n activeKey = tabContext.activeKey;\n getControlledId = tabContext.getControlledId;\n getControllerId = tabContext.getControllerId;\n }\n\n var listNode = useRef(null);\n\n var getNextActiveChild = function getNextActiveChild(offset) {\n var currentListNode = listNode.current;\n if (!currentListNode) return null;\n var items = qsa(currentListNode, '[data-rb-event-key]:not(.disabled)');\n var activeChild = currentListNode.querySelector('.active');\n if (!activeChild) return null;\n var index = items.indexOf(activeChild);\n if (index === -1) return null;\n var nextIndex = index + offset;\n if (nextIndex >= items.length) nextIndex = 0;\n if (nextIndex < 0) nextIndex = items.length - 1;\n return items[nextIndex];\n };\n\n var handleSelect = function handleSelect(key, event) {\n if (key == null) return;\n if (onSelect) onSelect(key, event);\n if (parentOnSelect) parentOnSelect(key, event);\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (onKeyDown) onKeyDown(event);\n var nextActiveChild;\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n nextActiveChild = getNextActiveChild(-1);\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n nextActiveChild = getNextActiveChild(1);\n break;\n\n default:\n return;\n }\n\n if (!nextActiveChild) return;\n event.preventDefault();\n handleSelect(nextActiveChild.dataset.rbEventKey, event);\n needsRefocusRef.current = true;\n forceUpdate();\n };\n\n useEffect(function () {\n if (listNode.current && needsRefocusRef.current) {\n var activeChild = listNode.current.querySelector('[data-rb-event-key].active');\n if (activeChild) activeChild.focus();\n }\n\n needsRefocusRef.current = false;\n });\n var mergedRef = useMergedRefs(ref, listNode);\n return /*#__PURE__*/React.createElement(SelectableContext.Provider, {\n value: handleSelect\n }, /*#__PURE__*/React.createElement(NavContext.Provider, {\n value: {\n role: role,\n // used by NavLink to determine it's role\n activeKey: makeEventKey(activeKey),\n getControlledId: getControlledId || noop,\n getControllerId: getControllerId || noop\n }\n }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n onKeyDown: handleKeyDown,\n ref: mergedRef,\n role: role\n }))));\n});\nexport default AbstractNav;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"className\", \"children\", \"as\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar NavItem = /*#__PURE__*/React.forwardRef( // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\nfunction (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n children = _ref.children,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-item');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix)\n }), children);\n});\nNavItem.displayName = 'NavItem';\nexport default NavItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"active\", \"className\", \"eventKey\", \"onSelect\", \"onClick\", \"as\"];\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport warning from 'warning';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nvar defaultProps = {\n disabled: false\n};\nvar AbstractNavItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var active = _ref.active,\n className = _ref.className,\n eventKey = _ref.eventKey,\n onSelect = _ref.onSelect,\n onClick = _ref.onClick,\n Component = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n var navKey = makeEventKey(eventKey, props.href);\n var parentOnSelect = useContext(SelectableContext);\n var navContext = useContext(NavContext);\n var isActive = active;\n\n if (navContext) {\n if (!props.role && navContext.role === 'tablist') props.role = 'tab';\n var contextControllerId = navContext.getControllerId(navKey);\n var contextControlledId = navContext.getControlledId(navKey);\n process.env.NODE_ENV !== \"production\" ? warning(!contextControllerId || !props.id, \"[react-bootstrap] The provided id '\" + props.id + \"' was overwritten by the current navContext with '\" + contextControllerId + \"'.\") : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!contextControlledId || !props['aria-controls'], \"[react-bootstrap] The provided aria-controls value '\" + props['aria-controls'] + \"' was overwritten by the current navContext with '\" + contextControlledId + \"'.\") : void 0;\n props['data-rb-event-key'] = navKey;\n props.id = contextControllerId || props.id;\n props['aria-controls'] = contextControlledId || props['aria-controls'];\n isActive = active == null && navKey != null ? navContext.activeKey === navKey : active;\n }\n\n if (props.role === 'tab') {\n if (props.disabled) {\n props.tabIndex = -1;\n props['aria-disabled'] = true;\n }\n\n props['aria-selected'] = isActive;\n }\n\n var handleOnclick = useEventCallback(function (e) {\n if (onClick) onClick(e);\n if (navKey == null) return;\n if (onSelect) onSelect(navKey, e);\n if (parentOnSelect) parentOnSelect(navKey, e);\n });\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n onClick: handleOnclick,\n className: classNames(className, isActive && 'active')\n }));\n});\nAbstractNavItem.defaultProps = defaultProps;\nexport default AbstractNavItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"disabled\", \"className\", \"href\", \"eventKey\", \"onSelect\", \"as\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport SafeAnchor from './SafeAnchor';\nimport AbstractNavItem from './AbstractNavItem';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar defaultProps = {\n disabled: false,\n as: SafeAnchor\n};\nvar NavLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n disabled = _ref.disabled,\n className = _ref.className,\n href = _ref.href,\n eventKey = _ref.eventKey,\n onSelect = _ref.onSelect,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-link');\n return /*#__PURE__*/React.createElement(AbstractNavItem, _extends({}, props, {\n href: href,\n ref: ref,\n eventKey: eventKey,\n as: as,\n disabled: disabled,\n onSelect: onSelect,\n className: classNames(className, bsPrefix, disabled && 'disabled')\n }));\n});\nNavLink.displayName = 'NavLink';\nNavLink.defaultProps = defaultProps;\nexport default NavLink;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"as\", \"bsPrefix\", \"variant\", \"fill\", \"justify\", \"navbar\", \"navbarScroll\", \"className\", \"children\", \"activeKey\"];\nimport classNames from 'classnames';\nimport all from 'prop-types-extra/lib/all';\nimport React, { useContext } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nimport CardContext from './CardContext';\nimport AbstractNav from './AbstractNav';\nimport NavItem from './NavItem';\nimport NavLink from './NavLink';\nvar defaultProps = {\n justify: false,\n fill: false\n};\nvar Nav = /*#__PURE__*/React.forwardRef(function (uncontrolledProps, ref) {\n var _classNames;\n\n var _useUncontrolled = useUncontrolled(uncontrolledProps, {\n activeKey: 'onSelect'\n }),\n _useUncontrolled$as = _useUncontrolled.as,\n as = _useUncontrolled$as === void 0 ? 'div' : _useUncontrolled$as,\n initialBsPrefix = _useUncontrolled.bsPrefix,\n variant = _useUncontrolled.variant,\n fill = _useUncontrolled.fill,\n justify = _useUncontrolled.justify,\n navbar = _useUncontrolled.navbar,\n navbarScroll = _useUncontrolled.navbarScroll,\n className = _useUncontrolled.className,\n children = _useUncontrolled.children,\n activeKey = _useUncontrolled.activeKey,\n props = _objectWithoutPropertiesLoose(_useUncontrolled, _excluded);\n\n var bsPrefix = useBootstrapPrefix(initialBsPrefix, 'nav');\n var navbarBsPrefix;\n var cardHeaderBsPrefix;\n var isNavbar = false;\n var navbarContext = useContext(NavbarContext);\n var cardContext = useContext(CardContext);\n\n if (navbarContext) {\n navbarBsPrefix = navbarContext.bsPrefix;\n isNavbar = navbar == null ? true : navbar;\n } else if (cardContext) {\n cardHeaderBsPrefix = cardContext.cardHeaderBsPrefix;\n }\n\n return /*#__PURE__*/React.createElement(AbstractNav, _extends({\n as: as,\n ref: ref,\n activeKey: activeKey,\n className: classNames(className, (_classNames = {}, _classNames[bsPrefix] = !isNavbar, _classNames[navbarBsPrefix + \"-nav\"] = isNavbar, _classNames[navbarBsPrefix + \"-nav-scroll\"] = isNavbar && navbarScroll, _classNames[cardHeaderBsPrefix + \"-\" + variant] = !!cardHeaderBsPrefix, _classNames[bsPrefix + \"-\" + variant] = !!variant, _classNames[bsPrefix + \"-fill\"] = fill, _classNames[bsPrefix + \"-justified\"] = justify, _classNames))\n }, props), children);\n});\nNav.displayName = 'Nav';\nNav.defaultProps = defaultProps;\nNav.Item = NavItem;\nNav.Link = NavLink;\nexport default Nav;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"className\", \"fluid\", \"rounded\", \"roundedCircle\", \"thumbnail\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { useBootstrapPrefix } from './ThemeProvider';\nexport var propTypes = {\n /**\n * @default 'img'\n */\n bsPrefix: PropTypes.string,\n\n /**\n * Sets image as fluid image.\n */\n fluid: PropTypes.bool,\n\n /**\n * Sets image shape as rounded.\n */\n rounded: PropTypes.bool,\n\n /**\n * Sets image shape as circle.\n */\n roundedCircle: PropTypes.bool,\n\n /**\n * Sets image shape as thumbnail.\n */\n thumbnail: PropTypes.bool\n};\nvar defaultProps = {\n fluid: false,\n rounded: false,\n roundedCircle: false,\n thumbnail: false\n};\nvar Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n fluid = _ref.fluid,\n rounded = _ref.rounded,\n roundedCircle = _ref.roundedCircle,\n thumbnail = _ref.thumbnail,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'img');\n var classes = classNames(fluid && bsPrefix + \"-fluid\", rounded && \"rounded\", roundedCircle && \"rounded-circle\", thumbnail && bsPrefix + \"-thumbnail\");\n return /*#__PURE__*/React.createElement(\"img\", _extends({\n // eslint-disable-line jsx-a11y/alt-text\n ref: ref\n }, props, {\n className: classNames(className, classes)\n }));\n});\nImage.displayName = 'Image';\nImage.defaultProps = defaultProps;\nexport default Image;","import styled from 'styled-components';\r\n\r\nexport const ThemeSwitchWrapper = styled.span`\r\n\tdisplay: flex;\r\n \talign-items: center;\r\n\tmargin-right: 10px;\r\n\r\n\t.theme-switch {\r\n\t\tdisplay: block;\r\n\t cursor: pointer;\r\n\t -webkit-tap-highlight-color: transparent;\r\n\t margin-bottom: 0;\r\n\t color: #778698;\r\n\t pointer-events: none;\r\n\t font-size: 14px;\r\n\r\n\t &.active {\r\n\t pointer-events: auto;\r\n\t color: #94a7c1;\r\n\t }\r\n\r\n\t i.theme-toggle {\r\n\t position: relative;\r\n\t display: inline-block;\r\n\t margin: 0 15px;\r\n\t width: 38px;\r\n\t height: 20px;\r\n\t background-color: #202A35;\r\n\t border-radius: 23px;\r\n\t vertical-align: text-bottom;\r\n\t transition: all 0.3s linear;\r\n\r\n\t &.active {\r\n\t &::before {\r\n\t background-color: #19212b;\r\n\t }\r\n\r\n\t &::after {\r\n\t background-color: #ccd4de;\r\n\t }\r\n\t }\r\n\r\n\t &::before {\r\n\t content: \"\";\r\n\t position: absolute;\r\n\t left: 0;\r\n\t width: 33px;\r\n\t height: 17px;\r\n\t background-color: #19212b;\r\n\t border-radius: 11px;\r\n\t transform: translate3d(2px,2px,0) scale3d(1,1,1);\r\n\t transition: all 0.25s linear;\r\n\t }\r\n\r\n\t &::after {\r\n\t content: \"\";\r\n\t position: absolute;\r\n\t left: 0;\r\n\t width: 16px;\r\n\t height: 16px;\r\n\t background-color: #4a4a4a;\r\n\t border-radius: 11px;\r\n\t box-shadow: 0 0px 2px 2px rgba(0,0,0,0.24);\r\n\t transform: translate3d(2px,2px,0);\r\n\t transition: all 0.2s ease-in-out;\r\n\t }\r\n\t }\r\n\r\n\t input {\r\n\t display: none;\r\n\r\n\t &:checked + i.theme-toggle {\r\n\t background-color: #3f6654 !important;\r\n\r\n\t &.active {\r\n\t background-color: #15bd6f !important;\r\n\t }\r\n\r\n\t &::before {\r\n\t transform: translate3d(14px, 2px, 0) scale3d(0, 0, 0);\r\n\t }\r\n\r\n\t &::after {\r\n\t transform: translate3d(20px, 2px, 0);\r\n\t background-color: #25313f;\r\n\t }\r\n\t }\r\n\t }\r\n\r\n\t &:active {\r\n\r\n\t i.theme-toggle {\r\n\t &::after {\r\n\t width: 32px;\r\n\t transform: translate3d(2px,2.3px,0);\r\n\t }\r\n\t }\r\n\r\n\t input {\r\n\r\n\t &:checked + i.theme-toggle {\r\n\r\n\t &::after {\r\n\t width: 32px;\r\n\t transform: translate3d(3px,2px,0);\r\n\t }\r\n\t }\r\n\t }\r\n\t }\r\n\r\n\t .input-cont {\r\n\t display: flex;\r\n\t justify-content: space-between;\r\n\t align-items: center;\r\n //margin: 10px 25px;\r\n\r\n\t\t\t.toggle-label {\r\n\t\t\t\tcolor: #9fabc3;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\talign-items: center;\r\n\t\t\t}\r\n\r\n\t @media screen and (min-width: 320px) and (max-width: 766px) {\r\n\t /* flex-direction: column-reverse;\r\n\t align-items: flex-end; */\r\n\t\t\t\tmargin: 0;\r\n\t }\r\n\r\n\t\t\ti.icon-theme {\r\n\t\t\t\tfont-size: 18px;\r\n\t\t\t}\r\n\t }\r\n\t}\r\n\r\n\t&.version-switcher {\r\n\t\t.theme-switch {\r\n\t\t\tdisplay: flex;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\r\n\t\t\t.input-cont {\r\n\t\t\t\tmargin: 0;\r\n\r\n\t\t\t\t.toggle-wrapper {\r\n\t\t\t\t\tcursor: pointer;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\talign-items: center;\r\n\r\n\t\t\t\t\ti.theme-toggle {\r\n\t\t\t\t\t\tmargin: 0 10px;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.toggle-label {\r\n\t\t\t\t\t.beta {\r\n\t\t\t\t\t\tmargin-right: 8px;\r\n\t\t\t\t\t\tpadding: 1px 4px;\r\n\t\t\t\t\t\tfont-weight: 800;\r\n\t\t\t\t\t\tfont-size: 12px;\r\n\t\t\t\t\t\tbackground-color: #F1A92E !important;\r\n\t\t\t\t\t\tcolor: #27323e;\r\n\t\t\t\t\t\tborder-radius: 3px;\r\n\t\t\t\t\t\ttext-transform: uppercase;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.toggle-tooltip {\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: flex;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\t\t\tmargin-left: -23px;\r\n \t\tmargin-top: -17px;\r\n\r\n\t\t\t.icon-question {\r\n\t\t\t\tmargin: auto 10px;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t}\r\n\r\n\t@media screen and (min-width: 320px) and (max-width: 1023px) {\r\n\t \t&.theme-desktop {\r\n\t \t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 1024px) {\r\n\t\t&.theme-mobile {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const NotificationBadge = styled.span`\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 100%;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n overflow: hidden;\r\n background: red;\r\n position: absolute;\r\n top: -1px;\r\n right: -1px;\r\n font-size: 10px;\r\n border: 1px solid #3a4b61;\r\n`;\r\n\r\nexport const NotificationWrapper = styled.div`\r\n\r\n\t.dropdown {\r\n\r\n\t\t#top-notification {\r\n\t\t\tborder: none;\r\n\t\t\tbackground-color: transparent;\r\n\t\t\tdisplay: flex;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\r\n\t\t\tsvg {\r\n\t\t\t\tfont-size: 22px;\r\n\t\t\t}\r\n\r\n\t\t\t&::after {\r\n\t\t\t\tdisplay: none;\r\n\t\t\t}\r\n\r\n\t\t\t&:focus,\r\n\t\t\t&:hover,\r\n\t\t\t&:active {\r\n\t\t\t\toutline: none;\r\n\t\t\t\tbox-shadow: none;\r\n\t\t\t}\r\n\r\n\t\t\t.dropdown-menu {\r\n\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const AvatarBlock = styled.div`\r\n\twidth: auto;\r\n\tpadding-bottom: 0;\r\n\tdisplay: flex !important;\r\n\tjustify-content: flex-end;\r\n\talign-items: center;\r\n\r\n\t.account-profile {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\r\n\t\t.user-avatar {\r\n\t\t \tdisplay: inline-block;\r\n\t\t width: 32px;\r\n\t\t height: 32px;\r\n\t\t border-radius: 15px;\r\n\t\t background-color: #283544;\r\n\t\t /* box-shadow: 0 3px 1px 1px rgba(0,0,0,.3); */\r\n\t\t overflow: hidden;\r\n\r\n\t \timg {\r\n\t \t\twidth: 100%;\r\n\t \t}\r\n\t \t}\r\n\t}\r\n\r\n \t.user-name {\r\n\t\twhite-space: nowrap;\r\n\t\tmargin-left: -5px;\r\n\t\tfont-size: 15px;\r\n\t\tfont-weight: 500;\r\n\t\tmargin-left: 15px;\r\n\r\n\t\t@media screen and (min-width: 320px) and (max-width: 766px) {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n \t}\r\n`\r\n\r\nexport const HeaderWrapper = styled.header`\r\n\theight: 56px;\r\n \tdisplay: flex;\r\n \talign-items: center;\r\n \tjustify-content: flex-end;\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tz-index: 100;\r\n\tbackground-color: #0b1219;\r\n\tborder-bottom: 2px solid #0a0f16;\t\r\n box-shadow: 0 1px 8px rgb(0 0 0 / 30%);\r\n\r\n\t.notif-profile {\r\n\t\tdisplay: flex;\r\n\t justify-content: center;\r\n\t align-items: center;\r\n\t}\r\n\r\n \t.main-navbar {\r\n\t \tposition: relative;\r\n\t display: -ms-flexbox;\r\n\t display: flex;\r\n\t -ms-flex-wrap: wrap;\r\n\t flex-wrap: wrap;\r\n\t -ms-flex-align: center;\r\n\t align-items: center;\r\n\t -ms-flex-pack: justify;\r\n\t justify-content: space-between;\r\n\t padding: 0 15px;\r\n\t\twidth: 100%;\r\n\r\n\t\t@media screen and (min-width: 320px) and (max-width: 766px) {\r\n\t\t\tpadding: 0 15px;\r\n\t\t}\r\n\r\n\t\tul {\r\n\t\t\talign-items: center;\r\n\t\t\tlist-style-type: none !important;\r\n\r\n\t\t\t@media screen and (min-width: 320px) and (max-width: 1024px) {\r\n\t\t\t\t&.header-logo-wrapper {\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\tleft: 35%;\r\n\t\t\t\t\tright: 35%;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n \t& > ul > li:last-child {\r\n\r\n\t \t& .toggle-btn {\r\n\t \t\tbackground: 0 0;\r\n\t \t\t\tborder: none;\r\n\t \t\t\tcolor: #96a1b7;\r\n\t \t}\r\n \t}\r\n\r\n\t & > ul > .nav-item-divider {\r\n\t \tdisplay: flex;\r\n\t\t border-right: 1px solid #4e6073;\r\n\t\t height: 18px;\r\n\t\t align-self: center;\r\n\t\t margin: 0 15px 0 10px;\r\n\t }\r\n\r\n\t\t.btn-sidebar {\r\n\t\t\t&:hover {\r\n\t\t\t background: transparent;\r\n\t\t\t}\r\n\r\n\t\t\twidth: 30px;\r\n\t\t\theight: 30px;\r\n\t\t\tdisplay: flex;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\t\t\tcursor: pointer;\r\n\r\n\t\t\t@media screen and (min-width: 767px) and (max-width: 1199px) {\r\n\t\t\t\twidth: 350px;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\tjustify-content: start;\r\n\r\n\t\t\t\tsvg {\r\n\t\t\t\t\twidth: 30px;\r\n\t\t\t\t\theight: 30px;\r\n\t\t\t\t\tpadding: 5px;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.version-switcher {\r\n\t\t\t\t\tmargin-left: 15px;\r\n\t\t\t\t\t.input-cont {\r\n\t\t\t\t\t\t/* margin: 0 10px 0 0; */\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\r\n\t\t}\r\n\t}\r\n\r\n \t.nav-link {\r\n \t\tcolor: #ced0dd !important;\r\n \t}\r\n\r\n\t.switch-label {\r\n\t\tdisplay: flex;\r\n\t\t\r\n\t\t.toggle-label {\r\n\t\t\t.beta {\r\n\t\t\t\tmargin-right: 8px;\r\n\t\t\t\tpadding: 1px 4px;\r\n\t\t\t\tfont-weight: 800;\r\n\t\t\t\tfont-size: 12px;\r\n\t\t\t\tbackground-color: #F1A92E !important;\r\n\t\t\t\tcolor: #27323e;\r\n\t\t\t\tborder-radius: 3px;\r\n\t\t\t\ttext-transform: uppercase;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.toggle-tooltip {\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: flex;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\t\t\tmargin-left: -23px;\r\n \t\tmargin-top: -17px;\r\n\r\n\t\t\t.icon-question {\r\n\t\t\t\tmargin: auto 10px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.logout-wrapper {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\r\n\t\t.logout-text {\r\n\t\t\tfont-size: 16px;\r\n\t\t\tfont-weight: 500;\r\n\t\t}\r\n\r\n\t\ti {\r\n\t\t\tline-height: 0 !important;\r\n\t\t}\r\n\t}\r\n\r\n\tbutton {\r\n\t\tbackground: 0 0;\r\n\t\tborder-color: transparent;\r\n\t\tcolor: #96a1b7;\r\n\t\tpadding: 0;\r\n\r\n\t\t&:hover {\r\n\t\t\tborder-radius: 6px !important;\r\n\t\t\tborder-color: #2E3B4C !important;\r\n\t\t\tbox-shadow: unset !important;\r\n\t\t\tborder-color: transparent !important;\r\n\t\t\tcolor: #F2F2F2;\r\n\t\t}\r\n\t\t&:focus {\r\n\t\t\tbackground-color: unset !important;\r\n\t\t\tborder-color: #2E3B4C !important;\r\n\t\t\tborder-color: transparent !important;\r\n\t\t\tbox-shadow: unset !important;\r\n\t\t}\r\n\t\t&:active {\r\n\t\t\tbackground-color: unset !important;\r\n\t\t\tborder-color: #2E3B4C !important;\r\n\t\t\tborder-color: transparent !important;\r\n\t\t\tbox-shadow: unset !important;\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 320px) and (max-width: 1023px) {\r\n\t\tleft: 0;\r\n\t\theight: 48.86px;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\talign-items: center;\r\n\t\ttransition: all 300ms ease-in-out;\r\n\r\n\t\t.main-navbar {\r\n\t\t\tul {\r\n\t\t\t\tflex-direction: row;\r\n\t\t\t\talign-items: center;\r\n\r\n\t\t\t\tli {\r\n\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t/* padding-top: 10px; */\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t${AvatarBlock} {\r\n\t\t\t\tfont-size: 10px;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: flex-end;\r\n\t\t\t\talign-items: center;\r\n\r\n\t\t\t\t.user-name {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t\tmargin-left: 8px;\r\n\t\t\t\t\twidth: 70px;\r\n\t\t\t\t\ttext-overflow: ellipsis;\r\n\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\twhite-space: nowrap;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.user-avatar {\r\n\t\t\t\t\twidth: 25px;\r\n\t\t\t\t\theight: 25px;\r\n\t\t\t\t\tborder-radius: 100%;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.logout-wrapper {\r\n\t\t\t\tfont-size: 14px;\r\n\r\n\t\t\t\t.logout-text {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 1024px) and (max-width: 1199px) {\r\n\t\tleft: 0px;\r\n\t\theight: 47px;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\talign-items: center;\r\n\t\ttransition: all 300ms ease-in-out;\r\n\r\n\t\t.main-navbar {\r\n\r\n\t\t\tul {\r\n\r\n\t\t\t\tli {\r\n\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t/* padding-top: 10px; */\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t${AvatarBlock} {\r\n\t\t\t\tfont-size: 10px;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: flex-end;\r\n\t\t\t\talign-items: center;\r\n\r\n\t\t\t\t.user-name {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t\tmargin-left: 8px;\r\n\t\t\t\t\twidth: 70px;\r\n\t\t\t\t\ttext-overflow: ellipsis;\r\n\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\twhite-space: nowrap;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.user-avatar {\r\n\t\t\t\t\twidth: 25px;\r\n\t\t\t\t\theight: 25px;\r\n\t\t\t\t\tborder-radius: 100%;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.logout-wrapper {\r\n\t\t\t\tfont-size: 14px;\r\n\r\n\t\t\t\t.logout-text {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 1200px) and (max-width: 1440px) {\r\n\t\tleft: 0;\r\n\t\theight: 51px;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\talign-items: center;\r\n\t\ttransition: all 300ms ease-in-out;\r\n\r\n\t\t#sidebar-btn {\r\n\t\t\tpadding: 2px 8px;\r\n\t\t}\r\n\r\n\t\t.main-navbar {\r\n\t\t\tul {\r\n\t\t\t\tli {\r\n\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t/* padding-top: 8px; */\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t${AvatarBlock} {\r\n\t\t\t\tfont-size: 14px;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: flex-end;\r\n\t\t\t\talign-items: center;\r\n\r\n\t\t\t\t.user-name {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t\tmargin-left: 10px;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.user-avatar {\r\n\t\t\t\t\twidth: 28px;\r\n\t\t\t\t\theight: 28px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.logout-wrapper {\r\n\t\t\t\tfont-size: 14px;\r\n\r\n\t\t\t\t.logout-text {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 1441px) and (max-width: 1749px) {\r\n\t\tleft: 0;\r\n\t\theight: 55px;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\talign-items: center;\r\n\t\ttransition: all 300ms ease-in-out;\r\n\r\n\t\t.main-navbar {\r\n\r\n\t\t\tul {\r\n\t\t\t\tli {\r\n\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t/* padding-top: 15px; */\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t${AvatarBlock} {\r\n\t\t\t\tfont-size: 14px;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: flex-end;\r\n\t\t\t\talign-items: center;\r\n\r\n\t\t\t\t.user-name {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t\tmargin-left: 8px;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.user-avatar {\r\n\t\t\t\t\t// width: 20px;\r\n\t\t\t\t\t// height: 20px;\r\n\t\t\t\t}\r\n\r\n\r\n\t\t\t}\r\n\r\n\t\t\t.logout-wrapper {\r\n\t\t\t\t// font-size: 11px;\r\n\r\n\t\t\t\t.logout-text {\r\n\t\t\t\t\tfont-size: 14px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 1750px) and (max-width: 3000px) {\r\n\t\tleft: 0;\r\n\t\theight: 59px;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\talign-items: center;\r\n\t\ttransition: all 300ms ease-in-out;\r\n\r\n\t\t.main-navbar {\r\n\t\t\tdisplay: flex;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-items: center;\r\n\t\t\theight: 59px;\r\n\r\n\t\t\tul {\r\n\t\t\t\t/* margin-top: -3px; */\r\n\r\n\t\t\t\tli {\r\n\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t/* padding-top: 15px; */\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t${AvatarBlock} {\r\n\t\t\t\tfont-size: 14px;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: flex-end;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\tpadding: .5rem !important;\r\n\r\n\t\t\t\t.user-name {\r\n\t\t\t\t\tfont-size: 15px;\r\n\t\t\t\t\tmargin-left: 8px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t.logout-wrapper {\r\n\t\t\t\tpadding: 0;\r\n\r\n\t\t\t\t.logout-text {\r\n\t\t\t\t\tfont-size: 15px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const HeaderLogo = styled.div`\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\r\n\ta {\r\n\t\tdisplay: flex;\r\n\t \tjustify-content: center;\r\n\t \talign-items: center;\r\n\t\tfont-size: 18px;\r\n\t color: #fff !important;\r\n\t margin-right: 0;\r\n\r\n\t\timg {\r\n\t\t\theight: 32px;\r\n\t\t\twidth: 32px;\r\n\t\t\tmargin-right: 10px;\r\n\t\t\tborder-radius: 50%;\r\n\t\t}\r\n\t}\r\n\r\n\t.version-switch {\r\n\t\tmargin-left: 15px;\r\n\t\t\r\n\t\tlabel {\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 320px) and (max-width: 1199px) {\r\n\t\ta {\r\n\t\t\timg {\r\n\t\t\t\tmargin-right: 0;\r\n\t\t\t}\r\n\r\n\t\t\t.app-name {\r\n\t\t\t\tdisplay: none;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media screen and (min-width: 1200px) and (max-width: 1440px) {\r\n\t\ta {\r\n\t\t\timg {\r\n\t\t\t\theight: 28px;\r\n\t\t\t\twidth: 28px;\r\n\t\t\t}\r\n\r\n\t\t\t.app-name {\r\n\t \t\tfont-size: 16px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Link } from 'react-router-dom'\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\r\nimport { faListUl } from \"@fortawesome/free-solid-svg-icons\"\r\nimport { Container, Row, Col, Navbar, Nav, Image, OverlayTrigger, Tooltip, SafeAnchor } from 'react-bootstrap'\r\nimport jQuery from 'jquery'\r\nimport { NotificationBell } from '../../components'\r\nimport { NavBar } from '../../styles/navigations'\r\nimport { authActions, themeActions } from '../../redux/actions'\r\nimport { HeaderWrapper, HeaderLogo, ThemeSwitchWrapper, AvatarBlock } from './styled_components'\r\nimport { pages, app } from '../../navigation/CONSTANTS'\r\nimport { isLiveVersion } from '../../services/CONSTANTS'\r\nimport { isNotNull, isNull, Dimension, setDefaultProfileImage, getSubDomain, onSetNewState } from '../../utils'\r\n\r\nclass Header extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n showSidebar: true,\r\n isBetaVersion: getSubDomain()\r\n }\r\n this.mounted = false\r\n }\r\n\r\n componentDidMount() {\r\n this.mounted = true\r\n window.addEventListener('resize', () => Dimension.updateDimensions(this))\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('resize', () => Dimension.updateDimensions(this))\r\n this.mounted = false\r\n }\r\n\r\n setDefaultProfileImage = (e) => {\r\n e.target.src = \"/images/def-user.png\"\r\n }\r\n\r\n handleSidebar = () => {\r\n onSetNewState(this, function (prev) {\r\n if (prev.showSidebar) {\r\n jQuery(\".sidebar-size\").addClass(\"show\")\r\n jQuery(\"#sidebar-opt\").addClass(\"show\")\r\n jQuery(\"#sidebar-opt-prof\").addClass(\"show\")\r\n jQuery(\".fsp\").addClass(\"show\")\r\n jQuery(\".to-hide-items\").addClass(\"show\")\r\n jQuery(\".tooltip\").addClass(\"showToolTip\")\r\n jQuery(\"#customer-layout-wrapper\").addClass(\"sidebar-open\")\r\n\r\n let isWalletOpen = jQuery('.main-content').hasClass('show')\r\n if (isWalletOpen) {\r\n jQuery(\".main-content\").removeClass('show')\r\n jQuery(\"#sidebar-opt-prof\").removeClass('show-wallets')\r\n jQuery(\".wallets\").removeClass(\"show hide\")\r\n jQuery(\"#wallet-click\").click()\r\n }\r\n } else {\r\n jQuery(\".sidebar-size\").removeClass(\"show\")\r\n jQuery(\"#sidebar-opt\").removeClass(\"show\")\r\n jQuery(\"#sidebar-opt-prof\").removeClass(\"show\")\r\n jQuery(\".fsp\").removeClass(\"show\")\r\n jQuery(\".to-hide-items\").removeClass(\"show\")\r\n jQuery(\".tooltip\").removeClass(\"showToolTip\")\r\n jQuery(\"#customer-layout-wrapper\").removeClass(\"sidebar-open\")\r\n }\r\n\r\n return { showSidebar: !prev.showSidebar }\r\n })\r\n }\r\n\r\n handleLogout = () => {\r\n const { dispatch } = this.props\r\n\r\n dispatch(authActions.logout())\r\n }\r\n\r\n handleSetTheme = () => {\r\n const { theme } = this.props.userTheme\r\n const { dispatch } = this.props\r\n if (isNotNull(theme)) {\r\n const { isDarkMode } = theme\r\n if (isNotNull(isDarkMode)) {\r\n if (isDarkMode)\r\n dispatch(themeActions.saveTheme(false))\r\n else\r\n dispatch(themeActions.saveTheme(true))\r\n }\r\n }\r\n }\r\n\r\n onVersionChangeHandler = (event) => {\r\n const accessToken = JSON.parse(localStorage.getItem(\"profitfarmers.token\"))\r\n const subDomain = {\r\n beta: \"test\",\r\n live: \"staging\"\r\n }\r\n\r\n if (isLiveVersion) {\r\n subDomain.beta = \"beta\"\r\n subDomain.live = \"app\"\r\n }\r\n\r\n if (isNotNull(accessToken) && isNotNull(accessToken.access)) {\r\n const isBeta = event.target.checked\r\n onSetNewState(this, { isBetaVersion: isBeta })\r\n if (isNotNull(isBeta)) {\r\n if (isBeta)\r\n window.location.href = `https://${subDomain.beta}.profitfarmers.com/account/auto-login?token=${accessToken.access.token}`\r\n else\r\n window.location.href = `https://${subDomain.live}.profitfarmers.com/account/auto-login?token=${accessToken.access.token}`\r\n }\r\n }\r\n }\r\n\r\n renderSwitchVersion = () => {\r\n const { isBetaVersion } = this.state\r\n\r\n return (\r\n <>\r\n Hello
: null}\n *\r\n 766 && { show: 200, hide: 1000 })} overlay={\r\n \r\n Enable experimental features.\r\n \r\n Learn more\r\n \r\n \r\n }>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n\r\n render() {\r\n const { page, history, isEmailPromt, } = this.props\r\n\r\n switch (page) {\r\n case pages.login:\r\n default:\r\n return (\r\n ![\"\"](\"/images/brand/full-logo.png\"){kind=logo}
\r\n \r\n \r\n \r\n
\r\n )\r\n\r\n const renderChecklistsItems = () => {\r\n if (isNotNull(progressChecklistTitles)) {\r\n return progressChecklistTitles.map((value, key) => (\r\n {renderTooltipTitle(key)}
\r\n{renderTooltipParagraph(key)}
\r\n\r\n\r\n
\r\n\r\n
\r\n {renderTooltipStepsTitle(key)}
\r\n\r\n\r\n {renderTooltipStepsInner(key)}\r\n
\r\n\r\n \r\n\r\n
\r\n
\r\n How to?
\r\n {renderVideoTutorial(key)}\r\n\r\n {(key === 0 || key === 2) &&\r\n props.changeHandler(ids[key], true)} />\r\n }\r\n\r\n {(key === 1 || key === 3 || key === 4) &&\r\n \r\n {value}\r\n \r\n\r\n \r\n props.messageHandler(e, false)}>\r\n \r\n\r\n {renderTooltipMessages(key)}\r\n \r\n }\r\n >\r\n props.messageHandler(e, true)}>\r\n \r\n \r\n \r\n \r\n }\r\n \r\n {key !== tooltipIndex &&\r\n \r\n {value}\r\n \r\n }\r\n
\r\n ))\r\n }\r\n }\r\n\r\n const renderCheckLists = () => {\r\n if (isNotNull(item) && isNotNull(item.data) && isNotNull(item.data.isStepsCompleted) && !item.data.isStepsCompleted) {\r\n if (isNotNull(item.data.userRequirements) && item.data.userRequirements.length > 0) {\r\n return (\r\n \r\n Get Started \r\n\r\n \r\n \r\n\r\n {renderChecklistsProgressBar()}\r\n \r\n
\r\n \r\n {renderCheckLists()}\r\n
\r\n )\r\n}","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport _ from 'lodash'\r\nimport iziToast from 'izitoast'\r\nimport jQuery from 'jquery'\r\nimport { checkListActions, sidebarActions } from '../../redux/actions'\r\nimport { ChecklistsView } from './ChecklistsView'\r\nimport { Dimension, isNotNull, isNull, onSetNewState } from '../../utils'\r\n\r\nclass Checklists extends React.PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n ids: [],\r\n stepTicked: null,\r\n onLoadVisibility: false\r\n }\r\n this.baseState = this.state\r\n this.mounted = false\r\n }\r\n\r\n componentDidMount() {\r\n this.mounted = true\r\n window.addEventListener('resize', () => Dimension.updateDimensions(this))\r\n const { dispatch } = this.props\r\n const { item, isLoading } = this.props.checkList\r\n let { progress, progressChecklist, progressChecklistMap } = this.props.checkListItems\r\n let prevProgress = progress\r\n let newLists = []\r\n let hasChanges = false\r\n\r\n if (!isLoading &&\r\n isNotNull(item) &&\r\n isNotNull(item.data) &&\r\n isNotNull(item.data.userRequirements)) {\r\n\r\n item.data.userRequirements.forEach((value, key) => {\r\n _.forEach(item.data.userRequirements, e => {\r\n const find = _.find(newLists, n => n === e.checkListId)\r\n if (isNull(find))\r\n newLists.push(e.checkListId)\r\n })\r\n\r\n onSetNewState(this, { ids: newLists })\r\n\r\n if (value.isCompleted && progressChecklist[key] === 0) {\r\n progress += progressChecklistMap[key]\r\n progressChecklist[key] = 1\r\n hasChanges = true\r\n }\r\n })\r\n\r\n progress = (hasChanges) ? progress : prevProgress\r\n if (this.props.checkListItems.progress !== progress)\r\n dispatch(checkListActions.setCheckListItems(progressChecklist, progress))\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (this.mounted === true) {\r\n const { item, isLoading } = this.props.checkList\r\n let { progress, progressChecklist, progressChecklistMap } = this.props.checkListItems\r\n const { isShowMessage } = this.props.checklistStatus\r\n let { stepTicked, onLoadVisibility } = this.state\r\n const { dispatch } = this.props\r\n let prevProgress = progress\r\n let hasChanges = false\r\n let newLists = []\r\n\r\n if (isNotNull(isLoading) &&\r\n !isLoading &&\r\n prevProps.checkList.isLoading &&\r\n isNotNull(item) &&\r\n isNotNull(item.data) &&\r\n isNotNull(item.data.userRequirements)) {\r\n\r\n item.data.userRequirements.forEach((value, key) => {\r\n _.forEach(item.data.userRequirements, e => {\r\n const find = _.find(newLists, n => n === e.checkListId)\r\n if (isNull(find))\r\n newLists.push(e.checkListId)\r\n })\r\n\r\n onSetNewState(this, { ids: newLists })\r\n\r\n if (value.isCompleted && progressChecklist[key] === 0) {\r\n progress += progressChecklistMap[key]\r\n progressChecklist[key] = 1\r\n hasChanges = true\r\n }\r\n })\r\n\r\n progress = (hasChanges) ? progress : prevProgress\r\n if (prevProps.checkListItems.progress !== progress)\r\n dispatch(checkListActions.setCheckListItems(progressChecklist, progress))\r\n }\r\n\r\n if (prevProps.saveCheckList !== this.props.saveCheckList) {\r\n let { loading, checkItem } = this.props.saveCheckList\r\n let { userRequirements } = this.props.checkList.item.data\r\n\r\n if (!loading) {\r\n if (typeof checkItem !== 'undefined' && checkItem !== null && checkItem !== \"\") {\r\n let { isUpdated } = checkItem\r\n\r\n if (typeof isUpdated !== 'undefined' && isUpdated !== null && isUpdated !== \"\") {\r\n if (isUpdated) {\r\n if (typeof userRequirements !== 'undefined' && userRequirements !== null && userRequirements.length > 0) {\r\n let findChecklistItemIndex = _.findIndex(userRequirements, { checkListId: stepTicked })\r\n\r\n if (findChecklistItemIndex !== -1) {\r\n progress += progressChecklistMap[findChecklistItemIndex]\r\n progressChecklist[findChecklistItemIndex] = 1\r\n hasChanges = true\r\n\r\n progress = (hasChanges) ? progress : prevProgress\r\n\r\n if (prevProps.checkListItems.progress !== progress) {\r\n dispatch(checkListActions.setCheckListItems(progressChecklist, progress))\r\n dispatch(checkListActions.getCheckLists())\r\n }\r\n }\r\n }\r\n } else {\r\n if (typeof userRequirements !== 'undefined' && userRequirements !== null && userRequirements.length > 0) {\r\n let findChecklistItemIndex = _.findIndex(userRequirements, { checkListId: stepTicked })\r\n\r\n jQuery(`#custom-inline-checkbox-${findChecklistItemIndex}`).attr('disabled', false)\r\n jQuery(`.custom-control-input.custom1`).attr('disabled', false)\r\n }\r\n\r\n let error = `Error
Please make sure you have BTC balance on your wallet.`\r\n iziToast.error({\r\n position: 'topRight',\r\n class: 'custom-errors',\r\n messageColor: '#6E7885',\r\n message: error,\r\n displayMode: 1,\r\n backgroundColor: 'linear-gradient(90deg, rgba(19, 27, 38, 1) 88%, rgba(185, 63, 95, 0.5) 100%)',\r\n iconUrl: '/images/close-icon.png',\r\n })\r\n }\r\n }\r\n }\r\n } else {\r\n if (typeof userRequirements !== 'undefined' && userRequirements !== null && userRequirements.length > 0) {\r\n let indexOfCheckbox = _.findIndex(userRequirements, { checkListId: stepTicked })\r\n\r\n if (indexOfCheckbox !== -1) {\r\n jQuery(`#custom-inline-checkbox-${indexOfCheckbox}`).attr('disabled', true)\r\n jQuery(`.custom-control-input.custom1`).attr('disabled', true)\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (hasChanges) {\r\n if (!isShowMessage) {\r\n dispatch(checkListActions.messageUpdate(true))\r\n }\r\n }\r\n\r\n if (isShowMessage) {\r\n jQuery(\".message-tooltip.tooltip\").addClass(\"show\")\r\n jQuery(\".message-tooltip.tooltip\").css(\"z-index\", \"500\")\r\n\r\n if (!isLoading) {\r\n jQuery(\".blur-dashboard\").addClass(\"blur\")\r\n jQuery(\".sidelinks\").addClass(\"blur\")\r\n\r\n if (window.innerWidth > 766 && window.innerWidth < 1025) {\r\n if (!onLoadVisibility) {\r\n onLoadVisibility = true\r\n dispatch(sidebarActions.showSidebar(false))\r\n\r\n onSetNewState(this, {\r\n onLoadVisibility\r\n })\r\n }\r\n }\r\n }\r\n } else {\r\n jQuery(\".message-tooltip.tooltip\").removeClass(\"show\")\r\n jQuery(\".message-tooltip.tooltip\").css(\"z-index\", \"-5\")\r\n jQuery(\".blur-dashboard\").removeClass(\"blur\")\r\n jQuery(\".sidelinks\").removeClass(\"blur\")\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n onSetNewState(this, this.baseState)\r\n window.removeEventListener('resize', () => Dimension.updateDimensions(this))\r\n this.mounted = false\r\n }\r\n\r\n onChangeHandler = (id) => {\r\n if (this.mounted) {\r\n const { dispatch } = this.props\r\n dispatch(checkListActions.saveChecklist(id, true))\r\n onSetNewState(this, {\r\n stepTicked: id\r\n })\r\n }\r\n }\r\n\r\n onMessageHandler = (event, isShow) => {\r\n if (this.mounted) {\r\n event.preventDefault()\r\n const { dispatch, checklistStatus } = this.props\r\n if (isNotNull(checklistStatus) && isNotNull(checklistStatus.isShowMessage))\r\n dispatch(checkListActions.messageUpdate(isShow))\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n`.\n * If you wish to change that mapping, you can provide your own.\n * Alternatively, you can use the `component` prop.\n */\n variantMapping: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTypography'\n})(Typography);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport { useFormControl } from '../FormControl';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n cursor: 'pointer',\n // For correct alignment with the text.\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'transparent',\n marginLeft: -11,\n marginRight: 16,\n // used for row presentation of radio/checkbox\n '&$disabled': {\n cursor: 'default'\n }\n },\n\n /* Styles applied to the root element if `labelPlacement=\"start\"`. */\n labelPlacementStart: {\n flexDirection: 'row-reverse',\n marginLeft: 16,\n // used for row presentation of radio/checkbox\n marginRight: -11\n },\n\n /* Styles applied to the root element if `labelPlacement=\"top\"`. */\n labelPlacementTop: {\n flexDirection: 'column-reverse',\n marginLeft: 16\n },\n\n /* Styles applied to the root element if `labelPlacement=\"bottom\"`. */\n labelPlacementBottom: {\n flexDirection: 'column',\n marginLeft: 16\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the label's Typography component. */\n label: {\n '&$disabled': {\n color: theme.palette.text.disabled\n }\n }\n };\n};\n/**\n * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.\n * Use this component if you want to display an extra label.\n */\n\nvar FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(props, ref) {\n var checked = props.checked,\n classes = props.classes,\n className = props.className,\n control = props.control,\n disabledProp = props.disabled,\n inputRef = props.inputRef,\n label = props.label,\n _props$labelPlacement = props.labelPlacement,\n labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,\n name = props.name,\n onChange = props.onChange,\n value = props.value,\n other = _objectWithoutProperties(props, [\"checked\", \"classes\", \"className\", \"control\", \"disabled\", \"inputRef\", \"label\", \"labelPlacement\", \"name\", \"onChange\", \"value\"]);\n\n var muiFormControl = useFormControl();\n var disabled = disabledProp;\n\n if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {\n disabled = control.props.disabled;\n }\n\n if (typeof disabled === 'undefined' && muiFormControl) {\n disabled = muiFormControl.disabled;\n }\n\n var controlProps = {\n disabled: disabled\n };\n ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {\n if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {\n controlProps[key] = props[key];\n }\n });\n return /*#__PURE__*/React.createElement(\"label\", _extends({\n className: clsx(classes.root, className, labelPlacement !== 'end' && classes[\"labelPlacement\".concat(capitalize(labelPlacement))], disabled && classes.disabled),\n ref: ref\n }, other), /*#__PURE__*/React.cloneElement(control, controlProps), /*#__PURE__*/React.createElement(Typography, {\n component: \"span\",\n className: clsx(classes.label, disabled && classes.disabled)\n }, label));\n});\nprocess.env.NODE_ENV !== \"production\" ? FormControlLabel.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, the component appears selected.\n */\n checked: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.\n */\n control: PropTypes.element.isRequired,\n\n /**\n * If `true`, the control will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /**\n * The text to be used in an enclosing label element.\n */\n label: PropTypes.node,\n\n /**\n * The position of the label.\n */\n labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),\n\n /**\n * @ignore\n */\n name: PropTypes.string,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * The value of the component.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiFormControlLabel'\n})(FormControlLabel);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport { alpha } from '../styles/colorManipulator';\nimport ButtonBase from '../ButtonBase';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n textAlign: 'center',\n flex: '0 0 auto',\n fontSize: theme.typography.pxToRem(24),\n padding: 12,\n borderRadius: '50%',\n overflow: 'visible',\n // Explicitly set the default value to solve a bug on IE 11.\n color: theme.palette.action.active,\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shortest\n }),\n '&:hover': {\n backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n },\n '&$disabled': {\n backgroundColor: 'transparent',\n color: theme.palette.action.disabled\n }\n },\n\n /* Styles applied to the root element if `edge=\"start\"`. */\n edgeStart: {\n marginLeft: -12,\n '$sizeSmall&': {\n marginLeft: -3\n }\n },\n\n /* Styles applied to the root element if `edge=\"end\"`. */\n edgeEnd: {\n marginRight: -12,\n '$sizeSmall&': {\n marginRight: -3\n }\n },\n\n /* Styles applied to the root element if `color=\"inherit\"`. */\n colorInherit: {\n color: 'inherit'\n },\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\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\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\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\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n padding: 3,\n fontSize: theme.typography.pxToRem(18)\n },\n\n /* Styles applied to the children container element. */\n label: {\n width: '100%',\n display: 'flex',\n alignItems: 'inherit',\n justifyContent: 'inherit'\n }\n };\n};\n/**\n * Refer to the [Icons](/components/icons/) section of the documentation\n * regarding the available icon options.\n */\n\nvar IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {\n var _props$edge = props.edge,\n edge = _props$edge === void 0 ? false : _props$edge,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'default' : _props$color,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableFocusRi = props.disableFocusRipple,\n disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"edge\", \"children\", \"classes\", \"className\", \"color\", \"disabled\", \"disableFocusRipple\", \"size\"]);\n\n return /*#__PURE__*/React.createElement(ButtonBase, _extends({\n className: clsx(classes.root, className, color !== 'default' && classes[\"color\".concat(capitalize(color))], disabled && classes.disabled, size === \"small\" && classes[\"size\".concat(capitalize(size))], {\n 'start': classes.edgeStart,\n 'end': classes.edgeEnd\n }[edge]),\n centerRipple: true,\n focusRipple: !disableFocusRipple,\n disabled: disabled,\n ref: ref\n }, other), /*#__PURE__*/React.createElement(\"span\", {\n className: classes.label\n }, children));\n});\nprocess.env.NODE_ENV !== \"production\" ? IconButton.propTypes = {\n /**\n * The icon element.\n */\n children: chainPropTypes(PropTypes.node, function (props) {\n var found = React.Children.toArray(props.children).some(function (child) {\n return /*#__PURE__*/React.isValidElement(child) && child.props.onClick;\n });\n\n if (found) {\n return new Error(['Material-UI: You are providing an onClick event listener ' + 'to a child of a button element.', 'Firefox will never trigger the event.', 'You should move the onClick listener to the parent button element.', 'https://github.com/mui-org/material-ui/issues/13957'].join('\\n'));\n }\n\n return null;\n }),\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),\n\n /**\n * If `true`, the button will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the keyboard focus ripple will be disabled.\n */\n disableFocusRipple: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * If given, uses a negative margin to counteract the padding on one\n * side (this is often helpful for aligning the left or right\n * side of the icon with content above or below, without ruining the border\n * size and shape).\n */\n edge: PropTypes.oneOf(['start', 'end', false]),\n\n /**\n * The size of the button.\n * `small` is equivalent to the dense button styling.\n */\n size: PropTypes.oneOf(['small', 'medium'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiIconButton'\n})(IconButton);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport useControlled from '../utils/useControlled';\nimport useFormControl from '../FormControl/useFormControl';\nimport withStyles from '../styles/withStyles';\nimport IconButton from '../IconButton';\nexport var styles = {\n root: {\n padding: 9\n },\n checked: {},\n disabled: {},\n input: {\n cursor: 'inherit',\n position: 'absolute',\n opacity: 0,\n width: '100%',\n height: '100%',\n top: 0,\n left: 0,\n margin: 0,\n padding: 0,\n zIndex: 1\n }\n};\n/**\n * @ignore - internal component.\n */\n\nvar SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {\n var autoFocus = props.autoFocus,\n checkedProp = props.checked,\n checkedIcon = props.checkedIcon,\n classes = props.classes,\n className = props.className,\n defaultChecked = props.defaultChecked,\n disabledProp = props.disabled,\n icon = props.icon,\n id = props.id,\n inputProps = props.inputProps,\n inputRef = props.inputRef,\n name = props.name,\n onBlur = props.onBlur,\n onChange = props.onChange,\n onFocus = props.onFocus,\n readOnly = props.readOnly,\n required = props.required,\n tabIndex = props.tabIndex,\n type = props.type,\n value = props.value,\n other = _objectWithoutProperties(props, [\"autoFocus\", \"checked\", \"checkedIcon\", \"classes\", \"className\", \"defaultChecked\", \"disabled\", \"icon\", \"id\", \"inputProps\", \"inputRef\", \"name\", \"onBlur\", \"onChange\", \"onFocus\", \"readOnly\", \"required\", \"tabIndex\", \"type\", \"value\"]);\n\n var _useControlled = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: 'SwitchBase',\n state: 'checked'\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n checked = _useControlled2[0],\n setCheckedState = _useControlled2[1];\n\n var muiFormControl = useFormControl();\n\n var handleFocus = function handleFocus(event) {\n if (onFocus) {\n onFocus(event);\n }\n\n if (muiFormControl && muiFormControl.onFocus) {\n muiFormControl.onFocus(event);\n }\n };\n\n var handleBlur = function handleBlur(event) {\n if (onBlur) {\n onBlur(event);\n }\n\n if (muiFormControl && muiFormControl.onBlur) {\n muiFormControl.onBlur(event);\n }\n };\n\n var handleInputChange = function handleInputChange(event) {\n var newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n if (onChange) {\n // TODO v5: remove the second argument.\n onChange(event, newChecked);\n }\n };\n\n var disabled = disabledProp;\n\n if (muiFormControl) {\n if (typeof disabled === 'undefined') {\n disabled = muiFormControl.disabled;\n }\n }\n\n var hasLabelFor = type === 'checkbox' || type === 'radio';\n return /*#__PURE__*/React.createElement(IconButton, _extends({\n component: \"span\",\n className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),\n disabled: disabled,\n tabIndex: null,\n role: undefined,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ref: ref\n }, other), /*#__PURE__*/React.createElement(\"input\", _extends({\n autoFocus: autoFocus,\n checked: checkedProp,\n defaultChecked: defaultChecked,\n className: classes.input,\n disabled: disabled,\n id: hasLabelFor && id,\n name: name,\n onChange: handleInputChange,\n readOnly: readOnly,\n ref: inputRef,\n required: required,\n tabIndex: tabIndex,\n type: type,\n value: value\n }, inputProps)), checked ? checkedIcon : icon);\n}); // NB: If changed, please update Checkbox, Switch and Radio\n// so that the API documentation is updated.\n\nprocess.env.NODE_ENV !== \"production\" ? SwitchBase.propTypes = {\n /**\n * If `true`, the `input` element will be focused during the first mount.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: PropTypes.node.isRequired,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * @ignore\n */\n defaultChecked: PropTypes.bool,\n\n /**\n * If `true`, the switch will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: PropTypes.node.isRequired,\n\n /**\n * The id of the `input` element.\n */\n id: PropTypes.string,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /*\n * @ignore\n */\n name: PropTypes.string,\n\n /**\n * @ignore\n */\n onBlur: PropTypes.func,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * @ignore\n */\n onFocus: PropTypes.func,\n\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly: PropTypes.bool,\n\n /**\n * If `true`, the `input` element will be required.\n */\n required: PropTypes.bool,\n\n /**\n * @ignore\n */\n tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * The input component prop `type`.\n */\n type: PropTypes.string.isRequired,\n\n /**\n * The value of the component.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateSwitchBase'\n})(SwitchBase);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\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 userSelect: 'none',\n width: '1em',\n height: '1em',\n display: 'inline-block',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: theme.typography.pxToRem(24),\n transition: theme.transitions.create('fill', {\n duration: theme.transitions.duration.shorter\n })\n },\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n color: theme.palette.primary.main\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n color: theme.palette.secondary.main\n },\n\n /* Styles applied to the root element if `color=\"action\"`. */\n colorAction: {\n color: theme.palette.action.active\n },\n\n /* Styles applied to the root element if `color=\"error\"`. */\n colorError: {\n color: theme.palette.error.main\n },\n\n /* Styles applied to the root element if `color=\"disabled\"`. */\n colorDisabled: {\n color: theme.palette.action.disabled\n },\n\n /* Styles applied to the root element if `fontSize=\"inherit\"`. */\n fontSizeInherit: {\n fontSize: 'inherit'\n },\n\n /* Styles applied to the root element if `fontSize=\"small\"`. */\n fontSizeSmall: {\n fontSize: theme.typography.pxToRem(20)\n },\n\n /* Styles applied to the root element if `fontSize=\"large\"`. */\n fontSizeLarge: {\n fontSize: theme.typography.pxToRem(35)\n }\n };\n};\nvar SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'inherit' : _props$color,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'svg' : _props$component,\n _props$fontSize = props.fontSize,\n fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,\n htmlColor = props.htmlColor,\n titleAccess = props.titleAccess,\n _props$viewBox = props.viewBox,\n viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"color\", \"component\", \"fontSize\", \"htmlColor\", \"titleAccess\", \"viewBox\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, color !== 'inherit' && classes[\"color\".concat(capitalize(color))], fontSize !== 'default' && fontSize !== 'medium' && classes[\"fontSize\".concat(capitalize(fontSize))]),\n focusable: \"false\",\n viewBox: viewBox,\n color: htmlColor,\n \"aria-hidden\": titleAccess ? undefined : true,\n role: titleAccess ? 'img' : undefined,\n ref: ref\n }, other), children, titleAccess ? /*#__PURE__*/React.createElement(\"title\", null, titleAccess) : null);\n});\nprocess.env.NODE_ENV !== \"production\" ? SvgIcon.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Node passed into the SVG element.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * You can use the `htmlColor` prop to apply a color attribute to the SVG element.\n */\n color: PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']),\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.\n */\n fontSize: chainPropTypes(PropTypes.oneOf(['default', 'inherit', 'large', 'medium', 'small']), function (props) {\n var fontSize = props.fontSize;\n\n if (fontSize === 'default') {\n throw new Error('Material-UI: `fontSize=\"default\"` is deprecated. Use `fontSize=\"medium\"` instead.');\n }\n\n return null;\n }),\n\n /**\n * Applies a color attribute to the SVG element.\n */\n htmlColor: PropTypes.string,\n\n /**\n * The shape-rendering attribute. The behavior of the different options is described on the\n * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).\n * If you are having issues with blurry icons you should investigate this property.\n */\n shapeRendering: PropTypes.string,\n\n /**\n * Provides a human-readable title for the element that contains it.\n * https://www.w3.org/TR/SVG-access/#Equivalent\n */\n titleAccess: PropTypes.string,\n\n /**\n * Allows you to redefine what the coordinates without units mean inside an SVG element.\n * For example, if the SVG element is 500 (width) by 200 (height),\n * and you pass viewBox=\"0 0 50 20\",\n * this means that the coordinates inside the SVG will go from the top left corner (0,0)\n * to bottom right (50,20) and each unit will be worth 10px.\n */\n viewBox: PropTypes.string\n} : void 0;\nSvgIcon.muiName = 'SvgIcon';\nexport default withStyles(styles, {\n name: 'MuiSvgIcon'\n})(SvgIcon);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport SvgIcon from '../SvgIcon';\n/**\n * Private module reserved for @material-ui/x packages.\n */\n\nexport default function createSvgIcon(path, displayName) {\n var Component = function Component(props, ref) {\n return /*#__PURE__*/React.createElement(SvgIcon, _extends({\n ref: ref\n }, props), path);\n };\n\n if (process.env.NODE_ENV !== 'production') {\n // Need to set `displayName` on the inner component for React.memo.\n // React prior to 16.14 ignores `displayName` on the wrapper.\n Component.displayName = \"\".concat(displayName, \"Icon\");\n }\n\n Component.muiName = SvgIcon.muiName;\n return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));\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: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\n}), 'RadioButtonUnchecked');","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: \"M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z\"\n}), 'RadioButtonChecked');","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';\nimport RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n root: {\n position: 'relative',\n display: 'flex',\n '&$checked $layer': {\n transform: 'scale(1)',\n transition: theme.transitions.create('transform', {\n easing: theme.transitions.easing.easeOut,\n duration: theme.transitions.duration.shortest\n })\n }\n },\n layer: {\n left: 0,\n position: 'absolute',\n transform: 'scale(0)',\n transition: theme.transitions.create('transform', {\n easing: theme.transitions.easing.easeIn,\n duration: theme.transitions.duration.shortest\n })\n },\n checked: {}\n };\n};\n/**\n * @ignore - internal component.\n */\n\nfunction RadioButtonIcon(props) {\n var checked = props.checked,\n classes = props.classes,\n fontSize = props.fontSize;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: clsx(classes.root, checked && classes.checked)\n }, /*#__PURE__*/React.createElement(RadioButtonUncheckedIcon, {\n fontSize: fontSize\n }), /*#__PURE__*/React.createElement(RadioButtonCheckedIcon, {\n fontSize: fontSize,\n className: classes.layer\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? RadioButtonIcon.propTypes = {\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * The size of the radio.\n * `small` is equivalent to the dense radio styling.\n */\n fontSize: PropTypes.oneOf(['small', 'medium'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateRadioButtonIcon'\n})(RadioButtonIcon);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport SwitchBase from '../internal/SwitchBase';\nimport RadioButtonIcon from './RadioButtonIcon';\nimport { alpha } from '../styles/colorManipulator';\nimport capitalize from '../utils/capitalize';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport withStyles from '../styles/withStyles';\nimport useRadioGroup from '../RadioGroup/useRadioGroup';\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\n /* Pseudo-class applied to the root element if `checked={true}`. */\n checked: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\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\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(RadioButtonIcon, {\n checked: true\n});\nvar defaultIcon = /*#__PURE__*/React.createElement(RadioButtonIcon, null);\nvar Radio = /*#__PURE__*/React.forwardRef(function Radio(props, ref) {\n var checkedProp = props.checked,\n classes = props.classes,\n _props$color = props.color,\n color = _props$color === void 0 ? 'secondary' : _props$color,\n nameProp = props.name,\n onChangeProp = props.onChange,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"checked\", \"classes\", \"color\", \"name\", \"onChange\", \"size\"]);\n\n var radioGroup = useRadioGroup();\n var checked = checkedProp;\n var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);\n var name = nameProp;\n\n if (radioGroup) {\n if (typeof checked === 'undefined') {\n checked = radioGroup.value === props.value;\n }\n\n if (typeof name === 'undefined') {\n name = radioGroup.name;\n }\n }\n\n return /*#__PURE__*/React.createElement(SwitchBase, _extends({\n color: color,\n type: \"radio\",\n icon: /*#__PURE__*/React.cloneElement(defaultIcon, {\n fontSize: size === 'small' ? 'small' : 'medium'\n }),\n checkedIcon: /*#__PURE__*/React.cloneElement(defaultCheckedIcon, {\n fontSize: size === 'small' ? 'small' : 'medium'\n }),\n classes: {\n root: clsx(classes.root, classes[\"color\".concat(capitalize(color))]),\n checked: classes.checked,\n disabled: classes.disabled\n },\n name: name,\n checked: checked,\n onChange: onChange,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Radio.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'primary', 'secondary']),\n\n /**\n * If `true`, the radio will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: PropTypes.node,\n\n /**\n * The id of the `input` element.\n */\n id: PropTypes.string,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /**\n * Name attribute of the `input` element.\n */\n name: PropTypes.string,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new value by accessing `event.target.value` (string).\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * If `true`, the `input` element will be required.\n */\n required: PropTypes.bool,\n\n /**\n * The size of the radio.\n * `small` is equivalent to the dense radio styling.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * The value of the component. The DOM API casts this to a string.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiRadio'\n})(Radio);","import * as React from 'react';\nimport RadioGroupContext from './RadioGroupContext';\nexport default function useRadioGroup() {\n return React.useContext(RadioGroupContext);\n}","/**\n * Safe chained function\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n *\n * @param {function} functions to chain\n * @returns {function|null}\n */\nexport default function createChainedFunction() {\n for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {\n funcs[_key] = arguments[_key];\n }\n\n return funcs.reduce(function (acc, func) {\n if (func == null) {\n return acc;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof func !== 'function') {\n console.error('Material-UI: Invalid Argument Type, must only provide functions, undefined, or null.');\n }\n }\n\n return function chainedFunction() {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n acc.apply(this, args);\n func.apply(this, args);\n };\n }, function () {});\n}","import styled from 'styled-components';\r\n\r\nexport const SurveyBody = styled.div`\r\n padding: 30px 40px !important;\r\n \r\n\r\n h4 {\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 1.8;\r\n color: #adc4df;\r\n }\r\n`\r\n\r\nexport const SurveyFooter = styled.div`\r\n padding: 16px !important;\r\n\r\n button {\r\n background-color: #27323e !important;\r\n border: 1px solid #27323e !important;\r\n\r\n &.btn-submit {\r\n background-color: #993956cc !important;\r\n border: 1px solid #993956 !important;\r\n\r\n &:hover:enabled {\r\n background-color: #993956 !important;\r\n border-color: #993956 !important;\r\n box-shadow: none;\r\n }\r\n }\r\n\r\n &:disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &:hover:enabled {\r\n background-color: #0E1824 !important;\r\n border-color: #0E1824 !important;\r\n box-shadow: none;\r\n }\r\n }\r\n`\r\n\r\nexport const SurveyQuestionWrapper = styled.div`\r\n .option-wrapper {\r\n width: 100%;\r\n padding: 10px 10px 0 20px;\r\n max-height: 60vh;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n\r\n &::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n &::-webkit-scrollbar-track {\r\n -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background-color: #39506b;\r\n outline: 1px solid #383e4e;\r\n /* border-radius: 10px; */\r\n }\r\n\r\n .MuiFormGroup-root {\r\n label {\r\n margin-bottom: 0;\r\n }\r\n\r\n .MuiIconButton-colorSecondary {\r\n &.Mui-checked {\r\n color: #16b46c !important;\r\n }\r\n\r\n &:hover {\r\n background-color: rgb(22 180 108 / 4%) !important;\r\n }\r\n }\r\n\r\n .MuiTypography-body1 {\r\n letter-spacing: 1.5px;\r\n }\r\n \r\n .survey-input-wrapper {\r\n display: flex;\r\n align-items: center;\r\n column-gap: 15px;\r\n padding-left: 32px;\r\n margin-bottom: 20px;\r\n font-size: 14px;\r\n\r\n label {\r\n margin-bottom: 0px;\r\n }\r\n\r\n input {\r\n min-width: 250px;\r\n }\r\n\r\n textarea {\r\n width: 100%;\r\n }\r\n\r\n input, textarea {\r\n background-color: #17212D !important;\r\n border: 1px solid #39506b !important;\r\n border-radius: 2px;\r\n color: #fff;\r\n letter-spacing: 1.5px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .billing {\r\n p {\r\n margin-bottom: 0%;\r\n }\r\n }\r\n`\r\n\r\nexport const SurveyQuestion = styled.h4`\r\n\r\n`\r\n\r\nexport const SurveyButtonWrapper = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n width: 100%;\r\n`\r\n\r\nexport const ButtonContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 10px;\r\n\r\n a {\r\n color: #7a96b7;\r\n }\r\n`\r\n\r\nexport const SurveyWrapper = styled.div`\r\n overflow: hidden;\r\n letter-spacing: 1.5px;\r\n\r\n .modal-header {\r\n border-bottom: 8px solid #39506b !important;\r\n padding: 60px;\r\n position: relative;\r\n align-items: center;\r\n\r\n .title {\r\n display: block;\r\n width: 100%;\r\n text-align: center;\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n @media screen and (min-width: 320px) and (max-width: 766px) {\r\n .modal-header {\r\n .title {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n .modal-body {\r\n padding: 16px !important;\r\n\r\n h4 {\r\n font-size: 14px;\r\n }\r\n\r\n .option-wrapper {\r\n padding: 10px 0;\r\n\r\n .MuiFormGroup-root {\r\n .MuiTypography-body1 {\r\n font-size: 12px;\r\n }\r\n\r\n .survey-input-wrapper{\r\n flex-direction: column;\r\n align-items: initial;\r\n row-gap: 10px;\r\n\r\n input {\r\n min-width: auto;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .modal-footer {\r\n button {\r\n width: 100%;\r\n }\r\n\r\n ${SurveyButtonWrapper} {\r\n flex-direction: column;\r\n row-gap: 10px;\r\n width: 100%;\r\n\r\n a {\r\n text-align: center;\r\n }\r\n\r\n ${ButtonContainer} {\r\n width: 100%;\r\n }\r\n }\r\n }\r\n }\r\n`","import React, { useState } from 'react'\r\nimport {\r\n RadioGroup, Radio, FormControl,\r\n FormControlLabel\r\n} from '@material-ui/core'\r\nimport { Modal, Button, SafeAnchor } from 'react-bootstrap'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faTimes } from '@fortawesome/free-solid-svg-icons'\r\nimport _ from 'lodash'\r\nimport {\r\n SurveyWrapper, SurveyBody, SurveyFooter,\r\n SurveyQuestionWrapper, SurveyQuestion, SurveyButtonWrapper,\r\n ButtonContainer\r\n} from './styled_components'\r\nimport { CloseButton } from '../../styles'\r\nimport { getSurveyQuestion } from '../../utils/data'\r\nimport { isNotNull, isNull } from '../../utils'\r\n\r\nexport const CustomSurvey = (props) => {\r\n const { title, data, nextBillingDate, customerId, hasClose, isCancel } = props\r\n const steps = {\r\n Q1: \"q1\",\r\n Q2: \"q2\",\r\n Q3: \"q3\"\r\n }\r\n const withInputFields = {\r\n Q1: {\r\n option1: 4,\r\n option2: 10\r\n },\r\n Q2: {\r\n option1: 19\r\n }\r\n }\r\n const [inputAnswers, setInputAnswers] = useState([\r\n {\r\n questionKey: steps.Q1,\r\n answerKey: null,\r\n answerValue: \"\"\r\n },\r\n {\r\n questionKey: steps.Q2,\r\n answerKey: null,\r\n answerValue: \"\"\r\n }\r\n ])\r\n const [timer, setTimer] = useState(null)\r\n\r\n const onChangeHandler = (event, questionKey) => {\r\n const targetValue = event.target.value\r\n setInputAnswers(\r\n inputAnswers.map((answers) => {\r\n var temp = Object.assign({}, answers)\r\n if (temp.questionKey === questionKey &&\r\n parseInt(temp.answerKey) !== parseInt(targetValue)) {\r\n temp.answerValue = \"\"\r\n }\r\n return temp\r\n })\r\n )\r\n if (timer) {\r\n clearTimeout(timer)\r\n setTimer(null)\r\n }\r\n const data = {\r\n key: questionKey,\r\n answer: {\r\n key: targetValue,\r\n value: onFindSurveyValue(questionKey, targetValue),\r\n value2: \"\"\r\n }\r\n }\r\n props.updateSurvey(data)\r\n }\r\n\r\n const onFindSurveyValue = (questionKey, optionKey) => {\r\n if (isNotNull(questionKey) &&\r\n isNotNull(optionKey) &&\r\n isNotNull(data) &&\r\n isNotNull(data.data) &&\r\n data.data.length > 0) {\r\n\r\n const findQuestion = _.find(data.data, q => q.key === questionKey)\r\n if (isNotNull(findQuestion) &&\r\n isNotNull(findQuestion.options) &&\r\n findQuestion.options.length > 0) {\r\n\r\n const findOption = _.find(findQuestion.options, q => q.key === parseInt(optionKey))\r\n if (isNotNull(findOption))\r\n return findOption.value\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n const onStepHandler = (step) => {\r\n if (isNotNull(step))\r\n props.updateStep(step)\r\n }\r\n\r\n const onInputChangeHandler = (event, selectedValue, questionKey) => {\r\n setInputAnswers(\r\n inputAnswers.map((answers) => {\r\n var temp = Object.assign({}, answers)\r\n if (temp.questionKey === questionKey) {\r\n temp.answerValue = event.target.value\r\n temp.answerKey = selectedValue\r\n }\r\n return temp\r\n })\r\n )\r\n\r\n if (timer) {\r\n clearTimeout(timer)\r\n setTimer(null)\r\n }\r\n setTimer(\r\n setTimeout(() => {\r\n const data = {\r\n key: questionKey,\r\n answerKey: selectedValue,\r\n value2: event.target.value\r\n }\r\n props.updateAnswer(data)\r\n }, 800)\r\n )\r\n }\r\n\r\n const onSubmit = (surveyAnswers) => {\r\n if (isNotNull(surveyAnswers) && surveyAnswers.length > 0) {\r\n const requestData = {\r\n customerId,\r\n q1: \"\",\r\n q1Answer1: \"\",\r\n q1Answer2: \"\",\r\n q2: \"\",\r\n q2Answer1: \"\",\r\n q2Answer2: \"\",\r\n q3: \"\",\r\n q3Answer1: \"\"\r\n }\r\n\r\n surveyAnswers.forEach(survey => {\r\n if (isNotNull(survey) && isNotNull(survey.key)) {\r\n if (survey.key === steps.Q1) {\r\n requestData.q1 = getSurveyQuestion(steps.Q1)\r\n requestData.q1Answer1 = survey.value\r\n requestData.q1Answer2 = survey.value2\r\n }\r\n\r\n if (survey.key === steps.Q2) {\r\n requestData.q2 = getSurveyQuestion(steps.Q2)\r\n requestData.q2Answer1 = survey.value\r\n requestData.q2Answer2 = survey.value2\r\n }\r\n\r\n if (survey.key === steps.Q3) {\r\n requestData.q3 = \"If we fixed this would you consider signing up again?\"\r\n requestData.q3Answer1 = survey.value\r\n }\r\n }\r\n })\r\n\r\n //requestData.q3 = `You told us your main reason for leaving was (${isNotNull(requestData.q1Answer2) ? requestData.q1Answer2 : requestData.q1Answer1}) and that if you could change one thing about ProfitFarmers it would be (${isNotNull(requestData.q2Answer2) ? requestData.q2Answer2 : requestData.q2Answer1}) If we fixed this would you consider signing up again?`\r\n\r\n props.onSubmit(requestData)\r\n }\r\n }\r\n\r\n const renderSurveyQuestion = (survey) => {\r\n const onGetAnswers = (step, answers) => {\r\n if (isNotNull(step) && isNotNull(answers) && answers.length > 0) {\r\n const find = _.find(answers, q => q.key === step)\r\n if (isNotNull(find) && isNotNull(find.value)) {\r\n\r\n const answer = (\r\n find.key === steps.Q1 &&\r\n (\r\n parseInt(find.answerKey) === withInputFields.Q1.option1 ||\r\n parseInt(find.answerKey) === withInputFields.Q1.option2\r\n )\r\n ) || (\r\n find.key === steps.Q2 &&\r\n parseInt(find.answerKey) === withInputFields.Q2.option1\r\n )\r\n ? parseInt(find.answerKey) === withInputFields.Q1.option1\r\n ? `${find.value} which is ${find.value2}`\r\n : find.value2\r\n : find.value\r\n\r\n return (\r\n <>\r\n ({answer}) \r\n \r\n )\r\n }\r\n }\r\n }\r\n\r\n const onSetQuestionHandler = (questionNumber, value, answers) => {\r\n let isQuestionDisplay = true\r\n\r\n if (isNotNull(answers)) {\r\n const find = _.find(answers, q => q.key === steps.Q2)\r\n if (isNotNull(find) && isNotNull(find.value) && isNotNull(find.answerKey) && find.answerKey === 1)\r\n isQuestionDisplay = false\r\n }\r\n\r\n switch (value.key) {\r\n case steps.Q1:\r\n return `${value.question}`\r\n case steps.Q2:\r\n return `${value.question}`\r\n case steps.Q3:\r\n return (\r\n <>\r\n You told us your main reason for leaving was {onGetAnswers(steps.Q1, answers)}\r\n {isQuestionDisplay &&\r\n <>and that if you could change one thing about ProfitFarmers it would be {onGetAnswers(steps.Q2, answers)}\r\n }\r\n
If we fixed this would you consider signing up again?\r\n \r\n )\r\n default:\r\n return null\r\n }\r\n }\r\n\r\n if (isNotNull(survey) &&\r\n isNotNull(survey.data) &&\r\n isNotNull(survey.step) &&\r\n isNotNull(survey.data) &&\r\n survey.data.length > 0) {\r\n\r\n return survey.data.map((value, key) => {\r\n if (value.key === survey.step) {\r\n const selectedValue = isNotNull(value.answer) && isNotNull(value.answer.key) ? value.answer.key : null\r\n return (\r\n \r\n {onSetQuestionHandler(`Q${key + 1}.`, value, survey.answers)} \r\n \r\n onChangeHandler(e, value.key)}>\r\n {renderOptions(value.options, selectedValue, value.key)}\r\n \r\n \r\n {value.key === steps.Q3 &&\r\n \r\n \r\n If you cancel your subscription today, your account will stay active until the end of the billing cycle on \r\n {isNotNull(nextBillingDate) ? nextBillingDate : \"\"}, and your account will be locked.\r\n
\r\n \r\n }\r\n \r\n )\r\n } else\r\n return null\r\n })\r\n }\r\n }\r\n\r\n const renderOptions = (options, selectedValue, questionKey) => {\r\n\r\n const renderTextField = (currentKey, selectedValue, questionKey) => {\r\n if (isNotNull(currentKey) &&\r\n isNotNull(questionKey) &&\r\n isNotNull(selectedValue) &&\r\n parseInt(selectedValue) === currentKey) {\r\n selectedValue = parseInt(selectedValue)\r\n const find = _.find(inputAnswers, q => q.questionKey === questionKey)\r\n if (questionKey === steps.Q1 && selectedValue === withInputFields.Q1.option1 && isNotNull(find)) {\r\n return (\r\n \r\n \r\n onInputChangeHandler(e, selectedValue, questionKey)} />\r\n \r\n )\r\n }\r\n\r\n\r\n if (((selectedValue === withInputFields.Q1.option2 && questionKey === steps.Q1) ||\r\n (selectedValue === withInputFields.Q2.option1 && questionKey === steps.Q2)) && isNotNull(find)) {\r\n return (\r\n \r\n
\r\n
\r\n }\r\n \r\n If you cancel your subscription today, your account will stay active until the end of the billing cycle on \r\n {isNotNull(nextBillingDate) ? nextBillingDate : \"\"}, and your account will be locked.\r\n
\r\n