\n
\n );\n};\n\nexport default PoweredBy;\n","var _path, _path2;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoBack(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 16l-6-6 6-6\",\n stroke: \"#fff\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20 21v-7a4 4 0 00-4-4H5\",\n stroke: \"#fff\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoBack);\nexport default __webpack_public_path__ + \"static/media/ico-back.8011dc42.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoHome(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3 8.99919L12 1.99919L21 8.99919V19.9992C21 20.5296 20.7893 21.0383 20.4142 21.4134C20.0391 21.7885 19.5304 21.9992 19 21.9992H5C4.46957 21.9992 3.96086 21.7885 3.58579 21.4134C3.21071 21.0383 3 20.5296 3 19.9992V8.99919Z\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.00024 22.0005V12.0005H15.0002V22.0005\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoHome);\nexport default __webpack_public_path__ + \"static/media/ico-home.179ee6b7.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoBell(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.73 21a2 2 0 01-3.46 0M22 17H2a3 3 0 003-3V9a7 7 0 1114 0v5a3 3 0 003 3z\",\n stroke: \"#fff\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoBell);\nexport default __webpack_public_path__ + \"static/media/ico-bell.20c1dfb2.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoMusic(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.5 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM17.5 18a2.5 2.5 0 100-5 2.5 2.5 0 000 5z\",\n stroke: \"#fff\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 16.999v-12l12-2v12\",\n stroke: \"#fff\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoMusic);\nexport default __webpack_public_path__ + \"static/media/ico-music.57f14445.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoSupport(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 13.999a2 2 0 01-2 2H5l-4 4v-16a2 2 0 012-2h14a2 2 0 012 2v10z\",\n stroke: \"#fff\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoSupport);\nexport default __webpack_public_path__ + \"static/media/ico-support.09c90000.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoProfile(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.00024 18.9988C6.64024 16.7988 7.84024 15.9988 9.22024 15.9988H15.7402C17.1202 15.9988 18.3202 16.7988 18.9602 18.9988\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.0002 12.9998C13.6571 12.9998 15.0002 11.6566 15.0002 9.99976C15.0002 8.3429 13.6571 6.99976 12.0002 6.99976C10.3434 6.99976 9.00024 8.3429 9.00024 9.99976C9.00024 11.6566 10.3434 12.9998 12.0002 12.9998Z\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.9998 21.9991C17.5226 21.9991 21.9998 17.522 21.9998 11.9991C21.9998 6.47627 17.5226 1.99911 11.9998 1.99911C6.47691 1.99911 1.99976 6.47627 1.99976 11.9991C1.99976 17.522 6.47691 21.9991 11.9998 21.9991Z\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoProfile);\nexport default __webpack_public_path__ + \"static/media/ico-profile.08476265.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoDevices(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V4C20 2.89543 19.1046 2 18 2Z\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 18C14.2091 18 16 16.2091 16 14C16 11.7909 14.2091 10 12 10C9.79086 10 8 11.7909 8 14C8 16.2091 9.79086 18 12 18Z\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 6H12.01\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoDevices);\nexport default __webpack_public_path__ + \"static/media/ico-devices.cf1dfa1e.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgIcoX(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17 1L1 17\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1 1L17 17\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcoX);\nexport default __webpack_public_path__ + \"static/media/ico-x.36ab7052.svg\";\nexport { ForwardRef as ReactComponent };","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const TOGGLE_SERVICE_TYPE = gql`\n mutation toggleServiceType($serviceType: String!) {\n toggleServiceType(serviceType: $serviceType) {\n id\n defaultServiceType\n }\n }\n`;\n","import { gql } from '@apollo/client';\n\nexport const UPDATE_DEVICE_PLAYLIST = gql`\n mutation UpdateAudioDevicePlaylistMutation(\n $deviceId: String!\n $devicePlayType: _devicePlayType!\n $devicePlayTypeId: String!\n ) {\n updateAudioDevicePlaylist(\n deviceId: $deviceId\n devicePlayType: $devicePlayType\n devicePlayTypeId: $devicePlayTypeId\n ) {\n id\n currentPlaylistId\n currentSceneId\n }\n }\n`;\n","/**\n * External dependencies\n */\nimport { useMutation } from '@apollo/client';\n\n/**\n * Internal dependencies\n */\nimport { UPDATE_DEVICE_PLAYLIST } from '../mutations/update-device-playlist';\n\nexport default function useUpdateDevicePlaylist() {\n const [updateDevicePlaylist, { loading, data }] = useMutation(\n UPDATE_DEVICE_PLAYLIST,\n {\n onError: (e) => console.log('Could not update device playlist: ', e),\n }\n );\n\n return { updateDevicePlaylist, loading, data };\n}\n","/**\n * External dependencies.\n */\nimport { is } from 'ramda';\n\n/**\n * Generates an array of strings which\n * represents modifiers of the specified element.\n *\n * @param element\n * @param payload\n * @return {*|string[]}\n */\nexport default function generateClassesFromString(element, payload) {\n\tif (!element) {\n\t\tthrow new Error('First argument is missing in generateClassesFromString');\n\t}\n\n\tif (!is(String, element)) {\n\t\tthrow new Error(`element argument must be type of String in generateClassesFromString`);\n\t}\n\n\treturn payload && payload\n\t\t.split(' ')\n\t\t.map(item => `${element}--${item}`);\n}\n","/**\n * External dependencies\n */\nimport React from 'react';\nimport cx from 'classnames';\nimport { Link } from 'react-router-dom';\n\n/**\n * Internal dependencies.\n */\nimport generateClassesFromString from 'helpers/generate-classes-from-string';\n\nconst Button = ({\n as = 'button',\n to,\n children,\n icon,\n modifier,\n size,\n block = false,\n className,\n ...props\n}) => {\n const buttonClass = 'btn';\n const HTMLElement = to ? Link : as;\n const linkProps = to ? { to: to } : {};\n\n const buttonModifiers = generateClassesFromString(buttonClass, modifier);\n const buttonSizes = generateClassesFromString(buttonClass, size);\n\n return (\n Powered by
\n \n\n {/* */}\n\n
,\n portalsContainer\n );\n};\n\nexport default Modal;\n","/**\n * External dependencies\n */\nimport React from 'react';\n\n/**\n * Internal dependencies\n */\nimport Button from 'components/button/button';\nimport Modal from 'components/modal/modal';\n\nconst TrialModal = ({ visible, onClose }) => {\n return (\n \n
\n \n {subtitle &&
\n\n {subtitle}
}\n\n {title &&{title}
}\n{children}
\n \n
\n \n
\n \n
\n Trial activated
\n\n You must return to the Sonos app to continue the set up process.\n
\n \n\n {!hideBackButton && (\n \n {path === '/:id' ||\n path === '/:id/dashboard' ||\n path === '/user/:id' ? (\n \n
\n\n \n handleOnCloseModal()} />\n
\n\n {/* MOBILE NAV */}\n - \n {path !== '/:id' && path !== '/user/:id' && (\n
- \n
: }\n\n \n {path === '/' || path === '/:id' || path === '/user/:id'\n ? 'Devices'\n : 'Back'}\n \n \n \n )}\n {id && id !== 'sonos' && (\n <>\n - \n
\n Music\n \n \n\n - \n
\n Articles\n \n \n \n )}\n {id !== 'sonos' && !path.includes('sonos') && (\n <>\n - \n
\n Support\n \n \n \n )}\n {((id && id === 'sonos') || path.includes('sonos')) && (\n <>\n - \n
\n Home\n \n \n - \n
\n \n\n Highlights\n \n - \n
\n Support\n \n \n\n - \n
\n \n\n Profile\n \n \n )}\n
- \n {((id && id === 'sonos') || path.includes('sonos')) && (\n <>\n
- \n
\n Home\n \n \n - \n
\n \n\n Highlights\n \n\n - \n
\n Support\n \n \n\n - \n
\n \n\n Profile\n \n \n )}\n\n {id && id !== 'sonos' && (\n <>\n - \n
\n Music\n \n \n\n - \n
\n Articles\n \n \n \n )}\n {id !== 'sonos' && !path.includes('sonos') && (\n <>\n {path === '/' && (\n - \n
\n\n {'Devices'}\n \n \n )}\n - \n
\n Support\n \n \n \n )}\n
\n
\n\n \n \n
\n \n {isSinglePlaylist ?
\n\n
\n {showSwitcher && (\n {isSinglePlaylist ?
: subtitle}
\n\n {title}
\n\n
\n )}\n {children}
\n \n \n \n );\n};\n\nexport default memo(DashboardLayout);\n","/**\n * External dependencies\n */\nimport { useMutation } from '@apollo/client';\n\n/**\n * Internal dependencies\n */\nimport { TOGGLE_SERVICE_TYPE } from '../mutations/toggle-service-type';\n\nexport default function useToggleServiceType() {\n const [toggleServiceType, { loading, data: userData }] = useMutation(\n TOGGLE_SERVICE_TYPE\n );\n\n return { toggleServiceType, loading, userData };\n}\n","import React from 'react';\n\nfunction LoadingSvg() {\n return (\n {emptyMessage}
;\n }\n\n return (\n <>\n {loading ? (\n\n
\n ) : (\n children\n )}\n \n );\n};\n\nexport default memo(LoadingProvider);\n","/**\n * External dependencies\n */\nimport React from 'react';\nimport cx from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport LoadingProvider from 'components/loading-provider/loading-provider';\n\nconst CardLinks = ({\n children,\n large,\n medium,\n small,\n paddedBottom,\n loading,\n title,\n}) => {\n return (\n <>\n {title && {title}
}\n\n\n setShowPlayButton(true)}\n onMouseLeave={() => setShowPlayButton(false)}\n onClick={changeRoute}\n className={cx('card-link content', { 'card-link--vertical': vertical })}\n style={{\n background: sourceLoaded,\n transition: 'all 1s',\n ...style,\n cursor: 'pointer',\n ...(sourceLoaded !== color && { backgroundSize: 'cover' }),\n }}\n >\n {graphic && (\n \n 
\n \n )}\n\n \n {title && \n\t\t\t)} */}\n {hasButton && (\n {\n e.stopPropagation();\n handleClick();\n }}\n modifier=\"primary\"\n >\n {buttonText || 'Play now'}\n \n )}\n
\n \n );\n};\n\nexport default CardLink;\n","/**\n * External dependencies\n */\nimport React, { forwardRef, memo } from 'react';\nimport cx from 'classnames';\n\nconst Field = forwardRef(\n (\n {\n id,\n label,\n type = 'text',\n name,\n autocomplete,\n isTextarea,\n className,\n icon,\n isInvalid = false,\n errorMessage,\n ...props\n },\n ref\n ) => {\n return (\n {title}
}\n\n\n {subtitle &&
\n \n\n {subtitle}
}\n\n {description &&{description}
}\n\n {isTextarea ? (\n
\n\n {isInvalid && (\n {errorMessage}\n )}\n \n );\n }\n);\n\nexport default memo(Field);\n","import React from 'react';\n\nfunction Search() {\n return (\n \n {icon}\n
\n )}\n \n
\n\n {title}
\n\n {hasViewAll && isInSearchSection && (\n \n )}\n {collectionId && hasViewAll && isInSearchSection === undefined && (\n View All\n )}\n{children}
\n \n
\n \n \n {!existingEmail && (\n \n Start!\n \n \n
\n \n \n \n {token?.clientName\n ? `Welcome, ${toTitleCase(token?.clientName)} 👋`\n : 'Welcome 👋'}\n
\n\n Your curated music collection is here.\n
\n\n {rdd.isMobileOnly && (\n \n setSearchValue(e.target.value)}\n value={searchValue}\n className=\"music-field\"\n type=\"search\"\n icon={\n \n {featuredPlayables?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `${pathname}/search/playlists/${item?.id}`\n : `${pathname}/search/all/scene/${item?.id}`;\n return (\n null}\n to={to}\n title={item?.name}\n cover={item?.cover}\n />\n );\n })}\n
\n \n )}\n\n {rdd.isMobileOnly && featuredPlayables.length > 0 && (\n \n \n \n View all\n \n
\n\n Featured Playlists and Scenes
\n\n \n {hasImage && (\n \n {image && (\n
\n )}\n\n \n \n {dotColor && (\n \n )}\n {title}\n
\n {description}\n \n \n \n );\n};\n\nexport default ResultItem;\n","import React, { useState } from 'react';\n\nimport { Link } from 'react-router-dom';\nimport _ from 'lodash';\nimport getRandomColor from '../../../helpers/get-random-color';\n\nconst Card = ({ title, index, to }) => {\n const [randomColor] = useState(getRandomColor(index % 15));\n return (\n \n {_.capitalize(title)}
\n \n \n );\n};\n\nexport default Card;\n","/**\n * External dependencies\n */\nimport React from 'react';\nimport _ from 'lodash';\nimport * as rdd from 'react-device-detect';\n/**\n * Internal dependencies\n */\nimport ResultItem from 'components/result-item/result-item';\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport getRandomColor from 'helpers/get-random-color';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport Card from '../components/card';\nimport useAuth from '../../auth/hooks/use-auth';\n\nconst AllVibes = ({ deviceId }) => {\n const { previewUser } = useAuth();\n const path = previewUser ? `user/${deviceId}` : deviceId;\n\n const { allScenes, allFeaturedScenes, loading } = useAllScenes({\n deviceId,\n });\n const allMixes = [...allScenes, ...allFeaturedScenes];\n\n const allVibes = _.uniq(\n _.flattenDeep(allMixes?.map((scene) => [...scene.vibe] || [])).map((item) =>\n item.toUpperCase()\n )\n );\n\n return (\n\n {!loading &&\n allVibes?.length > 0 &&\n allVibes\n .sort()\n .map((item) => (\n
\n )}\n \n {!loadingPlaylists &&\n allGenres?.length > 0 &&\n allGenres\n .sort()\n .map((item) => (\n
\n )}\n \n {\n let tempIntensities = [...allIntensities];\n\n tempIntensities[index] = {\n ...tempIntensities[index],\n expanded: true,\n };\n\n setAllIntensities(tempIntensities);\n }}\n >\n Expand\n \n )}\n
\n\n {intensity.name}
\n\n {!intensity.expanded && (\n\n {filteredPlaylists\n ?.splice(\n 0,\n intensity.expanded ? filteredPlaylists.length : 6\n )\n .map((item) => (\n
\n \n Categories\n
\n )}\nNothing found. Try something else
\n )}\n {searchedPlaylists?.length > 0 && (\n\n {!loading &&\n searchedPlaylists &&\n searchedPlaylists\n .slice(0, sections[1].expanded ? searchedPlaylists.length : 8)\n .map((playlist) => (\n handlePlayNow('PLAYLIST', playlist.id)}\n key={playlist.id}\n to={`/${id}/search/playlists/${playlist.id}`}\n cover={playlist.cover}\n title={playlist.name}\n color={stc(playlist.name)}\n />\n ))}\n
\n \n )}\n\n {searchedScenes?.length > 0 && (\n \n {!loading &&\n searchedScenes\n ?.slice(0, sections[0]?.expanded ? searchedScenes?.length : 8)\n .map((scene) => (\n handlePlayNow('SCENE', scene?.id)}\n key={scene?.id}\n to={`/${id}/search/all/scene/${scene?.id}`}\n title={capitalize(scene.name.toLowerCase())}\n cover={scene.cover}\n />\n ))}\n
\n \n )}\n Nothing found. Try something else
\n )}\n\n {searchedPlaylists?.length > 0 && (\nPlaylists
\n\n {!sections[0].expanded && (\n \n )}\n
\n \n\n\n \n
\n\n Scenes
\n\n {!sections[1].expanded && (\n \n )}\n
\n\n \n \n\n
\n\n \n {title &&
\n {title}
}\n {description &&{description}
}\n\n {false && playlistId && (\n \n Play Now\n \n )}\n {playlistId && showPreviewButton && (\n \n Preview\n \n )}\n
\n {children}
\n \n \n \n
\n \n \n \n
\n \n {title &&
\n\n {title}
}\n {description &&{description}
}\n{children}
\n \n
\n );\n}\n","/**\n * External dependencies\n */\nimport React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport stc from 'string-to-color';\nimport * as rdd from 'react-device-detect';\nimport moment from 'moment';\n\n/**\n * Internal dependencies\n */\nimport DashboardLayout from 'layouts/dashboard-layout';\nimport Playlist from 'blocks/playlist/playlist';\nimport PlaylistMobile from 'blocks/playlist/playlist-mobile';\nimport Page404 from 'views/404/404';\nimport useSinglePlaylist from '../hooks/use-single-playlist';\nimport getRandomArtwork from 'helpers/get-random-artwork';\n// import useDeviceSubscription from '../../devices/hooks/use-device-subscription';\nimport { Howl } from 'howler';\nimport { SongItem } from './song-item';\nimport LoadingProvider from '../../../components/loading-provider/loading-provider';\n\nconst CurrentPlaylistPage = ({\n match: {\n params: { playlistId },\n },\n}) => {\n const [songSkip, songLimit] = [0, 30];\n const { playlist, loading: playlistLoading } = useSinglePlaylist(\n playlistId,\n songSkip,\n songLimit\n );\n const [allSongs, setAllSongs] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [playingIndex, setPlayingIndex] = useState(-1);\n\n useEffect(() => {\n if (!playlistLoading) {\n setAllSongs(playlist?.allSongs || []);\n }\n }, [playlistLoading]);\n useEffect(() => {\n if (currentIndex > 0) {\n playPreview(currentIndex);\n }\n }, [currentIndex]);\n\n if (!playlistLoading && !playlist) {\n return \n
\n \n \n
\n \n
\n ) : (\n \n
\n )}\n {isPlaying && (\n \n )}\n Preview
\n\n
\n {song.title}
\n{song.artist}
\n{song.album}
\n\n \n {description}\n \n
\n \n \n );\n};\n\nexport default MusicListItem;\n","/**\n * External dependencies\n */\nimport React from 'react';\nimport stc from 'string-to-color';\n\n/**\n * Internal dependencies\n */\nimport DashboardLayout from 'layouts/dashboard-layout';\nimport CardLink from 'components/card-link/card-link';\nimport useAllPlaylists from '../hooks/use-all-playlists';\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport * as rdd from 'react-device-detect';\nimport MusicListItem from '../components/music-list-item';\nimport useAuth from '../../auth/hooks/use-auth';\n\nconst SingleGenrePage = ({\n match: {\n params: { id, genre },\n },\n}) => {\n const { previewUser } = useAuth();\n const path = previewUser ? `user/${id}` : id;\n const { allPlaylists } = useAllPlaylists({ deviceId: id });\n\n const allMixes = allPlaylists?.filter((item) => {\n const genreUpperCase = item.genre?.map((item) => item.toUpperCase());\n return genreUpperCase.includes(genre);\n });\n\n return (\n {name}
\n\n
\n ) : (\n \n {allMixes.length} Playlists Available\n
\n\n {allMixes?.map((item) => {\n return (\n\n
\n ) : (\n \n {playlists.length} Playlists Available\n
\n\n {playlists?.map((item) => {\n return (\n\n {!rdd?.isMobileOnly && (\n \n {capitalize(subcategory)}\n \n )}\n {rdd?.isMobileOnly ? (\n <>\n \n {filteredScenes?.map((item) => {\n return (\n
\n )}\n \n \n {filteredScenes.length} Scenes Available\n
\n\n {filteredScenes?.map((item) => {\n return (\n\n Business Types\n
\n )}\n\n {featuredPlayables?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n ) : (\n \n
\n ) : (\n \n {allMixes.length} Scenes Available\n
\n\n {allMixes?.map((item) => {\n return (\n\n {icon &&
\n );\n};\n\nexport default SystemDetail;\n","var _defs, _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgDown(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n t: 1626701442710,\n className: \"icon\",\n viewBox: \"0 0 1024 1024\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"p-id\": 1151,\n width: 16,\n height: 16,\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"style\", {\n type: \"text/css\"\n }))), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M963.2 0L1024 67.2 512 614.4 0 67.2 60.8 0 512 480 963.2 0z\",\n fill: \"#ffffff\",\n \"p-id\": 1152\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDown);\nexport default __webpack_public_path__ + \"static/media/down.9bcb7952.svg\";\nexport { ForwardRef as ReactComponent };","var _defs, _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgRight(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n t: 1626701487222,\n className: \"icon\",\n viewBox: \"0 0 1024 1024\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"p-id\": 1394,\n width: 16,\n height: 16,\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"style\", {\n type: \"text/css\"\n }))), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M204.8 60.8L272 0l547.2 512L272 1024l-67.2-60.8 480-451.2-480-451.2z\",\n fill: \"#ffffff\",\n \"p-id\": 1395\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgRight);\nexport default __webpack_public_path__ + \"static/media/right.2fb4a5cc.svg\";\nexport { ForwardRef as ReactComponent };","var _defs, _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgUp(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n t: 1626768909508,\n className: \"icon\",\n viewBox: \"0 0 1024 1024\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"p-id\": 1151,\n width: 16,\n height: 16,\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"style\", {\n type: \"text/css\"\n }))), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M963.2 614.4L512 134.4l-451.2 480L0 547.2 512 0l512 547.2-60.8 67.2z\",\n fill: \"#ffffff\",\n \"p-id\": 1152\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgUp);\nexport default __webpack_public_path__ + \"static/media/up.fc0ba223.svg\";\nexport { ForwardRef as ReactComponent };","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const HUBSPOT = gql`\n query getHubSpot {\n viewer {\n getHubSpotData\n }\n }\n`;\n","var _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgOffPiste(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n t: 1616757008366,\n className: \"icon\",\n viewBox: \"0 0 1024 1024\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"p-id\": 3317,\n width: 18,\n height: 18,\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M469.312 938.656V768a42.656 42.656 0 0 1 85.312 0v170.656a42.72 42.72 0 0 1-42.656 42.656 42.72 42.72 0 0 1-42.656-42.656z m314.144-94.816l-120.736-120.736a42.56 42.56 0 0 1 1.056-60.32 42.464 42.464 0 0 1 59.296 0.032l120.736 120.736a42.592 42.592 0 0 1 1.056 60.32 42.528 42.528 0 0 1-60.32 1.024z m-603.296 0a42.56 42.56 0 0 1 0-60.288l120.736-120.736c7.712-7.712 18.368-12.48 30.144-12.48s22.432 4.768 30.144 12.48c7.712 7.712 12.48 18.4 12.48 30.176s-4.768 22.464-12.48 30.176l-120.768 120.736a42.56 42.56 0 0 1-60.256-0.064zM768 554.656a42.656 42.656 0 0 1 0-85.312h170.656c23.552 0 42.656 19.104 42.656 42.656a42.72 42.72 0 0 1-42.656 42.656z m-682.656 0a42.656 42.656 0 0 1 0-85.312H256c23.552 0 42.656 19.104 42.656 42.656A42.72 42.72 0 0 1 256 554.656z m577.376-193.44c-7.712-7.712-12.48-18.4-12.48-30.176s4.768-22.464 12.48-30.176l120.736-120.736a42.592 42.592 0 0 1 60.32-1.056 42.592 42.592 0 0 1 1.056 60.32l-121.792 121.856a42.656 42.656 0 0 1-60.32 0.032z m-361.856 0L180.192 240.48a42.432 42.432 0 0 1-12-29.632c0-12.064 4.992-22.944 13.056-30.688a42.464 42.464 0 0 1 59.296 0.032l120.768 120.736c7.712 7.712 12.48 18.368 12.48 30.144s-4.768 22.432-12.48 30.144c-7.712 7.712-18.368 12.48-30.144 12.48s-22.432-4.768-30.144-12.48z m168.448-105.28V85.28a42.656 42.656 0 0 1 85.312 0v170.656a42.72 42.72 0 0 1-42.656 42.656A42.72 42.72 0 0 1 469.312 256z\",\n \"p-id\": 3318,\n fill: \"#FFBF00\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgOffPiste);\nexport default __webpack_public_path__ + \"static/media/off-piste.dafef15f.svg\";\nexport { ForwardRef as ReactComponent };","/**\n * External dependencies\n */\nimport React, { useState, useEffect } from 'react';\nimport cx from 'classnames';\nimport { createPortal } from 'react-dom';\n\n/**\n * Internal dependencies.\n */\nimport portalsContainer from 'helpers/portals-container';\nimport { ReactComponent as IcoX } from '../../assets/svg-icons/ico-x.svg';\nimport { ReactComponent as IcoLoading } from '../../assets/svg-icons/off-piste.svg';\n\nconst ModalSupportStatus = ({\n notificationVisible,\n setNotificationVisible,\n}) => {\n if (!notificationVisible) return null;\n\n return createPortal(\n {icon}
}\n\n \n
\n {title}
\n\n{info}
\n\n setNotificationVisible(false)}\n className=\"modal-status__close\"\n >\n \n
,\n portalsContainer\n );\n};\n\nexport default ModalSupportStatus;\n","/**\n * External dependencies\n */\nimport React, { useState, useEffect, useContext } from 'react';\n\n/**\n * Internal dependencies\n */\nimport DashboardLayout from 'layouts/dashboard-layout';\nimport useSingleDevice from 'domain/devices/hooks/use-single-device';\nimport AuthContext from 'domain/auth/contexts/auth-context/auth-context';\nimport SystemDetail from 'components/system-detail/system-detail';\nimport { ReactComponent as IcoDown } from 'assets/svg-icons/down.svg';\nimport { ReactComponent as IcoRight } from 'assets/svg-icons/right.svg';\nimport { ReactComponent as IcoUp } from 'assets/svg-icons/up.svg';\nimport Button from 'components/button/button';\nimport Modal from 'components/modal/modal';\nimport Dropdown from 'react-dropdown';\nimport 'react-dropdown/style.css';\nimport Field from 'components/field/field';\nimport useHubSpotData from './hooks/use-hubspot-data';\nimport _ from 'lodash';\n\nimport { Toggle } from 'react-powerplug';\nimport ModalSupportStatus from 'components/modal-status/modal-support-status';\n\nconst fetchFaqs = async () => {\n const response = await fetch(\n 'https://activaire.com/wp-json/wp/v2/pages/2904'\n );\n return response.json();\n};\n\nconst SupportPage = ({\n match: {\n params: { id },\n },\n}) => {\n const { device, loading } = useSingleDevice(id);\n const { hubspotData, loading: apiLoading } = useHubSpotData();\n const { user } = useContext(AuthContext);\n\n const [fieldValue, setFieldValue] = useState('');\n\n const [faqs, setFaqs] = useState([]);\n\n useEffect(() => {\n fetchFaqs().then((res) => {\n const questions = res.acf.questions;\n\n const order = {\n 'Getting Started': 1,\n 'My Account': 2,\n default: Number.MAX_VALUE,\n };\n\n const categories = _.uniq(questions.map((item) => item.category)).sort(\n (a, b) =>\n (order[a] || order.default) - (order[b] || order.default) ||\n a > b ||\n -(a < b)\n );\n\n const arr = categories.map((category) => {\n const filteredQuestions = questions.filter(\n (item) => item.category === category\n );\n return {\n sectionName: category,\n items: filteredQuestions.map((item) => {\n return {\n question: item.question,\n answer: item.answer.replace(/(<([^>]+)>)/gi, ''),\n icon: false,\n };\n }),\n };\n });\n\n setFaqs(arr);\n });\n }, []);\n\n const handleExpand = (faqIndex, index) => {\n let tempSections = [...faqs];\n tempSections[faqIndex].items[index] = {\n ...tempSections[faqIndex].items[index],\n icon: !tempSections[faqIndex].items[index].icon,\n };\n setFaqs(tempSections);\n };\n\n const [options, setOptions] = useState([]);\n const [defaultOption, setDefaultOption] = useState();\n\n useEffect(() => {\n if (hubspotData) {\n setOptions(\n hubspotData?.fieldGroups[4].fields[0].options.map((item) => item.value)\n );\n }\n }, [apiLoading]);\n\n useEffect(() => {\n if (id && !device?.isOnline) {\n setDefaultOption({ value: options[7], label: options[7] });\n }\n }, [device, options]);\n\n const submitForm = () => {\n const obj = {\n fields: [\n {\n name: 'firstname',\n value: user.profile.name,\n },\n {\n name: 'email',\n value: user.emails[0].address,\n },\n {\n name: 'TICKET.hs_ticket_category',\n value: defaultOption.value,\n },\n {\n name: 'TICKET.content',\n value: fieldValue,\n },\n ],\n };\n\n fetch(\n 'https://api.hsforms.com/submissions/v3/integration/submit/2621188/0e5e9d50-2b6b-4781-b32a-164368b99265?hapikey=65ed2c7f-c353-4775-b026-455e51a41e26',\n {\n method: 'post',\n headers: {\n Accept: 'application/json, text/plain, */*',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(obj),\n }\n )\n .then((res) => res.json())\n .then(() => setNotificationVisible(true));\n };\n\n const [notificationVisible, setNotificationVisible] = useState(false);\n\n return (\n \n We’ll get back to you as soon as possible within the next 24hrs\n
\n\n
\n );\n })}\n {faq.sectionName}
\n\n\n {faq.items.map((item, index) => {\n return (\n handleExpand(faqIndex, index)}\n />\n ) : (\n handleExpand(faqIndex, index)}\n />\n )\n }\n title={item.question}\n />\n );\n })}\n
\n \n {false && (\n \n )}\n\n \n \n \n
\n\n 1
\n\n
\n Select an issue type
\nGet the right support person
\n2
\n\n
\n \n Detail the problem
\nPlease add any steps you’ve taken
\n\n {\n submitForm();\n toggle();\n }}\n >\n Send\n \n\n {\n toggle();\n }}\n >\n Cancel\n \n
\n \n \n )}\n \n 
\n
\n )}\n\n \n \n\n \n
\n \n );\n};\n\nexport default Article;\n","/**\n * External dependencies\n */\nimport React, { useEffect, useState } from 'react';\n\n/**\n * Internal Dependencies\n */\nimport DashboardLayout from 'layouts/dashboard-layout';\nimport Article from 'components/article/article';\nimport LoadingProvider from 'components/loading-provider/loading-provider';\n\nconst fetchHighlights = async () => {\n const response = await fetch(process.env.REACT_APP_WORDPRESS_POSTS);\n return response.json();\n};\n\nconst HighlightsPage = ({\n match: {\n params: { id },\n },\n}) => {\n const [highlights, setHighlights] = useState();\n\n useEffect(() => {\n fetchHighlights().then((res) => setHighlights(res));\n }, []);\n\n return (\n \n
\n Don't miss
\n\n\n {highlights &&\n highlights.length &&\n highlights.slice(1).map((article) => (\n \n {article.excerpt.rendered}\n \n ))}\n
\n \n {currentHighlight?._embedded['wp:featuredmedia'] &&
\n \n \n
}\n\n \n \n {showSwitcher && (\n
\n\n \n handleOnCloseModal()} />\n \n
\n\n\n {/* MOBILE NAV */}\n\n \n
\n\n \n \n
\n \n
\n )}\n {children}
\n \n \n \n );\n};\n\nexport default memo(PreviewWizardLayout);\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const USER = gql`\n query UserQuery {\n viewer {\n user {\n id\n profile {\n name\n clientId\n companyWebsite\n }\n rolesConsole {\n roleAccess\n roleAudio\n }\n favouriteDevices\n featuredPlayables\n defaultDeviceId\n status {\n lastLogin {\n date\n ipAddr\n latitude\n longitude\n }\n }\n emails {\n address\n }\n serviceType\n defaultServiceType\n companyName\n viewableCategories {\n name\n subCategories\n sortOrder\n }\n musicProfile {\n category\n subCategory\n genres\n avoidGenres\n artists\n vibe\n explicit\n }\n socialProfile {\n twitter\n linkedIn\n instagram\n spotify\n }\n preview {\n musicList {\n sceneIds\n playlistIds\n featuredIds\n artistSceneIds\n }\n }\n }\n }\n }\n`;\n","/**\n * External dependencies\n */\nimport { useQuery } from '@apollo/client';\n\n/**\n * Internal dependencies\n */\nimport { USER } from 'domain/auth/queries/user';\n\nexport default function useUser() {\n const { data, loading, error } = useQuery(USER);\n\n return {\n data: data && data.viewer.user,\n loading,\n error,\n };\n}\n","import React, { createContext, useEffect, useState } from 'react';\nimport useAuth from '../../auth/hooks/use-auth';\nimport useUser from '../../auth/hooks/use-user';\n\nexport const BoardingContext = createContext({});\n\nconst stack = [\n 'boarding-start',\n 'social',\n 'category',\n 'category-specific',\n 'genre',\n 'artists',\n 'avoid-genre',\n 'vibe',\n 'explicit',\n 'boarding-end',\n];\n\nconst BoardingContextProvider = ({ children }) => {\n const { previewToken, previewId } = useAuth();\n const { data: user } = useUser();\n const [name, setName] = useState('');\n const [companyName, setCompanyName] = useState('');\n const [companyWebsite, setCompanyWebsite] = useState('');\n const [emailAddress, setEmailAddress] = useState('');\n const [selectedCategory, setSelectedCategory] = useState('');\n const [selectedSpecificCategory, setSelectedSpecificCategory] = useState('');\n const [otherSpecificCategoryValue, setOtherSpecificCategoryValue] =\n useState('');\n const [otherCategoryValue, setOtherCategoryValue] = useState('');\n const [socialValues, setSocialValues] = useState({\n Twitter: '',\n LinkedIn: '',\n Instagram: '',\n ['Spotify / Apple Music / Tidal']: '',\n });\n const [genreValues, setGenreValues] = useState([]);\n const [artistValues, setArtistValues] = useState({\n 0: '',\n 1: '',\n 2: '',\n });\n const [avoidGenreValues, setAvoidGenreValues] = useState([]);\n const [vibeValues, setVibeValues] = useState([]);\n const [isExplicit, setIsExplicit] = useState(false);\n\n const [selectedStack, setSelectedStack] = useState(stack[0]);\n\n /*\n If previewToken is present, we need to update the useState params\n to reflect the data from the previewToken.\n The existing user values from DB will be fetched using this token\n */\n useEffect(() => {\n if (user && previewToken && previewId) {\n setName(user.profile?.name);\n setCompanyName(user?.companyName);\n setCompanyWebsite(user?.profile?.companyWebsite);\n setEmailAddress(user.emails ? user.emails[0]?.address : '');\n setSelectedCategory(user.musicProfile?.category);\n setSelectedSpecificCategory(user.musicProfile?.subCategory);\n setSocialValues({\n Twitter: user.musicProfile?.twitter,\n LinkedIn: user.musicProfile?.linkedIn,\n Instagram: user.musicProfile?.instagram,\n 'Spotify / Apple Music / Tidal': user.musicProfile?.spotify,\n });\n setGenreValues(user.musicProfile?.genres);\n setArtistValues(user.musicProfile?.artists);\n setAvoidGenreValues(user.musicProfile?.avoidGenres);\n setVibeValues(user.musicProfile?.vibe);\n setIsExplicit(user.musicProfile?.explicit);\n }\n }, [previewToken, user]);\n\n const handleSocialInputChange = (e) => {\n const { name, value } = e.target;\n\n setSocialValues({\n ...socialValues,\n [name]: value,\n });\n };\n\n const handleArtistInputChange = (e) => {\n const { name, value } = e.target;\n\n setArtistValues({\n ...artistValues,\n [name]: value,\n });\n };\n\n const handleGenres = (name) => {\n if (genreValues?.length < 5 && !genreValues?.includes(name)) {\n if (avoidGenreValues?.includes(name)) {\n const newAvoidGenreValues = [...avoidGenreValues];\n const findIndex = newAvoidGenreValues.findIndex(\n (item) => item.toLowerCase() === name.toLowerCase()\n );\n newAvoidGenreValues.splice(findIndex, 1);\n setAvoidGenreValues(newAvoidGenreValues);\n }\n setGenreValues([...genreValues, name]);\n } else {\n const filteredGenres = genreValues?.filter((item) => item !== name) || [];\n setGenreValues(filteredGenres);\n }\n };\n\n const handleAvoidGenres = (name) => {\n if (!genreValues.includes(name)) {\n if (avoidGenreValues?.length < 5 && !avoidGenreValues?.includes(name)) {\n setAvoidGenreValues([...avoidGenreValues, name]);\n } else {\n const filteredGenres = avoidGenreValues?.filter(\n (item) => item !== name\n );\n setAvoidGenreValues(filteredGenres);\n }\n }\n };\n\n const handleVibes = (name) => {\n if (!vibeValues?.includes(name)) {\n setVibeValues([...vibeValues, name]);\n } else {\n const filteredVibes = vibeValues?.filter((item) => item !== name);\n setVibeValues(filteredVibes);\n }\n };\n return (\n \n {/* */}\n
,\n portalsContainer\n );\n};\n\nexport default Modal;\n","import React from 'react';\n\nconst Progress_bar = ({ progress, width, margin, mediaWidth }) => {\n const currentWidth = window.innerWidth > 768 ? width : mediaWidth;\n const parentDiv = {\n height: 5,\n width: currentWidth,\n backgroundColor: '#56245D',\n borderRadius: 13,\n margin: margin,\n };\n\n const childDiv = {\n height: '100%',\n width: `${progress}%`,\n backgroundColor: '#D154C5',\n borderRadius: 40,\n textAlign: 'right',\n };\n\n return (\n \n
\n \n {subtitle &&
\n {subtitle}
}\n {title &&{title}
}\n\n {children}\n {stacks[selectedStack] && (\n
\n \n 
\n
\n )}\n \n \n
\n );\n};\n\nexport default Progress_bar;\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const UPDATE_MUSIC_PROFILE = gql`\n mutation updateMusicProfile(\n $musicProfileProvider: MusicProfileProvider!\n $socialProfileProvider: SocialProfileProvider!\n $companyName: String!\n $incomingService: String\n ) {\n updateMusicProfile(\n musicProfileProvider: $musicProfileProvider\n socialProfileProvider: $socialProfileProvider\n companyName: $companyName\n incomingService: $incomingService\n ) {\n id\n profile {\n name\n clientId\n }\n favouriteDevices\n emails {\n address\n }\n companyName\n musicProfile {\n category\n }\n }\n }\n`;\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const CREATE_USER = gql`\n mutation createUserMutation(\n $name: String!\n $companyName: String!\n $serviceType: String\n $authProvider: AUTH_PROVIDER_EMAIL!\n $incomingService: String\n $companyWebsite: String\n ) {\n createUser(\n name: $name\n companyName: $companyName\n serviceType: $serviceType\n authProvider: $authProvider\n incomingService: $incomingService\n companyWebsite: $companyWebsite\n ) {\n node {\n id\n }\n newUser\n }\n }\n`;\n","export const generateRandomString = (myLength) => {\n const chars =\n 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';\n const randomArray = Array.from(\n { length: myLength },\n (v, k) => chars[Math.floor(Math.random() * chars.length)]\n );\n\n const randomString = randomArray.join('');\n return randomString;\n};\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const SIGNIN_USER = gql`\n mutation signinUserMutation(\n $serviceType: String\n $emailData: AUTH_PROVIDER_EMAIL\n $jwtToken: String\n $incomingService: String\n ) {\n signinUser(\n serviceType: $serviceType\n emailData: $emailData\n jwtToken: $jwtToken\n incomingService: $incomingService\n ) {\n token\n sonosAuthObj {\n householdId\n authToken\n nickname\n tokenExpiration\n message\n }\n user {\n id\n profile {\n name\n clientId\n sonosPermit\n }\n favouriteDevices\n featuredPlayables\n status {\n lastLogin {\n date\n ipAddr\n latitude\n longitude\n }\n }\n emails {\n address\n }\n rolesConsole {\n roleAccess\n roleAudio\n }\n serviceType\n defaultServiceType\n companyName\n stripe {\n sonosTrial\n sonosSubscription\n subscriptionPlan\n }\n viewableCategories {\n name\n subCategories\n sortOrder\n }\n }\n }\n }\n`;\n\nexport const SIGNIN_USER_FACEBOOK = gql`\n mutation handleFacebookMutation(\n $facebookData: FacebookData!\n $serviceType: String\n $jwtToken: String\n ) {\n handleFacebook(\n facebookData: $facebookData\n serviceType: $serviceType\n jwtToken: $jwtToken\n ) {\n token\n sonosAuthObj {\n householdId\n authToken\n nickname\n tokenExpiration\n message\n }\n user {\n id\n profile {\n name\n clientId\n sonosPermit\n }\n rolesConsole {\n roleAccess\n roleAudio\n }\n favouriteDevices\n featuredPlayables\n status {\n lastLogin {\n date\n ipAddr\n latitude\n longitude\n }\n }\n emails {\n address\n }\n\n serviceType\n defaultServiceType\n companyName\n stripe {\n sonosTrial\n sonosSubscription\n subscriptionPlan\n }\n viewableCategories {\n name\n subCategories\n sortOrder\n }\n }\n newUser\n }\n }\n`;\n\nexport const SIGNIN_USER_APPLE = gql`\n mutation handleAppleMutation(\n $appleToken: String!\n $serviceType: String\n $jwtToken: String\n ) {\n handleApple(\n token: $appleToken\n serviceType: $serviceType\n jwtToken: $jwtToken\n ) {\n token\n sonosAuthObj {\n householdId\n authToken\n nickname\n tokenExpiration\n message\n }\n user {\n id\n profile {\n name\n clientId\n sonosPermit\n }\n rolesConsole {\n roleAccess\n roleAudio\n }\n favouriteDevices\n featuredPlayables\n status {\n lastLogin {\n date\n ipAddr\n latitude\n longitude\n }\n }\n emails {\n address\n }\n\n serviceType\n defaultServiceType\n companyName\n stripe {\n sonosTrial\n sonosSubscription\n subscriptionPlan\n }\n viewableCategories {\n name\n subCategories\n sortOrder\n }\n }\n newUser\n }\n }\n`;\n\nexport const SONOS_AUTH_TOKEN = gql`\n mutation getSonosAuthToken($jwtToken: String) {\n getSonosAuthToken(jwtToken: $jwtToken) {\n sonosAuthObj {\n householdId\n authToken\n nickname\n tokenExpiration\n message\n }\n user {\n id\n profile {\n name\n }\n emails {\n address\n }\n companyName\n }\n }\n }\n`;\n","import React, { useRef, useContext, useEffect } from 'react';\n\nimport Button from '../../components/button/button';\nimport ProgressBar from './components/progress-bar';\n\nimport useUpdateMusicProfile from './hooks/use-update-music-profile';\nimport { BoardingContext } from './context/boardingContext';\nimport useAuth from '../auth/hooks/use-auth';\nimport useCreateUser from '../auth/hooks/use-create-user';\nimport crypto from 'crypto';\nimport { generateRandomString } from '../../utils/generate-random-string';\nimport useLogin from '../auth/hooks/use-login';\nimport { toast } from 'react-toastify';\n\nconst BoardingWrapper = ({ disabled, progress, children }) => {\n const {\n config,\n setSelectedStack,\n selectedStack,\n stack,\n setOtherSpecificCategoryValue,\n } = useContext(BoardingContext);\n const wrapperRef = useRef();\n const [loginEmail] = useLogin('email');\n const { user, loginSuccess, newUserRegisteredHubspotEmail } = useAuth();\n const { createUser } = useCreateUser();\n\n const { updateMusicProfile } = useUpdateMusicProfile();\n\n const notifyInvalidEmail = () =>\n toast.dark(\n 'Invalid email address, please check your email address and try again',\n {\n position: 'bottom-center',\n autoClose: 5000,\n hideProgressBar: true,\n bodyStyle: { color: '#fff' },\n style: { backgroundColor: '#670BCE' },\n }\n );\n\n const handleUpdateMusicProfile = () => {\n updateMusicProfile({\n variables: {\n companyName: config.companyName,\n musicProfileProvider: {\n category: config.otherCategoryValue || config.selectedCategory,\n subCategory:\n config.otherSpecificCategoryValue?.length > 0\n ? config.otherSpecificCategoryValue\n : config.selectedSpecificCategory,\n genres: config.genreValues,\n avoidGenres: config.avoidGenreValues,\n artists: Object.values(config?.artistValues || {}),\n vibe: config.vibeValues,\n explicit: config.isExplicit,\n },\n socialProfileProvider: {\n twitter: config.socialValues?.Twitter,\n linkedIn: config.socialValues?.LinkedIn,\n instagram: config.socialValues?.Instagram,\n spotify: config?.socialValues['Spotify / Apple Music / Tidal'],\n },\n incomingService: 'preview',\n },\n });\n };\n\n const handleCreateUser = () => {\n const generatedPassword = generateRandomString(10);\n createUser({\n variables: {\n name: config.name,\n companyName: config.companyName,\n serviceType: 'curator',\n authProvider: {\n email: config.emailAddress,\n password: crypto\n .createHash('sha256')\n .update(generatedPassword)\n .digest('hex'),\n },\n incomingService: 'preview',\n companyWebsite: config.companyWebsite,\n },\n }).then((res) => {\n const isNewUserCreated = res.data.createUser?.newUser;\n if (isNewUserCreated) {\n handleLogin(generatedPassword);\n } else {\n console.error('User not created');\n handleLogin();\n }\n handleUpdateMusicProfile();\n });\n };\n\n const handleLogin = (generatedPassword = generateRandomString(10)) => {\n loginEmail({\n variables: {\n serviceType: 'curator',\n incomingService: 'preview',\n emailData: {\n email: config.emailAddress,\n password: crypto\n .createHash('sha256')\n .update(generatedPassword)\n .digest('hex'),\n },\n },\n })\n .then(({ data }) => {\n if (\n data?.signinUser &&\n data?.signinUser?.token &&\n data?.signinUser?.user\n ) {\n loginSuccess({\n token: data.signinUser.token,\n user: data.signinUser.user,\n provider: 'email',\n });\n }\n })\n .catch(() => {\n console.error('Login error after user creation');\n });\n };\n\n const handleContinue = () => {\n if (user) {\n handleUpdateMusicProfile();\n } else {\n // create user and update music profile\n newUserRegisteredHubspotEmail({\n firstname: config.name,\n email: config.emailAddress,\n company: config.companyName,\n servicetype: 'curator',\n loginmethod: 'email',\n }).then((hubspotRes) => {\n if (hubspotRes.status === 200) {\n handleCreateUser();\n } else if (hubspotRes === 'INVALID_EMAIL') {\n notifyInvalidEmail();\n } else if (hubspotRes === 'OTHER_ERROR') {\n handleCreateUser();\n // notifyOtherError();\n }\n });\n }\n setSelectedStack((currentStack) => stack[stack.indexOf(currentStack) + 1]);\n\n // handle \"Other\" category\n if (selectedStack === 'category') {\n if (config.selectedCategory === 'Other') {\n setOtherSpecificCategoryValue('Other');\n setSelectedStack(\n (currentStack) => stack[stack.indexOf(currentStack) + 1]\n );\n }\n }\n };\n const handleBack = () => {\n setSelectedStack((currentStack) => stack[stack.indexOf(currentStack) - 1]);\n // handle \"Other\" category\n if (selectedStack === 'genre') {\n if (config.selectedCategory === 'Other') {\n setSelectedStack(\n (currentStack) => stack[stack.indexOf(currentStack) - 1]\n );\n }\n }\n };\n\n const handleKeyPress = (event) => {\n if (event.key === 'Enter') {\n handleContinue();\n }\n };\n\n useEffect(() => {\n wrapperRef.current.addEventListener('keypress', handleKeyPress);\n }, []);\n\n const mediaProgressBarWidth = (window.innerWidth - 58) / 3;\n\n return (\n \n {/* */}\n \n {children}\n
\n \n
\n {/* */}\n \n setName(e.target.value)}\n placeholder=\"Name\"\n style={{ marginTop: '10px' }}\n onBlur={() => {\n if (name.length < 2) {\n !notify('You need to enter a valid name!');\n }\n }}\n />\n setCompanyName(e.target.value)}\n placeholder=\"Company Name\"\n onBlur={() => {\n if (companyName.length < 2) {\n notify('You need to enter a valid company name!');\n }\n }}\n />\n setCompanyWebsite(e.target.value)}\n placeholder=\"Company Website\"\n />\n setEmailAddress(e.target.value)}\n onBlur={() => {\n if (emailPattern.test(emailAddress) === false) {\n notify('Invalid email address!');\n }\n }}\n placeholder=\"Email Address\"\n />\n
\n \n );\n};\n\nexport default BoardingStart;\n","import React from 'react';\nimport Marquee from 'react-fast-marquee';\n\nconst processedArray = (array = []) => {\n const returnedArray = [];\n for (let i = 0; i < array.length; i++) {\n if (i % 2 === 1) {\n returnedArray.push({\n up: array[i - 1],\n down: array[i],\n });\n }\n }\n if (returnedArray.length % 2 === 1) {\n returnedArray.pop();\n }\n return returnedArray;\n};\n\nconst CarouselComponent = ({ artworkUrls }) => {\n const artworkArray = processedArray(artworkUrls);\n\n return (\n Hi there 👋
\n\n Let’s start curating! In the next few steps we’ll get to know more\n about your business.\n
\n\n We’ll use this information to curate a personalized program for you\n from our library of Playlists and Scenes. This first step is the\n starting point in your musical journey with us. After this initial\n step, you will work directly with our curation team to create an\n experience that genuinely reflects your brand.\n
\n\n \n {artworkArray.map((item, i) => (\n \n
\n ))}\n \n \n );\n};\n\nexport default CarouselComponent;\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const USER_ARTWORK = gql`\n query allArtworkQuery {\n viewer {\n userArtwork\n }\n }\n`;\n","/**\n * External dependencies\n */\nimport { useQuery } from '@apollo/client';\n\n/**\n * Internal dependencies\n */\nimport { USER_ARTWORK } from '../query/get-artwork';\n\nexport default function useUserArtwork() {\n const { data: getUserArtwork, loading: loadingQuery } =\n useQuery(USER_ARTWORK);\n return {\n getUserArtwork,\n loadingQuery,\n };\n}\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const GENERATE_MUSIC_LIST = gql`\n mutation generateMusicListMutation {\n generateMusicList {\n id\n preview {\n previewId\n }\n }\n }\n`;\n","import React, { useContext, useState } from 'react';\nimport Button from '../../../components/button/button';\nimport Carousel from './carousel';\nimport useUserArtwork from '../hooks/use-user-artwork';\nimport { BoardingContext } from '../context/boardingContext';\nimport useGenerateMusicList from '../hooks/use-generate-music-list';\n\nconst BoardingEnd = () => {\n const [loading, setLoading] = useState(false);\n const { getUserArtwork, loadingQuery } = useUserArtwork();\n const { generateMusicList } = useGenerateMusicList();\n\n const { setSelectedStack, stack } = useContext(BoardingContext);\n\n const handleFinish = () => {\n setLoading(true);\n generateMusicList().then((res) => {\n setLoading(false);\n // redirect to /user/previewId\n window.location.href = `/user/${res?.data?.generateMusicList?.preview?.previewId}`;\n });\n };\n return (\n \n {!loadingQuery ? (\n
\n );\n};\n\nexport default BoardingEnd;\n","/**\n * External dependencies\n */\nimport { useMutation } from '@apollo/client';\nimport { GENERATE_MUSIC_LIST } from '../mutations/generate-music-list';\n\n/**\n * Internal dependencies\n */\n\nexport default function useGenerateMusicList() {\n const [generateMusicList, { loading }] = useMutation(GENERATE_MUSIC_LIST);\n\n return {\n generateMusicList,\n loading,\n };\n}\n","import React from 'react';\n\nconst Tag = ({ title, isSelected, handleOnClick, isDisabled, style }) => {\n return (\n \n \n setSelectedStack(\n (selectedStack) => stack[stack.indexOf(selectedStack) - 1]\n )\n }\n style={{ color: '#fff', fontWeight: 'bold', marginRight: 20 }}\n >\n Back\n \n )}\n {\n handleFinish();\n }}\n style={{\n padding: '12px 0px',\n width: 110,\n marginBottom: 35,\n }}\n >\n {loading ? 'Loading...' : 'Let’s go!'}\n \n
\n \n Curating good vibes.\n
\n {!loading && (\n\n \n {curatedCategories?.map((item) => (\n handleCategoryChange(item?.name, null)}\n />\n ))}\n
\n {selectedCategory === 'Other' && (\n {companyName}
\nWhat do you do?
\n\n \n On brand artists\n \n
\n \n );\n};\n\nexport default Artists;\n","import React, { useState, useContext } from 'react';\nimport BoardingWrapper from '../boarding-wrapper';\nimport { BoardingContext } from '../context/boardingContext';\nimport Tag from './category/tag';\n\nconst Genre = ({ genres }) => {\n const { companyName, genreValues, handleGenres } =\n useContext(BoardingContext);\n\n const curatedGenres = [...genres].filter((item) => item !== 'Holiday');\n\n return (\n {companyName}
\n\n Artists that capture the spirit of your brand\n
\n\n {artists.map((artist, index) => (\n\n \n {curatedGenres.map((item) => (\n handleGenres(item)}\n />\n ))}\n
\n \n \n );\n};\n\nexport default Genre;\n","import React, { useContext } from 'react';\nimport BoardingWrapper from '../boarding-wrapper';\nimport { BoardingContext } from '../context/boardingContext';\nimport InputBoarding from './input-boarding';\n\nconst platforms = [\n 'Twitter',\n 'LinkedIn',\n 'Instagram',\n 'Spotify / Apple Music / Tidal',\n];\n\nconst Social = ({ setSelectedStack, stack }) => {\n const { companyName, handleSocialInputChange, socialValues } =\n useContext(BoardingContext);\n\n return (\n {companyName}
\nYour music tastes
\nSelect up to five genres
\n\n
\n \n );\n};\n\nexport default Social;\n","import React, { useState, useContext } from 'react';\nimport BoardingWrapper from '../boarding-wrapper';\nimport { BoardingContext } from '../context/boardingContext';\nimport Tag from './category/tag';\n\nconst AvoidGenre = ({ genres }) => {\n const { companyName, genreValues, avoidGenreValues, handleAvoidGenres } =\n useContext(BoardingContext);\n\n const curatedGenres = [...genres].filter((item) => item !== 'Holiday');\n return (\n {companyName}
\nYour socials
\n\n Help us get familiar with your brand\n
\n {platforms.map((platform, index) => (\n\n \n {curatedGenres.map((item) => (\n handleAvoidGenres(item)}\n />\n ))}\n
\n \n \n );\n};\n\nexport default AvoidGenre;\n","import React, { useContext } from 'react';\nimport BoardingWrapper from '../boarding-wrapper';\nimport { BoardingContext } from '../context/boardingContext';\nimport Tag from './category/tag';\nimport useUserArtwork from '../hooks/use-user-artwork';\n\nconst Explicit = ({ setSelectedStack, stack }) => {\n const { companyName, isExplicit, setIsExplicit } =\n useContext(BoardingContext);\n const { getUserArtwork } = useUserArtwork();\n const images = getUserArtwork?.viewer?.userArtwork || [];\n for (const image of images) {\n const imageElement = new Image();\n imageElement.src = image;\n }\n return (\n {companyName}
\nThings to avoid
\nSelect up to five genres
\n\n
\n \n );\n};\n\nexport default Explicit;\n","import React, { useContext } from 'react';\nimport BoardingWrapper from '../boarding-wrapper';\nimport { BoardingContext } from '../context/boardingContext';\nimport Tag from './category/tag';\n\nconst Vibe = ({ vibes }) => {\n const { companyName, vibeValues, handleVibes } = useContext(BoardingContext);\n return (\n {companyName}
\nExplicit content?
\n\n setIsExplicit(true)}\n />\n setIsExplicit(false)}\n />\n
\n \n \n What’s your vibe?\n \n \n {vibes.map((item) => (\n handleVibes(item?.name)}\n />\n ))}\n
\n \n \n );\n};\n\nexport default Vibe;\n","import React, { useContext, useEffect } from 'react';\nimport BoardingWrapper from '../boarding-wrapper';\nimport Tag from './category/tag';\nimport { BoardingContext } from '../context/boardingContext';\nimport InputBoarding from './input-boarding';\n\nconst CategorySpecific = ({ categories }) => {\n const {\n selectedSpecificCategory,\n setSelectedSpecificCategory,\n selectedCategory,\n otherSpecificCategoryValue,\n setOtherSpecificCategoryValue,\n companyName,\n otherCategoryValue,\n } = useContext(BoardingContext);\n\n const findCategory = categories.find(\n (item) => item.name === selectedCategory\n );\n const subCategories = [...(findCategory?.subCategories || [])];\n\n selectedCategory !== 'Other' && subCategories.push('Other');\n\n useEffect(() => {\n if (otherSpecificCategoryValue?.length) {\n setSelectedSpecificCategory('Other');\n }\n }, [otherSpecificCategoryValue]);\n\n const preferredOrder = [\n 'Fashion',\n 'Footwear',\n 'Frames & Eyewear',\n 'Accessories',\n 'Athletic Apparel',\n 'Home Goods',\n 'Boutique',\n 'Streetwear',\n 'Flagship',\n 'Trendy',\n 'Luxury',\n 'Outlet',\n ];\n\n const sortedList =\n selectedCategory === 'RETAIL'\n ? preferredOrder.concat(\n subCategories.filter((item) => !preferredOrder.includes(item))\n )\n : subCategories;\n\n return (\n {companyName}
\n\n How does your brand make your customers feel?\n
\nSelect one or more
\n\n {}}\n style={{ width: 'fit-content', marginBottom: 25 }}\n />\n\n \n {sortedList.map((item) => (\n {\n setSelectedSpecificCategory(item);\n if (item !== 'Other') {\n setOtherSpecificCategoryValue('');\n }\n }}\n />\n ))}\n
\n {selectedSpecificCategory === 'Other' && (\n {companyName}
\nMore specifically?
\n\n Hi {parsedName} 👋\n
Thanks for answering our questionnaire. Based on your\n responses, We’ve curated a selection of Playlists and Scenes just for\n you. Click the button below to start exploring. If you’d like to\n browse our full catalog of Playlists and Scenes, scroll down and visit\n the Scenes, Genres, Intensities, and Vibes pages.\n
\n Welcome to the world of Activaire Curator\n
\n\n Hi {parsedName} 👋\n
Thanks for answering our questionnaire. Based on your\n responses, We’ve curated a selection of Playlists and Scenes just for\n you. Click the button below to start exploring. If you’d like to\n browse our full catalog of Playlists and Scenes, scroll down and visit\n the Scenes, Genres, Intensities, and Vibes pages.\n
\n {rdd.isMobileOnly && (\n \n setSearchValue(e.target.value)}\n value={searchValue}\n className=\"music-field\"\n type=\"search\"\n icon={\n Discover Playlists and Scenes\n \n\n \n \n
\n \n \n \n \n history.push(`/${path}/generated-content/what-do-you-do`)\n }\n >\n View all\n \n
\n\n \n What do you do? \n
\n\n {categoryStringWLimit}\n
\n\n \n \n {_.sampleSize(scenesBySubCategories, 8)?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n <>\n
\n \n \n )}\n \n );\n};\n\nexport default WhatDoYouDo;\n","import React, { useMemo } from 'react';\nimport * as rdd from 'react-device-detect';\n\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport CardLink from 'components/card-link/card-link';\n\nimport useAuth from '../../auth/hooks/use-auth';\nimport { useHistory, useParams } from 'react-router-dom';\nimport _ from 'lodash';\nimport Button from '../../../components/button/button';\nimport { stringSizeLimiter } from '../../../utils/string-size-limiter';\n\nconst YourMusicTastes = () => {\n let { id } = useParams();\n let history = useHistory();\n const { previewUser, user } = useAuth();\n const path = previewUser ? `user/${id}` : id;\n const {\n allScenes,\n allFeaturedScenes,\n loading: loadingScenes,\n } = useAllScenes();\n\n const clientGenres = useMemo(\n () => user?.musicProfile?.genres || [],\n [allScenes, user?.musicProfile?.genres]\n );\n\n const genresString = clientGenres.join(' / ');\n const genresStringWLimit = stringSizeLimiter(genresString, 33);\n\n const scenesByGenres = useMemo(\n () =>\n [...allScenes, ...allFeaturedScenes]?.filter(\n (item) =>\n item.genre?.filter((item2) => clientGenres.includes(item2))?.length >\n 0\n ),\n [allScenes, allFeaturedScenes, clientGenres]\n );\n\n const scenesBySubCategoriesSample = useMemo(\n () => _.sampleSize(scenesByGenres, 8),\n [scenesByGenres]\n );\n\n return (\n <>\n {rdd.isMobileOnly ? (\n What do you do?
\n\n \n (window.location.href = `/${path}/generated-content/what-do-you-do`)\n }\n modifier=\"as-link\"\n >\n View all\n \n
\n {categoryString}
\n\n \n \n history.push(`/${path}/generated-content/your-music-tastes`)\n }\n >\n View all\n \n
\n\n \n Your music tastes? \n
\n{genresStringWLimit}
\n\n \n \n {scenesBySubCategoriesSample?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n \n \n )}\n \n );\n};\n\nexport default YourMusicTastes;\n","import React, { useMemo } from 'react';\nimport * as rdd from 'react-device-detect';\n\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport CardLink from 'components/card-link/card-link';\n\nimport useAuth from '../../auth/hooks/use-auth';\nimport { useHistory, useParams } from 'react-router-dom';\nimport _ from 'lodash';\nimport Button from '../../../components/button/button';\nimport { stringSizeLimiter } from '../../../utils/string-size-limiter';\n\nconst OnBrandArtists = ({ userBrandArtists }) => {\n let { id } = useParams();\n let history = useHistory();\n const { previewUser } = useAuth();\n const path = previewUser ? `user/${id}` : id;\n const { allArtistScenes, loading: loadingScenes } = useAllScenes();\n\n const artistString = userBrandArtists.join(' / ');\n const artistStringWLimit = stringSizeLimiter(artistString, 33);\n\n const scenes = useMemo(() => allArtistScenes || [], [allArtistScenes]);\n const scenesSample = useMemo(() => _.sampleSize(scenes, 8), [scenes]);\n\n return (\n <>\n {rdd.isMobileOnly ? (\n Your music tastes
\n\n \n (window.location.href = `/${path}/generated-content/your-music-tastes`)\n }\n modifier=\"as-link\"\n >\n View all\n \n
\n {genresString}
\n\n \n \n history.push(`/${path}/generated-content/on-brand-artists`)\n }\n >\n View all\n \n
\n\n \n On brand artists? \n
\n{artistStringWLimit}
\n\n \n \n {_.sampleSize(scenes, 8)?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n \n \n )}\n \n );\n};\n\nexport default OnBrandArtists;\n","import React, { useMemo } from 'react';\nimport * as rdd from 'react-device-detect';\n\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport CardLink from 'components/card-link/card-link';\n\nimport useAuth from '../../auth/hooks/use-auth';\nimport { useHistory, useParams } from 'react-router-dom';\nimport _ from 'lodash';\nimport Button from '../../../components/button/button';\nimport { stringSizeLimiter } from '../../../utils/string-size-limiter';\n\nconst WhatsYourVibe = () => {\n let { id } = useParams();\n let history = useHistory();\n const { previewUser, user } = useAuth();\n const path = previewUser ? `user/${id}` : id;\n const {\n allScenes,\n allFeaturedScenes,\n loading: loadingScenes,\n } = useAllScenes();\n\n const userVibes = useMemo(\n () => user?.musicProfile?.vibe || [],\n [allScenes, user?.musicProfile?.vibe]\n );\n\n const vibesString = userVibes.join(' / ');\n const vibesStringWLimit = stringSizeLimiter(vibesString, 33);\n\n const ScenesByVibe = useMemo(\n () =>\n [...allScenes, ...allFeaturedScenes]?.filter(\n (item) =>\n item.vibe?.filter((item2) => userVibes.includes(item2))?.length > 0\n ),\n [allScenes, userVibes]\n );\n\n const ScenesByVibeSample = useMemo(\n () => _.sampleSize(ScenesByVibe, 8),\n [ScenesByVibe]\n );\n\n return (\n <>\n {rdd.isMobileOnly ? (\n On brand artists
\n\n \n history.push(`/${path}/generated-content/on-brand-artists`)\n }\n modifier=\"as-link\"\n >\n View all\n \n
\n {artistString}
\n\n \n \n history.push(`/${path}/generated-content/whats-your-vibe`)\n }\n >\n View all\n \n
\n\n \n What’s your vibe? \n
\n{vibesStringWLimit}
\n\n \n \n {ScenesByVibeSample.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n \n \n )}\n \n );\n};\n\nexport default WhatsYourVibe;\n","var _path, _path2;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgArrowDownCircle(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 36,\n height: 36,\n viewBox: \"0 0 36 36\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18 33C26.2843 33 33 26.2843 33 18C33 9.71573 26.2843 3 18 3C9.71573 3 3 9.71573 3 18C3 26.2843 9.71573 33 18 33Z\",\n stroke: \"black\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M24 18L18 24L12 18M18 12V22.5\",\n stroke: \"black\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowDownCircle);\nexport default __webpack_public_path__ + \"static/media/arrow-down-circle.7d7bdc27.svg\";\nexport { ForwardRef as ReactComponent };","var _g, _defs;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgPlusCircle(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 50,\n height: 52,\n viewBox: \"0 0 50 52\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n clipPath: \"url(#clip0_65_243)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M36.6064 36.6068C42.4643 30.749 42.4643 21.2515 36.6064 15.3936C30.7486 9.53578 21.2511 9.53578 15.3932 15.3936C9.53536 21.2515 9.53536 30.749 15.3932 36.6068C21.2511 42.4647 30.7486 42.4647 36.6064 36.6068Z\",\n stroke: \"white\",\n strokeWidth: 3,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.7573 21.7576L30.2426 30.2428\",\n stroke: \"white\",\n strokeWidth: 3,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.7573 30.2429L30.2426 21.7576\",\n stroke: \"white\",\n strokeWidth: 3,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n }))), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip0_65_243\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n width: 36,\n height: 36,\n fill: \"white\",\n transform: \"translate(0.543945 26.0002) rotate(-45)\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgPlusCircle);\nexport default __webpack_public_path__ + \"static/media/plus-circle.b80fb77b.svg\";\nexport { ForwardRef as ReactComponent };","/**\n * External dependencies\n */\nimport React from 'react';\nimport * as rdd from 'react-device-detect';\n/**\n * Internal dependencies\n */\nimport Modal from 'components/modal/modal';\nimport { ReactComponent as PlusCircle } from 'assets/svg-icons/plus-circle.svg';\n\nconst SignUpModal = ({ visible, onClose, cardTitle, cardColor }) => {\n const style = rdd.isMobileOnly\n ? {\n height: 310,\n width: '100%',\n position: 'relative',\n backgroundColor: cardColor,\n }\n : {\n height: 310,\n width: 480,\n position: 'relative',\n backgroundColor: cardColor,\n };\n return (\n What’s your vibe?
\n\n \n history.push(`/${path}/generated-content/whats-your-vibe`)\n }\n modifier=\"as-link\"\n >\n View all\n \n
\n {vibesString}
\n\n
\n \n );\n};\n\nexport default SignUpModal;\n","/**\n * External dependencies\n */\nimport { gql } from '@apollo/client';\n\nexport const USER_PREVIEW_ACTION = gql`\n mutation userPreviewAction($action: String!) {\n userPreviewAction(action: $action)\n }\n`;\n","import React from 'react';\nimport Button from '../../../../components/button/button';\nimport SignUpModal from './sign-up-modal';\nimport useUserPreviewAction from '../../hooks/use-user-preview-action';\n\nconst HelperCard = ({\n title,\n description,\n description2,\n style,\n buttonText,\n}) => {\n const [showSignUpModal, setShowSignUpModal] = React.useState(false);\n const [modalColor, setModalColor] = React.useState('#893BC6');\n const { userPreviewAction } = useUserPreviewAction();\n\n const handleButton = () => {\n switch (buttonText) {\n case 'Get Curator':\n userPreviewAction({\n variables: {\n action: 'getCurator',\n },\n }).then((res) => {\n if (res?.data?.userPreviewAction === 'OK') {\n setModalColor('#893BC6');\n setShowSignUpModal(true);\n }\n });\n break;\n case 'Contact Sales':\n userPreviewAction({\n variables: {\n action: 'contactSales',\n },\n }).then((res) => {\n if (res?.data?.userPreviewAction === 'OK') {\n setModalColor('#20349F');\n setShowSignUpModal(true);\n }\n });\n break;\n case 'Modify':\n window.location.href = `/`;\n break;\n default:\n break;\n }\n };\n\n return (\n \n
\n {cardTitle}
\n\n setShowSignUpModal(false)}\n />\n
\n );\n};\n\nexport default HelperCard;\n","/**\n * External dependencies\n */\nimport { useMutation } from '@apollo/client';\nimport { USER_PREVIEW_ACTION } from '../mutations/user-preview-action';\n\n/**\n * Internal dependencies\n */\n\nexport default function useUserPreviewAction() {\n const [userPreviewAction, { loading, data }] =\n useMutation(USER_PREVIEW_ACTION);\n\n return {\n userPreviewAction,\n loading,\n data,\n };\n}\n","import HelperCard from './helper-card';\nimport React from 'react';\n\nconst HelperCards = ({ id }) => {\n return (\n \n
\n {title}
\n{description}
\n{description2}
\n\n \n
\n \n
\n );\n};\n\nexport default HelperCards;\n","import React, { useState } from 'react';\nimport { ReactComponent as ArrowDown } from 'assets/svg-icons/arrow-down-circle.svg';\nimport cx from 'classnames';\nimport { useHistory, useParams } from 'react-router-dom';\nimport * as rdd from 'react-device-detect';\nimport HelperCards from './helper-cards';\n\nconst HelperBar = () => {\n const history = useHistory();\n const [showHelperBar, setShowHelperBar] = useState('closed');\n const { id } = useParams();\n const handleOpenHelperBar = () => {\n !rdd.isMobileOnly && showHelperBar === 'closed'\n ? setShowHelperBar('opened')\n : setShowHelperBar('closed');\n rdd.isMobileOnly && history.push(`/user/${id}/generated-content/actions`);\n };\n return (\n \n
\n {!rdd.isMobileOnly && (\n \n {showHelperBar === 'closed'\n ? 'Ready to sign up or need custom music curation?'\n : 'Get back to the tunes'}\n
\n\n {showHelperBar === 'opened' &&
\n )}\n \n );\n};\n\nexport default HelperBar;\n","import React, { useMemo } from 'react';\nimport * as rdd from 'react-device-detect';\n\nimport DashboardLayout from 'layouts/dashboard-layout';\n\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport useAllPlaylists from '../hooks/use-all-playlists';\nimport useAuth from '../../auth/hooks/use-auth';\nimport toTitleCase from '../../../utils/toTitleCase';\nimport WhatDoYouDo from '../generated-sections/what-do-you-do';\nimport YourMusicTastes from '../generated-sections/your-music-tastes';\nimport OnBrandArtists from '../generated-sections/on-brand-artists';\nimport WhatsYourVibe from '../generated-sections/whats-your-vibe';\nimport HelperBar from '../../sales-wizard/components/header-helper/helper-bar';\n\nconst GeneratedContentPage = () => {\n const { user } = useAuth();\n const { loading: loadingScenes } = useAllScenes();\n const { loading: loadingPlaylists } = useAllPlaylists();\n\n const userBrandArtists = useMemo(\n () => user?.musicProfile?.artists.filter((item) => item !== '') || [],\n [user?.musicProfile?.artists]\n );\n return (\n \n \n \n \n \n
\n );\n};\n\nexport default GeneratedContentPage;\n","import React, { useMemo } from 'react';\nimport * as rdd from 'react-device-detect';\n\nimport DashboardLayout from 'layouts/dashboard-layout';\n\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport CardLink from 'components/card-link/card-link';\n\nimport ResultItem from '../../../components/result-item/result-item';\nimport stc from 'string-to-color';\nimport { useParams } from 'react-router-dom';\nimport useAuth from '../../auth/hooks/use-auth';\n\nconst WhatDoYouDoPage = () => {\n let { id } = useParams();\n const { previewUser, user } = useAuth();\n const path = previewUser ? `user/${id}` : id;\n const { allFeaturedScenes, loading: loadingScenes } = useAllScenes();\n\n const clientSubCategory = useMemo(\n () => user?.musicProfile?.subCategory || '',\n [allFeaturedScenes, user?.musicProfile?.subCategory]\n );\n\n const scenesBySubCategories = useMemo(\n () =>\n allFeaturedScenes?.filter(\n (item) =>\n item.newCategory?.filter(\n (item2) =>\n clientSubCategory === 'Other' ||\n item2?.subCategories?.includes(clientSubCategory)\n )?.length > 0\n ),\n [allFeaturedScenes, clientSubCategory]\n );\n\n return (\n \n {scenesBySubCategories?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n ) : (\n \n {scenesByGenres?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n ) : (\n \n {scenes?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n ) : (\n \n {ScenesByVibe?.map((item) => {\n const to =\n item.type === 'playlist'\n ? `/${path}/search/playlists/${item.id}`\n : `/${path}/search/all/scene/${item.id}`;\n return (\n
\n ) : (\n \n
\n );\n};\n\nexport default HelperCardsMobile;\n","import React, { useMemo } from 'react';\nimport * as rdd from 'react-device-detect';\n\nimport DashboardLayout from 'layouts/dashboard-layout';\n\nimport LoadingProvider from 'components/loading-provider/loading-provider';\nimport useAllScenes from '../hooks/use-all-scenes';\nimport useAllPlaylists from '../hooks/use-all-playlists';\nimport useAuth from '../../auth/hooks/use-auth';\nimport toTitleCase from '../../../utils/toTitleCase';\nimport HelperCardsMobile from '../../sales-wizard/components/header-helper/helper-cards-mobile';\n\nconst GeneratedContentActionsPage = () => {\n const { user } = useAuth();\n const { loading: loadingScenes } = useAllScenes();\n const { loading: loadingPlaylists } = useAllPlaylists();\n\n const userBrandArtists = useMemo(\n () => user?.musicProfile?.artists.filter((item) => item !== '') || [],\n [user?.musicProfile?.artists]\n );\n return (\n \n \n \n \n \n
\n );\n};\n\nexport default GeneratedContentActionsPage;\n","/**\n * External dependencies\n */\nimport React, { useEffect, useContext } from 'react';\nimport { Switch, Route, useParams } from 'react-router-dom';\n\n/**\n * Internal dependencies\n */\nimport MusicSearchCollection from 'domain/music/pages/music-search-all';\nimport MusicSearchPage from 'domain/music/pages/music-search';\nimport CurrentPlaylistPage from 'domain/music/pages/current-playlist';\nimport CuratedMixPage from 'domain/music/pages/curated-mix';\nimport SingleGenrePage from 'domain/music/pages/single-genre';\nimport SingleScenePage from 'domain/music/pages/single-scene';\nimport SingleIntensityPage from 'domain/music/pages/single-intensity';\nimport SceneSubCategoryPage from 'domain/music/pages/subcategory-page';\nimport SceneSubCategories from 'domain/music/pages/scene-subcategories';\nimport FeaturedPage from 'domain/music/pages/featured-page';\nimport AuthContext from 'domain/auth/contexts/auth-context/auth-context';\nimport usePreviewToken from '../../music/hooks/use-preview-token';\nimport useViewables from '../hooks/use-viewables';\nimport SingleVibePage from '../pages/single-vibe';\nimport useUser from '../../auth/hooks/use-user';\nimport MusicPageUser from 'domain/music/pages/music-user';\nimport GeneratedContentPage from '../pages/generated-content';\nimport WhatDoYouDoPage from '../pages/what-do-you-do-page';\nimport YourMusicTastesPage from '../pages/your-music-tastes-page';\nimport OnBrandArtistsPage from '../pages/on-brand-artists-page';\nimport WhatsYourVibePage from '../pages/whats-your-vibe-page';\nimport GeneratedContentActionsPage from '../pages/generated-content-actions';\n\nconst MusicRoutesUser = () => {\n const {\n setPreviewToken,\n previewId: savedPreviewId,\n setPreviewId,\n viewableCategories,\n setViewableCategories,\n setPreviewUser,\n user,\n setUser,\n } = useContext(AuthContext);\n const { id } = useParams();\n\n const { previewToken } = usePreviewToken(id.toLowerCase(), 'user');\n const { viewables } = useViewables(id.toLowerCase(), 'user') || {};\n const { data: userQuery, loading } = useUser();\n\n useEffect(() => {\n if (!viewableCategories && viewables) {\n setViewableCategories(viewables);\n }\n if (\n previewToken &&\n viewables &&\n previewToken !== 'ACCESS DENIED' &&\n previewToken !== 'TOKEN EXPIRED' &&\n savedPreviewId !== id\n ) {\n setPreviewToken(previewToken);\n setPreviewId(id);\n setPreviewUser(true);\n }\n\n if (previewToken === 'ACCESS DENIED' || previewToken === 'TOKEN EXPIRED') {\n setPreviewToken(previewToken);\n setPreviewId(null);\n setViewableCategories([]);\n setPreviewUser(false);\n window.location.href = '/';\n }\n }, [previewToken, viewables]);\n\n useEffect(() => {\n if (!user && !loading && previewToken && userQuery?.id !== 'none') {\n setUser(userQuery);\n setPreviewUser(true);\n }\n }, [loading, previewToken]);\n\n return (\n \n
\n );\n}\n\nexport default withRouter(App);\n","/**\n * External dependencies\n */\nimport {\n ApolloClient,\n createHttpLink,\n split,\n InMemoryCache,\n ApolloLink,\n} from '@apollo/client';\nimport { setContext } from '@apollo/client/link/context';\nimport { getMainDefinition } from '@apollo/client/utilities';\nimport { relayStylePagination } from '@apollo/client/utilities';\nimport { onError } from '@apollo/client/link/error';\nimport { GraphQLWsLink } from '@apollo/client/link/subscriptions';\nimport { createClient } from 'graphql-ws';\n\nconst apolloClient = (token) => {\n const hasToken = token && token !== '';\n\n const httpLink = createHttpLink({\n uri: process.env.REACT_APP_GRAPHQL_API_URL,\n });\n\n let wsLink;\n if (hasToken) {\n let activeSocket, timedOut;\n wsLink = new GraphQLWsLink(\n createClient({\n url: process.env.REACT_APP_GRAPHQL_WSS_URL,\n connectionParams: {\n authorization: `Bearer ${token}`,\n },\n keepAlive: 60_000,\n on: {\n connected: (socket) => (activeSocket = socket),\n ping: (received) => {\n if (!received)\n timedOut = setTimeout(() => {\n if (activeSocket.readyState === WebSocket.OPEN)\n activeSocket.close(4408, 'Request Timeout');\n }, 5_000);\n },\n pong: (received) => {\n if (received) clearTimeout(timedOut);\n },\n },\n })\n );\n }\n\n const authLink = setContext(async (_, { headers }) => {\n // return the headers to the context so httpLink can read them\n return {\n headers: {\n ...headers,\n authorization: token ? `Bearer ${token}` : '',\n },\n connectionParams: {\n authorization: token || null,\n },\n };\n });\n\n const errorLink = onError(({ graphQLErrors, networkError }) => {\n if (graphQLErrors) {\n graphQLErrors.map(({ message, locations, path }) =>\n console.log(\n `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`\n )\n );\n }\n if (networkError) {\n console.log(`[Network error]: ${networkError}`);\n }\n });\n\n // Automatically switching between WebSocket link or HTTP Link based on our query type\n const splitLink = split(\n ({ query }) => {\n const definition = getMainDefinition(query);\n return (\n definition.kind === 'OperationDefinition' &&\n definition.operation === 'subscription'\n );\n },\n wsLink || new ApolloLink((operation, forward) => forward(operation)), // Use wsLink if defined, else use a passthrough link\n authLink.concat(httpLink)\n );\n\n const cache = new InMemoryCache({\n typePolicies: {\n Query: {\n fields: {\n viewer: relayStylePagination(),\n },\n },\n },\n });\n\n return new ApolloClient({\n link: ApolloLink.from([errorLink, splitLink]),\n cache,\n });\n};\n\nexport default apolloClient;\n","/**\n * External dependencies\n */\nimport React from 'react';\nimport { ApolloProvider } from '@apollo/client';\n\n/**\n * Internal dependencies\n */\nimport apolloClient from 'utils/apollo-client/apollo-client';\nimport useAuth from 'domain/auth/hooks/use-auth';\n\nconst ApolloClientProvider = ({ children }) => {\n const { previewToken } = useAuth();\n return (\n