\n \n
\n
{date}
}\n \n LEARN MORE ABOUT \n \n LIVEWIRE\n
\n \n SIGNUP FOR OUR \n \n FREE NEWSLETTER\n
\n \n \n \n
\n \n Manage Wire
\n- \n {!!publishedAt && window.Livewire.currentUser.profile.canManageEditorsPicks && (\n \n )}\n \n {!!publishedAt && }\n {!publishedAt && }\n { window.Livewire.currentUser.id === userId && }\n
- \n {bullets.map(item =>
- {item} )}\n
\n
\n ))}\n \n {!!showExpand && (\n \n {!!allowFullSummary &&
\n {helpContent.length !== 0 && (\n
\n );\n};\n\nFee.propTypes = {\n title: PropTypes.string.isRequired,\n value: PropTypes.string,\n date: PropTypes.string,\n helpContent: PropTypes.arrayOf(PropTypes.string),\n handleClick: PropTypes.func,\n};\n\nFee.defaultProps = {\n value: '0',\n date: null,\n helpContent: [],\n handleClick: () => null,\n};\n\nexport default Fee;\n","import React from 'react';\n\nconst PasswordRecoveryContext = React.createContext();\n\nconst reducer = (state, { type, payload }) => {\n switch (type) {\n case 'setEmail':\n return { ...state, email: payload };\n default:\n throw new Error();\n }\n};\n\nconst defaultState = {\n email: null,\n};\n\nexport default PasswordRecoveryContext;\nexport {\n reducer,\n defaultState,\n};\n","import React from 'react';\n\nconst ResetPasswordContext = React.createContext();\n\nconst reducer = (state, { type }) => {\n switch (type) {\n case 'setComplete':\n return { ...state, complete: true };\n default:\n throw new Error();\n }\n};\n\nconst defaultState = {\n complete: false,\n};\n\nexport default ResetPasswordContext;\nexport {\n reducer,\n defaultState,\n};\n","import PropTypes from 'prop-types';\n\nconst captionProps = {\n id: PropTypes.number.isRequired,\n caption: PropTypes.shape({\n text: PropTypes.string,\n url: PropTypes.string,\n }).isRequired,\n campaign: PropTypes.shape({\n name: PropTypes.string.isRequired,\n sentDate: PropTypes.string.isRequired,\n }),\n timestamp: PropTypes.string,\n isSponsored: PropTypes.bool.isRequired,\n bookmarked: PropTypes.bool,\n showBookmarkHint: PropTypes.bool,\n};\n\nconst defaultCaptionProps = {\n bookmarked: false,\n showBookmarkHint: false,\n campaign: null,\n timestamp: null,\n};\n\nexport {\n captionProps,\n defaultCaptionProps,\n};\n","import PropTypes from 'prop-types';\n\nexport const propTypes = {\n advertising: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n imageFilename: PropTypes.string,\n imageContentType: PropTypes.string,\n imageUrl: PropTypes.string,\n link: PropTypes.string,\n startDate: PropTypes.string,\n finishDate: PropTypes.string,\n }),\n};\n\nexport const defaultProps = {\n advertising: {\n id: null,\n name: '',\n imageFilename: null,\n imageContentType: null,\n imageUrl: null,\n link: '',\n startDate: '',\n finishDate: '',\n },\n};\n","import PropTypes from 'prop-types';\n\nexport const propTypes = {\n announcement: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n heroImageFilename: PropTypes.string,\n heroImageContentType: PropTypes.string,\n heroImageUrl: PropTypes.string,\n headline: PropTypes.string,\n copy: PropTypes.string,\n buttonCopy: PropTypes.string,\n buttonLink: PropTypes.string,\n expiryDate: PropTypes.string,\n userGroup: PropTypes.string,\n investorTypes: PropTypes.arrayOf(PropTypes.number),\n companies: PropTypes.arrayOf(PropTypes.number),\n pagesRegex: PropTypes.string,\n }),\n companiesOptions: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n })).isRequired,\n investorTypesOptions: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n })).isRequired,\n};\n\nexport const defaultProps = {\n announcement: {\n id: null,\n name: '',\n heroImageFilename: null,\n heroImageContentType: null,\n heroImageUrl: null,\n headline: '',\n copy: '',\n buttonCopy: '',\n buttonLink: '',\n expiryDate: '',\n pagesRegex: '',\n userGroup: '',\n investorTypes: null,\n companies: null,\n userType: 'all',\n },\n companiesOptions: [],\n investorTypesOptions: [],\n};\n","import PropTypes from 'prop-types';\n\nexport const propTypes = {\n contentFormatType: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n description: PropTypes.string,\n }),\n};\n\nexport const defaultProps = {\n contentFormatType: {\n id: null,\n name: '',\n slug: '',\n description: '',\n },\n};\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useStore = create(set => ({\n assetClasses: [],\n categories: [],\n set: fn => set(produce(fn)),\n}));\n\nexport default useStore;\n","import PropTypes from 'prop-types';\n\nexport const propTypes = {\n banner: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n imageFilename: PropTypes.string,\n imageContentType: PropTypes.string,\n imageUrl: PropTypes.string,\n headline: PropTypes.string,\n byline: PropTypes.string,\n registerButtonCopy: PropTypes.string,\n }),\n};\n\nexport const defaultProps = {\n banner: {\n id: null,\n name: '',\n imageFilename: null,\n imageContentType: null,\n imageUrl: null,\n headline: '',\n byline: '',\n registerButtonCopy: '',\n },\n};\n","import { createOrUpdate, regenSlug } from '../../../services/lwadmin/category/category-service';\n\nexport default class Category {\n constructor(source) {\n Object.assign(this, source || {\n id: null,\n name: '',\n description: '',\n slug: '',\n stats: {\n wires_count: 0,\n },\n });\n }\n\n save() {\n return createOrUpdate(this);\n }\n\n regenerateSlug() {\n return regenSlug(this.id);\n }\n}\n","import axios from './axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport function useGetLivewireEvents() {\n return useAxios({\n url: '/api/v1/livewire_events',\n method: 'GET',\n });\n}\n\nexport function notUsed() {\n // TODO: eslint stop blaming about prefer default exports when there is only\n // one function.\n}\n\nexport const recordEvent = eventData => {\n const csrfToken = document.querySelector(\"[name='csrf-token']\").content;\n fetch('/statistic_events/create.json', {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ statistics_data: eventData }),\n });\n};\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useAdvertisingStore = create(set => ({\n advertising: {\n id: null,\n name: null,\n image: null,\n imageFilename: null,\n imageContentType: null,\n imageUrl: null,\n link: null,\n startDate: null,\n finishDate: null,\n },\n errors: {},\n set: fn => set(produce(fn)),\n}));\n\nexport default useAdvertisingStore;\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useBannerStore = create(set => ({\n banner: {\n id: null,\n name: null,\n image: null,\n imageFilename: null,\n imageContentType: null,\n imageUrl: null,\n headline: null,\n byline: null,\n registerButtonCopy: null,\n },\n errors: {},\n set: fn => set(produce(fn)),\n}));\n\nexport default useBannerStore;\n","import axios from '../axios';\n\nexport function subscribeToTrending(type) {\n return axios.put('/api/v1/profiles/me/notification_settings/trending/subscribe.json', {\n authenticity_token: Livewire.formAuthenticityToken,\n type,\n });\n}\n\nexport function unsubscribeFromTrending(type) {\n return axios.put('/api/v1/profiles/me/notification_settings/trending/unsubscribe.json', {\n authenticity_token: Livewire.formAuthenticityToken,\n type,\n });\n}\n\nexport function updateNotifyOnFollow(options) {\n return axios.post('/api/v1/profiles/me/notification_settings/notify_on_follow.json', {\n authenticity_token: Livewire.formAuthenticityToken,\n notify_on_follow_options: options,\n });\n}\n\nexport function updateNotifyOnLike(options) {\n return axios.post('/api/v1/profiles/me/notification_settings/notify_on_like.json', {\n authenticity_token: Livewire.formAuthenticityToken,\n notify_on_like_options: options,\n });\n}\n\nexport function updateNotifyOnComment(options) {\n return axios.post('/api/v1/profiles/me/notification_settings/notify_on_comment.json', {\n authenticity_token: Livewire.formAuthenticityToken,\n notify_on_comment_options: options,\n });\n}\n\nexport function updateNotifyOnMention(options) {\n return axios.post('/api/v1/profiles/me/notification_settings/notify_on_mention.json', {\n authenticity_token: Livewire.formAuthenticityToken,\n notify_on_mention_options: options,\n });\n}\n","import _ from 'lodash';\nimport moment from 'moment-timezone';\nimport { TZ } from '../../../../shared/consts';\nimport {\n INPUT_FMT, AUDIENCE_STATS, GRANULARITY_TO_DURATION,\n} from '../../common/constants';\n\n// The followers param for all the functions in this file contains *contributor*.\n// It is named `followers` to follow the context state variables' naming\n// convention.\n\nconst createMomTz = d => moment.tz(d, INPUT_FMT, TZ);\n\nconst isValid = d => moment(d, INPUT_FMT, true).isValid();\n\nconst dateHashToArray = hash => _(hash)\n .map((v, date) => ({ ...v, date }))\n .filter(({ date }) => isValid(date))\n .value();\n\nconst propsReducer = props => (r, item) => {\n const d = { ...r };\n props.forEach(prop => {\n d[prop] += _.get(item, prop, 0);\n });\n return d;\n};\n\nconst getTotalFigures = followers => _(followers)\n .map(c => {\n const stats = _.sortBy(dateHashToArray(c.followers), ['date']);\n const initial = { total: _.get(_.last(stats), 'accumTotal', 0), gained: 0, lost: 0 };\n return stats.reduce(propsReducer(AUDIENCE_STATS), initial);\n })\n .reduce(propsReducer(['total'].concat(AUDIENCE_STATS)), { total: 0, gained: 0, lost: 0 });\n\nconst earliestStatsUnit = ({ followers, granularity = 'd' } = {}) => {\n let earliestDate = null;\n let earliestContributorCreatedDate = moment.tz(TZ);\n\n (followers || []).forEach(contributor => {\n // createdAt is in ISO96001 format, which already contains timezone\n // offset. Do NOT use `moment.tz` on this string.\n const createdDate = moment(contributor.createdAt);\n if (createdDate.isBefore(earliestContributorCreatedDate)) {\n earliestContributorCreatedDate = undefined;\n earliestContributorCreatedDate = createdDate;\n }\n const date = _.first(Object.keys(contributor.followers || []).filter(isValid).sort());\n if (date) {\n const mom = createMomTz(date);\n // always use negative isSameOrAfter to cope with the initial null\n // value\n if (!mom.isSameOrAfter(earliestDate)) {\n earliestDate = undefined;\n earliestDate = mom;\n }\n }\n });\n\n const result = moment().tz(TZ).diff(\n earliestDate ? moment(earliestDate, INPUT_FMT, TZ) : earliestContributorCreatedDate,\n GRANULARITY_TO_DURATION[granularity] || 'days',\n );\n\n return result;\n};\n\nconst fillDateHash = (h, from, to) => {\n let lastValue = 0;\n const result = {};\n const t = createMomTz(from);\n while (!t.isAfter(to, 'day')) {\n const thisDay = t.format(INPUT_FMT);\n result[thisDay] = _.get(h, `${thisDay}.accumTotal`, lastValue);\n lastValue = result[thisDay];\n t.add(1, 'day');\n }\n return result;\n};\n\nconst getDateBoundary = followers => {\n const boundary = {\n from: moment.tz().subtract(30, 'days').format(INPUT_FMT),\n to: moment.tz().format(INPUT_FMT),\n };\n (followers || []).forEach(c => {\n Object.keys(c.followers).forEach(d => {\n boundary.from = d < boundary.from ? d : boundary.from;\n boundary.to = d > boundary.to ? d : boundary.to;\n });\n });\n return boundary;\n};\n\nconst followersToTimeSeries = followers => {\n const boundary = getDateBoundary(followers);\n const stats = _.map(followers, c => fillDateHash(c.followers, boundary.from, boundary.to));\n const timeseries = {};\n Object.keys(stats[0] || {}).forEach(date => {\n timeseries[date] = _.reduce(stats, (v, item) => v + item[date], 0);\n });\n return timeseries;\n};\n\nconst timeseriesToBucket = ({\n ts, start, end, granularity,\n}) => {\n const result = [];\n const duration = GRANULARITY_TO_DURATION[granularity] || 'days';\n\n // With start and end being days away from today, we're using a range like:\n // (start, end]\n // That means start of day of 1 day after start date to end of day end date.\n const t = moment()\n .tz(TZ)\n .add(1, duration)\n .startOf(duration)\n .subtract(start, duration);\n\n let pos = start;\n while (pos > end) {\n const startDay = t.format(INPUT_FMT);\n const singleBucket = {\n time: startDay,\n changed: 0,\n value: _.get(ts, startDay, _.get(_.last(result), 'value', 0)),\n };\n if (granularity === 'm') {\n let monthEnd = 31;\n while (monthEnd > 0) {\n const day = t.clone().add(monthEnd, 'days');\n if (day.isSame(t, 'month')) {\n const value = _.get(ts, day.format(INPUT_FMT));\n if (typeof value === 'number') {\n singleBucket.value = value;\n break;\n }\n }\n monthEnd -= 1;\n }\n } else if (granularity === 'w') {\n let weekEnd = 6;\n while (weekEnd > 0) {\n const value = _.get(ts, t.clone().add(weekEnd, 'days').format(INPUT_FMT));\n if (typeof value === 'number') {\n singleBucket.value = value;\n break;\n }\n weekEnd -= 1;\n }\n }\n singleBucket.changed = result.length ? (singleBucket.value - _.last(result).value) : 0;\n result.push(singleBucket);\n pos -= 1;\n t.add(1, duration);\n }\n\n return result;\n};\n\nconst followersToBucket = ({\n followers, start, end, granularity,\n}) => {\n const ts = followersToTimeSeries(followers);\n return timeseriesToBucket({\n ts, start, end, granularity,\n });\n};\n\nexport {\n earliestStatsUnit,\n followersToBucket,\n getTotalFigures,\n};\n","const plural = d => (d > 1 ? 's' : '');\n\nexport default plural;\n","const sortOrders = [\n { name: 'Default', slug: 'default' },\n { name: 'Management Fee', order: ' (Lowest)', slug: 'management-fee-lowest' },\n { name: 'Growth Since Inception', order: ' (Highest)', slug: 'growth-since-inception-highest' },\n { name: 'Performance 1 Month', order: ' (Highest)', slug: '1-month-performance-highest' },\n { name: 'Performance 1 Year', order: ' (Highest)', slug: '1-year-performance-highest' },\n { name: 'Performance 3 Years', order: ' (Highest)', slug: '3-years-performance-highest' },\n { name: 'Performance 5 Years', order: ' (Highest)', slug: '5-years-performance-highest' },\n];\n\nexport default sortOrders;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport Container from '@material-ui/core/Container';\nimport Chip from '@material-ui/core/Chip';\nimport Typography from '@material-ui/core/Typography';\nimport { useIsMobile, useIsXLarge } from '../../../../../shared/theme';\nimport useFundsStateStore from '../../../common/funds-state-hook';\n\nconst useCardStyles = makeStyles({\n root: {\n border: '1px solid #D7DFE7',\n borderRadius: 9,\n // eslint-disable-next-line no-nested-ternary\n width: props => (props.isMobile ? '100%' : props.isXLarge ? 'calc((100% - 36px)/4)' : 'calc((100% - 12px)/2)'),\n\n '&:hover': {\n cursor: 'pointer',\n border: '1px solid #D7DFE7',\n boxShadow: '0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)',\n },\n\n '&.active': {\n border: '1px solid #19202D',\n backgroundColor: props => props.activeBgColor,\n },\n },\n});\n\nconst useContainerStyles = makeStyles({\n root: {\n border: '1px solid transparent',\n borderRadius: 9,\n padding: 0,\n height: '100%',\n\n '&.active': {\n border: '1px solid #19202D',\n backgroundColor: props => props.activeBgColor,\n },\n },\n});\n\nconst useChipStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'center',\n backgroundColor: props => props.typeBgColor,\n borderRadius: 4,\n height: 27,\n width: 'fit-content',\n\n '& > .MuiChip-label': {\n color: props => props.typeColor,\n fontFamily: 'Texta,Arial,Helvetica,sans-serif',\n fontSize: 19,\n fontWeight: 700,\n textTransform: 'uppercase',\n },\n },\n});\n\nconst Description = withStyles(() => ({\n root: {\n marginTop: 32,\n color: '#627484',\n fontFamily: 'Texta,Arial,Helvetica,sans-serif',\n fontSize: 17,\n lineHeight: '120%',\n },\n}))(Typography);\n\nexport default function FundTypeCard(props) {\n const isMobile = useIsMobile();\n const isXLarge = useIsXLarge();\n const set = useFundsStateStore(state => state.set);\n const fundTypes = useFundsStateStore(state => state.filters.fundTypes);\n const { type, label, description } = props;\n const selected = fundTypes.includes(type);\n const cardClasses = useCardStyles({ ...props, isMobile, isXLarge });\n const containerClasses = useContainerStyles({ ...props, isMobile, isXLarge });\n const chipClasses = useChipStyles({ ...props, isMobile, isXLarge });\n\n const toggleSelection = () => {\n set(state => {\n state.filters.fundTypes = selected ? [] : [type];\n });\n };\n\n return (\n \n {title}\n ?\n
\n )}\n {helpContent.length === 0 && (\n \n {title}\n
\n )}\n \n {valueToShow}\n p.a.\n {date && {`(${date})`}}\n
\n - \n {profile.areasOfExpertise.map(area => (\n
- \n {area.name}\n \n ))}\n
\n \n
\n \n Following\n
\n \n );\n }\n\n return (\n \n \n \n \n
\n \n Following\n Follow\n
\n \n );\n});\n\nAnimatedFollowButton.displayName = 'AnimatedFollowButton';\n\nAnimatedFollowButton.propTypes = {\n initialStatus: PropTypes.bool.isRequired,\n buttonName: PropTypes.string.isRequired,\n onUnfollow: PropTypes.func,\n // async () => {}\n followAction: PropTypes.func.isRequired,\n // async () => {}\n unfollowAction: PropTypes.func.isRequired,\n // followStatus => {}\n collectStats: PropTypes.func,\n // followStatus => {}\n broadcast: PropTypes.func.isRequired,\n};\n\nAnimatedFollowButton.defaultProps = {\n collectStats: null,\n onUnfollow: null,\n};\n\nexport default AnimatedFollowButton;\n","import _ from 'lodash';\nimport moment from 'moment';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport Wire from './latest-wires-components/wire';\nimport {\n SectionContainer,\n SectionTitle,\n SectionSubTitle,\n SectionDetails,\n} from '../../shared/sectionable/styles';\nimport Tail from '../common/styles';\nimport {\n useGetPaginatedAllWiresOfContributor,\n useGetPaginatedAllWiresOfFund,\n} from '../../../services/wires/from-contributor-service';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\nimport useContributorStateStore from '../common/contributor-state-hook';\n\nconst INIT_WIRE_NUMBER = 3;\nconst MAX_WIRE_NUMBER = 10;\n\nconst Container = styled(SectionContainer)`\n ${props => props.theme.isXXLarge && `\n margin-bottom: 94px;\n `};\n`;\n\nconst sectionName = 'latest-wires';\nexport default function LatestWires({ profile, viewAllWiresLink, type }) {\n const { id, slug } = profile;\n const [{ data }, getRecentWires] = type === 'profile'\n ? useGetPaginatedAllWiresOfContributor(id)\n : useGetPaginatedAllWiresOfFund(id);\n const [showViewMore, setShowViewMore] = React.useState(false);\n const [showViewAll, setShowViewAll] = React.useState(false);\n const [wires, setWires] = React.useState([]);\n const set = useContributorStateStore(state => state.set);\n\n const buildEventData = (event, statisticable) => ({\n event,\n statisticable,\n id,\n page: window.location.pathname,\n });\n\n const onViewMore = e => {\n e.preventDefault();\n const eventName = type === 'profile'\n ? 'contributor_profile_latest_view_more_clicked'\n : 'fund_profile_latest_view_more_clicked';\n recordStatisticsEvent(buildEventData(eventName, type));\n setWires(_.slice(data.wires, 0, MAX_WIRE_NUMBER));\n setShowViewMore(false);\n setShowViewAll(data.total > MAX_WIRE_NUMBER);\n };\n\n const onViewAllWires = e => {\n e.preventDefault();\n const eventName = type === 'profile'\n ? 'contributor_profile_latest_view_all_clicked'\n : 'fund_profile_latest_view_all_clicked';\n recordStatisticsEvent(buildEventData(eventName, type));\n if (viewAllWiresLink && viewAllWiresLink.length > 0) {\n window.location = `${viewAllWiresLink}`;\n } else {\n window.location = `/search/contributor/${slug}?nextPage=true&tab=all`;\n }\n };\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n React.useEffect(() => {\n getRecentWires(1);\n }, [getRecentWires]);\n\n React.useEffect(() => {\n const wiresLength = _.get(data, 'wires.length');\n if (wiresLength > 0) {\n setWires(_.slice(data.wires, 0, INIT_WIRE_NUMBER));\n setShowViewMore(wiresLength > INIT_WIRE_NUMBER);\n set(state => {\n state.hasLatestWires = true;\n });\n }\n }, [data, set]);\n\n if (!_.get(data, 'wires.length')) {\n return null;\n }\n\n const comparator = moment().subtract(30, 'days');\n const last30Days = _.filter(data.wires, w => comparator.isBefore(w.firstPublishedAt, 'day')).length;\n\n return (\n }){kind=icon}
\n \n
\n
\n
\n
\n \n {!this.state.messageSent || (\n
\n \n Success!\n {' Your message has been sent to the team at Livewire.'}\n
\n )}\n ,\n ...(!userSignedIn ? {} : {\n Account: [\n { text: 'Likes', anchor: { href: '/likes' } },\n { text: 'Saved Wires', anchor: { href: '/profiles/me/saved_wires' } },\n { text: 'Notifications', anchor: { href: '/profiles/me/notifications' } },\n { text: 'My Profile', anchor: { href: '/profiles/me/personal_details' } },\n ...(!canPostWires ? [] : [\n { text: 'My Wires', anchor: { href: `/contributors/${slug}?tab=wires#wires` } },\n { text: 'My Drafts', anchor: { href: `/contributors/${slug}?tab=drafts#drafts` } },\n ]),\n ...(activePartnership ? [dashboardItem] : []),\n { text: 'Email Preferences', anchor: { href: '/profiles/me/notification_preferences' } },\n { text: 'Sign Out', anchor: { href: '/users/sign_out', 'data-method': 'delete' } },\n ],\n }),\n Company: [\n { text: 'About Livewire', anchor: { href: '/company/home' } },\n { text: 'Contact Us', anchor: { href: '/company/our_story#contact_us' } },\n ],\n Events: [],\n };\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport { SectionName, PaddedContainer } from '../common/styles';\n\nconst aspectRatioPortrait = 750 / 992;\nconst aspectRatioLandscape = 1441 / 708;\nconst portaitWidth = 100;\nconst portaitHeight = portaitWidth / aspectRatioPortrait;\nconst landscapeWidth = 100;\nconst landscapeHeight = landscapeWidth / aspectRatioLandscape;\n\nconst Container = styled.div`\n margin-top: ${props => (props.theme.isMobile ? '0' : '-70px')};\n position: relative;\n top: 0;\n width: 100vw;\n height: ${props => (props.theme.isMobile ? portaitHeight : landscapeHeight)}vw;\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\nconst TextContainer = styled(PaddedContainer)`\n ${props => (props.theme.isMobile ? `\n position: relative;\n height: ${portaitHeight}vw;\n margin-top: -${portaitHeight}vw;\n padding-top: 57px;\n ` : `\n position: absolute;\n margin-top: 12vw;\n `)};\n z-index: 150;\n`;\n\nconst Image = styled(Img)`\n width: 100vw;\n z-index: 100;\n ${props => (!props.theme.isMobile && `\n margin-top: -138px;\n `)};\n`;\n\nconst Title = styled(SectionName)`\n margin-bottom: ${props => (props.theme.isMobile ? 10 : 20)}px;\n`;\n\nconst Desc = styled.p`\n margin-top: 20px;\n ${props => !props.theme.isMobile && `\n width: 600px;\n `};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: ${props => (props.theme.isMobile ? 35 : 44)}px;\n line-height: ${props => (props.theme.isMobile ? 46 : 56)}px;\n color: white;\n`;\n\nexport default function Hero() {\n const {\n hero, heroPortrait, isMobile,\n } = React.useContext(ThemeContext);\n\n return (\n
\n {values.map(renderIcon({ inSwiper: false }))}\n
\n )\n }\n \n Tom McKay and James Marlay started Livewire from the kitchen of James’ 2 bedroom\n terrace in Inner Sydney back in 2013. They thought the world needed a social media\n platform for investors, so they built it and ran a “beta trial” with 128 users. One\n week later they only had 17 of those investors still engaging. It wasn’t very social!\n
\n\n So they went back to the drawing board and called their former users to ask “why did\n you leave and what would bring you back?” Everyone wanted less noise and more signal\n - genuine experts sharing their ideas. So Livewire became a platform for Australia’s\n leading investment professionals to share their insights and a unique place for\n investors to stay informed about markets.\n
\n\n In six years the website has grown to 250,000 monthly active users making it the\n fastest growing and most engaged investor website in the country.\n
\n\n setShowTitle(true)}\n collapseEmpty\n enableSingleRequest\n />\n
\n )}\n Advertisement
\n \n {helpContent.length !== 0 && (\n
\n );\n};\n\nPrice.propTypes = {\n title: PropTypes.string.isRequired,\n value: PropTypes.string,\n date: PropTypes.string,\n percentage: PropTypes.bool,\n helpContent: PropTypes.arrayOf(PropTypes.string),\n handleClick: PropTypes.func,\n};\n\nPrice.defaultProps = {\n value: null,\n date: null,\n percentage: false,\n helpContent: [],\n handleClick: () => null,\n};\n\nexport default function Pricing({ fund, isOnModal }) {\n const {\n id,\n fundType,\n buySpread,\n sellSpread,\n pdsFeesDate,\n dayEndEntryPrice,\n dayEndExitPrice,\n stockCode,\n dayEndNav,\n dayEndNavDate,\n dayEndMarketPrice,\n dayEndMarketPriceDate,\n dayEndPricingUpdateDate,\n } = fund;\n\n const set = useFundStateStore(state => state.set);\n\n const showTooltipModal = (title, helpContent) => event => {\n event.preventDefault();\n set(state => {\n state.showTooltip = true;\n state.tooltipTitle = title;\n state.tooltipContent = helpContent;\n });\n\n recordStatisticsEvent({\n event: 'fund_profile_tooltip_clicked',\n statisticable: 'fund',\n id,\n clicked_url: title.replace(/[\\s,/]/g, '_'),\n page: window.location.pathname,\n });\n };\n\n const sharePriceClick = e => {\n e && e.preventDefault();\n const url = `https://www.marketindex.com.au/asx/${stockCode.replace(/asx:\\s*/i, '').toLowerCase()}`;\n\n recordStatisticsEvent({\n event: 'fund_share_price_link_clicked',\n statisticable: 'fund',\n id,\n clicked_url: url,\n page: isOnModal ? `${window.location.pathname}#invest-modal` : `${window.location.pathname}#fund-fees`,\n });\n\n window.open(url, '_blank', 'noopener,noreferrer');\n };\n\n // Using arrays enables content to be broken into paragraphs in the modal\n const buySellSpreadHelp = [\n 'The buy/sell spread is charged whenever a transaction, is made such as making an investment into or withdrawal from a fund.',\n 'The buy/sell spread is the difference between the entry (buy) and exit (sell) prices of the fund, and is charged as a percentage of the value of the trade being made.',\n 'The buy/sell spread helps the fund cover transaction costs involved in the fund buying or selling assets, such as brokerage fees, bank fees, and government taxes.',\n ];\n\n const entryPriceHelp = [\n 'This is the price charged per unit when buying units in the fund. ',\n 'When you invest your money is moved into the fund and \"units\" are issued to you in return. The difference between the entry and exit price is the Buy Sell Spread.',\n ];\n\n const navPriceHelp = [\n 'This is a calculation that indicates the fair value of a single share of the fund. It\\'s a reference point to use when transacting units or shares in the fund.',\n 'A fund’s NAV is the sum of all its assets (the value of its holdings in cash, shares, bonds, financial derivatives and other securities) less any liabilities, all divided by the number of shares or units outstanding.',\n ];\n\n const exitPriceHelp = [\n 'This is the price charged per unit when selling units in the fund.',\n 'When you withdraw your money \"units\" are sold and money is provided to you in return. The difference between the entry and exit price is the Buy Sell Spread.',\n ];\n\n const sharePriceHelp = [\n 'This is the share price units in the fund were trading at on the exchange as recorded at the end of the last day of trading. To see the current live price, visit the exchange where the fund is traded or contact your broker.',\n 'This price may be lower or higher than the Net Asset Value (NAV).',\n ];\n\n return (\n \n {title}\n ?\n
\n )}\n {helpContent.length === 0 && (\n \n {title}\n
\n )}\n \n {valueToShow}\n {date && {`(${date})`}}\n
\n \n Contact \n\n {!!url && (\n
\n );\n}\n\nContact.propTypes = {\n id: PropTypes.number.isRequired,\n url: PropTypes.string,\n contact: PropTypes.func.isRequired,\n};\n\nContact.defaultProps = { url: null };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport dt from '../../shared/theme';\n\nconst Container = styled.p`\n margin: 64px 0;\n display: flex;\n justify-content: center;\n align-items: center;\n\n > span {\n color: ${props => dt(props).theme.secondaryColor};\n text-transform: uppercase;\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightHeavy};\n font-size: 16px;\n line-height: 16px;\n }\n`;\n\nexport default function InfiniteScrollEndText({ text }) {\n return (\n \n
\n {hasCaption && (\n \n {capTitle}\n \n )}\n {!!(hasCaption && props.isSponsored) && •}\n {!!props.isSponsored && (\n sponsored\n )}\n
\n );\n};\n\nCaption.propTypes = {\n isSponsored: PropTypes.bool.isRequired,\n category: PropTypes.shape({\n slug: PropTypes.string,\n name: PropTypes.string,\n }),\n series: PropTypes.shape({\n slug: PropTypes.string,\n title: PropTypes.string,\n }),\n};\n\nCaption.defaultProps = {\n category: null,\n series: null,\n};\n\nconst Wire = props => (\n\n \n {props.title}\n \n
\n \n {props.profile.name}\n {props.profile.organization}\n
\n {props.code}\n \n \n \n {wire.profile.name} \n {wire.profile.organisation} \n
\n \n \n
\n\n \n
\n\n {wires.map(wire => (\n
\n \n \n \n
\n \n \n {\n profileUrl\n ? {profileName}\n : profileName\n }\n \n \n {!!removable && (\n
\n \n \n {showCommentLikeHint && isFirstComment &&
\n \n \n
\n \n {'Drag & drop image here or '}\n open()}>choose file\n
\n\n Assign Primary Image \n
\n \n Assigning an image to your wire ensures your wire always looks as\n good as the content you’ve written.\n
\n\n \n \n
\n \n \n {\n preview\n ? (\n \n \n \n {`Mimimum Image Size: ${MIN_WIDTH} x ${MIN_HEIGHT}px`}\n \n {!!error && {error}}\n \n
\n Preview
\n }\n\n {!!preview && (\n \n \n )}\n
\n Upload Image
\nNo contributors
;\n }\n\n return (\n- \n {list.map(c => (\n
- \n {c.active ? {c.name} :
{c.name}}\n \n {' ('}\n \n ))}\n
No companies
;\n }\n\n return (\n- \n {list.map(c => (\n
- \n {c.name}\n \n \n this.removeCompany(e, c)}>\n Remove\n \n \n \n ))}\n
\n {text} ;\n}\n\nButton.propTypes = {\n text: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\n\nconst Image = styled(Img)`\n max-width: ${props => (props.theme.isPortrait ? 150 : 368)}px;\n max-height: ${props => (props.theme.isPortrait ? 205 : 503)}px;\n width: ${props => (props.theme.isPortrait ? 'auto' : '25vw')};\n height: ${props => (props.theme.isPortrait ? '55vw' : '34vw')};\n margin-top: ${props => (props.theme.isPortrait ? 40 : 0)}px;\n`;\n\nexport default function Cover() {\n const { cover } = React.useContext(ThemeContext);\n\n return {text} ;\n}\n\nDesc.propTypes = {\n text: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\n\nconst Image = styled(Img)`\n width: ${props => (props.theme.isPortrait ? 25 : 10)}vw;\n`;\n\nexport default function ShortLogo() {\n const { logo } = React.useContext(ThemeContext);\n\n return \n {!!isMobile && (\n \n {!!(wire.isSponsored) && (\n \n sponsored\n \n )}\n \n {!!caption.url && (\n \n {caption.text}\n \n )}\n • \n \n \n \n )}\n {!isMobile && (\n \n {!!caption.url && (\n \n {caption.text}\n \n )}\n {!!(caption.url && wire.isSponsored) && • }\n {!!(wire.isSponsored) && (\n \n sponsored\n \n )}\n • \n \n \n )}\n \n );\n}\n\nWireCaption.propTypes = {\n wire: PropTypes.shape({\n isSponsored: PropTypes.bool.isRequired,\n firstPublishedAt: PropTypes.string.isRequired,\n category: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n series: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }),\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport TruncatedEllipsis from '../../../shared/truncated-ellipsis';\nimport EditorsManageWireCallout from '../../../editors-manage-wire/editors-manage-wire-callout';\n\nconst Header = styled.div`\n line-height: 130%;\n\n & > .callout {\n display: inline;\n button {\n margin-top: 8px;\n z-index: 1;\n }\n }\n\n & > h2 {\n margin-left: 0px;\n margin-right: 0px;\n margin-top: ${props => (props.theme.isMobile ? 0 : 5)}px;\n margin-bottom: 0px;\n\n > a {\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 19px;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n`;\n\nexport default function WireTitle({ wire, showEditorManageTools, clickHandler }) {\n const { isMobile, isMobileOrTablet } = React.useContext(ThemeContext);\n const showEditorManageWire = showEditorManageTools && !isMobile\n && (_.get(window, 'Livewire.currentUser.profile.canModifyWiresOfOthers') || wire.ownedByCurrentUser);\n // NOTE: this is acutally 3, 2 and 1 we want but ellipsis.js seems to show one less.\n /* eslint-disable no-nested-ternary */\n const lines = isMobile ? 4 : isMobileOrTablet ? 3 : 2;\n\n return (\n \n {\n showEditorManageWire && (\n \n \n
\n \n );\n}\n\nWireTitle.propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n userId: PropTypes.number,\n title: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n firstPublishedAt: PropTypes.string,\n publishedAt: PropTypes.string.isRequired,\n ownedByCurrentUser: PropTypes.bool,\n editorsPicked: PropTypes.bool,\n featuredCount: PropTypes.number.isRequired,\n profile: PropTypes.shape({\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n }).isRequired,\n }).isRequired,\n showEditorManageTools: PropTypes.bool,\n clickHandler: PropTypes.func,\n};\n\nWireTitle.defaultProps = {\n showEditorManageTools: true,\n clickHandler: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Img } from 'react-image';\n\nconst Container = styled.div`\n display: flex;\n height: 100px;\n width: 418px;\n`;\n\nconst Image = styled(Img)`\n width: 100px;\n height: 100px;\n border-radius: 5px;\n box-shadow: 0 3px 20px ${props => props.theme.secondaryColor30Transparent};\n`;\n\nconst Section = styled.div`\n margin: 0 56px 0 18px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nconst Text = styled.span`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 17px;\n line-height: 17px;\n text-transform: uppercase;\n`;\n\nconst Name = styled(Text)`\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Company = styled(Text)`\n margin-top: 7px;\n color: ${props => props.theme.secondaryColor};\n`;\n\nconst Profile = ({\n avatar, name, company, url,\n}) => (\n \n \n \n {name} \n {company} \n \n \n \n);\n\nProfile.propTypes = {\n avatar: PropTypes.string,\n name: PropTypes.string.isRequired,\n company: PropTypes.string,\n url: PropTypes.string.isRequired,\n};\n\nProfile.defaultProps = {\n avatar: null,\n company: null,\n};\n\nexport default Profile;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Img } from 'react-image';\n\nconst profileWidth = 325;\n\nconst Container = styled.div`\n width: ${profileWidth}px;\n height: 342px;\n display: flex;\n flex-direction: column;\n`;\n\nconst Photo = styled(Img)`\n width: ${profileWidth}px;\n height: 210px;\n border-radius: 4px;\n`;\n\nconst ImagePlaceholder = styled.div`\n width: ${profileWidth}px;\n height: 210px;\n border-radius: 4px;\n background-color: ${props => props.theme.secondaryColor};\n`;\n\nconst Name = styled.span`\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 22px;\n margin-top: 20px;\n`;\n\nconst Title = styled.span`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 16px;\n line-height: 20px;\n`;\n\nexport default function Profile(props) {\n const {\n name,\n title,\n titleSecondary,\n photo,\n } = props;\n\n return (\n \n {photo\n ? {name} \n {title} \n {!!titleSecondary && {titleSecondary} }\n \n );\n}\n\nProfile.propTypes = {\n name: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n titleSecondary: PropTypes.string,\n photo: PropTypes.string,\n};\n\nProfile.defaultProps = {\n titleSecondary: null,\n photo: null,\n};\n\nexport { profileWidth };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Container, Label, Value } from './styles';\n\nexport default function Fact({ label, value }) {\n return (\n \n \n {value} \n \n );\n}\n\nFact.propTypes = {\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport dt, { useIsXLarge } from '../../../../shared/theme';\nimport { Container, Label, Value } from './styles';\nimport { formatValue } from '../shared-utils';\nimport PerformanceFeeCharged from '../fees-and-pricing-components/performance-fee-charged';\n\nconst Values = styled(Value)`\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n\n & > small {\n margin: 0 2px 0 4px;\n font-weight: ${props => dt(props).theme.fontWeightBold};\n white-space: nowrap;\n }\n\n & > span {\n font-size: 12px;\n font-weight: ${props => dt(props).theme.fontWeightRegular};\n white-space: nowrap;\n line-height: 120%;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n width: 100%;\n `};\n }\n\n & > [class^=\"performance-fee-charged\"] {\n ${props => dt(props).theme.isMobileOrTablet && `\n height: 16px;\n padding: 0 5px;\n font-size: 11px;\n line-height: 7px;\n margin-left: 0;\n border-radius: 3px;\n `}\n\n ${props => !dt(props).theme.isXLarge && `\n margin-top: 4px;\n `}\n }\n\n ${props => dt(props).theme.isMobileOrTablet && `\n width: 104px;\n `};\n\n ${props => !dt(props).theme.isMobileOrTablet && !dt(props).theme.isXLarge && `\n max-width: 180px;\n `};\n`;\n\nexport default function Fee({\n label,\n value,\n isPerformanceFeeChargedYes,\n isPerformanceFeeChargedNo,\n date,\n}) {\n const valueToShow = formatValue(value, true);\n const isXLarge = useIsXLarge();\n\n return (\n \n \n \n {valueToShow}\n {valueToShow !== 'N/A' && p.a.}\n {isPerformanceFeeChargedYes && + Performance Fee}\n {isPerformanceFeeChargedNo && !isXLarge\n && \n \n );\n}\n\nFee.propTypes = {\n label: PropTypes.string.isRequired,\n value: PropTypes.string,\n isPerformanceFeeChargedYes: PropTypes.bool,\n isPerformanceFeeChargedNo: PropTypes.bool,\n date: PropTypes.string,\n};\n\nFee.defaultProps = {\n value: null,\n isPerformanceFeeChargedYes: false,\n isPerformanceFeeChargedNo: false,\n date: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Modal from 'react-bootstrap/Modal';\nimport StockCode from '../stock-code';\nimport Pricing from '../../fees-and-pricing-components/pricing';\nimport Contact from './invest-contact';\nimport dt, { useIsMobile } from '../../../../../shared/theme';\nimport { SSeparator, Title } from '../../fees-and-pricing-components/styles';\n\nconst StyledBody = styled(Modal.Body)`\n display: flex;\n padding: 56px 56px 47px;\n\n ${props => dt(props).theme.isXLarge && `\n padding: 56px 40px 47px;\n `};\n\n ${props => dt(props).theme.isMobile && `\n flex-direction: column;\n padding: 24px 20px;\n max-height: 100vh;\n overflow-y: auto;\n border-top: 1px solid #D7DFE7;\n `};\n\n * {\n box-sizing: content-box;\n }\n\n > div {\n &.instructions {\n width: 43.5%;\n padding-right: 8%;\n\n ${props => dt(props).theme.isXLarge && `\n width: 33%;\n margin-right: 6%;\n `};\n\n ${props => dt(props).theme.isMobile && `\n width: 100%;\n `};\n\n > p.main-title {\n font-size: 30px;\n display: inline-block;\n font-weight: 700;\n line-height: 130%;\n margin: 0;\n\n > span {\n margin-right: 12px;\n }\n }\n\n > p.content {\n margin-top: 16px;\n margin-bottom: 64px;\n font-size: 19px;\n line-height: 130%;\n color: #627484;\n }\n\n > div.contact {\n display: flex;\n flex-direction: column;\n\n > button {\n text-transform: none;\n font-size: 19px;\n max-width: 285px;\n }\n\n > p.external-link {\n font-size: 17px;\n text-align: center;\n margin-top: 24px;\n max-width: 285px;\n height: 20px;\n\n > a > span.icon-lw-external-link {\n margin: 0 6px 0 0;\n }\n }\n }\n }\n }\n\n div.details {\n width: 48.5%;\n margin-top: 4px;\n\n ${props => dt(props).theme.isXLarge && `\n width: 54%;\n `};\n\n ${props => dt(props).theme.isMobile && `\n width: 100%;\n `};\n\n > div > div > div {\n min-width: ${props => (props.theme.isXLarge ? '50%' : '100%')};\n }\n\n > div.info {\n display: flex;\n flex-wrap: wrap;\n padding-top: ${props => (props.theme.isMobile ? 0 : '16px')};\n\n > div {\n min-width: ${props => (props.theme.isXLarge ? '50%' : '100%')};\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n > p.title {\n font: ${props => props.theme.fontWeightBold} 14px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n letter-spacing: 0.1px;\n text-transform: uppercase;\n margin-bottom: 4px;\n display: flex;\n justify-content: flex-start;\n height: 16px;\n }\n\n > p.data {\n margin: 0;\n }\n }\n }\n }\n`;\n\nconst STOCK_EXCHANGES = {\n ASX: {\n name: 'Australian Securities Exchange (ASX)',\n tradingHours: '10:00AM - 4:00PM (AEST)',\n },\n CBOE: {\n name: 'CBOE Australia',\n tradingHours: '10:00AM - 4:13PM (AEST)',\n },\n};\n\nexport default function InvestModalBody({ fund, contact }) {\n const isMobile = useIsMobile();\n const exchangeName = STOCK_EXCHANGES[fund.stockExchange?.toUpperCase()]?.name;\n const tradingHours = STOCK_EXCHANGES[fund.stockExchange?.toUpperCase()]?.tradingHours;\n\n return (\n \n \n );\n}\n\nInvestModalBody.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n isin: PropTypes.string.isRequired,\n stockCode: PropTypes.string,\n stockExchange: PropTypes.string,\n fundPageUrl: PropTypes.string,\n }).isRequired,\n contact: PropTypes.func,\n};\n\nInvestModalBody.defaultProps = { contact: null };\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport PropTypes from 'prop-types';\nimport {\n SectionContainer,\n SectionTitle,\n SectionDetails,\n} from '../../shared/sectionable/styles';\nimport ExpandableContainer from '../../../shared/expandable-container';\n\nconst LW_DISCLAIMER = 'Livewire gives readers access to content provided by '\n + 'financial services professionals and companies (\"Livewire Contributors”). '\n + 'Fund data is provided by Morningstar for personal use only. While every '\n + 'care has been taken in producing these numbers, neither Livewire nor '\n + 'Morningstar can guarantee the complete accuracy of these figures. Should '\n + 'you decide to invest, please read the relevant disclosure documents and '\n + 'consider speaking to a professional. A tax event may be realised when '\n + 'switching investments. Past performance is not a reliable indicator of '\n + 'future performance. Livewire does not operate under an Australian '\n + 'Financial Services Licence (AFSL) and relies on the exemption under '\n + '911A(2)(eb) of the Corporations Act 2001 in respect to any advice given. '\n + 'The advice on this site is general in nature and does not take into '\n + 'account your personal needs or objectives.';\n\nconst SSectionTitle = styled(SectionTitle)`\n ${props => props.theme.isMobile && `\n border: none;\n margin: unset;\n padding: unset;\n `};\n`;\n\nconst SSectionDetails = styled(SectionDetails)`\n padding-left: 24px;\n border-left: 1px solid #CDD7E0;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 14px;\n color: #9BAFBF;\n margin: 0;\n\n ${props => !props.theme.isMobileOrTablet && `\n padding-right: 6vw;\n `};\n\n .showless {\n margin-top: 12px;\n }\n\n .readmore-more-anchor, .readmore-less-anchor {\n text-transform: capitalize;\n }\n`;\n\nconst Content = styled.div`\n white-space: pre-wrap;\n`;\n\nexport default function Disclaimer({ disclaimer, lw }) {\n const { isMobile } = React.useContext(ThemeContext);\n\n if (!lw && (!disclaimer || disclaimer.trim().length === 0)) {\n return null;\n }\n\n return (\n \n \n {\n lw\n ? {LW_DISCLAIMER} \n : (\n \n {/* eslint-disable-next-line react/no-danger */}\n \n )\n }\n \n \n );\n}\n\nDisclaimer.propTypes = {\n disclaimer: PropTypes.string,\n lw: PropTypes.bool,\n};\n\nDisclaimer.defaultProps = {\n disclaimer: null,\n lw: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { listTypes, profileTypes } from './prop-types';\nimport Avatar from './avatar';\nimport ContributorTooltip from '../../../shared/contributor-tooltip';\n\nconst validTypes = PropTypes.oneOf(['circle', 'square']);\n\nconst Container = styled.div`\n margin-top: 22px;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(auto-fill, 52px);\n justify-content: space-between;\n grid-gap: 22px;\n\n > .vflex {\n max-width: 52px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n > a.name {\n margin-top: 7px;\n width: 100%;\n text-align: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font: ${props => props.theme.fontWeightHeavy} 11px/12.2px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n\n :hover {\n color: ${props => props.theme.bodyColor};\n }\n }\n }\n`;\n\nconst Item = ({\n id, type, publicUrl, name, profilePictureUrl,\n}) => {\n const { isLarge } = React.useContext(ThemeContext);\n const avatarProps = {\n id,\n publicUrl,\n name,\n type,\n profilePictureUrl,\n clickable: true,\n hoverable: isLarge,\n };\n const [first, next] = name.split(' ');\n const abbrev = `${first} ${(next || '').charAt(0)}`.trim();\n return (\n \n {list.map(prof => \n {!!isLarge && list.map(prof => \n setQueries(d)} />\n \n {products.map(p => \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport OnboardingContext from '../common/context';\nimport Product from './product';\n\nconst Container = styled.div`\n margin-top: 20px;\n border: 0;\n border-top: 1px solid ${props => props.theme.secondaryColorLight};\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n width: 36vw;\n max-width: 461px;\n `)}\n\n & > div {\n width: 100%;\n padding-right: ${props => (props.theme.isMobile ? '4px' : '20px')};\n }\n`;\nconst Text = styled.p`\n font: ${props => props.theme.fontWeightHeavy} 12px/1 ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Description = styled(Text)`\n margin: 8.5px 0;\n text-transform: uppercase;\n align-self: flex-start;\n`;\n\nconst Message = styled(Text)`\n margin: 0;\n margin-top: 5px;\n align-self: flex-end;\n\n & > em {\n font-style: normal;\n color: ${props => props.theme.primaryColor};\n }\n`;\n\nconst More = ({ n }) => {\n if (!n) {\n return null;\n }\n\n /* eslint-disable react/jsx-one-expression-per-line */\n return (\n …and {n} more listed {n > 1 ? 'products' : 'product'} \n );\n /* eslint-enable react/jsx-one-expression-per-line */\n};\n\nMore.propTypes = {\n n: PropTypes.number.isRequired,\n};\n\nexport default function Following() {\n const { state } = React.useContext(OnboardingContext);\n\n const showing = state.productsFollowing.slice(0, 3);\n\n if (!showing.length) {\n return null;\n }\n\n return (\n \n You’re now following \n \n );\n}\n","const MENU_ITEMS = ['published', 'drafts', 'comments'];\n\nexport { MENU_ITEMS as default };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport SidebarComponent from '../common/sidebar-component';\nimport WireResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport MicroWire from '../common/sidebar/micro-wire';\nimport { useGetWiresFromContributor } from '../../../services/wires/from-contributor-service';\n\nexport default function OtherWires({ titleMatchedWires }) {\n const { dispatch } = React.useContext(WireResultsContext);\n const profiles = React.useMemo(() => _.map(titleMatchedWires, 'profile.id'), [titleMatchedWires]);\n const excludeWires = _.map(titleMatchedWires, 'id');\n const [{ data }, executeQuery] = useGetWiresFromContributor(_.first(profiles), excludeWires, 3);\n\n React.useEffect(() => {\n if (_.every(profiles, p => p === profiles[0])) {\n executeQuery();\n }\n }, [executeQuery, profiles]);\n\n React.useEffect(() => {\n if (_.get(data, 'wires.length')) {\n dispatch({ type: 'setOtherWires', payload: data.wires });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'wires.length')) {\n return null;\n }\n\n return (\n \n 1 ? 'other wires' : 'another wire'} published by`}\n query={titleMatchedWires[0].profile.name}\n />\n {data.wires.map(wire => \n );\n}\n\nOtherWires.propTypes = {\n titleMatchedWires: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport SidebarComponent from '../common/sidebar-component';\nimport WireResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport StockCode from '../common/sidebar/stock-code';\nimport useGetStockCodesFromWires from '../../../services/stock-codes/from-wires-service';\n\nexport default function TopStockCodes({ titleMatchedWires }) {\n const { dispatch } = React.useContext(WireResultsContext);\n const wireIDs = _.map(titleMatchedWires, 'id');\n const [{ data }, executeQuery] = useGetStockCodesFromWires(wireIDs, 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'stock_codes.length')) {\n dispatch({ type: 'setStockCodes', payload: data.stock_codes });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'stock_codes.length')) {\n return null;\n }\n\n return (\n \n 1 ? 'companies' : 'company'} mentioned in`}\n query={titleMatchedWires[0].title}\n />\n {data.stock_codes.map(d => \n );\n}\n\nTopStockCodes.propTypes = {\n titleMatchedWires: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ContributorResultsContext from './context';\nimport Keywords from '../common/components/keywords';\nimport useGetKeywordsUsedByContributor from '../../../services/keywords/keywords-used-by-contributor-service';\n\nexport default function TopKeywords({ profile }) {\n const { dispatch } = React.useContext(ContributorResultsContext);\n const [{ data }, executeQuery] = useGetKeywordsUsedByContributor(profile.id, 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'keywords.length')) {\n dispatch({ type: 'setKeywords', payload: data.keywords });\n }\n }, [data, dispatch]);\n\n const props = { data, relation: 'assigned by', query: profile.name };\n return \n 1 ? 'companies' : 'company'} mentioned by`}\n query={profile.name}\n />\n {data.stockCodes.map(d => \n );\n}\n\nTopStockCodes.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetStockCodesUsedByContributor(contributorId, limit) {\n const searchQueryId = window.Livewire?.request?.searchQuery?.id;\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/stock_codes/contributor/${contributorId}`,\n method: 'GET',\n params: { search_query_id: searchQueryId, top: limit },\n }, { manual: true });\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetColleaguesOf(contributorId, limit) {\n const searchQueryId = window.Livewire?.request?.searchQuery?.id;\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/contributors/colleagues_of/contributor/${contributorId}`,\n method: 'GET',\n params: { search_query_id: searchQueryId, top: limit },\n }, { manual: true });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SidebarComponent from '../common/sidebar-component';\nimport ContributorResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport useGetColleaguesOf from '../../../services/contributors/colleagues-service';\nimport NanoProfile from '../common/nano-profile';\n\nconst ColleaguesContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n padding-top: 20px;\n`;\n\nexport default function Colleagues({ profile }) {\n const { dispatch } = React.useContext(ContributorResultsContext);\n const [{ data }, executeQuery] = useGetColleaguesOf(profile.id, 3);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'colleagues.length')) {\n dispatch({ type: 'setColleagues', payload: data.colleagues });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'colleagues.length')) {\n return null;\n }\n\n return (\n \n \n {data.colleagues.map(p => (\n \n \n );\n}\n\nColleagues.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n organisation: PropTypes.string,\n }).isRequired,\n};\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetSimilarContributors(contributorID, limit) {\n const searchQueryId = window.Livewire?.request?.searchQuery?.id;\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/contributors/similar_to/contributor/${contributorID}`,\n method: 'GET',\n params: { search_query_id: searchQueryId, top: limit },\n }, { manual: true });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SidebarComponent from '../common/sidebar-component';\nimport ContributorResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport useGetSimilarContributors from '../../../services/contributors/similar-service';\nimport NanoProfile from '../common/nano-profile';\n\nconst ContributorsContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n padding-top: 20px;\n`;\n\nexport default function SimilarContributors({ profile }) {\n const { dispatch } = React.useContext(ContributorResultsContext);\n const [{ data }, executeQuery] = useGetSimilarContributors(profile.id, 3);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'contributors.length')) {\n dispatch({ type: 'setSimilarContributors', payload: data.contributors });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'contributors.length')) {\n return null;\n }\n\n return (\n \n \n {data.contributors.map(p => (\n \n \n );\n}\n\nSimilarContributors.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n organisation: PropTypes.string,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Keywords from '../common/components/keywords';\nimport useGetOtherKeywordsFromWiresUsingKeyword from '../../../services/keywords/other-keywords-service';\n\nexport default function TopKeywords({ keyword }) {\n const [{ data }, executeQuery] = useGetOtherKeywordsFromWiresUsingKeyword([keyword.slug], 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n const props = { data, relation: 'related to', query: keyword.value };\n return \n \n {data.contributors.map(p => (\n \n \n );\n}\n\nTopContributors.propTypes = {\n keyword: PropTypes.shape({\n value: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Keywords from '../common/components/keywords';\nimport useGetKeywordsFromStockCodes from '../../../services/keywords/from-stock-codes-service';\n\nexport default function TopKeywords({ stockCode }) {\n const [{ data }, executeQuery] = useGetKeywordsFromStockCodes([stockCode.slug], 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n const props = { data, relation: 'related to', query: stockCode.companyName };\n return \n \n {data.contributors.map(p => (\n \n \n );\n}\n\nTopContributors.propTypes = {\n stockCode: PropTypes.shape({\n stockExchange: PropTypes.string.isRequired,\n code: PropTypes.string.isRequired,\n companyName: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport SidebarComponent from '../common/sidebar-component';\nimport OrganisationResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport MicroWire from '../common/sidebar/micro-wire';\nimport useGetWiresMentioningOfOrganisation from '../../../services/wires/mention-of-organisation-service';\n\nexport default function MentionedWires({ organisation }) {\n const { dispatch } = React.useContext(OrganisationResultsContext);\n const [{ data }, executeQuery] = useGetWiresMentioningOfOrganisation(organisation, 3);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'wires.length')) {\n dispatch({ type: 'setMentionedWires', payload: data.wires });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'wires.length')) {\n return null;\n }\n\n return (\n \n 1 ? 'wires' : 'wire'} which mention`}\n query={organisation}\n />\n {data.wires.map(wire => \n );\n}\n\nMentionedWires.propTypes = {\n organisation: PropTypes.string.isRequired,\n};\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetWiresMentioningOfOrganisation(organisation, limit) {\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/wires/mention_of/organisation/${encodeURIComponent(organisation)}`,\n method: 'GET',\n params: {\n top: limit,\n search_query_id: window.Livewire?.request?.searchQuery?.id,\n },\n }, { manual: true });\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetContributors(organisation, limit) {\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/contributors/from_organisation/${encodeURIComponent(organisation)}`,\n method: 'GET',\n params: {\n top: limit,\n search_query_id: window.Livewire?.request?.searchQuery?.id,\n },\n }, { manual: true });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SidebarComponent from '../common/sidebar-component';\nimport OrganisationResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport useGetContributors from '../../../services/contributors/from-organisation-service';\nimport NanoProfile from '../common/nano-profile';\n\nconst ContributorsContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n padding-top: 20px;\n`;\n\nexport default function Contributors({ organisation }) {\n const { dispatch } = React.useContext(OrganisationResultsContext);\n const [{ data }, executeQuery] = useGetContributors(organisation, 3);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'contributors.length')) {\n dispatch({ type: 'setContributors', payload: data.contributors });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'contributors.length')) {\n return null;\n }\n\n return (\n \n \n {data.contributors.map(p => (\n \n \n );\n}\n\nContributors.propTypes = {\n organisation: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport SidebarComponent from '../common/sidebar-component';\nimport OrganisationResultsContext from './context';\nimport SidebarComponentHeader from '../common/sidebar/sidebar-component-header';\nimport StockCode from '../common/sidebar/stock-code';\nimport useGetStockCodesUsedByOrganisation from '../../../services/stock-codes/stock-codes-used-by-organisation-service';\n\nexport default function TopStockCodes({ organisation }) {\n const { dispatch } = React.useContext(OrganisationResultsContext);\n const [{ data }, executeQuery] = useGetStockCodesUsedByOrganisation(organisation, 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'stockCodes.length')) {\n dispatch({ type: 'setStockCodes', payload: data.stockCodes });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'stockCodes.length')) {\n return null;\n }\n\n return (\n \n 1 ? 'companies' : 'company'} mentioned by`}\n query={organisation}\n />\n {data.stockCodes.map(d => \n );\n}\n\nTopStockCodes.propTypes = {\n organisation: PropTypes.string.isRequired,\n};\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetStockCodesUsedByOrganisation(organisation, limit) {\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/stock_codes/organisation/${encodeURIComponent(organisation)}`,\n method: 'GET',\n params: {\n top: limit,\n search_query_id: window.Livewire?.request?.searchQuery?.id,\n },\n }, { manual: true });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport OrganisationResultsContext from './context';\nimport Keywords from '../common/components/keywords';\nimport useGetKeywordsUsedByOrganisation from '../../../services/keywords/keywords-used-by-organisation-service';\n\nexport default function TopKeywords({ organisation }) {\n const { dispatch } = React.useContext(OrganisationResultsContext);\n const [{ data }, executeQuery] = useGetKeywordsUsedByOrganisation(organisation, 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'keywords.length')) {\n dispatch({ type: 'setKeywords', payload: data.keywords });\n }\n }, [data, dispatch]);\n\n const props = { data, relation: 'assigned by', query: organisation };\n return \n \n {data.areasOfExpertise.map(expertise => \n \n );\n}\n\nTopAreasOfExpertise.propTypes = {\n organisation: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport WireResultsContext from './context';\nimport Keywords from '../common/components/keywords';\nimport useGetKeywordsFromWires from '../../../services/keywords/from-wires-service';\n\nexport default function TopKeywords({ titleMatchedWires }) {\n const { dispatch } = React.useContext(WireResultsContext);\n const wireIDs = _.map(titleMatchedWires, 'id');\n const [{ data }, executeQuery] = useGetKeywordsFromWires(wireIDs, 5);\n\n React.useEffect(() => {\n executeQuery();\n }, [executeQuery]);\n\n React.useEffect(() => {\n if (_.get(data, 'keywords.length')) {\n dispatch({ type: 'setKeywords', payload: data.keywords });\n }\n }, [data, dispatch]);\n\n if (!_.get(data, 'keywords.length')) {\n return null;\n }\n\n const props = { data, relation: 'assigned to', query: titleMatchedWires[0].title };\n return \n \n \n false}\n />\n {!!errors[snake] && {errors[snake]} }\n \n
\n );\n }\n\n PlainDatepicker.displayName = capitalize;\n\n return PlainDatepicker;\n}\n","import _ from 'lodash';\nimport produce from 'immer';\nimport create from 'zustand';\n\nconst useAdvertisingsStore = create(set => ({\n advertisings: [],\n removeAdvertising: adToRemove => set(produce(state => {\n state.advertisings = _.remove(state.advertisings, ad => ad.id !== adToRemove.id);\n })),\n set: fn => set(produce(fn)),\n}));\n\nexport default useAdvertisingsStore;\n","import styled from 'styled-components';\n\nimport { Column } from '../../shared/styles';\n\nconst NameColumn = styled(Column)`\n width: 60%;\n`;\n\nconst ActionColumn = styled(Column)`\n width: 40%;\n`;\n\nexport {\n ActionColumn,\n NameColumn,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport styled from 'styled-components';\nimport Loading from '../../../../shared/loading';\nimport CompaniesContext from './context';\nimport { HeaderMixin } from '../../shared/styles';\nimport TextArea from '../../../shared/text-area';\n\nconst SModal = styled(Modal)`\n & > article.horizontal {\n min-width: 700px;\n min-height: 670px;\n }\n`;\n\nconst Title = styled.h5`\n ${HeaderMixin};\n font-size: 18px;\n text-align: center;\n margin-bottom: 16px;\n`;\n\nconst Body = styled(Modal.Body)`\n display: flex;\n flex-direction: column;\n padding: 20px 24px 0;\n height: 100%;\n\n label {\n text-transform: none;\n font-size: 16px;\n\n textarea {\n border-radius: 4px;\n margin-top: 4px;\n resize: none;\n width: 100%;\n }\n }\n\n .sip-controls {\n margin: 0;\n line-height: 1.4;\n }\n`;\n\nconst Description = styled.p`\n font-size: 16px;\n line-height: 22px;\n padding: 0 24px;\n margin-bottom: 0;\n`;\n\nconst Success = styled.div`\n margin-bottom: 16px;\n font-size: 16px;\n color: #4CAF50;\n`;\n\nconst BtnGroup = styled.div`\n margin: 24px;\n display: flex;\n justify-content: flex-end;\n`;\n\nconst defaultCTA = {\n title: '',\n message: '',\n text: '',\n url: '',\n};\n\nexport default function CTAModal({\n type,\n title,\n description,\n dispatchEvent,\n createFunction,\n updateFunction,\n}) {\n const {\n state: { showCompanyCTAModal, showContributorCTAModal, currentEditingCTAOwner: owner },\n dispatch,\n } = React.useContext(CompaniesContext);\n\n const [cta, setCta] = React.useState(owner.cta ?? defaultCTA);\n\n React.useEffect(() => {\n setCta(owner.cta ?? defaultCTA);\n }, [owner]);\n\n const updateCTA = (field, value) => setCta({ ...cta, [field]: value });\n\n const [errors, setErrors] = React.useState({});\n\n const errorOn = (field, fieldLabel) => {\n if (errors[field]) {\n return `${fieldLabel} ${errors[field][0]}`;\n }\n\n return '';\n };\n\n const [message, setMessage] = React.useState('');\n\n const dismiss = e => {\n e && e.preventDefault();\n\n setMessage('');\n setErrors({});\n dispatch({ type: 'dismissModal' });\n };\n\n const loadingRef = React.useRef();\n\n const saveCTA = e => {\n e && e.preventDefault();\n\n const saveFunc = cta.id ? updateFunction : createFunction;\n\n saveFunc(owner.id, cta)\n .then(({ data }) => {\n updateCTA('id', data.id);\n owner.cta = cta;\n setErrors({});\n setMessage('CTA saved successfully');\n\n if (dispatchEvent) {\n dispatch({ type: dispatchEvent, payload: owner });\n }\n\n setTimeout(dismiss, 1000);\n })\n .catch(err => {\n setErrors(err.response.data);\n setMessage('');\n });\n };\n\n return (\n \n \n {title} \n {description} \n \n \n \n {message}\n \n updateCTA('title', v)}\n />\n updateCTA('message', v)}\n />\n updateCTA('text', v)}\n />\n updateCTA('url', v)}\n />\n \n \n \n \n \n \n );\n}\n\nCTAModal.propTypes = {\n type: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n dispatchEvent: PropTypes.string.isRequired,\n createFunction: PropTypes.func.isRequired,\n updateFunction: PropTypes.func.isRequired,\n};\n","import PropTypes from 'prop-types';\n\nexport const propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n fundType: PropTypes.string,\n apirCode: PropTypes.string,\n isin: PropTypes.string,\n dataProviderId: PropTypes.string,\n stockCode: PropTypes.string,\n inceptionDate: PropTypes.string,\n objective: PropTypes.string,\n geographicalFocus: PropTypes.string,\n investmentHorizon: PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n minimumInvestment: PropTypes.number,\n fundSize: PropTypes.number,\n fundSizeDate: PropTypes.string,\n currency: PropTypes.string,\n legalStructure: PropTypes.string,\n domicile: PropTypes.string,\n investUrl: PropTypes.string,\n fundPageUrl: PropTypes.string,\n pdsFileUrl: PropTypes.string,\n dpPdsFileUrl: PropTypes.string,\n monthlyUpdateFileUrl: PropTypes.string,\n monthlyUpdateUrlType: PropTypes.string,\n tmdFileUrl: PropTypes.string,\n disclaimer: PropTypes.string,\n company: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n fundAssetClass: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n members: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n role: PropTypes.string,\n })),\n featuredWireUrls: PropTypes.arrayOf(PropTypes.string),\n performance: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.string,\n })).isRequired,\n managementFee: PropTypes.number,\n performanceFeeCharged: PropTypes.string,\n performanceFeePds: PropTypes.number,\n performanceFee: PropTypes.number,\n performanceFeeMethodology: PropTypes.string,\n totalCostRatio: PropTypes.number,\n financialYearEndFeesDate: PropTypes.string,\n buySpread: PropTypes.number,\n sellSpread: PropTypes.number,\n latestProspectusDate: PropTypes.string,\n dayEndEntryPrice: PropTypes.number,\n dayEndExitPrice: PropTypes.number,\n dayEndNavPrice: PropTypes.number,\n dayEndPricingUpdateDate: PropTypes.string,\n dayEndMarketPrice: PropTypes.number,\n dayEndMarketPriceDate: PropTypes.string,\n dayEndNav: PropTypes.number,\n dayEndNavDate: PropTypes.string,\n dpManagementFee: PropTypes.number,\n dpPerformanceFeePds: PropTypes.number,\n dpPerformanceFee: PropTypes.number,\n dpTotalCostRatio: PropTypes.number,\n dpFinancialYearEndFeesDate: PropTypes.string,\n dpBuySpread: PropTypes.number,\n dpSellSpread: PropTypes.number,\n dpLatestProspectusDate: PropTypes.string,\n dpDayEndEntryPrice: PropTypes.number,\n dpDayEndExitPrice: PropTypes.number,\n dpDayEndNavPrice: PropTypes.number,\n dpDayEndPricingUpdateDate: PropTypes.string,\n dpDayEndMarketPrice: PropTypes.number,\n dpDayEndMarketPriceDate: PropTypes.string,\n dpDayEndNav: PropTypes.number,\n dpDayEndNavDate: PropTypes.string,\n dpFundSize: PropTypes.number,\n dpFundSizeDate: PropTypes.string,\n fundInvestorVehicleType: PropTypes.string,\n wholesale: PropTypes.bool.isRequired,\n series: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n })),\n dataReviews: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n current: PropTypes.string,\n toReview: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n }),\n questions: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n order: PropTypes.number.isRequired,\n category: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n fundTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n })).isRequired,\n autoSyncData: PropTypes.bool,\n};\n\nexport const defaultProps = {\n fund: {\n id: null,\n name: '',\n fundType: '',\n apirCode: '',\n isin: '',\n dataProviderId: '',\n stockCode: '',\n inceptionDate: null,\n objective: '',\n geographicalFocus: '',\n investmentHorizon: '',\n minimumInvestment: null,\n fundSize: null,\n fundSizeDate: null,\n currency: '',\n legalStructure: '',\n domicile: '',\n investUrl: '',\n fundPageUrl: '',\n pdsFileUrl: '',\n dpPdsFileUrl: '',\n monthlyUpdateFileUrl: '',\n monthlyUpdateUrlType: null,\n disclaimer: '',\n company: null,\n fundAssetClass: null,\n members: [],\n series: [],\n featuredWireUrls: [],\n performance: [],\n dpPerformance: [],\n managementFee: null,\n performanceFeeCharge: 'unknown',\n performanceFeePds: null,\n performanceFee: null,\n performanceFeeMethodology: '',\n totalCostRatio: null,\n financialYearEndFeesDate: null,\n buySpread: null,\n sellSpread: null,\n latestProspectusDate: null,\n dayEndEntryPrice: null,\n dayEndExitPrice: null,\n dayEndNavPrice: null,\n dayEndPricingUpdateDate: null,\n dayEndMarketPrice: null,\n dayEndMarketPriceDate: null,\n dayEndNav: null,\n dayEndNavDate: null,\n dpManagementFee: null,\n dpPerformanceFeePds: null,\n dpPerformanceFee: null,\n dpTotalCostRatio: null,\n dpFinancialYearEndFeesDate: null,\n dpBuySpread: null,\n dpSellSpread: null,\n dpLatestProspectusDate: null,\n dpDayEndEntryPrice: null,\n dpDayEndExitPrice: null,\n dpDayEndNavPrice: null,\n dpDayEndPricingUpdateDate: null,\n dpDayEndMarketPrice: null,\n dpDayEndMarketPriceDate: null,\n dpDayEndNav: null,\n dpDayEndNavDate: null,\n dpFundSize: null,\n dpFundSizeDate: null,\n dataReviews: [],\n },\n autoSyncData: false,\n};\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useStore = create(set => ({\n panesExpanded: {\n basic: true,\n facts: false,\n performance: false,\n fandl: false,\n wires: false,\n qanda: false,\n },\n set: fn => set(produce(fn)),\n}));\n\nexport default useStore;\n","import styled from 'styled-components';\n\nimport { Column } from '../../shared/styles';\n\nconst NameColumn = styled(Column)`\n width: 60%;\n`;\n\nconst ActionColumn = styled(Column)`\n width: 40%;\n`;\n\nexport {\n ActionColumn,\n NameColumn,\n};\n","import styled from 'styled-components';\n\nconst Link = styled.a`\n &&& {\n color: ${props => props.theme.primaryColor};\n }\n`;\n\nconst Separator = styled.div`\n height: 0px;\n border-bottom: 1px solid ${props => props.theme.secondaryColorLight};\n margin-top: 20px;\n margin-bottom: 20px;\n`;\n\nexport {\n Link,\n Separator,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport Select from 'react-select';\n\nimport {\n FormField,\n HelpBlock,\n Label,\n Row,\n selectorProps,\n} from './form';\n\nexport default function withNameSelect(\n objectName,\n name,\n store,\n label,\n isMulti = false,\n selectAllOption,\n isDisabled = false,\n) {\n const kebab = _.kebabCase(name);\n const capitalize = _.capitalize(name);\n const snake = _.snakeCase(name);\n\n function PlainSelect() {\n const set = store(state => state.set);\n const value = store(state => state[objectName][name]);\n\n const options = store(state => state[`${name}Options`]);\n let allOptions = options;\n if (selectAllOption) {\n allOptions = _.concat(selectAllOption, options);\n }\n const selectedOption = isMulti\n ? _.map(value, v => _.find(allOptions, { value: v }))\n : _.find(allOptions, { value });\n\n const errors = store(state => state.errors);\n\n const handleChange = selected => {\n if (isMulti) {\n if (selectAllOption && _.find(selected, selectAllOption)) {\n set(state => {\n state[objectName][name] = [selectAllOption.value];\n });\n } else {\n set(state => {\n state[objectName][name] = _.map(selected, 'value');\n });\n }\n } else {\n set(state => {\n state[objectName][name] = selected.value;\n });\n }\n };\n\n return (\n \n \n \n {errors[snake]} }\n \n
\n );\n }\n\n PlainSelect.displayName = capitalize;\n\n return PlainSelect;\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { useMediaQuery } from 'react-responsive';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Actions from './actions';\nimport Header from './author-components/header';\n\nconst Byline = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n ${props => props.theme.isOnWireSide && `\n margin: 15px 0;\n `};\n\n > div.author-details {\n margin-right: 8px;\n\n > div.organization-details {\n display: flex;\n align-items: center;\n\n > p {\n margin-right: 8px;\n }\n }\n }\n`;\n\nconst Position = styled.p`\n margin: 0;\n line-height: 120%;\n font-size: ${props => (props.theme.isExpanded ? 20 : 14)}px;\n font-weight: ${props => (props.theme.isExpanded\n ? props.theme.fontWeightBold\n : props.theme.fontWeightMedium\n )};\n ${props => props.theme.isExpanded && `\n line-height: 26px;\n text-transform: capitalize;\n color: ${props.theme.bodyColor};\n `};\n`;\n\nconst Divider = styled.hr`\n display: block;\n width: 67px;\n height: 0px;\n margin: 0;\n border: 0;\n border-top: 2px dashed ${props => props.theme.primaryColor};\n`;\n\nconst Org = styled.p`\n color: ${props => (props.theme.isExpanded ? props.theme.bodyColor : props.theme.secondaryColor)};\n margin: 0;\n font-size: 16px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n ${props => props.theme.isExpanded && `\n font-size: 20px;\n font-weight: ${props.theme.fontWeightBold};\n line-height: 26px;\n text-transform: capitalize;\n `};\n ${props => props.theme.isOnWireSide && `\n font-size: small;\n font-weight: 600;\n line-height: 1.2em;\n margin-top: 15px;\n `};\n`;\n\nexport default function Author(props) {\n const {\n profile, isExpanded, isOnWireSide, clickDataAttributes,\n } = props;\n const isNotMobile = useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMin})` });\n\n return (\n \n \n );\n}\n\nAuthor.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n }).isRequired,\n isExpanded: PropTypes.bool.isRequired,\n isOnWireSide: PropTypes.bool.isRequired,\n clickDataAttributes: PropTypes.shape({}),\n};\n\nAuthor.defaultProps = {\n clickDataAttributes: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FollowButton from './follow-button';\nimport Loading from '../../shared/loading';\nimport defaultOnErrorHandler from '../../shared/default-on-error-handler';\nimport { followContributor, unfollowContributor } from '../../services/contributor-service';\nimport { recordProfileStatistic } from '../../services/statistics-service';\nimport useSynchronizedFollowStatus from './follow-button/profile-follow-state-listener';\n\nexport default function ProfileFollowButton({\n exp,\n isProfileFollowedByCurrentUser,\n profileId,\n lessUnfollow,\n onUnfollow,\n isOnWireSide,\n followEventName,\n unfollowEventName,\n}) {\n const [followed, setFollowed] = React.useState(isProfileFollowedByCurrentUser);\n const loadingRef = React.createRef();\n const name = isOnWireSide ? 'profile-follow-button-on-sidebar' : 'profile-follow-button';\n const broadcast = useSynchronizedFollowStatus({ id: profileId, onStatusChanged: setFollowed });\n\n const toggle = () => {\n loadingRef.current.start({\n onFadeInComplete: () => {\n const apiCall = followed ? unfollowContributor : followContributor;\n apiCall(profileId, exp).then(() => {\n loadingRef.current.stop();\n recordProfileStatistic(profileId, followed ? unfollowEventName : followEventName);\n broadcast(!followed);\n followed && onUnfollow && onUnfollow();\n }).catch(err => {\n loadingRef.current.stop();\n defaultOnErrorHandler(err, `Error ${followed ? 'un' : ''}following this contributor`);\n });\n },\n });\n };\n\n return (\n \n \n );\n}\n\nProfileFollowButton.propTypes = {\n exp: PropTypes.string,\n isProfileFollowedByCurrentUser: PropTypes.bool.isRequired,\n profileId: PropTypes.number.isRequired,\n lessUnfollow: PropTypes.bool,\n onUnfollow: PropTypes.func,\n isOnWireSide: PropTypes.bool,\n followEventName: PropTypes.string,\n unfollowEventName: PropTypes.string,\n};\n\nProfileFollowButton.defaultProps = {\n exp: null,\n lessUnfollow: false,\n onUnfollow: null,\n isOnWireSide: false,\n followEventName: 'follow_profile',\n unfollowEventName: 'unfollow_profile',\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nconst Container = styled.div`\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 16px;\n margin: 0;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n ${props => props.theme.isExpanded && `\n margin-bottom: auto;\n color: ${props.theme.bodyColor};\n `};\n a, a:hover {\n color: ${props => props.theme.bodyColor};\n }\n`;\n\nconst Name = styled.a`\n margin-right: 14px;\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n text-transform: uppercase;\n ${props => props.theme.isExpanded && `\n font-size: 24px;\n line-height: 26px;\n `};\n ${props => (props.theme.isOnWireSide ? `\n font-size: large;\n margin: 0;\n ` : `\n overflow: hidden;\n text-overflow: ellipsis;\n `)};\n`;\n\nexport default function Header({\n profile, isExpanded, isOnWireSide, clickDataAttributes,\n}) {\n const profileLink = `/contributors/${profile.slug}`;\n\n const showCompanyName = profile.isCompanyProfile && !!profile.organization;\n\n return (\n \n {(!!isOnWireSide || !!isExpanded) && (\n \n {showCompanyName\n ? (\n \n {profile.organization}\n \n )\n : (\n \n {profile.firstName}\n
\n {profile.lastName}\n \n )}\n \n )}\n {(!isOnWireSide && !isExpanded) && (\n \n {showCompanyName\n ? (\n \n {profile.organization}\n \n )\n : (\n \n {profile.firstName}\n {' '}\n {profile.lastName}\n \n )}\n \n )}\n \n );\n}\n\nHeader.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n }).isRequired,\n isExpanded: PropTypes.bool.isRequired,\n isOnWireSide: PropTypes.bool.isRequired,\n clickDataAttributes: PropTypes.shape({}),\n};\n\nHeader.defaultProps = {\n clickDataAttributes: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport postal from 'postal';\nimport { useSpring, animated } from 'react-spring';\nimport { scroller } from 'react-scroll';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Form from './contact-form-components/form';\n\nconst Container = styled(animated.div)`\n overflow: hidden;\n`;\n\nconst showTopic = {\n channel: 'micro-profile.commands',\n topic: 'present-lead-capture-form',\n};\nconst name = 'lead-capture-form';\n\nexport default function AnimatedContactForm(props) {\n const {\n wireTitle, wireUrl,\n } = props;\n const [is1stScroll, setIs1stScroll] = React.useState(true);\n const [hasScrolled, setHasScrolled] = React.useState(false);\n const [show, setShow] = React.useState(false);\n\n const present = React.useCallback(() => {\n if (window.Livewire.currentUser) {\n setShow(true);\n return;\n }\n postal.publish({\n channel: 'commands.sign-up',\n topic: 'present',\n data: {\n campaignHeader: `To access “${wireTitle}” register free today`,\n redirectTo: wireUrl,\n },\n });\n }, [wireTitle, wireUrl]);\n\n const scrollToForm = React.useCallback(() => {\n if (!show || hasScrolled || !is1stScroll) {\n return;\n }\n\n scroller.scrollTo(name, {\n offset: -150,\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n setHasScrolled(true);\n setIs1stScroll(false);\n }, [show, hasScrolled, is1stScroll]);\n\n const { height } = useSpring({ height: show ? 'auto' : 0, onRest: scrollToForm });\n\n React.useEffect(() => {\n postal.unsubscribe(showTopic);\n postal.subscribe({ ...showTopic, callback: present });\n }, [present]);\n\n return (\n \n \n \n \n \n );\n}\n\nAnimatedContactForm.propTypes = {\n wireTitle: PropTypes.string.isRequired,\n wireUrl: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport mutate from '../../../../shared/mutate';\nimport Validator from '../../../../shared/validator';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport Loading from '../../../../shared/loading';\nimport { EMAIL_REGEX } from '../../../../shared/consts';\nimport SuccessInfo from './success-info';\nimport Footer from './footer';\nimport { PDS_LABEL, REPORTS_LABEL, OTHER_LABEL } from './consts';\nimport sendContact from '../../../../services/partnerships/contact-service';\n\nexport default class Form extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n partnershipId: PropTypes.number,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n organization: PropTypes.string.isRequired,\n };\n\n static defaultProps = {\n partnershipId: null,\n };\n\n constructor(props) {\n super(props);\n\n this.validator = new Validator({\n nameRequired: state => !!state.name,\n emailRequired: state => !!state.email,\n emailRegex: state => !state.email || EMAIL_REGEX.test(state.email),\n });\n\n const { currentUser } = window.Livewire;\n this.state = {\n name: _.get(currentUser, 'profile.name', ''),\n email: _.get(currentUser, 'email', ''),\n phone: '',\n investorType: _.get(currentUser, 'profile.investorType.name', _.get(props, 'investorTypes[0].name')),\n pds: false,\n reports: false,\n other: false,\n message: '',\n submitInProgress: false,\n validations: this.validator.getValidations(),\n };\n }\n\n handlePdsChange(event) {\n this.setState({ pds: event.target.checked });\n }\n\n handleReportsChange(event) {\n this.setState({ reports: event.target.checked });\n }\n\n handleOtherChange(event) {\n this.setState({ other: event.target.checked });\n }\n\n handleEmailChange(event) {\n const email = event.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.email = email;\n state.validations.emailRequiredValid = this.validator.validateEmailRequired(state);\n state.validations.emailRegexValid = this.validator.validateEmailRegex(state);\n }));\n }\n\n handleNameChange(event) {\n const name = event.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.name = name;\n state.validations.nameRequiredValid = this.validator.validateNameRequired(\n state,\n );\n }));\n }\n\n handlePhoneChange(event) {\n this.setState({ phone: event.target.value });\n }\n\n handleInvestorTypeChange(event) {\n this.setState({ investorType: event.target.value });\n }\n\n handleMessageChange(event) {\n this.setState({ message: event.target.value });\n }\n\n handleSubmit(event) {\n event.preventDefault();\n\n this.setState(\n state => update(state, {\n validations: { $set: this.validator.validateForm(state) },\n }),\n () => {\n if (!this.validator.formValid) {\n return;\n }\n this.loading.start();\n this.setState({\n submitInProgress: true,\n });\n\n sendContact(this.props.partnershipId, {\n referable_id: this.props.wireId,\n referable_type: 'Wire',\n name: this.state.name,\n email: this.state.email,\n phone: this.state.phone,\n investor_type: this.state.investorType,\n enquiring_about: [\n this.state.pds ? PDS_LABEL : '',\n this.state.reports ? REPORTS_LABEL : '',\n this.state.other ? OTHER_LABEL : '',\n ].filter(x => !!x),\n message_to_contributor: this.state.message,\n })\n .then(() => this.setState({ submitSuccessful: true }))\n .catch(e => defaultOnErrorHandler(e, 'Error submitting contact request'))\n .finally(() => {\n this.loading.stop();\n this.setState({ submitInProgress: false });\n });\n },\n );\n }\n\n render() {\n const nameFormGroupClass = classNames(\n 'form-group',\n 'lead-capture-form-group',\n '--first',\n {\n 'has-error': !this.state.validations.nameRequiredValid,\n },\n );\n const emailFormGroupClass = classNames(\n 'form-group',\n 'lead-capture-form-group',\n {\n 'has-error': !this.state.validations.emailRequiredValid || !this.state.validations.emailRegexValid,\n },\n );\n\n return (\n this.handleSubmit(e)}\n >\n {this.state.submitSuccessful && \n Success \n \n Your enquiry has been sent to\n
\n {organization}\n \n \n );\n}\n\nSuccessInfo.propTypes = {\n organization: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport {\n FOOTER_PARAGRAPH_1, FOOTER_PRE_POLICY, FOOTER_POST_POLICY,\n} from './consts';\n\nfunction Footer() {\n return (\n \n );\n}\n\nexport default React.memo(Footer);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeContext } from 'styled-components';\nimport DesktopView from './desktop-view';\nimport LowResolutionView from '../common/low-resolution-view';\n\nexport default function Main({\n contributorCount,\n partnership,\n investorTypes,\n mobileImageUrl,\n}) {\n const { isLowResolution } = React.useContext(ThemeContext);\n\n return isLowResolution\n ? \n \n \n );\n}\n\nDesktopView.propTypes = {\n id: PropTypes.number.isRequired,\n cachedAnalyticsDataUrls: PropTypes.shape({\n followersDataUrl: PropTypes.string,\n contributorRankingDataUrl: PropTypes.string,\n investorTypesDataUrl: PropTypes.string,\n }).isRequired,\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n investorTypes: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n contributorCount: PropTypes.number.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { SectionContainer, SectionTitle } from '../common/styles';\nimport Actions from '../common/actions';\nimport Filters from '../common/filters';\nimport Loader from '../common/loader';\nimport useFollowersStore from './followers-components/state-hook';\nimport Figures from './followers-components/figures';\nimport { getFollowers } from '../../../services/analytics/audience-service';\nimport ChartArea from './followers-components/chart-area';\n\nconst Wrapper = styled.div`\n display: flex;\n width: 100%;\n height: 340px;\n justify-content: space-between;\n align-items: center;\n margin-top: 56px;\n\n & > *:first-child {\n order: -1;\n height: 100%;\n /* The whole desktop view only supports two resolutions: XLarge(1024px~1365px) and XXLarge(1366px+) */\n flex-basis: ${props => (props.theme.isXXLarge ? '33%' : '24%')};\n }\n\n &:after {\n order: 0;\n height: 100%;\n content: \"\";\n width: 22px;\n display: block;\n }\n\n & > *:last-child {\n order: 1;\n height: 100%;\n /* The whole desktop view only supports two resolutions: XLarge(1024px~1365px) and XXLarge(1366px+) */\n flex-basis: ${props => (props.theme.isXXLarge ? '67%' : '76%')};\n }\n`;\n\nexport default function Followers({\n id,\n cachedAnalyticsDataUrls,\n contributors,\n actualDaysAgo,\n}) {\n const cachedFollowersDataUrl = cachedAnalyticsDataUrls.followersDataUrl;\n const setContributors = useFollowersStore(state => state.setContributors);\n const setRawFollowers = useFollowersStore(state => state.setRawFollowers);\n const setDaysAgo = useFollowersStore(state => state.setDaysAgo);\n const set = useFollowersStore(state => state.set);\n const storeContribs = useFollowersStore(state => state.contributors);\n const daysAgo = useFollowersStore(state => state.daysAgo);\n const generatedAt = useFollowersStore(state => state.generatedAt);\n const requestData = useFollowersStore(state => state.requestData);\n const storeLoading = useFollowersStore(state => state.loading);\n const [loading, setLoading] = React.useState(false);\n const [inited, setInited] = React.useState(false);\n const [token, setToken] = React.useState(null);\n\n const fetchFollowers = React.useCallback(fromCache => {\n if (!_.get(contributors, 'length')) {\n return;\n }\n\n setLoading(true);\n const [task, source] = getFollowers(\n id,\n contributors.map(c => c.id),\n actualDaysAgo,\n cachedFollowersDataUrl,\n fromCache,\n );\n setToken(source);\n task\n .then(response => {\n const payload = _.get(response, 'data', []);\n if (payload.length) {\n setInited(true);\n setRawFollowers(payload);\n set(state => {\n state.generatedAt = moment();\n });\n }\n })\n .finally(() => {\n set(state => {\n state.requestData = false;\n });\n setLoading(false);\n setToken(null);\n });\n }, [contributors, id, actualDaysAgo, set, setRawFollowers, cachedFollowersDataUrl]);\n\n React.useEffect(() => {\n if (!inited) {\n setContributors(_.map(contributors, c => ({ ...c, selected: true })));\n fetchFollowers(true);\n }\n }, [inited, contributors, fetchFollowers, setContributors]);\n\n React.useEffect(() => {\n requestData && fetchFollowers(false);\n }, [requestData, fetchFollowers]);\n\n React.useEffect(() => {\n let tid;\n if (loading) {\n tid = setTimeout(() => set(state => {\n state.loading = true;\n }), 200);\n } else {\n set(state => {\n state.loading = false;\n });\n }\n return () => clearTimeout(tid);\n }, [loading, set]);\n\n const onCancel = () => token && token.cancel();\n\n const filtersProps = {\n daysAgo,\n contributors: storeContribs,\n onContributorsChange: setContributors,\n onDateChange: setDaysAgo,\n };\n\n const actionsProps = {\n generatedAt,\n onRefreshClick: () => set(state => {\n state.requestData = true;\n }),\n };\n\n return (\n \n {!!storeLoading && followers \n \n \n \n );\n}\n\nFollowers.propTypes = {\n id: PropTypes.number.isRequired,\n cachedAnalyticsDataUrls: PropTypes.shape({\n followersDataUrl: PropTypes.string,\n }).isRequired,\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n actualDaysAgo: PropTypes.number.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport useOnclickOutside from 'react-cool-onclickoutside';\nimport {\n DropdownContainer,\n FilterContainer,\n FilterLabel,\n OptionsContainer,\n Option,\n} from './common/styles';\nimport { DATE_RANGES } from '../constants';\nimport DropdownArrow from './common/dropdown-arrow';\n\nconst SDropdownContainer = styled(DropdownContainer)`\n width: 155px;\n`;\n\nconst SOptionsContainer = styled(OptionsContainer)`\n width: 200px;\n`;\n\nconst Opt = styled(Option)`\n padding: 5px 8px 0 8px;\n height: 40px;\n\n &:hover {\n border-radius: 4px;\n }\n`;\n\nconst CalendarIcon = styled.span`\n color: ${props => props.theme.secondaryColor};\n font-size: 18px !important;\n`;\n\nconst DropdownText = styled.span`\n color: ${props => props.theme.bodyColor};\n font: 700 14px/120% ${props => props.theme.fontFamilyBody};\n`;\n\nexport default function DateRanges({ daysAgo, onChange }) {\n const [expanded, setExpanded] = React.useState(false);\n const ref = useOnclickOutside(() => {\n setExpanded(false);\n });\n\n const toggleShowOptions = e => {\n e && e.preventDefault();\n setExpanded(!expanded);\n };\n\n const setDays = v => e => {\n e && e.preventDefault();\n setExpanded(false);\n onChange(v);\n };\n\n return (\n \n Date Ranges \n \n {_.find(DATE_RANGES, { value: daysAgo }).label} \n \n {expanded && (\n \n {DATE_RANGES.map(({ value, label }) => (\n \n {label}\n \n ))}\n \n )}\n \n );\n}\n\nDateRanges.propTypes = {\n daysAgo: PropTypes.number.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport useOnclickOutside from 'react-cool-onclickoutside';\nimport { useSpring, animated, config } from 'react-spring';\nimport ContributorsFilterContext, { reducer, defaultState } from './contributors-components/context';\nimport {\n DropdownContainer,\n FilterContainer,\n FilterLabel,\n} from './common/styles';\nimport DropdownLabel from './contributors-components/dropdown-label';\nimport DropdownArrow from './common/dropdown-arrow';\nimport Title from './contributors-components/title';\nimport Actions from './contributors-components/actions';\nimport ContributorOption from './contributors-components/contributor-option';\nimport StackedAvatars from './contributors-components/stacked-avatars';\n\nconst SDropdownContainer = styled(DropdownContainer)`\n width: 190px;\n padding-left: 16px;\n`;\n\nconst WarnableContainer = styled(animated.div)`\n width: 334px;\n padding: 16px;\n border: 1px solid #d7dfe7;\n border-radius: 4px;\n position: absolute;\n margin-top: 6px;\n right: 0;\n background: #FFFFFF;\n display: flex;\n flex-direction: column;\n z-index: 2;\n`;\n\nconst stringifySelected = array => array\n .filter(c => c.selected)\n .map(c => c.id)\n .join(',');\n\nexport default function Contributors({ contributors, onChange }) {\n const [state, dispatch] = React.useReducer(reducer, defaultState);\n const [expanded, setExpanded] = React.useState(false);\n const [warningTid, setWarningTid] = React.useState(null);\n const spring = useSpring({\n borderColor: state.warning ? '#b71e49' : '#d7dfe7',\n config: config.molasses,\n });\n\n const warn = () => {\n clearTimeout(warningTid);\n dispatch({ type: 'setWarning', payload: true });\n const tid = setTimeout(() => dispatch({ type: 'setWarning', payload: false }), 2000);\n setWarningTid(tid);\n };\n\n const ref = useOnclickOutside(() => {\n if (state.noneSelected) {\n warn();\n return;\n }\n // We have a vast area outside of this component. Any elements on the page\n // can trigger this hook's callback.\n // Trying to minimize the chance the actual contributors needs to be set.\n if (stringifySelected(contributors) !== stringifySelected(state.selection)) {\n onChange(state.selection);\n }\n setExpanded(false);\n });\n\n React.useEffect(() => {\n dispatch({ type: 'setSelection', payload: contributors });\n }, [contributors]);\n\n const toggleShowOptions = e => {\n e && e.preventDefault();\n if (expanded && state.noneSelected) {\n warn();\n return;\n }\n setExpanded(!expanded);\n };\n\n const selected = state.selection.filter(c => c.selected);\n\n return (\n \n \n Contributors \n \n \n {expanded && (\n \n \n )}\n {!state.allSelected && \n \n );\n}\n\nContributors.propTypes = {\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n selected: PropTypes.bool.isRequired,\n })).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Text = styled.span`\n color: ${props => props.theme.bodyColor};\n font: 700 14px/120% ${props => props.theme.fontFamilyBody};\n`;\n\nexport default function DropdownLabel({ contributors }) {\n const selectedContributors = contributors.filter(c => c.selected);\n const allSelected = contributors.length === selectedContributors.length;\n const text = !allSelected\n ? `${selectedContributors.length} contributor${selectedContributors.length > 1 ? 's' : ''}`\n : 'all contributors';\n\n return {text} ;\n}\n\nDropdownLabel.propTypes = {\n contributors: PropTypes.arrayOf(PropTypes.shape({\n selected: PropTypes.bool.isRequired,\n })).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useSpring, animated, config } from 'react-spring';\nimport ContributorsFilterContext from './context';\nimport { OptionSectionTitle } from '../common/styles';\n\nconst Title = styled(OptionSectionTitle)`\n margin-bottom: 0;\n margin-left: 8px;\n\n & > span {\n display: block;\n width: 100%;\n font: ${props => props.theme.fontWeightMedium} 16px/30px ${props => props.theme.fontFamilyBody};\n color: #495865;\n text-transform: none;\n }\n`;\n\nexport default function Contributors() {\n const { state: { warning } } = React.useContext(ContributorsFilterContext);\n const spring = useSpring({\n color: warning ? '#b71e49' : '#495865',\n config: config.molasses,\n });\n\n return (\n \n filter by contributor\n <animated.span style={spring}>You must select at least one contributor</animated.span>\n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport ContributorsFilterContext from './context';\n\nconst Container = styled.div`\n width: 100%;\n padding: 0 16px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n &:after {\n order: 0;\n content: \"\";\n border: 0;\n height: 14px;\n margin: 0 4px;\n border-right: 1px solid ${props => props.theme.secondaryColor30Transparent};\n }\n\n & > button {\n font: ${props => props.theme.fontWeightHeavy} 16px/30px ${props => props.theme.fontFamilyBody};\n border: none;\n background-color: transparent;\n outline: none;\n text-transform: capitalize;\n color: ${props => props.theme.primaryColor};\n }\n\n & > button[disabled] {\n color: ${props => props.theme.secondaryColor30Transparent};\n }\n\n & > button:first-child {\n order: -1;\n }\n\n & > button:last-child {\n order: 1;\n }\n`;\n\nexport default function Actions() {\n const { state, dispatch } = React.useContext(ContributorsFilterContext);\n\n const toggle = v => e => {\n e && e.preventDefault();\n dispatch({ type: 'toggleAll', payload: v });\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport ContributorsFilterContext from './context';\nimport { Option } from '../common/styles';\nimport RoundedAvatar from './rounded-avatar';\n\nconst Container = styled(Option)`\n margin: 8px 0;\n height: 60px;\n display: flex;\n align-items: center;\n padding: 0 20px 0 10px;\n border-radius: 6px;\n border: ${props => (props.selected ? '1px' : '0px')} solid;\n border-color: ${props => props.theme.secondaryColor};\n`;\n\nconst Text = styled.span`\n flex-grow: 2;\n margin: 0 18px;\n color: ${props => props.theme.bodyColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst Checkbox = styled.span`\n flex-shrink: 0;\n width: 22px;\n height: 22px;\n padding: 4px;\n font-size: 12px;\n border: 1px solid ${props => props.theme.secondaryColor};\n border-radius: 2px;\n color: #27ae60;\n\n &.fa-check {\n color: white;\n background-color: ${props => props.theme.bodyColor};\n border-color: ${props => props.theme.bodyColor};\n }\n`;\n\nexport default function ContributorOption({\n id, name, profilePictureUrl, selected,\n}) {\n const { dispatch } = React.useContext(ContributorsFilterContext);\n\n const handleClick = e => {\n e && e.preventDefault();\n dispatch({ type: 'toggleSelection', payload: id });\n };\n\n return (\n \n {name} \n \n );\n}\n\nContributorOption.propTypes = {\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n selected: PropTypes.bool.isRequired,\n};\n\nContributorOption.defaultProps = {\n profilePictureUrl: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport RoundedAvatar from './rounded-avatar';\n\nconst gap = 24;\nconst avatarWidth = 40;\nconst minOverlap = 5;\nconst maxAvatarsSupported = 50;\nconst overlap = n => minOverlap + n * (avatarWidth - 2 * minOverlap) / maxAvatarsSupported;\nconst Container = styled.div`\n position: absolute;\n width: ${props => `${props.count * (avatarWidth - overlap(props.count))}px`};\n top: 17px;\n left: ${props => `${-1 * (props.count * (avatarWidth - overlap(props.count)) + gap)}px`};\n display: flex;\n flex-direction: row-reverse;\n\n & > img {\n flex-shrink: 0;\n margin-left: ${props => `${-1 * overlap(props.count)}px`};\n }\n`;\n\nexport default function StackedAvatars({ contributors }) {\n return (\n \n {contributors.map(c => \n );\n}\n\nStackedAvatars.propTypes = {\n contributors: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n })).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport Stat from './common/stat';\nimport { getTotalFigures } from './transform';\nimport useFollowersStore from './state-hook';\n\n// width and height set in parent styles, do not set it here\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Title = styled.div`\n font: ${props => props.theme.fontWeightHeavy} 19px/120% ${props => props.theme.fontFamilyBody};\n color: #627484;\n`;\n\nconst SubTitle = styled.div`\n font: ${props => props.theme.fontWeightRegular} 16px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n margin-top: 8px;\n max-width: 340px;\n`;\n\nconst Stats = styled.div`\n margin-top: 40px;\n display: flex;\n height: 48px;\n`;\n\nconst TotalStat = styled(Stats)`\n height: 57px;\n`;\n\nexport default function Figures() {\n const followers = useFollowersStore(state => state.followers);\n const [stats, setStats] = React.useState({ total: NaN, gained: NaN, lost: NaN });\n\n React.useEffect(() => {\n setStats(getTotalFigures(followers));\n }, [followers]);\n\n return (\n \n How is my follower growth tracking over time? \n You can track how your followers have grown over a selected date range. \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport ColumnChart from '../../common/charts/column-chart';\nimport ColumnChartNav from '../../common/charts/column-chart-nav';\nimport FollowersChangedTooltip from './followers-changed-tooltip';\nimport GranularityToggle from '../../common/charts/granularity-toggle';\nimport { earliestStatsUnit, followersToBucket } from './transform';\nimport useFollowersStore from './state-hook';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n`;\n\nexport default function ChartArea() {\n const set = useFollowersStore(state => state.set);\n const followers = useFollowersStore(state => state.followers);\n const daysAgo = useFollowersStore(state => state.daysAgo);\n const granularity = useFollowersStore(state => state.granularity);\n const [bucket, setBucket] = React.useState([]);\n const initialRange = { start: Math.min(daysAgo, 30), end: 0 };\n const [dateRange, setDateRange] = React.useState({ ...initialRange });\n const [visibleRange, setVisibleRange] = React.useState({ ...initialRange });\n\n React.useEffect(() => {\n setBucket(followersToBucket({\n ...visibleRange,\n followers,\n granularity,\n }));\n }, [followers, granularity, visibleRange]);\n\n React.useEffect(() => {\n let days = daysAgo;\n if (!Number.isFinite(daysAgo)) {\n days = earliestStatsUnit({ followers, granularity });\n }\n setDateRange({ start: days, end: 0 });\n const vRange = {\n start: Number.isFinite(daysAgo) ? Math.min(30, days) : 30,\n end: 0,\n };\n setVisibleRange(vRange);\n }, [followers, granularity, daysAgo]);\n\n const chartProps = {\n bucket,\n granularity,\n tooltipValueContent: FollowersChangedTooltip,\n };\n\n const navProps = {\n granularity,\n visibleRange,\n range: dateRange,\n onPrev: () => {\n setVisibleRange({ start: visibleRange.start + 30, end: visibleRange.end + 30 });\n },\n onNext: () => {\n setVisibleRange({ start: visibleRange.start - 30, end: visibleRange.end - 30 });\n },\n };\n\n const gProps = {\n daysAgo,\n granularity,\n onChange: g => set(state => {\n state.granularity = g;\n }),\n };\n\n return (\n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n padding: 4px 16px;\n background-color: ${props => props.theme.bodyColor};\n border: none;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n height: 44px;\n`;\n\nconst Text = styled.span`\n font: ${props => props.theme.fontWeightBold} 10px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n`;\n\nexport default function buildTooltipContent({ valueContent }) {\n function TooltipContent({\n active, payload, label, labelFormatter,\n }) {\n if (!active) {\n return null;\n }\n\n return (\n \n {valueContent({ payload })}\n {labelFormatter(label)} \n \n );\n }\n\n TooltipContent.propTypes = {\n active: PropTypes.bool,\n payload: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.number.isRequired,\n })).isRequired,\n label: PropTypes.string.isRequired,\n labelFormatter: PropTypes.func.isRequired,\n };\n\n TooltipContent.defaultProps = {\n active: false,\n };\n\n return TooltipContent;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport humanFormat from 'human-format';\nimport Diff from '../../common/diff';\n\nconst Main = styled.div`\n color: white;\n margin-bottom: 2px;\n display: flex;\n align-items: center;\n`;\n\nconst Value = styled.span`\n font: ${props => props.theme.fontWeightBold} 19px/20px ${props => props.theme.fontFamilyBody};\n text-transform: uppercase;\n`;\n\nconst readble = d => humanFormat(d, { decimals: 1, separator: '' });\n\nexport default function FollowersChangedTooltip({ payload }) {\n const [{ payload: { value, changed } }] = payload;\n\n return (\n \n {readble(value)} \n {!!changed && \n\n );\n}\n\nFollowersChangedTooltip.propTypes = {\n payload: PropTypes.arrayOf(PropTypes.shape({\n payload: PropTypes.shape({\n value: PropTypes.number.isRequired,\n changed: PropTypes.number.isRequired,\n }).isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { SectionContainer, SectionTitle } from '../common/styles';\nimport Actions from '../common/actions';\nimport Filters from '../common/filters';\nimport Loader from '../common/loader';\nimport { getReaderEvents } from '../../../services/analytics/audience-service';\nimport useInvestorTypesStore from './investor-types-components/state-hook';\nimport Description from './investor-types-components/description';\nimport TypeGrid from './investor-types-components/type-grid';\n\nconst Wrapper = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: flex-start;\n margin-top: 56px;\n\n & > *:first-child {\n order: -1;\n /* The whole desktop view only supports two resolutions: XLarge(1024px~1365px) and XXLarge(1366px+) */\n flex-basis: ${props => (props.theme.isXXLarge ? '33%' : '24%')};\n }\n\n &:after {\n order: 0;\n height: 100%;\n content: \"\";\n width: 22px;\n display: block;\n }\n\n & > *:last-child {\n order: 1;\n /* The whole desktop view only supports two resolutions: XLarge(1024px~1365px) and XXLarge(1366px+) */\n flex-basis: ${props => (props.theme.isXXLarge ? '67%' : '76%')};\n margin-top: 12px;\n }\n`;\n\nexport default function InvestorTypes({\n id, contributors, actualDaysAgo, investorTypes, cachedAnalyticsDataUrls,\n}) {\n const cachedInvestorTypesDataUrl = cachedAnalyticsDataUrls.investorTypesDataUrl;\n const setContributors = useInvestorTypesStore(state => state.setContributors);\n const setRawEvents = useInvestorTypesStore(state => state.setRawEvents);\n const setDaysAgo = useInvestorTypesStore(state => state.setDaysAgo);\n const set = useInvestorTypesStore(state => state.set);\n const storeContribs = useInvestorTypesStore(state => state.contributors);\n const daysAgo = useInvestorTypesStore(state => state.daysAgo);\n const generatedAt = useInvestorTypesStore(state => state.generatedAt);\n const requestData = useInvestorTypesStore(state => state.requestData);\n const storeLoading = useInvestorTypesStore(state => state.loading);\n const [loading, setLoading] = React.useState(false);\n const [inited, setInited] = React.useState(false);\n const [token, setToken] = React.useState(null);\n\n const fetch = React.useCallback(fromCache => {\n if (!_.get(contributors, 'length')) {\n return;\n }\n\n setLoading(true);\n const [task, source] = getReaderEvents(\n id,\n contributors.map(c => c.id),\n actualDaysAgo,\n cachedInvestorTypesDataUrl,\n fromCache,\n );\n setToken(source);\n task\n .then(response => {\n const payload = _.get(response, 'data', []);\n if (payload.length) {\n setInited(true);\n setRawEvents(payload);\n set(state => {\n state.generatedAt = moment();\n });\n }\n })\n .finally(() => {\n set(state => {\n state.requestData = false;\n });\n setLoading(false);\n setToken(null);\n });\n }, [contributors, actualDaysAgo, id, set, setRawEvents, cachedInvestorTypesDataUrl]);\n\n React.useEffect(() => {\n if (!inited) {\n setContributors(_.map(contributors, c => ({ ...c, selected: true })));\n fetch(true);\n }\n }, [inited, contributors, fetch, setContributors]);\n\n React.useEffect(() => {\n requestData && fetch(false);\n }, [requestData, fetch]);\n\n React.useEffect(() => {\n let tid;\n if (loading) {\n tid = setTimeout(() => set(state => {\n state.loading = true;\n }), 200);\n } else {\n set(state => {\n state.loading = false;\n });\n }\n return () => clearTimeout(tid);\n }, [loading, set]);\n\n const onCancel = () => token && token.cancel();\n\n const filtersProps = {\n daysAgo,\n contributors: storeContribs,\n onContributorsChange: setContributors,\n onDateChange: setDaysAgo,\n };\n\n const actionsProps = {\n generatedAt,\n onRefreshClick: () => set(state => {\n state.requestData = true;\n }),\n };\n\n return (\n \n {!!storeLoading && investor type breakdown \n \n \n \n );\n}\n\nInvestorTypes.propTypes = {\n id: PropTypes.number.isRequired,\n cachedAnalyticsDataUrls: PropTypes.shape({\n investorTypesDataUrl: PropTypes.string,\n }).isRequired,\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n actualDaysAgo: PropTypes.number.isRequired,\n investorTypes: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\n// width and height set in parent styles, do not set it here\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Title = styled.div`\n font: ${props => props.theme.fontWeightHeavy} 19px/120% ${props => props.theme.fontFamilyBody};\n color: #627484;\n`;\n\nconst SubTitle = styled.div`\n font: ${props => props.theme.fontWeightRegular} 16px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n margin-top: 8px;\n max-width: 340px;\n`;\n\nfunction Description() {\n return (\n \n What type of investors are viewing my wires? \n \n Understand which investors are viewing your wires over a selected date range.\n \n \n );\n}\n\nexport default React.memo(Description);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport useInvestorTypesStore from './state-hook';\nimport getTypes from './transform';\nimport Types from './types';\nimport ChartArea from './chart-area';\nimport Total from './total';\nimport VsPrev from './vs-prev';\nimport { Header, Row } from './styles';\n\nconst headerHeight = 56;\nconst rowHeight = 30;\n\nconst Container = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n\n & > .chart {\n transform: translateY(5px);\n flex-grow: 2;\n height: ${props => props.n * rowHeight}px;\n }\n\n & > :not(.chart) {\n display: flex;\n flex-direction: column;\n\n .header {\n ${Header};\n height: ${headerHeight}px;\n display: flex;\n align-items: flex-start;\n }\n\n .cell {\n ${Row};\n height: ${rowHeight}px;\n display: flex;\n align-items: flex-end;\n }\n }\n`;\n\nexport default function TypeGrid({ investorTypes }) {\n const events = useInvestorTypesStore(state => state.events);\n const daysAgo = useInvestorTypesStore(state => state.daysAgo);\n const [types, setTypes] = React.useState([]);\n\n React.useEffect(() => {\n setTypes(getTypes(events, daysAgo, investorTypes));\n }, [events, daysAgo, investorTypes]);\n\n const props = { types, daysAgo };\n return (\n \n \n );\n}\n\nTypeGrid.propTypes = {\n investorTypes: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport moment from 'moment-timezone';\nimport { TZ } from '../../../../shared/consts';\nimport { INPUT_FMT } from '../../common/constants';\n\nconst countByType = events => _(events)\n .groupBy('it')\n .mapValues(arr => _.sumBy(arr, 'count'))\n .value();\n\nconst splitter = cutoff => ({ date }) => moment\n .tz(date, INPUT_FMT, TZ)\n // This works with an Infinity initialized cutoff date.\n .isSameOrBefore(cutoff, 'days');\n\nconst hashifyTypes = arr => _.reduce(arr, (r, { id }) => _.set(r, id, 0), {});\n\nconst merge = (types, currentHash, prevHash) => {\n const total = _.reduce(currentHash, (res, v) => res + v, 0);\n const prevTotal = _.reduce(prevHash, (res, v) => res + v, 0);\n const typesHash = hashifyTypes(types);\n return _.mapValues(typesHash, (zero, type) => {\n const count = currentHash[type] || 0;\n const prevCount = prevHash[type] || 0;\n const name = _.get(_.find(types, { id: parseInt(type, 10) }), 'name');\n const pct = total ? Math.round(100 * count / total) : 0;\n const prevPct = prevTotal ? Math.round(100 * prevCount / prevTotal) : 0;\n return {\n type: name,\n count,\n diff: pct - prevPct,\n pct,\n };\n });\n};\n\nexport default function getTypes(events, daysAgo, types) {\n const cutoff = moment.tz(TZ).startOf('day').subtract(daysAgo - 1, 'days');\n const current = [...events];\n // This mutates `current`.\n const prev = _.remove(current, splitter(cutoff));\n const prevTypes = countByType(prev);\n const currentTypes = countByType(current);\n\n return _(merge(types, currentTypes, prevTypes))\n .map(v => v)\n .sortBy('type')\n .value();\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport typesTypes from './prop-types';\n\nconst Container = styled.div`\n align-items: flex-start;\n margin-right: 20px;\n min-width: 170px;\n\n & > .header {\n color: ${props => props.theme.secondaryColor};\n }\n`;\n\nexport default function Types({ types }) {\n return (\n \n investor type\n {types.map(({ type }) => {type})}\n \n );\n}\n\nTypes.propTypes = { types: typesTypes.isRequired };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport Color from 'color';\nimport {\n BarChart, Bar, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis,\n} from 'recharts';\nimport typesTypes from './prop-types';\nimport { LwColumnChartStyles } from '../../common/styles';\nimport Toolty from './toolty';\n\nconst Container = styled.div`\n width: 100%;\n height: 100%;\n\n & svg {\n pointer-events: all;\n ${LwColumnChartStyles};\n\n .recharts-cartesian-grid {\n transform: translateY(10px);\n\n line {\n stroke: #e8edf1;\n :nth-last-child(-n + 2) {\n visibility: hidden;\n }\n }\n }\n }\n`;\n\nconst gradColor = i => Color('#475b6c').lighten(i * 1.56 / 9).rgb().toString();\n\nconst noMargin = {\n top: 0, right: 0, left: 0, bottom: 0,\n};\n\nconst xPad = { left: 0, right: 80 };\n\nexport default function ChartArea({\n types,\n // Injections to make this testable\n IContainer, IBarChart, IBar, ICell,\n}) {\n const [active, setActive] = React.useState(null);\n const onEnterBar = data => setActive(data.type);\n const onLeaveBar = () => setActive(null);\n\n return (\n \n {`${_.get(payload, '[0].payload.pct', 0)}%`}\n of total views\n \n );\n}\n\nToolty.propTypes = {\n active: PropTypes.bool,\n payload: PropTypes.arrayOf(PropTypes.shape({\n payload: PropTypes.shape({\n pct: PropTypes.number,\n }).isRequired,\n })).isRequired,\n};\n\nToolty.defaultProps = {\n active: false,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport typesTypes from './prop-types';\nimport { Num } from './styles';\n\nconst Container = styled.div`\n align-items: flex-end;\n min-width: 40px;\n margin-right: 16px;\n margin-left: -56px;\n\n & > .header {\n color: ${props => props.theme.bodyColor};\n }\n\n &&& > .cell {\n ${Num};\n min-width: 7.8px;\n }\n`;\n\nexport default function Total({ types }) {\n return (\n \n total\n {types.map(({ type, pct }) => (\n \n {`${pct}%`}\n \n ))}\n \n );\n}\n\nTotal.propTypes = { types: typesTypes.isRequired };\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { DATE_RANGES } from '../../common/constants';\nimport typesTypes from './prop-types';\nimport Diff from '../../common/diff';\nimport { Num } from './styles';\n\nconst Container = styled.div`\n min-width: 52px;\n margin-left: 12px;\n align-items: flex-end;\n\n &&&&& > .header {\n flex-direction: column;\n align-items: flex-end;\n color: ${props => props.theme.secondaryColor};\n > .main {\n height: 16px;\n }\n > .secondary {\n font-size: 10px;\n line-height: 16px;\n }\n }\n\n &&& > .values {\n display: flex;\n justify-content: flex-end;\n\n :before {\n display: block;\n order: -1;\n content: \"\";\n height: 100%;\n flex-grow: 2;\n }\n\n :after {\n display: block;\n order: 1;\n content: \"\";\n height: 100%;\n width: 4px;\n }\n\n > .wrapper {\n height: 100%;\n display: flex;\n flex-direction: column;\n\n > .grey {\n ${Num};\n color: ${props => props.theme.secondaryColor};\n }\n\n > .diff {\n /**\n * The alignment of 'Diff' doesn't go well with flex-end. The\n * center and top padding is to fake that. The top padding value\n * is closely related to 'rowHeight' in type-grid.jsx.\n */\n padding-top: 10px;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n\n > span:first-child {\n margin-left: 0;\n margin-right: 6px;\n }\n }\n }\n }\n`;\n\nconst Text = ({ isAllTime, diff }) => {\n if (isAllTime) {\n return -;\n }\n\n if (!diff) {\n return ;\n }\n\n return (\n \n \n );\n}\n\nVsPrev.propTypes = {\n types: typesTypes.isRequired,\n daysAgo: PropTypes.number.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { SectionContainer, SectionTitle } from '../common/styles';\nimport Actions from '../common/actions';\nimport Filters from '../common/filters';\nimport { DATE_RANGES } from '../common/constants';\nimport Loader from '../common/loader';\nimport { getContributorRanking } from '../../../services/analytics/audience-service';\nimport useLeaderboardStore from './contributor-leaderboard-components/state-hook';\nimport Description from './contributor-leaderboard-components/description';\nimport Ranking from './contributor-leaderboard-components/ranking';\n\nconst Wrapper = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: flex-start;\n margin-top: 56px;\n\n & > *:first-child {\n order: -1;\n /* The whole desktop view only supports two resolutions: XLarge(1024px~1365px) and XXLarge(1366px+) */\n flex-basis: ${props => (props.theme.isXXLarge ? '33%' : '24%')};\n }\n\n &:after {\n order: 0;\n height: 100%;\n content: \"\";\n width: 22px;\n display: block;\n }\n\n & > *:last-child {\n order: 1;\n /* The whole desktop view only supports two resolutions: XLarge(1024px~1365px) and XXLarge(1366px+) */\n flex-basis: ${props => (props.theme.isXXLarge ? '67%' : '76%')};\n margin-top: 12px;\n }\n`;\n\nexport default function ContributorLeaderboard({\n id, contributors, contributorCount, cachedAnalyticsDataUrls,\n}) {\n const cachedContributorRankingDataUrl = cachedAnalyticsDataUrls.contributorRankingDataUrl;\n const setContributors = useLeaderboardStore(state => state.setContributors);\n const setDaysAgo = useLeaderboardStore(state => state.setDaysAgo);\n const set = useLeaderboardStore(state => state.set);\n const setRankingStore = useLeaderboardStore(state => state.setRankingStore);\n const storeContribs = useLeaderboardStore(state => state.contributors);\n const daysAgo = useLeaderboardStore(state => state.daysAgo);\n const generatedAt = useLeaderboardStore(state => state.generatedAt);\n const requestData = useLeaderboardStore(state => state.requestData);\n const storeLoading = useLeaderboardStore(state => state.loading);\n const [loading, setLoading] = React.useState(false);\n const [inited, setInited] = React.useState(false);\n const [token, setToken] = React.useState(null);\n\n const fetch = React.useCallback(({ full = false, fromCache = false } = {}) => {\n if (!_.get(contributors, 'length')) {\n return;\n }\n\n setLoading(true);\n const jobs = DATE_RANGES\n .filter(d => (full || d.value === daysAgo))\n .map(d => {\n const [task, source] = getContributorRanking(\n id,\n Number.isFinite(d.value) ? d.value : 0,\n cachedContributorRankingDataUrl,\n fromCache,\n );\n return { task, source };\n });\n !full && setToken(jobs[0].source);\n Promise.all(jobs.map(j => j.task))\n .then(responses => {\n responses\n .map((res, i) => ({\n data: _.get(res, 'data', []),\n date: full ? DATE_RANGES[i].value : daysAgo,\n }))\n .forEach(d => {\n if (d.data.length) {\n setInited(true);\n set(state => {\n state.generatedAt = moment();\n });\n setRankingStore(d);\n }\n });\n })\n .finally(() => {\n set(state => {\n state.requestData = false;\n });\n setLoading(false);\n !full && setToken(null);\n });\n }, [contributors, id, daysAgo, set, setRankingStore, cachedContributorRankingDataUrl]);\n\n React.useEffect(() => {\n if (!inited) {\n setContributors(_.map(contributors, c => ({ ...c, selected: true })));\n fetch({ full: true, fromCache: true });\n }\n }, [contributors, inited, fetch, setContributors]);\n\n React.useEffect(() => {\n requestData && fetch({ fromCache: false });\n }, [requestData, fetch]);\n\n React.useEffect(() => {\n let tid;\n if (loading) {\n tid = setTimeout(() => set(state => {\n state.loading = true;\n }), 200);\n } else {\n set(state => {\n state.loading = false;\n });\n }\n return () => clearTimeout(tid);\n }, [loading, set]);\n\n const onCancel = () => token && token.cancel();\n\n const filtersProps = {\n daysAgo,\n contributors: storeContribs,\n onContributorsChange: setContributors,\n onDateChange: setDaysAgo,\n };\n\n const actionsProps = {\n generatedAt,\n onRefreshClick: () => set(state => {\n state.requestData = true;\n }),\n };\n\n return (\n \n {!!storeLoading && contributor leaderboard \n \n \n \n );\n}\n\nContributorLeaderboard.propTypes = {\n id: PropTypes.number.isRequired,\n cachedAnalyticsDataUrls: PropTypes.shape({\n contributorRankingDataUrl: PropTypes.string,\n }).isRequired,\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n contributorCount: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\n// width and height set in parent styles, do not set it here\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Title = styled.div`\n font: ${props => props.theme.fontWeightHeavy} 19px/120% ${props => props.theme.fontFamilyBody};\n color: #627484;\n`;\n\nconst SubTitle = styled.div`\n font: ${props => props.theme.fontWeightRegular} 16px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n margin-top: 8px;\n max-width: 340px;\n`;\n\nfunction Description() {\n return (\n \n How are my contributors ranking against all Livewire contributors? \n Rank is based on the number of followers. \n \n );\n}\n\nexport default React.memo(Description);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Contributors from './contributors';\nimport Current from './current';\nimport Previous from './previous';\n\nconst headerHeight = 32;\nconst rowHeight = 80;\nconst Container = styled.div`\n display: flex;\n\n & .header {\n display: flex;\n flex-direction: column;\n height: ${headerHeight}px;\n }\n\n & .row {\n height: ${rowHeight}px;\n border-bottom: 1px solid rgba(16, 58, 107, 0.07);\n }\n`;\n\nexport default function Ranking({ contributorCount }) {\n return (\n \n \n );\n}\n\nRanking.propTypes = { contributorCount: PropTypes.number.isRequired };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Colour from 'color';\nimport useLeaderboardStore from './state-hook';\nimport { MainText } from './styles';\nimport RoundedAvatar from '../../common/filters-components/contributors-components/rounded-avatar';\n\nconst Column = styled.div`\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n\n & > .header {\n ${MainText};\n display: flex;\n flex-direction: column;\n }\n\n & > .row {\n display: flex;\n align-items: center;\n }\n`;\n\nconst Text = styled.span`\n color: ${props => props.theme.bodyColor};\n white-space: nowrap;\n margin-left: 20px;\n font: ${props => props.theme.fontWeightHeavy} 16px/16px ${props => props.theme.fontFamilyBody};\n letter-spacing: 0.1px;\n min-width: 210px;\n`;\n\nconst h = 33;\nconst w = 87;\nconst hPad = 8;\nconst PlainWrapper = styled.div`\n width: ${w}px;\n height: ${h}px;\n`;\n\nconst CompanyWrapper = styled(PlainWrapper)`\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 ${hPad}px;\n border-radius: 2px;\n background-color: ${props => props.bgColor};\n box-shadow: 0px 0.7px 3.6px rgba(0, 0, 0, 0.08);\n\n & > img {\n object-fit: contain;\n max-height: ${h}px;\n max-width: ${w - hPad * 2}px;\n }\n`;\n\nconst white = '#ffffff';\n\nconst Company = ({\n color, name, logo,\n}) => {\n let c;\n try {\n c = Colour(color || white);\n } catch (err) {\n c = Colour(white);\n }\n\n if (!logo) {\n return \n 
\n \n );\n};\n\nCompany.propTypes = {\n color: PropTypes.string,\n name: PropTypes.string,\n logo: PropTypes.string,\n};\n\nCompany.defaultProps = {\n color: null,\n name: null,\n logo: null,\n};\n\nconst Contributor = ({\n name, profilePictureUrl, company,\n}) => (\n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport useLeaderboardStore from './state-hook';\nimport {\n MainText, RankNumber, SecondaryText,\n} from './styles';\n\nconst Column = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n & > .header {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n > .main {\n display: flex;\n align-items: center;\n > span {\n ${MainText};\n color: ${props => props.theme.bodyColor};\n }\n }\n\n > .secondary {\n display: flex;\n align-items: center;\n > span {\n ${SecondaryText};\n margin-left: 4px;\n }\n\n > span.primary {\n color: ${props => props.theme.primaryColor};\n }\n }\n }\n\n & > .row {\n ${RankNumber};\n color: ${props => props.theme.bodyColor};\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n`;\n\nconst rank = d => (Number.isFinite(d) ? d : '-');\n\nexport default function Current({ contributorCount }) {\n const current = useLeaderboardStore(state => state.current);\n\n return (\n \n \n );\n}\n\nCurrent.propTypes = { contributorCount: PropTypes.number.isRequired };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { DATE_RANGES } from '../../common/constants';\nimport useLeaderboardStore from './state-hook';\nimport { MainText, SecondaryText } from './styles';\nimport Diff from '../../common/diff';\n\nconst Column = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n min-width: 130px;\n\n & > .header {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding-right: 4px;\n\n > .main { ${MainText}; }\n > .secondary { ${SecondaryText}; }\n }\n\n & > .values {\n display: flex;\n justify-content: flex-end;\n width: 100%;\n padding-right: 4px;\n\n > .direction {\n flex-grow: 2;\n flex-basis: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n > .row {\n padding-right: 4px;\n width: 100%;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n\n > .row:not(.dir) {\n color: ${props => props.theme.secondaryColor};\n }\n\n > .row.dir > span:nth-child(2) {\n display: none;\n }\n }\n\n > .number {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n /* stylelint-disable no-descending-specificity */\n > .row {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin-right: -8px;\n padding-right: 4px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n }\n /* stylelint-enable no-descending-specificity */\n\n > .row.num > span:first-child {\n display: none;\n }\n }\n }\n`;\n\nconst Dir = ({ n }) => {\n if (!Number.isFinite(n) || !n) {\n return ;\n }\n\n return (\n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Img } from 'react-image';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n margin: 65px;\n align-items: center;\n`;\n\nconst Image = styled(Img)`\n width: 250px;\n height: 222px;\n`;\n\nconst SupportText = styled.div`\n margin-top: 20px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 20px;\n text-align: center;\n text-transform: uppercase;\n width: 334px;\n`;\n\nconst Text = styled.div`\n margin-top: 20px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 19px;\n text-align: center;\n width: 334px;\n`;\n\nconst Separator = styled.div`\n height: 0;\n width: 335px;\n border: 1px solid ${props => props.theme.primaryColor};\n margin-top: 16px;\n`;\n\nexport default function MobileDraft({ mobileImageUrl }) {\n return (\n \n Support for mobile is just around the corner \n \n Please view on desktop or tablet while we put the finishing\n touches on support for smaller devices.\n \n \n );\n}\n\nMobileDraft.propTypes = {\n mobileImageUrl: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeContext } from 'styled-components';\nimport DesktopView from './desktop-view';\nimport NewDesktopView from './new-desktop-view';\nimport LowResolutionView from '../common/low-resolution-view';\n\nexport default function Main({\n partnership,\n mobileImageUrl,\n newDashboard,\n}) {\n const { isLowResolution } = React.useContext(ThemeContext);\n\n if (isLowResolution) {\n return \n {!!state.loading && \n \n );\n}\n\nDesktopView.propTypes = {\n partnership: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n cachedAnalyticsDataUrls: PropTypes.shape({\n performanceDataFromDatabaseUrl: PropTypes.string,\n }),\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport DashboardContext from './context';\nimport { SectionContainer, SectionTitle } from '../common/styles';\nimport Total from './account-insights-components/total';\nimport GranularityToggle from '../common/charts/granularity-toggle';\nimport TypedUnitTooltip from './account-insights-components/typed-unit-tooltip';\nimport ColumnChart from '../common/charts/column-chart';\nimport ColumnChartNav from '../common/charts/column-chart-nav';\nimport {\n earliestStatsUnit, wiresToTotal, wiresToBucket,\n} from './account-insights-components/transform';\n\nconst Header = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport default function AccountInsights() {\n const {\n state: {\n wires, previousPeriodWires, daysAgo, granularity,\n },\n dispatch,\n } = React.useContext(DashboardContext);\n const [activeTile, setActiveTile] = React.useState('views');\n const [bucket, setBucket] = React.useState([]);\n const initialRange = { start: Math.min(daysAgo, 30), end: 0 };\n const [dateRange, setDateRange] = React.useState({ ...initialRange });\n const [visibleRange, setVisibleRange] = React.useState({ ...initialRange });\n\n React.useEffect(() => {\n let days = daysAgo;\n if (!Number.isFinite(daysAgo)) {\n days = earliestStatsUnit({ wires, granularity });\n }\n setDateRange({ start: days, end: 0 });\n const vRange = {\n start: Number.isFinite(daysAgo) ? Math.min(30, days) : 30,\n end: 0,\n };\n setVisibleRange(vRange);\n }, [wires, granularity, daysAgo]);\n\n React.useEffect(() => {\n setBucket(wiresToBucket({\n ...visibleRange,\n wires,\n granularity,\n key: activeTile,\n }));\n }, [wires, visibleRange, activeTile, granularity]);\n\n const buildClickHandler = key => () => {\n setActiveTile(key);\n };\n\n const items = ['views', 'engagements', 'likes', 'ctaClicks', 'enquiries'].map(key => ({\n type: _.lowerCase(key), // so that we have the space\n number: wiresToTotal(wires, key),\n previousPeriodNumber: Number.isFinite(daysAgo)\n ? wiresToTotal(previousPeriodWires, key)\n : Number.NaN,\n active: activeTile === key,\n onClick: buildClickHandler(key),\n clickable: true,\n }));\n\n const navProps = {\n granularity,\n visibleRange,\n range: dateRange,\n onPrev: () => {\n setVisibleRange({ start: visibleRange.start + 30, end: visibleRange.end + 30 });\n },\n onNext: () => {\n setVisibleRange({ start: visibleRange.start - 30, end: visibleRange.end - 30 });\n },\n };\n\n const chartProps = {\n bucket,\n granularity,\n type: _.lowerCase(activeTile),\n tooltipValueContent: TypedUnitTooltip,\n };\n\n const gProps = {\n daysAgo,\n granularity,\n onChange: g => dispatch({ type: 'setGranularity', payload: g }),\n };\n\n return (\n \n \n account insights\n \n \n {items.map(i => \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport MetricNumber from '../../common/metric-number';\nimport Diff from '../../common/diff';\n\nconst Type = styled.span`\n text-transform: uppercase;\n font: ${props => props.theme.fontWeightHeavy} 16px/120% ${props => props.theme.fontFamilyBody};\n`;\n\nconst Tile = styled.div`\n padding: 40px 0;\n width: 175px;\n height: 160px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n color: ${props => props.theme.secondaryColor};\n border: none;\n border-bottom: 4px solid transparent;\n\n margin: 0 2px;\n &:first-child {\n margin-left: 0;\n }\n &:last-child {\n margin-right: 0;\n }\n\n ${props => props.clickable && (props.active ? `\n border-bottom-color: ${props.theme.bodyColor};\n & > span[class^=\"metric-number__\"] {\n color: ${props.theme.bodyColor};\n }\n ` : `\n cursor: pointer;\n &:hover {\n border-bottom-color: ${props.theme.secondaryColor};\n }\n `)};\n`;\n\nconst Stat = styled.div`\n display: flex;\n flex-direction: column;\n & > span[class^=\"metric-number__\"] {\n color: ${props => props.theme.secondaryColor};\n font-size: 48px;\n line-height: 120%;\n }\n ${props => props.clickable && props.active && `\n & > span[class^=\"metric-number__\"] {\n color: ${props.theme.bodyColor};\n }\n `};\n > .direction {\n flex-grow: 2;\n flex-basis: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n > .row {\n padding-right: 4px;\n width: 100%;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n > .row:not(.dir) {\n color: ${props => props.theme.secondaryColor};\n }\n }\n`;\n\nconst Num = ({ n }) => {\n if (Number.isNaN(n) || !n) {\n return ;\n }\n\n return (\n \n \n {type} \n \n \n \n );\n}\n\nTotal.propTypes = {\n type: PropTypes.string.isRequired,\n number: PropTypes.number.isRequired,\n previousPeriodNumber: PropTypes.number.isRequired,\n active: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n clickable: PropTypes.bool.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport DashboardContext from './context';\nimport SortableTableHeader from './common/sortable-table-header';\nimport WirePerformance from './published-wires-components/wire-performance';\nimport { SectionContainer, SectionTitle } from '../common/styles';\n\nconst SSectionContainer = styled(SectionContainer)`\n margin-top: 80px;\n`;\n\nconst Header = styled.div`\n display: flex;\n width: 100%;\n height: 16px;\n margin: 25px 0;\n\n & > * {\n text-align: right;\n ${props => props.theme.isLarge && `\n width: 80px;\n `};\n ${props => props.theme.isXLarge && `\n width: 100px;\n `};\n }\n\n & > *:first-child {\n flex-grow: 2;\n text-align: left;\n }\n\n & > *:nth-child(3) {\n ${props => props.theme.isLarge && `\n width: 110px;\n `};\n ${props => props.theme.isXLarge && `\n width: 130px;\n `};\n }\n`;\n\nconst Button = styled.button`\n width: 210px;\n height: 36px;\n text-transform: uppercase;\n color: ${props => props.theme.primaryColor};\n background-color: ${props => props.theme.primaryColorTransparent};\n border: none;\n margin-top: 40px;\n font: ${props => props.theme.fontWeightHeavy} 14px/120% ${props => props.theme.fontFamilyBody};\n`;\n\nconst WIRES_PAGE_SIZE = 5;\n\nconst counter = (result, item) => result + _.get(item, 'c', 0);\nconst mapper = wire => ({\n ...wire,\n views: _.get(wire, 'views', []).reduce(counter, 0),\n engagements: _.get(wire, 'engagements', []).reduce(counter, 0),\n likes: _.get(wire, 'likes', []).reduce(counter, 0),\n ctaClicks: _.get(wire, 'ctaClicks', []).reduce(counter, 0),\n enquiries: _.get(wire, 'enquiries', []).reduce(counter, 0),\n});\n\nexport default function PublishedWires() {\n const { state: { wires } } = React.useContext(DashboardContext);\n const [visibleWires, setVisibleWires] = React.useState([]);\n const [auto, setAuto] = React.useState(false);\n const headerRef = React.useRef();\n\n React.useEffect(() => {\n // lodash's _.take can look after the case when there are not enough wires.\n setVisibleWires(_.take(wires, WIRES_PAGE_SIZE).map(mapper));\n }, [wires]);\n\n React.useEffect(() => {\n if (auto && headerRef.current) {\n headerRef.current.sort();\n setAuto(false);\n }\n }, [auto, wires]);\n\n const onLoadMore = () => {\n const n = Math.min(wires.length - visibleWires.length, WIRES_PAGE_SIZE);\n const moreWires = wires.slice(visibleWires.length, visibleWires.length + n).map(mapper);\n setVisibleWires(_.concat(visibleWires, moreWires));\n setAuto(true);\n };\n\n const columns = [\n { key: 'publishedDate', name: 'date' },\n { key: 'views' },\n { key: 'engagements' },\n { key: 'likes' },\n { key: 'ctaClicks', name: 'cta clicks' },\n { key: 'enquiries' },\n ];\n\n const headerProps = {\n array: visibleWires,\n setArray: setVisibleWires,\n columns,\n initialColumn: 'publishedDate',\n };\n\n return (\n \n published wires \n \n \n {visibleWires.map(wire => (\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport useSortArray from './sort-array-hook';\nimport HeaderCell from './header-cell';\n\nconst SortableTableHeader = React.forwardRef(({\n array, setArray, columns, initialColumn,\n}, ref) => {\n const [sortColumn, setSortColumn] = React.useState(initialColumn);\n const [order, setOrder] = React.useState('desc');\n const { sortBy } = useSortArray({\n setter: setArray,\n keys: columns.map(d => d.key),\n });\n\n const sort = () => sortBy[sortColumn](order)(array);\n\n React.useImperativeHandle(ref, () => ({ sort }));\n\n return (\n \n {columns.map(({ name, key }) => {\n name = name || key;\n const props = { name };\n props.onSort = direction => {\n sortBy[key](direction)(array);\n setSortColumn(key);\n setOrder(direction);\n };\n props.order = sortColumn === key ? order : false;\n return \n );\n});\n\nSortableTableHeader.displayName = 'SortableTableHeader';\n\nSortableTableHeader.propTypes = {\n array: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n setArray: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n name: PropTypes.string,\n })).isRequired,\n initialColumn: PropTypes.string.isRequired,\n};\n\nexport default SortableTableHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n color: ${props => (props.highlight ? props.theme.bodyColor : props.theme.secondaryColor)};\n text-transform: uppercase;\n font: ${props => props.theme.fontWeightHeavy} 14px/16px ${props => props.theme.fontFamilyBody};\n\n & > span {\n cursor: pointer;\n }\n\n & > span.icon-lw {\n font-size: 11px;\n padding-left: 2px;\n }\n`;\n\nexport default function HeaderCell({\n name, onSort, order,\n}) {\n const onClick = e => {\n e && e.preventDefault();\n const direction = order === 'desc' ? 'asc' : 'desc';\n onSort(direction);\n };\n\n const iconClass = {\n 'icon-lw-arrow-down': order === 'desc',\n 'icon-lw-arrow-up': order === 'asc',\n };\n\n return (\n \n {name}\n {!!order && }\n \n );\n}\n\nHeaderCell.propTypes = {\n name: PropTypes.string.isRequired,\n onSort: PropTypes.func.isRequired,\n order: PropTypes.oneOf([false, 'asc', 'desc']).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport WireCard from './wire-performance-components/wire-card';\nimport MetricNumber from '../../common/metric-number';\n\nconst HFlex = styled.div`\n display: flex;\n`;\n\nconst Container = styled(HFlex)`\n width: 100%;\n border-bottom: 1px solid ${props => props.theme.secondaryColor};\n\n & > span {\n align-self: center;\n text-align: right;\n font-size: 29px;\n ${props => props.theme.isLarge && `\n width: 80px;\n `};\n ${props => props.theme.isXLarge && `\n width: 100px;\n `};\n }\n\n & > span:nth-child(3) {\n ${props => props.theme.isLarge && `\n width: 110px;\n `};\n ${props => props.theme.isXLarge && `\n width: 130px;\n `};\n }\n`;\n\n/* eslint-disable no-unused-vars */\nexport default function WirePerformance({\n id, slug, contributorName, contributorAvatarUrl, contributorSlug,\n title, publishedDate, views, engagements, likes, ctaClicks, enquiries, campaign,\n}) {\n const cardProps = {\n id,\n slug,\n contributorName,\n contributorSlug,\n contributorAvatarUrl,\n title,\n publishedDate,\n campaign,\n };\n\n return (\n \n \n );\n}\n/* eslint-enable no-unused-vars */\n\nWirePerformance.propTypes = {\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n contributorName: PropTypes.string.isRequired,\n contributorAvatarUrl: PropTypes.string,\n contributorSlug: PropTypes.string.isRequired,\n publishedDate: PropTypes.string.isRequired,\n views: PropTypes.number.isRequired,\n engagements: PropTypes.number.isRequired,\n likes: PropTypes.number.isRequired,\n ctaClicks: PropTypes.number.isRequired,\n enquiries: PropTypes.number.isRequired,\n campaign: PropTypes.shape({\n name: PropTypes.string.isRequired,\n sentDate: PropTypes.string.isRequired,\n }),\n};\n\nWirePerformance.defaultProps = {\n contributorAvatarUrl: null,\n campaign: null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport Avatar from '../../../../shared/avatar';\nimport MentionTag from '../../../../shared/mention-tag';\nimport TolTag from '../../../../shared/tol-tag';\nimport DashboardContext from '../../context';\n\nconst Container = styled.div`\n padding: 16px 0;\n flex-grow: 5;\n width: 200px;\n display: flex;\n flex-direction: column;\n`;\n\nconst MainArea = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 68px;\n flex-wrap: wrap;\n\n & > a > img {\n width: 40px;\n height: 40px;\n margin: 0 16px 24px 0;\n box-shadow: 0px 4px 8px rgba(50, 50, 71, .06), 0px 4px 4px rgba(50, 50, 71, .08);\n }\n`;\n\nconst NameContainer = styled.div`\n display: flex;\n align-items: center;\n\n > span:first-of-type {\n margin-left: 24px;\n }\n`;\n\nconst Name = styled.a`\n text-transform: uppercase;\n font: ${props => props.theme.fontWeightHeavy} 16px/1 ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n`;\n\nconst Title = styled.a`\n width: 100%;\n padding-right: 56px;\n margin-top: 4px;\n font: ${props => props.theme.fontWeightBold} 20px/120% ${props => props.theme.fontFamilyHeader};\n color: ${props => props.theme.bodyColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &&:hover {\n text-decoration: none;\n color: ${props => props.theme.bodyColor};\n }\n`;\n\nconst PubDate = styled.span`\n margin-right: 20px;\n font: ${props => props.theme.fontWeightBold} 16px/1 ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n`;\n\nconst MinorRow = styled.div`\n width: 100%;\n margin-top: 4px;\n display: flex;\n`;\n\nexport default function WireCard({\n// eslint-disable-next-line no-unused-vars\n id, slug, contributorName, contributorSlug, contributorAvatarUrl, title, publishedDate, campaign,\n}) {\n const { state: { contributors } } = React.useContext(DashboardContext);\n const selectedSlugs = contributors.filter(c => c.selected).map(c => c.slug);\n const shouldShowMentionIndicator = selectedSlugs.length > 0\n && _.indexOf(selectedSlugs, contributorSlug) < 0;\n\n const avatarProps = {\n slug: contributorSlug,\n profilePictureUrl: contributorAvatarUrl,\n name: contributorName,\n };\n\n return (\n \n \n \n {contributorName} \n {shouldShowMentionIndicator && \n {title} \n \n {moment(publishedDate).format('Do MMM, YY')} \n \n \n \n );\n}\n\nWireCard.propTypes = {\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n contributorName: PropTypes.string.isRequired,\n contributorAvatarUrl: PropTypes.string,\n contributorSlug: PropTypes.string.isRequired,\n publishedDate: PropTypes.string.isRequired,\n campaign: PropTypes.shape({\n name: PropTypes.string.isRequired,\n sentDate: PropTypes.string.isRequired,\n }),\n};\n\nWireCard.defaultProps = {\n contributorAvatarUrl: null,\n campaign: null,\n};\n","import _ from 'lodash';\nimport moment from 'moment';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport DashboardContext from './context';\nimport Hero from '../common/hero';\nimport Loader from '../common/loader';\nimport Actions from '../common/actions';\nimport Filters from '../common/filters';\nimport NewAccountInsights from './new-account-insights';\nimport NewPublishedWires from './new-published-wires';\nimport getWiresStats from '../../../services/analytics/published-wires-service';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n `};\n ${props => props.theme.isLarge && `\n width: 85%;\n `};\n ${props => props.theme.isMobile && `\n width: 100%;\n `};\n`;\n\nconst contributorsToMaxDaysAgo = contributors => {\n const endOfDay = moment().endOf('day');\n const createdDays = contributors.map(c => endOfDay.diff(c.createdAt, 'days'));\n return Math.max.apply(null, createdDays);\n};\n\nexport default function NewDesktopView({ partnership }) {\n const { id, cachedAnalyticsDataUrls, contributors } = partnership;\n const cachedPerformanceDataUrl = cachedAnalyticsDataUrls.performanceDataFromDatabaseUrl;\n const { state, dispatch } = React.useContext(DashboardContext);\n const [loading, setLoading] = React.useState(false);\n const [inited, setInited] = React.useState(false);\n const [token, setToken] = React.useState(null);\n\n const fetchWires = React.useCallback(fromCache => {\n if (!_.get(contributors, 'length')) {\n return;\n }\n const actualDaysAgo = contributorsToMaxDaysAgo(contributors);\n\n setLoading(true);\n const [task, source] = getWiresStats(\n id,\n contributors.map(c => c.id),\n actualDaysAgo,\n cachedPerformanceDataUrl,\n fromCache,\n );\n setToken(source);\n task\n .then(response => {\n const payload = _.get(response, 'data', []);\n if (payload.length) {\n setInited(true);\n dispatch({ type: 'setRawWires', payload });\n dispatch({ type: 'setGeneratedAt', payload: moment() });\n }\n })\n .finally(() => {\n dispatch({ type: 'setRequestData', payload: false });\n setLoading(false);\n setToken(null);\n });\n }, [contributors, id, dispatch, cachedPerformanceDataUrl]);\n\n React.useEffect(() => {\n inited || fetchWires(true);\n }, [inited, fetchWires]);\n\n React.useEffect(() => {\n state.requestData && fetchWires(false);\n }, [state.requestData, fetchWires]);\n\n React.useEffect(() => {\n let tid;\n if (loading) {\n tid = setTimeout(() => dispatch({ type: 'setLoading', payload: true }), 200);\n } else {\n dispatch({ type: 'setLoading', payload: false });\n }\n return () => clearTimeout(tid);\n }, [loading, dispatch]);\n\n const onCancel = () => token && token.cancel();\n\n const filtersProps = {\n contributors: state.contributors,\n daysAgo: state.daysAgo,\n onContributorsChange: payload => dispatch({ type: 'setContributors', payload }),\n onDateChange: payload => dispatch({ type: 'setDaysAgo', payload }),\n };\n\n const actionsProps = {\n generatedAt: state.generatedAt,\n onRefreshClick: () => dispatch({ type: 'setRequestData', payload: true }),\n };\n\n return (\n <>\n \n {!!state.loading && \n \n );\n}\n\nNewDesktopView.propTypes = {\n partnership: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n cachedAnalyticsDataUrls: PropTypes.shape({\n performanceDataFromDatabaseUrl: PropTypes.string,\n }),\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport DashboardContext from './context';\nimport { SectionContainer, SectionTitle } from '../common/styles';\nimport NewTotal from './account-insights-components/new-total';\nimport GranularityToggle from '../common/charts/granularity-toggle';\nimport TypedUnitTooltip from './account-insights-components/typed-unit-tooltip';\nimport ColumnChart from '../common/charts/column-chart';\nimport ColumnChartNav from '../common/charts/column-chart-nav';\nimport {\n earliestStatsUnit, wiresToTotal, wiresToBucket,\n} from './account-insights-components/transform';\n\nconst Header = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport default function NewAccountInsights() {\n const {\n state: {\n wires, previousPeriodWires, daysAgo, granularity,\n },\n dispatch,\n } = React.useContext(DashboardContext);\n const [activeTile, setActiveTile] = React.useState('impressions');\n const [bucket, setBucket] = React.useState([]);\n const initialRange = { start: Math.min(daysAgo, 30), end: 0 };\n const [dateRange, setDateRange] = React.useState({ ...initialRange });\n const [visibleRange, setVisibleRange] = React.useState({ ...initialRange });\n\n React.useEffect(() => {\n let days = daysAgo;\n if (!Number.isFinite(daysAgo)) {\n days = earliestStatsUnit({ wires, granularity });\n }\n setDateRange({ start: days, end: 0 });\n const vRange = {\n start: Number.isFinite(daysAgo) ? Math.min(30, days) : 30,\n end: 0,\n };\n setVisibleRange(vRange);\n }, [wires, granularity, daysAgo]);\n\n React.useEffect(() => {\n setBucket(wiresToBucket({\n ...visibleRange,\n wires,\n granularity,\n key: activeTile,\n }));\n }, [wires, visibleRange, activeTile, granularity]);\n\n const buildClickHandler = key => () => {\n setActiveTile(key);\n };\n\n const items = [\n { key: 'impressions' },\n { key: 'fullViews', name: 'views' },\n { key: 'engagements' },\n { key: 'likesAndSaves', name: 'likes & saves' },\n { key: 'comments' },\n { key: 'ctaClicks', name: 'cta clicks' },\n { key: 'enquiries' },\n ].map(({ key, name }) => ({\n type: name || key,\n number: wiresToTotal(wires, key),\n previousPeriodNumber: Number.isFinite(daysAgo)\n ? wiresToTotal(previousPeriodWires, key)\n : Number.NaN,\n active: activeTile === key,\n onClick: buildClickHandler(key),\n clickable: true,\n }));\n\n const navProps = {\n granularity,\n visibleRange,\n range: dateRange,\n onPrev: () => {\n setVisibleRange({ start: visibleRange.start + 30, end: visibleRange.end + 30 });\n },\n onNext: () => {\n setVisibleRange({ start: visibleRange.start - 30, end: visibleRange.end - 30 });\n },\n };\n\n const chartProps = {\n bucket,\n granularity,\n type: _.lowerCase(activeTile),\n tooltipValueContent: TypedUnitTooltip,\n };\n\n const gProps = {\n daysAgo,\n granularity,\n onChange: g => dispatch({ type: 'setGranularity', payload: g }),\n };\n\n return (\n \n \n account insights\n \n \n {items.map(i => \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport NewMetricNumber from '../../common/new-metric-number';\nimport Diff from '../../common/diff';\n\nconst Type = styled.span`\n text-transform: uppercase;\n font: ${props => props.theme.fontWeightHeavy} 14px/16px ${props => props.theme.fontFamilyBody};\n`;\n\nconst Tile = styled.div`\n padding: 40px 0;\n width: 130px;\n height: 160px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n color: ${props => props.theme.darkestGrey};\n border: none;\n border-bottom: 4px solid transparent;\n\n margin: 0 2px;\n &:first-child {\n margin-left: 0;\n }\n &:last-child {\n margin-right: 0;\n }\n\n ${props => props.clickable && (props.active ? `\n border-bottom-color: ${props.theme.bodyColor};\n & > span[class^=\"new-metric-number__\"] {\n color: ${props.theme.bodyColor};\n }\n ` : `\n cursor: pointer;\n &:hover {\n border-bottom-color: ${props.theme.secondaryColor};\n }\n `)};\n`;\n\nconst Stat = styled.div`\n display: flex;\n flex-direction: column;\n & > span[class^=\"new-metric-number__\"] {\n color: ${props => props.theme.secondaryColor};\n font-size: 21px;\n line-height: 130%;\n }\n ${props => props.clickable && props.active && `\n & > span[class^=\"new-metric-number__\"] {\n color: ${props.theme.bodyColor};\n }\n `};\n > .direction {\n flex-grow: 2;\n flex-basis: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n > .row {\n padding-right: 4px;\n width: 100%;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n > .row:not(.dir) {\n color: ${props => props.theme.secondaryColor};\n }\n }\n`;\n\nconst Num = ({ n }) => {\n if (Number.isNaN(n) || !n) {\n return ;\n }\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nNewTotal.propTypes = {\n type: PropTypes.string.isRequired,\n number: PropTypes.number.isRequired,\n previousPeriodNumber: PropTypes.number.isRequired,\n active: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n clickable: PropTypes.bool.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport DashboardContext from './context';\nimport NewSortableTableHeader from './common/new-sortable-table-header';\nimport NewWirePerformance from './published-wires-components/new-wire-performance';\nimport { SectionContainer, SectionTitle } from '../common/styles';\n\nconst SSectionContainer = styled(SectionContainer)`\n margin-top: 80px;\n`;\n\nconst Header = styled.div`\n display: flex;\n width: 100%;\n height: 16px;\n margin: 25px 0;\n\n & > * {\n text-align: right;\n width: 100px;\n }\n\n & > *:first-child {\n flex-grow: 2;\n text-align: left;\n }\n`;\n\nconst Button = styled.button`\n width: 210px;\n height: 36px;\n text-transform: uppercase;\n color: ${props => props.theme.primaryColor};\n background-color: ${props => props.theme.primaryColorTransparent};\n border: none;\n margin-top: 40px;\n font: ${props => props.theme.fontWeightHeavy} 14px/120% ${props => props.theme.fontFamilyBody};\n`;\n\nconst WIRES_PAGE_SIZE = 5;\n\nconst counter = (result, item) => result + _.get(item, 'c', 0);\nconst mapper = wire => ({\n ...wire,\n impressions: _.get(wire, 'impressions', []).reduce(counter, 0),\n fullViews: _.get(wire, 'fullViews', []).reduce(counter, 0),\n engagements: _.get(wire, 'engagements', []).reduce(counter, 0),\n likesAndSaves: _.get(wire, 'likesAndSaves', []).reduce(counter, 0),\n comments: _.get(wire, 'comments', []).reduce(counter, 0),\n ctaClicks: _.get(wire, 'ctaClicks', []).reduce(counter, 0),\n enquiries: _.get(wire, 'enquiries', []).reduce(counter, 0),\n});\n\nexport default function NewPublishedWires() {\n const { state: { wires } } = React.useContext(DashboardContext);\n const [visibleWires, setVisibleWires] = React.useState([]);\n const [auto, setAuto] = React.useState(false);\n const headerRef = React.useRef();\n\n React.useEffect(() => {\n // lodash's _.take can look after the case when there are not enough wires.\n setVisibleWires(_.take(wires, WIRES_PAGE_SIZE).map(mapper));\n }, [wires]);\n\n React.useEffect(() => {\n if (auto && headerRef.current) {\n headerRef.current.sort();\n setAuto(false);\n }\n }, [auto, wires]);\n\n const onLoadMore = () => {\n const n = Math.min(wires.length - visibleWires.length, WIRES_PAGE_SIZE);\n const moreWires = wires.slice(visibleWires.length, visibleWires.length + n).map(mapper);\n setVisibleWires(_.concat(visibleWires, moreWires));\n setAuto(true);\n };\n\n const columns = [\n { key: 'publishedDate', name: 'date' },\n { key: 'impressions' },\n { key: 'fullViews', name: 'views' },\n { key: 'engagements' },\n { key: 'likesAndSaves', name: 'likes & saves' },\n { key: 'comments' },\n { key: 'ctaClicks', name: 'cta clicks' },\n { key: 'enquiries' },\n ];\n\n const headerProps = {\n array: visibleWires,\n setArray: setVisibleWires,\n columns,\n initialColumn: 'publishedDate',\n };\n\n return (\n \n published wires \n \n \n {visibleWires.map(wire => (\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport useSortArray from './sort-array-hook';\nimport NewHeaderCell from './new-header-cell';\n\nconst NewSortableTableHeader = React.forwardRef(({\n array, setArray, columns, initialColumn,\n}, ref) => {\n const [sortColumn, setSortColumn] = React.useState(initialColumn);\n const [order, setOrder] = React.useState('desc');\n const { sortBy } = useSortArray({\n setter: setArray,\n keys: columns.map(d => d.key),\n });\n\n const sort = () => sortBy[sortColumn](order)(array);\n\n React.useImperativeHandle(ref, () => ({ sort }));\n\n return (\n \n {columns.map(({ name, key }) => {\n name = name || key;\n const props = { name };\n props.onSort = direction => {\n sortBy[key](direction)(array);\n setSortColumn(key);\n setOrder(direction);\n };\n props.order = sortColumn === key ? order : false;\n return \n );\n});\n\nNewSortableTableHeader.displayName = 'NewSortableTableHeader';\n\nNewSortableTableHeader.propTypes = {\n array: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n setArray: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n name: PropTypes.string,\n })).isRequired,\n initialColumn: PropTypes.string.isRequired,\n};\n\nexport default NewSortableTableHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n color: ${props => (props.highlight ? props.theme.bodyColor : props.theme.darkestGrey)};\n text-transform: uppercase;\n font: ${props => props.theme.fontWeightHeavy} 12px/14.4px ${props => props.theme.fontFamilyBody};\n\n & > span {\n cursor: pointer;\n }\n\n & > span.icon-lw {\n font-size: 11px;\n padding-left: 2px;\n }\n`;\n\nexport default function NewHeaderCell({\n name, onSort, order,\n}) {\n const onClick = e => {\n e && e.preventDefault();\n const direction = order === 'desc' ? 'asc' : 'desc';\n onSort(direction);\n };\n\n const iconClass = {\n 'icon-lw-arrow-down': order === 'desc',\n 'icon-lw-arrow-up': order === 'asc',\n };\n\n return (\n \n {name}\n {!!order && }\n \n );\n}\n\nNewHeaderCell.propTypes = {\n name: PropTypes.string.isRequired,\n onSort: PropTypes.func.isRequired,\n order: PropTypes.oneOf([false, 'asc', 'desc']).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport NewWireCard from './wire-performance-components/new-wire-card';\nimport NewMetricNumber from '../../common/new-metric-number';\n\nconst HFlex = styled.div`\n display: flex;\n`;\n\nconst Container = styled(HFlex)`\n width: 100%;\n border-bottom: 1px solid ${props => props.theme.secondaryColor};\n\n & > span {\n align-self: center;\n text-align: right;\n font-size: 19px;\n width: 100px;\n }\n\n & > *:first-child {\n flex-grow: 2;\n text-align: left;\n }\n`;\n\n/* eslint-disable no-unused-vars */\nexport default function NewWirePerformance({\n id, slug, contributorName, contributorAvatarUrl, contributorSlug,\n title, publishedDate, impressions, fullViews, engagements, likesAndSaves,\n comments, ctaClicks, enquiries, campaign,\n}) {\n const cardProps = {\n id,\n slug,\n contributorName,\n contributorSlug,\n contributorAvatarUrl,\n title,\n publishedDate,\n campaign,\n };\n\n return (\n \n \n );\n}\n/* eslint-enable no-unused-vars */\n\nNewWirePerformance.propTypes = {\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n contributorName: PropTypes.string.isRequired,\n contributorAvatarUrl: PropTypes.string,\n contributorSlug: PropTypes.string.isRequired,\n publishedDate: PropTypes.string.isRequired,\n impressions: PropTypes.number.isRequired,\n fullViews: PropTypes.number.isRequired,\n engagements: PropTypes.number.isRequired,\n likesAndSaves: PropTypes.number.isRequired,\n comments: PropTypes.number.isRequired,\n ctaClicks: PropTypes.number.isRequired,\n enquiries: PropTypes.number.isRequired,\n campaign: PropTypes.shape({\n name: PropTypes.string.isRequired,\n sentDate: PropTypes.string.isRequired,\n }),\n};\n\nNewWirePerformance.defaultProps = {\n contributorAvatarUrl: null,\n campaign: null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport Avatar from '../../../../shared/avatar';\nimport MentionTag from '../../../../shared/mention-tag';\nimport TolTag from '../../../../shared/tol-tag';\nimport DashboardContext from '../../context';\n\nconst Container = styled.div`\n padding: 16px 0;\n flex-grow: 5;\n width: 200px;\n display: flex;\n flex-direction: column;\n`;\n\nconst MainArea = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 68px;\n flex-wrap: wrap;\n\n & > a > img {\n width: 40px;\n height: 40px;\n margin: 0 16px 24px 0;\n box-shadow: 0px 4px 8px rgba(50, 50, 71, .06), 0px 4px 4px rgba(50, 50, 71, .08);\n }\n`;\n\nconst NameContainer = styled.div`\n display: flex;\n align-items: center;\n\n > span:first-of-type {\n margin-left: 24px;\n }\n`;\n\nconst Name = styled.a`\n font: ${props => props.theme.fontWeightHeavy} 16px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.darkestGrey};\n`;\n\nconst Title = styled.a`\n width: 100%;\n padding-right: 56px;\n margin-top: 4px;\n font: ${props => props.theme.fontWeightBold} 17px/120% ${props => props.theme.fontFamilyHeader};\n color: ${props => props.theme.bodyColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &&:hover {\n text-decoration: none;\n color: ${props => props.theme.bodyColor};\n }\n`;\n\nconst PubDate = styled.span`\n margin-right: 20px;\n font: ${props => props.theme.fontWeightBold} 14px/130% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.darkestGrey};\n`;\n\nconst MinorRow = styled.div`\n width: 100%;\n margin-top: 4px;\n display: flex;\n`;\n\nexport default function NewWireCard({\n// eslint-disable-next-line no-unused-vars\n id, slug, contributorName, contributorSlug, contributorAvatarUrl, title, publishedDate, campaign,\n}) {\n const { state: { contributors } } = React.useContext(DashboardContext);\n const selectedSlugs = contributors.filter(c => c.selected).map(c => c.slug);\n const shouldShowMentionIndicator = selectedSlugs.length > 0\n && _.indexOf(selectedSlugs, contributorSlug) < 0;\n\n const avatarProps = {\n slug: contributorSlug,\n profilePictureUrl: contributorAvatarUrl,\n name: contributorName,\n };\n\n return (\n \n \n \n {contributorName} \n {shouldShowMentionIndicator && \n {title} \n \n {moment(publishedDate).format('Do MMM, YY')} \n \n \n \n );\n}\n\nNewWireCard.propTypes = {\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n contributorName: PropTypes.string.isRequired,\n contributorAvatarUrl: PropTypes.string,\n contributorSlug: PropTypes.string.isRequired,\n publishedDate: PropTypes.string.isRequired,\n campaign: PropTypes.shape({\n name: PropTypes.string.isRequired,\n sentDate: PropTypes.string.isRequired,\n }),\n};\n\nNewWireCard.defaultProps = {\n contributorAvatarUrl: null,\n campaign: null,\n};\n","import { useMediaQuery } from 'react-responsive';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\n\nexport default function CommonProps() {\n const mediaQueries = {\n isMobileOrTablet: useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` }),\n };\n\n return {\n ...theme,\n ...mediaQueries,\n };\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport {\n useTransition, animated, interpolate,\n} from 'react-spring';\n\nconst Div = styled.div`\n margin: ${props => (props.theme.isPortrait ? '20px 0 0 -20px' : '-20px -24px 0 0')};\n max-width: ${props => (props.theme.isPortrait ? 'none' : '576px')};\n width: ${props => (props.theme.isPortrait ? 100 : 40)}vw;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n`;\n\nconst jump = 20;\nconst jhalf = x => x * jump * 0.5;\n\nconst Images = styled.div`\n position: relative;\n width: ${props => (props.theme.isPortrait ? 100 : 40)}vw;\n height: ${props => (props.theme.isPortrait ? 85 : 32)}vw;\n margin-top: ${props => (props.theme.isPortrait ? 0 : -25)}px;\n\n > img {\n width: ${props => (props.theme.isPortrait ? 90 : 39)}vw;\n position: absolute;\n &:nth-last-child(3) {\n top: ${jump * 2}px;\n left: 0;\n }\n &:nth-last-child(2) {\n top: ${jump}px;\n left: ${jump}px;\n }\n &:nth-last-child(1) {\n top: 0;\n left: ${jump * 2}px;\n }\n }\n`;\n\nconst Ul = styled.ul`\n display: flex;\n flex-direction: row;\n width: ${props => (props.theme.isPortrait ? 80 : 40)}vw;\n justify-content: center;\n padding-left: 0;\n margin: ${props => (props.theme.isPortrait ? '-10px 0 0 0' : '20px 0')};\n z-index: 1000;\n`;\n\nconst dotSize = 8;\nconst Li = styled.li`\n margin: 0 7px;\n display: inline-block;\n width: ${dotSize}px;\n height: ${dotSize}px;\n border-radius: ${dotSize}px;\n border: 0;\n background-color: ${props => (props.isCurrent ? 'black' : '#999')};\n cursor: pointer;\n`;\n\nexport default function Preview() {\n const { ebook } = React.useContext(ThemeContext);\n const [pages, setPages] = React.useState([...ebook]);\n const [current, setCurrent] = React.useState(0);\n const transitions = useTransition(pages, item => item, {\n from: { x: 1, y: -1, o: 1 },\n enter: { x: 0, y: 0, o: 1 },\n update: { x: 0, y: 0, o: 1 },\n leave: { x: 1, y: -1, o: 0 },\n unique: true,\n reset: true,\n config: { duration: 300 },\n });\n\n function onClick(i) {\n return e => {\n e.preventDefault();\n if (current !== i) {\n const step = i - current;\n const arr = _.times(3, d => (step + d + 3) % 3).map(d => pages[d]);\n setPages(arr.slice(1));\n setCurrent(i);\n setTimeout(() => setPages(arr), 150);\n }\n };\n }\n\n return (\n \n \n {'Sign in for free to access your '}\n <em>{ebookName}</em>\n {' ebook'}\n \n \n {'Don’t have a Livewire account? '}\n Register for free\n {' to access your eBook'}\n \n \n \n \n {{\n isRequired: 'Email address is required',\n isEmail: 'Email address is invalid',\n }[errors.email]}\n \n )}\n \n \n Password is required }\n \n {signInError && {signInError} }\n \n \n \n \n \n );\n}\n\nSignInForm.propTypes = {\n ebookName: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport FirstName from '../../../shared/sign-up/first-name';\nimport LastName from '../../../shared/sign-up/last-name';\nimport Email from '../../../shared/sign-up/email';\nimport Password from '../../../shared/sign-up/password';\nimport ConfirmPassword from '../../../shared/sign-up/confirm-password';\nimport TCP from '../../../shared/sign-up/tcp';\nimport {\n FormContext, Article, Agreement, Checkbox, Desc, HelpBlock, InputContainer, Input,\n ReflowContainer, Title, Button,\n} from '../form-context';\nimport Loading from '../../../../shared/loading';\nimport { useForm } from '../../../../shared/form-validator-hook';\nimport useRegister from '../../../shared/sign-up/hooks';\n\nconst Label = styled.label`\n font-size: 13px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 13px;\n color: #fff;\n ${props => props.theme.isPortrait && 'margin-left: 18px;'}\n`;\n\nconst ErrorMessage = styled(HelpBlock)`\n &&&& {\n display: inline;\n }\n`;\n\nexport default function SignUpForm({ ebookName }) {\n const { dispatch } = React.useContext(FormContext);\n const loadingRef = React.useRef();\n const {\n values, useInput, isValid, errors,\n } = useForm({\n firstName: '',\n lastName: '',\n email: '',\n password: '',\n passwordVerification: '',\n tc: false,\n });\n const {\n isEmailUnique, isLoading, start,\n } = useRegister({\n doSubscription: true,\n data: values,\n onEmailNotUnique: () => loadingRef.current.stop(),\n onRegistrationReturned: () => dispatch({ type: 'setEmail', payload: values.email }),\n onComplete: () => {\n loadingRef.current.stop();\n dispatch({ type: 'stepToDownload' });\n },\n });\n\n React.useEffect(() => {\n if (isLoading && loadingRef.current) {\n loadingRef.current.start();\n }\n }, [isLoading]);\n\n function switchToSignIn(e) {\n e.preventDefault();\n dispatch({ type: 'stepToSignIn' });\n }\n\n function submit(e) {\n e.preventDefault();\n start();\n }\n\n const commonProps = {\n Field: Input,\n Err: HelpBlock,\n useInput,\n errors,\n };\n\n // Note: Do not put any locally styled components on the input elements'\n // parent tree. The style components's rerender will ruin the input focus.\n return (\n \n \n {'Register for free to access your '}\n <em>{ebookName}</em>\n {' ebook'}\n \n \n {'Already have a Livewire account? '}\n Sign In\n {' to acces your eBook'}\n \n \n \n \n \n \n \n \n \n Email address is already in use \n )}\n \n \n \n \n \n \n \n \n access my ebook\n \n \n \n );\n}\n\nSignUpForm.propTypes = {\n ebookName: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport {\n FormContext, Article, Title, HelpBlock, Input, Button, ReflowContainer, InputContainer,\n} from '../form-context';\nimport Loading from '../../../../shared/loading';\nimport { useForm } from '../../../../shared/form-validator-hook';\nimport { usePostCmSubscribe } from '../../../../services/campaign-mailist-service';\n\nconst Div = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport default function EmailForm({ ebookName }) {\n const { state, dispatch } = React.useContext(FormContext);\n const { isPortrait } = React.useContext(ThemeContext);\n const {\n values, useInput, isValid, errors,\n } = useForm({ email: '' });\n const [{ response, loading }, subscribe] = usePostCmSubscribe();\n const loadingRef = React.useRef();\n\n React.useEffect(() => loadingRef.current && loadingRef.current.toggle(loading), [loading]);\n\n React.useEffect(() => {\n if (_.get(response, 'status') === 204) {\n dispatch({ type: 'setEmail', payload: values.email });\n dispatch({ type: 'stepToDownload' });\n }\n }, [response, values.email, dispatch]);\n\n function submit(e) {\n e.preventDefault();\n if (isValid) {\n subscribe(values);\n }\n }\n\n return (\n \n {isPortrait\n ? (\n \n {`Hi ${state.firstName}, enter the email you’d like us to send your `}\n <em>{ebookName}</em>\n {' book'}\n \n )\n : (\n \n \n \n {{\n isRequired: 'Email address is required',\n isEmail: 'Email address is invalid',\n }[errors.email]}\n \n )}\n \n \n \n \n \n \n );\n}\n\nEmailForm.propTypes = {\n ebookName: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { FormContext, Article, Button } from '../form-context';\n\nconst Text = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n color: #fff;\n > em {\n font-style: normal;\n color: ${props => props.theme.primaryColor};\n }\n`;\n\nconst Title = styled(Text)`\n ${props => (props.theme.isPortrait ? `\n font-size: 23px;\n line-height: 25px;\n ` : `\n font-size: 40px;\n line-height: 40px;\n `)}\n text-transform: uppercase;\n margin: 0;\n margin-top: 50px;\n`;\n\nconst Div = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nconst SubTitle = styled(Text)`\n text-align: center;\n font-size: ${props => (props.theme.isPortrait ? 15 : 20)}px;\n line-height: ${props => (props.theme.isPortrait ? 20 : 30)}px;\n text-transform: uppercase;\n margin: 0;\n\n &:first-child {\n margin-top: 48px;\n }\n`;\n\nconst Desc = styled(Text)`\n font-size: ${props => (props.theme.isPortrait ? 13 : 15)}px;\n line-height: 15px;\n min-height: 110px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n`;\n\nexport default function DownloadForm({ ebookName }) {\n const { state } = React.useContext(FormContext);\n\n function redirect(e) {\n if (e) {\n e.preventDefault();\n }\n window.location = '/';\n }\n\n React.useEffect(() => {\n setTimeout(redirect, 5000);\n }, []);\n\n return (\n \n Thank you \n \n We’ll redirect you to Livewiremarkets.com to discover more income generating ideas.\n \n \n \n );\n}\n\nDownloadForm.propTypes = {\n ebookName: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport moment from 'moment';\n\nconst Container = styled.div`\n width: 100%;\n`;\n\nconst Paragraph = styled.p`\n margin: 0;\n float: left;\n width: 100%;\n`;\n\nconst RemoveLink = styled.a`\n float: right;\n`;\n\nexport default function ProfileComment({ comment }) {\n return (\n \n \n \n \n {'On '}\n \n {comment.wire.title}\n {` - ${moment(comment.publishedAt).fromNow()}`}\n {comment.userId === window.Livewire.currentUser.id && (\n \n Remove comment\n \n )}\n \n \n \n );\n}\n\nProfileComment.propTypes = {\n comment: PropTypes.shape({\n body: PropTypes.string.isRequired,\n publishedAt: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n wire: PropTypes.shape({\n title: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n }).isRequired,\n userId: PropTypes.number.isRequired,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport CommentForm from './comment-form';\nimport Comment from './comment';\nimport { Notice } from './styles';\nimport { propTypes } from './prop-types';\n\nconst Header = styled.h2`\n &&&& {\n font: ${props => dt(props).theme.fontWeightHeavy} 19px/22.8px ${props => dt(props).theme.fontFamilyBody};\n margin: 40px 0 20px 0;\n text-transform: uppercase;\n }\n`;\n\nexport default function DesktopVariant({\n isCurrentUserConfirmed, wireSlug, showCommentLikeHint, comments,\n}) {\n const isUserSignedIn = !!_.get(window, 'Livewire.currentUser.id');\n const notice = isUserSignedIn\n ? ('Your account currently has restricted access. '\n + 'Please check your email and click the email confirmation link to be '\n + 'able to post comments.')\n : 'Please sign in to comment on this wire.';\n\n return (\n <>\n Comments \n {\n (isUserSignedIn && isCurrentUserConfirmed)\n ? {notice} \n }\n {comments.map((c, i) => (\n 
\n \n )\n : ;\n }\n\n const letterProps = {\n bg: color(name),\n className: 'avatar',\n ...(profileUrl ? { href: profileUrl } : {}),\n };\n\n return (\n \n {name.charAt(0)}\n \n );\n}\n\nAvatar.propTypes = {\n profilePictureUrl: PropTypes.string,\n profileUrl: PropTypes.string,\n name: PropTypes.string.isRequired,\n};\nAvatar.defaultProps = {\n profilePictureUrl: null,\n profileUrl: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport useComponentSize from '@rehooks/component-size';\nimport dt from '../../../shared/theme';\n\nconst Container = styled.section`\n clear: both;\n font: ${props => dt(props).theme.fontWeightRegular} 19px/130% ${props => dt(props).theme.fontFamilyBody};\n\n > div {\n margin: 18px 0 0;\n white-space: pre-line;\n /* stylelint-disable-next-line value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-box-orient: vertical;\n }\n\n > div:not(.no-clamp) {\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: ${props => props.lines};\n }\n\n > .link {\n margin-top: 8px;\n font-weight: ${props => dt(props).theme.fontWeightDccc};\n :hover {\n text-decoration: none;\n }\n }\n`;\n\nexport default function CommentBody({ text }) {\n const measured = React.useRef(false);\n const clampedRef = React.useRef();\n const fullRef = React.useRef();\n const { height: clampedHeight } = useComponentSize(clampedRef);\n const { height: fullHeight } = useComponentSize(fullRef);\n const [expandable, setExpandable] = React.useState(false);\n const [lines, setLines] = React.useState(5);\n\n React.useLayoutEffect(() => {\n const measureable = fullRef.current;\n const long = measureable && !expandable && fullHeight > clampedHeight;\n\n if (long) {\n setExpandable(true);\n }\n if (measureable) {\n return () => {\n measured.current = true;\n };\n }\n return () => null;\n }, [clampedHeight, fullHeight, expandable]);\n\n const expand = evt => {\n evt.preventDefault();\n setExpandable(false);\n setLines('none');\n };\n\n return (\n \n \n );\n}\n\nCommentBody.propTypes = { text: PropTypes.string.isRequired };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport humanFormat from 'human-format';\nimport Lottie from 'react-lottie';\nimport defaultOnErrorHandler from '../../shared/default-on-error-handler';\nimport * as likeAnimation from './like-animation.json';\nimport { useIsLarge } from '../../shared/theme';\n\nexport default function Like({\n likeable, like, unlike, returnToSection,\n}) {\n React.useEffect(() => {\n const likeContainers = document.querySelectorAll('div.like-container');\n likeContainers.forEach(i => {\n i.addEventListener('keyup', e => {\n if (e.key === 'Tab') {\n i.classList.remove('no-focus-outline');\n }\n });\n });\n });\n\n const [initialCount, setInitialCount] = React.useState(likeable.likeCount);\n const [updatedCount, setUpdatedCount] = React.useState(likeable.likeCount);\n const [liked, setLiked] = React.useState(likeable.likedByUser);\n const [runIconAnimation, setRunIconAnimation] = React.useState(false);\n const [runCountAnimation, setRunCountAnimation] = React.useState(false);\n\n const lottieSize = useIsLarge() ? 32 : 40;\n const isOldSite = true;\n\n const toggle = e => {\n e && e.preventDefault();\n\n if (!window.Livewire.currentUser) {\n window.location = `/sign_up?return_to_section=${returnToSection}`;\n return;\n }\n\n if (!liked) {\n setRunIconAnimation(true);\n }\n\n (liked ? unlike : like)(likeable.id, isOldSite)\n .then(result => {\n setLiked(!liked);\n setUpdatedCount(result.data.like_count);\n if (liked) { setInitialCount(result.data.like_count); }\n })\n .catch(error => defaultOnErrorHandler(error, 'Cannot toggle like status'));\n };\n\n const keyPressed = e => {\n if (e.key === 'Enter') {\n toggle();\n }\n };\n\n const switchToCountAnimation = () => {\n setRunIconAnimation(false);\n if (initialCount > 0) {\n setRunCountAnimation(true);\n setTimeout(() => {\n setRunCountAnimation(false);\n setInitialCount(updatedCount);\n }, 200);\n } else {\n setInitialCount(updatedCount);\n }\n };\n\n const title = `${liked ? 'Unlike' : 'Like'} this ${likeable.type}`;\n const iconCls = {\n 'icon-lw-liked': liked,\n 'icon-lw-like': !liked,\n };\n\n const animationOptions = {\n loop: false,\n autoplay: false,\n animationData: likeAnimation.default,\n rendererSettings: {\n perserveAspectRatio: 'xMidYMid slice',\n progressiveLoad: true,\n },\n };\n\n return (\n \n {!!isPremiumHeadlineGrabEnabled && !!headlineGrab && (\n \n );\n}\n\nHero.propTypes = {\n headlineGrab: PropTypes.string,\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n};\nHero.defaultProps = {\n headlineGrab: null,\n activeFeatures: [],\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n margin-top: 64px;\n padding-bottom: 228px;\n width: 90%;\n max-width: 1124px;\n\n ${props => props.theme.isLarge && `\n margin-top: 48px;\n padding-bottom: 200px;\n `};\n\n ${props => props.theme.isXLarge && `\n margin-top: 64px;\n padding-bottom: 228px;\n `};\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n padding: 0 28px 160px 28px;\n `};\n\n ${props => props.theme.isMobile && `\n flex-direction: column;\n margin-top: 24px;\n padding: 0 20px 102px 20px;\n `};\n`;\n\nconst Quote = styled.label`\n color: ${props => props.theme.primaryColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 80px;\n line-height: 0;\n margin-top: 40px;\n\n ${props => props.theme.isMobile && `\n font-size: 50px;\n line-height: 120%;\n margin: 0;\n `};\n`;\n\nconst Text = styled.label`\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 24px;\n line-height: 130%;\n margin: 0 32px;\n\n ${props => props.theme.isXLarge && `\n font-size: 32px;\n `};\n\n ${props => props.theme.isMobileOrTablet && `\n margin: 0 16px;\n `};\n\n ${props => props.theme.isMobile && `\n font-size: 16px;\n margin: -24px 0 0 0;\n `};\n`;\n\nexport default function Headline({ headlineGrab }) {\n return (\n \n {headlineGrab} \n \n );\n}\n\nHeadline.propTypes = {\n headlineGrab: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { DesktopSeparator, ContentContainer } from '../../shared/sectionable/styles';\nimport ScrollTransition from '../../shared/scroll-transition';\nimport PrimaryContent from './primary-content';\nimport About from './about';\nimport Fund from './fund';\nimport LatestWires from './latest-wires';\nimport FeaturedWires from '../../shared/sectionable/featured-wires';\nimport Enquiry from './enquiry';\nimport EnquiryContext, { reducer, defaultState } from '../../shared/enquiry/context';\nimport StickyFooter from './sticky-footer';\nimport StickyHeader from './sticky-header';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n `};\n ${props => props.theme.isLarge && `\n width: 100%;\n padding: 0 32px;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n padding: 0;\n `};\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n padding: 0;\n `};\n`;\n\n// eslint-disable-next-line complexity\nexport default function Contributor(props) {\n const { isLarge } = React.useContext(ThemeContext);\n const [yOffset, setYOffset] = React.useState(0);\n const [state, dispatch] = React.useReducer(reducer, defaultState);\n const {\n profile, isOfCurrentUser, investorTypes, viewAllWiresLink,\n } = props;\n const { company, funds } = profile;\n const viewDataAttributes = {\n 'data-id': profile.id,\n 'data-event-type': 'view',\n 'data-event': 'full_profile_view',\n 'data-statisticable': 'profile',\n 'data-page': document.referrer,\n };\n const isPremiumFeaturedWiresEnabled = _.includes(profile.activeFeatures, 'premium_featured_wires');\n const isPremiumEnquiryFormEnabled = _.includes(profile.activeFeatures, 'premium_enquiry_form');\n const isPremiumWhiteLabelingEnabled = _.includes(profile.activeFeatures, 'premium_white_label');\n\n const stickyProps = {\n profile,\n followed: props.isProfileFollowedByCurrentUser,\n yOffset,\n isMyself: props.isOfCurrentUser,\n newNavEnabled: props.newNavEnabled,\n };\n\n const hideContributorInfo = profile.isCompanyProfile && profile.organization;\n\n return (\n \n \n {isLarge && \n {!!isPremiumFeaturedWiresEnabled && \n {!!(!isLarge && !props.isOfCurrentUser) && \n \n );\n}\n\nContributor.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n joinedCurrentRoleAt: PropTypes.string,\n recentCareer: PropTypes.shape({\n organisation: PropTypes.string,\n position: PropTypes.string,\n joinedAt: PropTypes.string,\n leftAt: PropTypes.string,\n }),\n joinedIndustryAt: PropTypes.string,\n accred: PropTypes.string,\n countryName: PropTypes.string,\n cityName: PropTypes.string,\n profilePictureUrl: PropTypes.string,\n headlineGrab: PropTypes.string,\n blurb: PropTypes.string,\n investmentPhilosophy: PropTypes.arrayOf(PropTypes.string),\n linkedinUrl: PropTypes.string,\n twitterUrl: PropTypes.string,\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n areasOfExpertise: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n slug: PropTypes.string,\n name: PropTypes.string,\n })),\n canPostWires: PropTypes.bool,\n company: PropTypes.shape({\n name: PropTypes.string,\n logo: PropTypes.string,\n color: PropTypes.string,\n }),\n funds: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n publicUrl: PropTypes.string.isRequired,\n }),\n ),\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n stats: PropTypes.shape({\n viewsCount: PropTypes.number,\n followersCount: PropTypes.number,\n wiresCount: PropTypes.number,\n since: PropTypes.string,\n }).isRequired,\n isProfileFollowedByCurrentUser: PropTypes.bool.isRequired,\n isOfCurrentUser: PropTypes.bool.isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n newNavEnabled: PropTypes.bool.isRequired,\n viewAllWiresLink: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Avatar from '../../shared/avatar';\nimport StickoutBanner from '../../shared/stickout-banner';\nimport Name from './primary-content-components/name';\nimport Career from './primary-content-components/career';\nimport Blurb from './primary-content-components/blurb';\nimport Stats from './primary-content-components/stats';\nimport Actions from './primary-content-components/actions';\nimport Branding from './primary-content-components/branding';\n\nconst Container = styled(StickoutBanner)`\n ${props => props.theme.isLarge && `\n margin-top: -120px;\n `};\n\n ${props => props.theme.isXLarge && props.expanded && `\n border-radius: 9px 9px 6px 6px;\n height: 287px;\n margin-top: -148px;\n `};\n\n ${props => props.theme.isMobileOrTablet && props.expanded && `\n margin-top: -46px;\n `};\n\n ${props => props.theme.isMobile && props.expanded && `\n margin-top: -40px;\n `};\n`;\n\nconst Profile = styled.div`\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(142, 163, 181, 0.3);\n border-top-style: hidden;\n\n ${props => (props.theme.isXLarge ? `\n border-radius: 0 0 6px 6px;\n height: 230px;\n padding-left: 20px;\n padding-right: 20px;\n ` : `\n padding-left: 32px;\n padding-right: 32px;\n width: auto;\n\n ${props.theme.isMobile && `\n margin-top: 16px;\n padding: 10px 20px 0 20px;\n `};\n `)};\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n\n ${props => !props.theme.isXLarge && `\n flex-wrap: wrap;\n `};\n\n`;\n\nconst AvatarContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n ${props => props.theme.isXLarge && `\n margin: 0;\n margin-right: 24px;\n `};\n\n\n & img[class^=\"avatar__Img\"] {\n background-color: white;\n border: 2px solid white;\n border-radius: 6px;\n box-shadow: 0px 4px 8px rgba(50, 50, 71, 0.2);\n margin: 0px;\n\n ${props => props.theme.isMobileOrTablet && `\n margin-top: -80px;\n min-width: 160px;\n width: 160px;\n height: 160px;\n `};\n ${props => props.theme.isMobile && `\n margin-top: -54px;\n min-width: 120px;\n width: 120px;\n height: 120px;\n `};\n ${props => props.theme.isLarge && `\n margin-top: -16px;\n min-width: 176px;\n width: 176px;\n height: 176px;\n `};\n ${props => props.theme.isXLarge && `\n margin-top: -24px;\n min-width: 180px;\n width: 180px;\n height: 180px;\n `};\n }\n`;\n\nconst DescriptionContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-grow: 2;\n\n ${props => !props.theme.isXLarge && `\n margin-top: 8px;\n width: 100%;\n order: 3;\n `};\n`;\n\nexport default function PrimaryContent(props) {\n const useCompanyName = props.profile.isCompanyProfile && props.profile.organization;\n\n return (\n \n {!!props.showBranding && \n \n \n \n \n \n \n \n \n );\n}\n\nPrimaryContent.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n profilePictureUrl: PropTypes.string,\n blurb: PropTypes.string,\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n areasOfExpertise: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n slug: PropTypes.string,\n name: PropTypes.string,\n })),\n canPostWires: PropTypes.bool,\n company: PropTypes.shape({\n name: PropTypes.string,\n logo: PropTypes.string,\n color: PropTypes.string,\n }),\n }).isRequired,\n stats: PropTypes.shape({\n viewsCount: PropTypes.number,\n followersCount: PropTypes.number,\n wiresCount: PropTypes.number,\n since: PropTypes.string,\n }).isRequired,\n followed: PropTypes.bool.isRequired,\n isMyself: PropTypes.bool.isRequired,\n showBranding: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Text = styled.h1`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: ${props => (props.theme.isMobile ? '26px' : '32px')};\n margin: 0;\n line-height: 100%;\n color: ${props => props.theme.bodyColor};\n margin-top: ${props => (props.theme.isMobile ? 24 : 16)}px;\n`;\n\nexport default function Name({ name }) {\n return {name} ;\n}\n\nName.propTypes = { name: PropTypes.string.isRequired };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\n\nconst Container = styled.p`\n color: ${props => props.theme.secondaryColor};\n margin: 8px 0;\n font: ${props => props.theme.fontWeightBold} 19px/100% ${props => props.theme.fontFamilyBody};\n\n ${props => props.theme.isMobile && `\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n & > span:nth-child(2) {\n margin-top: 6px;\n }\n `};\n`;\n\nexport default function Career({ position, organization }) {\n const { isMobile } = React.useContext(ThemeContext);\n\n if (!position && !organization) {\n return null;\n }\n\n return (\n \n {\n isMobile\n ? (\n <>\n {!!position && {position}}\n {!!organization && {organization}}\n \n )\n : <>{_.compact([position, organization]).join(' \\u2022 ')}\n }\n \n );\n}\n\nCareer.propTypes = {\n position: PropTypes.string,\n organization: PropTypes.string,\n};\n\nCareer.defaultProps = {\n position: null,\n organization: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport TextTruncate from 'react-text-truncate';\nimport { scroll } from '../../../shared/navigation/utils';\n\nconst Container = styled.div`\n display: flex;\n align-items: end;\n font: ${props => props.theme.fontWeightRegular} 18px/130% ${props => props.theme.fontFamilyBody};\n margin: 0;\n width: 100%;\n ${props => props.theme.isLarge && `\n max-width: 750px;\n `};\n ${props => props.theme.isXLarge && `\n max-width: 610px;\n `};\n color: ${props => props.theme.bodyColor};\n\n & .more-anchor {\n font-weight: ${props => props.theme.fontWeightBold};\n\n :hover {\n text-decoration: none;\n }\n }\n`;\n\nconst scrollToAbout = e => {\n e.preventDefault();\n scroll('about');\n};\n\nexport default function Blurb({ blurb }) {\n return (\n \n {!!blurb && (\n More}\n />\n )}\n \n );\n}\n\nBlurb.propTypes = { blurb: PropTypes.string };\n\nBlurb.defaultProps = { blurb: null };\n","import React from 'react';\nimport moment from 'moment-timezone';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport postal from 'postal';\nimport MetricNumber from './metric-number';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n align-items: baseline;\n flex-wrap: wrap;\n\n ${props => (props.theme.isXLarge ? `\n flex-grow: 2;\n align-items: center;\n &:before {\n order: -1;\n content: \"\";\n display: block;\n height: 0;\n width: 80px;\n margin: 0;\n margin-left: 50px;\n margin-right: calc(50px + 24px);\n border: 1px solid ${props.theme.secondaryColor};\n }\n ` : `\n margin: 24px 0;\n `)};\n`;\n\nconst Text = styled.span`\n font: ${props => props.theme.fontWeightMedium} 18px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n ${props => (props.theme.isMobileOrTablet ? `\n order: -1;\n width: 100%;\n margin-bottom: 24px;\n ` : `\n &:not(:first-child):before {\n content: \"\\u2022\";\n font-size: 15px;\n line-height: 100%;\n font-weight: ${props.theme.fontWeightBold};\n margin: 0 16px;\n }\n `)};\n`;\n\nconst formatDate = d => moment(d, 'YYYY-MM-DD', 'Australia/Sydney').format('MMMM YYYY');\n\nconst interests = {\n channel: 'micro-profile.commands',\n topic: 'follow-status',\n};\n\nconst unsub = () => postal.unsubscribe(interests);\n\nexport default function Stats({\n profileId, since, wiresCount, viewsCount, followersCount,\n}) {\n const [liveFollowersCount, setLiveFollowersCount] = React.useState(followersCount);\n const numerics = [\n { count: liveFollowersCount, name: 'follower' },\n { count: wiresCount, name: 'wire' },\n { count: viewsCount, name: 'view' },\n ];\n const sinceText = since ? `Contributor Since ${formatDate(since)}` : '';\n\n const sub = React.useCallback(n => postal.subscribe({\n ...interests,\n callback: d => (d.id === profileId && setLiveFollowersCount(n + (d.following ? 1 : -1))),\n }), [profileId]);\n\n React.useEffect(() => {\n sub(liveFollowersCount);\n return () => unsub();\n }, [liveFollowersCount, sub]);\n\n return (\n \n {numerics.map(d => {sinceText} \n \n );\n}\n\nStats.propTypes = {\n profileId: PropTypes.number.isRequired,\n since: PropTypes.string,\n followersCount: PropTypes.number,\n viewsCount: PropTypes.number,\n wiresCount: PropTypes.number,\n};\n\nStats.defaultProps = {\n since: null,\n followersCount: 0,\n viewsCount: 0,\n wiresCount: 0,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport humanFormat from 'human-format';\n\n// We use `pre` tag instead of `span` so that we can select the last\n// MetricNumber element using `:last-of-type` pseudo selector.\nconst Container = styled.pre`\n font: ${props => props.theme.fontWeightBold} 15px/100% ${props => props.theme.fontFamilyBody};\n text-transform: uppercase;\n color: ${props => props.theme.secondaryColor};\n margin: 0;\n\n & > em {\n font-size: 26px;\n color: ${props => props.theme.bodyColor};\n font-style: normal;\n margin-right: ${props => (props.theme.isMobile ? 2 : 4)}px;\n }\n\n &:not(:last-of-type):after {\n content: \"\\u2022\";\n margin: 0 ${props => (props.theme.isMobile ? 6 : 16)}px;\n }\n\n ${props => props.theme.isMobile && `\n font-size: 12px;\n line-height: 120%;\n\n & > em {\n font-size: 23px;\n line-height: 26px;\n letter-spacing: -0.025em;\n }\n `};\n`;\n\nexport default function MetricNumber({ count, name }) {\n if (!count) {\n return null;\n }\n\n return (\n \n {humanFormat(count, { decimals: 1, separator: '' })}\n {count === 1 ? name : `${name}s`}\n \n );\n}\n\nMetricNumber.propTypes = {\n count: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { lighten } from '../../../../shared/color';\nimport AnimatedProfileFollowButton from '../../../shared/animated-profile-follow-button';\nimport IconedButton from '../../../shared/iconed-button';\nimport EnquiryContext from '../../../shared/enquiry/context';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\n\nconst Container = styled.div`\n flex-shrink: 0;\n\n ${props => props.theme.isLarge && `\n min-width: 132px;\n `};\n\n &&&&&& button {\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n }\n\n & button > span:not(.icon-lw) {\n font-size: ${props => (props.theme.isLarge ? 14 : 12)}px;\n }\n\n & button > span.icon-lw-manage-wire + span,\n & button > span.icon-lw-edit + span {\n font-size: 12px;\n }\n\n & button[name=\"profile-follow-button\"] {\n margin-top: 0;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 107px;\n height: 33px;\n\n span.icon-lw-user-check {\n font-size: 19px;\n padding-right: 0;\n }\n `};\n\n ${props => props.theme.isLarge && `\n width: 132px;\n `};\n }\n\n ${props => (props.theme.isMobile ? `\n margin-top: -10px;\n ` : `\n & > button[name=\"profile-follow-button\"] {\n margin-top: 24px;\n }\n `)};\n`;\n\nconst Button = styled(IconedButton)`\n outline: none;\n margin-top: 24px;\n width: 148px;\n\n & > span.icon-lw {\n font-size: 16px;\n padding: 5px;\n }\n\n ${props => props.theme.isMobileOrTablet && `\n margin-top: 16px;\n width: 107px;\n height: 33px;\n `};\n\n ${props => props.theme.isMobile && `\n margin-top: 13px;\n `};\n`;\n\nconst ManageMyWiresButton = styled(Button)`\n background-color: ${props => lighten(props.theme.primaryColor, 0.4)};\n\n &:hover {\n background-color: ${props => lighten(props.theme.primaryColor, 0.13)};\n }\n\n & > span.icon-lw {\n background-color: ${props => props.theme.primaryColor};\n }\n\n ${props => props.theme.isMobileOrTablet && `\n align-items: center;\n justify-content: center;\n `};\n\n ${props => props.theme.isMobile && `\n margin-top: 0px;\n `};\n`;\n\nconst DarkButton = styled(Button)`\n background-color: #3C4966;\n margin-top: 12px;\n\n &:hover {\n background-color: #414651;\n color: ${props => props.theme.bodyBackgroundColor};\n }\n\n & > span.icon-lw {\n background-color: ${props => props.theme.bodyColor};\n }\n\n ${props => props.theme.isMobileOrTablet && `\n margin-top: 8px;\n align-items: center;\n justify-content: center;\n `};\n`;\n\nconst ShortDarkButton = styled(DarkButton)`\n &&& {\n ${props => props.theme.isLarge && `\n width: 132px;\n `};\n }\n`;\n\nexport default function Actions(props) {\n const { dispatch } = React.useContext(EnquiryContext);\n const { isMobileOrTablet } = React.useContext(ThemeContext);\n const {\n followed,\n profile: {\n id,\n activePartnership,\n activeFeatures,\n },\n } = props;\n\n const followButtonProps = {\n isProfileFollowedByCurrentUser: followed,\n profileId: id,\n followEventName: 'top_section_follow_profile',\n unfollowEventName: 'top_section_unfollow_profile',\n };\n\n const goto = url => e => {\n e && e.preventDefault();\n window.location = url;\n };\n\n const myProfile = goto('/profiles/me/personal_details');\n\n const myWires = goto('/profiles/me/my_wires/published');\n\n const showEnquiryForm = React.useCallback(() => {\n // without this offset, the comment body textarea element is at the top\n // edge of the screen, which is underneath the application navbar\n dispatch({ type: 'showEnquiryForm', payload: { scroll: true, offset: -200 } });\n }, [dispatch]);\n\n const handleContactClick = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'contributor_profile_top_section_contact_clicked',\n statisticable: 'profile',\n id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n showEnquiryForm();\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n React.useEffect(() => {\n if (window.location.hash === '#enquiry') {\n showEnquiryForm();\n }\n }, [showEnquiryForm]);\n\n const isPremiumEnquiryFormEnabled = _.includes(activeFeatures, 'premium_enquiry_form');\n const editText = isMobileOrTablet ? 'Edit' : 'Edit My Profile';\n const manageText = isMobileOrTablet ? 'Manage' : 'Manage My Wires';\n\n return (\n \n {props.isMyself\n ? (\n <>\n \n \n {manageText}\n \n \n \n {editText}\n \n \n )\n : (\n <>\n \n \n Contact\n \n )}\n \n )}\n \n );\n}\n\nActions.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n }).isRequired,\n followed: PropTypes.bool.isRequired,\n isMyself: PropTypes.bool.isRequired,\n};\n","import _ from 'lodash';\n\nexport default function useProtectedClickHandler(onClick, name) {\n return e => {\n if (e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n onClick();\n } else if (name) {\n window.location = `/sign_up?return_to_section=${name}`;\n } else {\n window.location = '/sign_up';\n }\n };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Colour from 'color';\n\nconst Container = styled.div`\n width: 100%;\n background-color: ${props => props.bgColor};\n height: 57px;\n border: 1px solid rgba(142, 163, 181, 0.3);\n border-bottom-style: hidden;\n\n ${props => (props.bgColor !== Colour('white').hex()) && `\n border: 1px solid ${props.bgColor};\n `};\n\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n ${props => props.theme.isMobileOrTablet && `\n height: 51px;\n `};\n\n ${props => props.theme.isXLarge && `\n border-radius: 6px 6px 0 0;\n `};\n`;\n\nconst LogoContainer = styled.div`\n background-color: ${props => props.bgColor};\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n height: 22px;\n width: 125px;\n margin-right: 28px;\n\n ${props => props.theme.isMobile && `\n margin-right: 20px;\n `};\n\n ${props => props.theme.isLarge && `\n height: 23px;\n width: 128px;\n margin-right: 24px;\n `};\n\n ${props => props.theme.isXLarge && `\n height: 24px;\n width: 135px;\n `};\n`;\n\nconst Logo = styled.img`\n height: 100%;\n`;\n\nconst Divider = styled.div`\n width: 100%;\n height: 1px;\n background-image: linear-gradient(96deg, #fff 31%, #d4dfeb 99%);\n`;\n\nconst white = Colour('white').hex();\nexport default function Branding(props) {\n if (!props.logo) {\n return null;\n }\n let c;\n try {\n c = Colour(props.color || white);\n } catch (err) {\n c = Colour(white);\n }\n const bgColor = c.hex();\n return (\n <>\n \n \n \n \n {bgColor === white && \n {title} \n \n \n \n );\n}\n\nAbout.propTypes = {\n profile: PropTypes.shape({\n name: PropTypes.string,\n firstName: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n joinedCurrentRoleAt: PropTypes.string,\n recentCareer: PropTypes.shape({\n organisation: PropTypes.string,\n position: PropTypes.string,\n joinedAt: PropTypes.string,\n leftAt: PropTypes.string,\n }),\n joinedIndustryAt: PropTypes.string,\n accred: PropTypes.string,\n countryName: PropTypes.string,\n cityName: PropTypes.string,\n blurb: PropTypes.string,\n areasOfExpertise: PropTypes.arrayOf(PropTypes.shape({\n slug: PropTypes.string,\n name: PropTypes.string,\n })),\n investmentPhilosophy: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { SubSection, SubSectionTitle, Text } from './styles';\n\nexport default function Bio({ blurb }) {\n if (!blurb || blurb.trim().length === 0) {\n return null;\n }\n\n return (\n \n Bio \n {blurb} \n \n );\n}\n\nBio.propTypes = {\n blurb: PropTypes.string,\n};\n\nBio.defaultProps = {\n blurb: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { SubSection, SubSectionTitle } from './styles';\n\nconst ExpertiseSubSection = styled(SubSection)`\n margin-bottom: 48px;\n`;\n\nconst Container = styled.ul`\n display: flex;\n flex-flow: row wrap;\n list-style: none;\n margin-top: 15px;\n padding: 0;\n margin-bottom: -16px;\n`;\n\nconst Item = styled.li`\n margin-right: 16px;\n margin-bottom: 16px;\n`;\n\nconst Link = styled.a`\n border-radius: 6px;\n background-color: #F0F3F6;\n color: #899EB1;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 14px;\n line-height: 120%;\n height: 32px;\n padding: 8px 15px;\n\n &:hover {\n text-decoration: none !important;\n color: #899EB1;\n background-color: ${props => props.theme.secondaryColorLight};\n }\n`;\n\nexport default function Expertise({ areasOfExpertise }) {\n if (areasOfExpertise.length === 0) {\n return null;\n }\n\n return (\n \n Expertise \n \n {areasOfExpertise.map(expertise => (\n - \n \n {expertise.name}\n \n
\n ))}\n \n \n );\n}\n\nExpertise.propTypes = {\n areasOfExpertise: PropTypes.arrayOf(PropTypes.shape({\n slug: PropTypes.string,\n name: PropTypes.string,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport moment from 'moment-timezone';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { SubSection, SubSectionTitle, Text } from './styles';\nimport { TZ } from '../../../../shared/consts';\nimport Social from './social';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n\n ${props => props.theme.isMobileOrTablet && `\n flex-direction: column;\n `};\n`;\n\nconst CareerSection = styled.div`\n display: flex;\n flex-direction: column;\n width: 50%;\n padding-right: 32px;\n\n ${props => props.theme.isMobileOrTablet && `\n padding-right: 0;\n width: 100%;\n `};\n`;\n\nconst ExperienceSection = styled.div`\n display: flex;\n flex-direction: column;\n width: 50%;\n padding-left: 32px;\n\n ${props => props.theme.isMobileOrTablet && `\n padding-left: 0;\n width: 100%;\n `};\n`;\n\nconst RecentCareerPosition = styled.div`\n color: ${props => props.theme.secondaryColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: 500;\n font-size: 16px;\n line-height: 120%;\n`;\n\nconst RecentCareerPeriod = styled.div`\n color: #627484;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: 500;\n font-size: 14px;\n line-height: 120%;\n\n ${props => props.theme.isMobileOrTablet && `\n border-bottom: 1px solid;\n border-color: #DBE1E8;\n padding-bottom: 16px;\n `};\n`;\n\nconst today = moment.tz(TZ);\n\nconst buildJoinedAtLabel = input => {\n // input is already in ISO8601 format.\n // Do NOT use a parse string.\n const joined = moment.tz(input, TZ);\n const years = today.diff(joined, 'years');\n const months = today.diff(joined, 'months');\n const prefix = joined.format('MMMM YYYY');\n\n if (years > 0) {\n return `${prefix} (${years}+ years)`;\n }\n\n if (months > 0) {\n return `${prefix} (${months}+ months)`;\n }\n\n return `${prefix} (just joined)`;\n};\n\nconst buildJoinedIndustryAtLabel = input => {\n // input is already in ISO8601 format.\n // Do NOT use a parse string.\n const joined = moment.tz(input, TZ);\n const years = today.diff(joined, 'years');\n const months = today.diff(joined, 'months');\n\n if (years > 0) {\n return `${years} years+ experience`;\n }\n\n if (months > 0) {\n return `${months} months+ experience`;\n }\n\n return 'Just started';\n};\n\nconst buildRecentCareerPeriod = (joined, left) => {\n if (!joined) {\n return '';\n }\n\n // Inputs are already in ISO8601 format.\n // Do NOT use a parse string.\n const joinedAtStr = moment.tz(joined, TZ).format('MMMM YYYY');\n const leftAtStr = left ? moment.tz(left, TZ).format('MMMM YYYY') : 'Present';\n\n return `${joinedAtStr} to ${leftAtStr}`;\n};\n\nconst buildSubSection = ({\n value, title, text, className,\n}) => (!value ? null : (\n \n {title} \n {text || value} \n \n));\nbuildSubSection.propTypes = {\n value: PropTypes.string,\n title: PropTypes.string.isRequired,\n text: PropTypes.string,\n className: PropTypes.string,\n};\nbuildSubSection.defaultProps = {\n value: null,\n text: null,\n className: '',\n};\n\nexport default function Career(props) {\n const {\n organization,\n position,\n accred,\n joinedCurrentRoleAt,\n joinedIndustryAt,\n countryName,\n cityName,\n recentCareer,\n } = props;\n\n const location = _.compact([cityName, countryName]).join(', ');\n\n const careers = [{\n value: organization, title: 'Company',\n }, {\n value: position, title: 'Position',\n }, {\n value: joinedCurrentRoleAt, title: 'Joined', text: buildJoinedAtLabel(joinedCurrentRoleAt),\n }];\n\n const experiences = [{\n value: joinedIndustryAt, title: 'Experience', text: buildJoinedIndustryAtLabel(joinedIndustryAt),\n }, {\n value: accred, title: 'Accreditation/Awards', className: 'multiline',\n }, {\n value: location, title: 'Location',\n }];\n\n return (\n \n \n {careers.map(buildSubSection)}\n {recentCareer && (\n \n Previously \n {recentCareer.organisation} \n {recentCareer.position} \n \n {buildRecentCareerPeriod(recentCareer.joinedAt, recentCareer.leftAt)}\n \n \n )}\n \n \n {experiences.map(buildSubSection)}\n \n \n );\n}\n\nCareer.propTypes = {\n organization: PropTypes.string,\n position: PropTypes.string,\n accred: PropTypes.string,\n joinedCurrentRoleAt: PropTypes.string,\n joinedIndustryAt: PropTypes.string,\n countryName: PropTypes.string,\n cityName: PropTypes.string,\n recentCareer: PropTypes.shape({\n organisation: PropTypes.string,\n position: PropTypes.string,\n joinedAt: PropTypes.string,\n leftAt: PropTypes.string,\n }),\n};\n\nCareer.defaultProps = {\n organization: null,\n position: null,\n accred: null,\n joinedCurrentRoleAt: null,\n joinedIndustryAt: null,\n countryName: null,\n cityName: null,\n recentCareer: null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { SubSection, SubSectionTitle } from './styles';\n\nconst LinkContainer = styled.div`\n display: flex;\n flex-direction: row;\n margin-top: 16px;\n`;\n\nconst Link = styled.a`\n margin-right: 16px;\n outline: none !important;\n\n &:hover {\n text-decoration: none !important;\n }\n\n span.icon-lw {\n font-size: 28px;\n\n &:hover:before {\n color: #788B9B;\n }\n }\n`;\n\nexport default function Social({ linkedinUrl, twitterUrl, activeFeatures }) {\n const isPremiumSocialLinksEnabled = _.includes(activeFeatures, 'premium_social_links');\n\n if (!(isPremiumSocialLinksEnabled && (linkedinUrl || twitterUrl))) {\n return null;\n }\n\n return (\n \n Social \n \n {linkedinUrl && (\n \n \n \n )}\n {twitterUrl && (\n \n \n \n )}\n \n \n );\n}\n\nSocial.propTypes = {\n linkedinUrl: PropTypes.string,\n twitterUrl: PropTypes.string,\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n};\n\nSocial.defaultProps = {\n linkedinUrl: null,\n twitterUrl: null,\n activeFeatures: [],\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { SubSection, SubSectionTitle } from './styles';\n\nconst Container = styled.ul`\n list-style: none;\n padding: 0;\n`;\n\nconst Point = styled.li`\n display: flex;\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 19px;\n line-height: 120%;\n margin-bottom: 16px;\n\n ${props => props.theme.isXXLarge && `\n line-height: 130%;\n `};\n\n &:before {\n content: \"•\";\n font-size: 32px;\n color: ${props => props.theme.secondaryColor};\n padding-right: 24px;\n }\n`;\n\nexport default function InvestmentPhilosophy({ investmentPhilosophy }) {\n const nonEmptyPhilosophy = _.compact(investmentPhilosophy.map(value => value.trim()));\n\n if (nonEmptyPhilosophy.length === 0) {\n return null;\n }\n\n return (\n \n Investment Philosophy \n \n {nonEmptyPhilosophy.map((value, index) => ({value} ))}\n \n \n );\n}\n\nInvestmentPhilosophy.propTypes = {\n investmentPhilosophy: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {\n SectionContainer,\n SectionTitle,\n SectionDetails,\n} from '../../shared/sectionable/styles';\nimport Card from './fund-components/card';\n\nconst FundContainer = styled(SectionContainer)`\n margin-top: ${props => (props.theme.isMobile ? 0 : 56)}px;\n`;\n\nexport default function Fund({ company, funds }) {\n return (\n \n \n Invest with \n {company.name}\n \n \n {funds.slice(0, 4).map(fund => \n \n );\n}\n\nFund.propTypes = {\n company: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n funds: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n publicUrl: PropTypes.string.isRequired,\n }),\n ),\n};\n\nFund.defaultProps = { funds: [] };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport dt from '../../../../shared/theme';\nimport Type from '../../../shared/fund/type';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n border-radius: 6px;\n border: 1px solid #E9EEF3;\n box-sizing: border-box;\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.12);\n\n ${props => !props.theme.isFeaturedLarge && `\n flex-direction: column;\n `};\n\n &:not(:last-child) {\n margin-bottom: 16px;\n }\n`;\n\nconst Content = styled.div`\n display: flex;\n flex-direction: column;\n padding: 24px 16px 32px 26px;\n\n ${props => props.theme.isMobile && `\n padding-left: 16px;\n padding-right: 16px;\n `};\n\n > div {\n margin-bottom: 2px;\n\n > span {\n font-weight: 800;\n font-size: 12px;\n padding: 2px 8px;\n\n ${props => dt(props).theme.isXXLarge && `\n font-size: 13px;\n `};\n }\n }\n`;\n\nconst Footer = styled.div`\n padding: 24px 24px 0;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n ${props => !props.theme.isFeaturedLarge && `\n margin-top: 0;\n padding-top: 0px;\n padding-bottom: 32px;\n width: 100%;\n `};\n\n ${props => props.theme.isMobile && `\n padding-left: 16px;\n padding-right: 16px;\n `};\n`;\n\nconst Name = styled.div`\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: 700;\n font-size: 25px;\n line-height: 110%;\n margin-top: 6px;\n\n a {\n color: ${props => props.theme.bodyColor};\n\n &:hover {\n text-decoration: none;\n }\n }\n`;\n\nconst CompanyName = styled.div`\n color: ${props => props.theme.secondaryColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 19px;\n line-height: 120%;\n margin-top: 8px;\n`;\n\nconst ButtonLink = styled.a`\n background: #3D4A63;\n border: 1px solid #3D4A63;\n border-radius: 2px;\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 14px;\n line-height: 120%;\n text-transform: uppercase;\n padding: 12px;\n width: 146px;\n\n &:hover {\n text-decoration: none !important;\n color: ${props => props.theme.bodyBackgroundColor};\n cursor: pointer;\n }\n\n ${props => props.theme.isMobile && `\n display: inline-block;\n text-align: center;\n width: 100%;\n `};\n`;\n\nexport default function Card({ company, fund }) {\n const { type, name, publicUrl } = fund;\n\n return (\n \n \n {!!type && {name} \n {company.name} \n \n \n \n );\n}\n\nCard.propTypes = {\n company: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n fund: PropTypes.shape({\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n publicUrl: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport WireCaption from './wire-caption';\nimport WireTitle from './wire-title';\nimport WireSummary from '../../../wire/wire-summary';\n\nconst HFlex = styled.div`\n display: flex;\n`;\n\nconst Container = styled.section`\n ${props => (props.theme.isMobile ? `\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n\n &:first-child {\n margin-top: -8px;\n }\n\n &:not(:first-child) {\n padding-top: 16px;\n }\n ` : `\n margin: 0px -26px;\n padding-left: 26px;\n padding-right: 26px;\n padding-top: 11px;\n padding-bottom: 4px;\n `)};\n\n .wire__summary {\n margin: 4px 0 24px 0;\n ${props => props.theme.isMobile && `\n margin-top: 14px;\n `};\n\n > .clampped-summary {\n line-height: 130%;\n\n .show-more {\n font-weight: ${props => props.theme.fontWeightHeavy};\n }\n }\n }\n`;\n\nconst HFlexContent = styled.div`\n width: 74%;\n margin-right: 16px;\n`;\n\nconst HFlexImage = styled.img`\n border-radius: 2px;\n\n ${props => props.theme.isXLarge && `\n width: 180px;\n height: 100px;\n `};\n\n ${props => props.theme.isLarge && `\n width: 160px;\n height: 90px;\n `};\n\n ${props => props.theme.isMobileOrTablet && `\n width: 107px;\n height: 60px;\n `};\n\n ${props => props.theme.isMobile && `\n width: 100px;\n height: 56px;\n\n &.sponsored {\n margin-top: 22px;\n }\n `};\n`;\n\nconst Link = styled.a`\n color: ${props => props.theme.bodyColor};\n\n &:hover {\n text-decoration: none !important;\n color: ${props => props.theme.bodyColor};\n }\n`;\n\nexport default function Wire({ wire, profile }) {\n const { isMobile } = React.useContext(ThemeContext);\n\n const {\n slug,\n title,\n summary,\n sharingImageUrl,\n isSponsored,\n } = wire;\n\n const handleClick = eventName => {\n recordStatisticsEvent({\n event: eventName,\n statisticable: 'profile',\n id: profile.id,\n clicked_url: `/wires/${slug}`,\n page: window.location.pathname,\n });\n\n return false;\n };\n\n return (\n \n {!!sharingImageUrl && (\n \n \n \n handleClick('contributor_profile_latest_wire_view')}>\n \n )}\n {!sharingImageUrl && (\n \n \n )}\n {!!isMobile && (\n handleClick('contributor_profile_latest_wire_view')}>\n \n );\n}\n\nWire.propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n summary: PropTypes.string.isRequired,\n firstPublishedAt: PropTypes.string.isRequired,\n publishedAt: PropTypes.string.isRequired,\n isSponsored: PropTypes.bool.isRequired,\n userId: PropTypes.number.isRequired,\n editorsPicked: PropTypes.bool.isRequired,\n sharingImageUrl: PropTypes.string,\n ownedByCurrentUser: PropTypes.bool.isRequired,\n featuredCount: PropTypes.number.isRequired,\n category: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n series: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }),\n }).isRequired,\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport WireCaption from './wire-caption';\nimport WireTitle from './wire-title';\n\n// isWireCollapsed\nconst isWC = d => (d.items === 1 && !d.isBelow480);\n\nconst Container = styled.section`\n display: flex;\n\n & > .text-wrapper {\n display: flex;\n flex-direction: column;\n }\n\n & > .image-wrapper > img {\n object-fit: contain;\n }\n\n ${props => (isWC(props) ? `\n flex-direction: row-reverse;\n justify-content: space-between;\n\n & > * {\n flex-basis: 50%;\n }\n\n & > .image-wrapper {\n margin-left: 24px;\n text-align: right;\n\n > img {\n ${props.theme.isMobileOrTablet && `\n max-height: 194px;\n `};\n max-width: 100%;\n }\n }\n ` : `\n flex-direction: column;\n\n & > * {\n width: 100%;\n }\n\n & > .text-wrapper {\n margin-top: 16px;\n }\n\n & > .image-wrapper > img {\n max-width: 100%;\n }\n `)};\n`;\n\nexport default function Wire({\n wire, items, mention, isBelow480, clickEventProps,\n}) {\n const baseProps = { items, isBelow480 };\n const { id, type, name } = clickEventProps;\n\n const handleClick = () => {\n recordStatisticsEvent({\n event: name,\n statisticable: type,\n id,\n clicked_url: `/wires/${wire.slug}`,\n page: window.location.pathname,\n });\n\n return false;\n };\n\n return (\n \n \n 
\n \n \n );\n}\n\nWire.propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n isSponsored: PropTypes.bool.isRequired,\n primaryImageUrl: PropTypes.string.isRequired,\n ownedByCurrentUser: PropTypes.bool.isRequired,\n editorsPicked: PropTypes.bool.isRequired,\n featuredCount: PropTypes.number.isRequired,\n publishedAt: PropTypes.string.isRequired,\n profileId: PropTypes.number.isRequired,\n userId: PropTypes.number.isRequired,\n category: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n series: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }),\n contributor: PropTypes.shape({\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string.isRequired,\n organization: PropTypes.string,\n }),\n }).isRequired,\n items: PropTypes.number.isRequired,\n mention: PropTypes.bool.isRequired,\n isBelow480: PropTypes.bool.isRequired,\n clickEventProps: PropTypes.shape({\n id: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst CaptionContainer = styled.div`\n display: flex;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n text-transform: uppercase;\n justify-content: space-start;\n align-content: center;\n\n span {\n font-size: ${props => (props.theme.isXLarge ? 14 : 13)}px;\n line-height: 15px;\n margin-right: 5px;\n }\n\n span.main {\n color: ${props => props.theme.primaryColor};\n }\n`;\n\nconst VFlex = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n`;\n\nconst HFlex = styled.div`\n display: flex;\n`;\n\nconst Secondary = styled.span`\n ${props => props.theme.isMobile && `\n margin-bottom: 5px;\n `};\n\n &&, & > a {\n color: ${props => props.theme.secondaryColor};\n }\n`;\n\nconst Separator = styled(Secondary)`\n margin-right: 5px;\n`;\n\nconst Mention = styled.div`\n margin-left: auto;\n ${props => props.theme.isLarge && props.items === 1 && `\n margin-right: 32px;\n `};\n padding-top: 1px;\n color: ${props => props.theme.secondaryColor};\n background-color: #e3e9ee;\n font-size: 12px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 120%;\n text-align: center;\n text-transform: capitalize;\n border-radius: 10px;\n width: 53px;\n height: 18px;\n`;\n\n// eslint-disable-next-line complexity\nexport default function WireCaption({\n wire, items, mention, isBelow480,\n}) {\n const caption = {};\n if (wire.category || wire.series) {\n const seriesTitle = _.get(wire, 'series.title');\n caption.text = seriesTitle || _.get(wire, 'category.name');\n caption.url = seriesTitle ? `/series/${wire.series.slug}` : `/categories/${wire.category.slug}`;\n }\n\n // TODO: this needs some future reflow to accomodate non-linewrapping\n // elements.\n return (\n \n {!!isBelow480 && (\n \n {!!(wire.isSponsored) && (\n \n sponsored\n \n )}\n \n {!!caption.url && (\n \n {caption.text}\n \n )}\n {mention && (\n mention \n )}\n \n \n )}\n {!isBelow480 && (\n \n {!!caption.url && (\n \n {caption.text}\n \n )}\n {!!(caption.url && wire.isSponsored) && • }\n {!!(wire.isSponsored) && (\n \n sponsored\n \n )}\n {mention && (\n mention \n )}\n \n )}\n \n );\n}\n\nWireCaption.propTypes = {\n wire: PropTypes.shape({\n isSponsored: PropTypes.bool.isRequired,\n category: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n series: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }),\n }).isRequired,\n items: PropTypes.number.isRequired,\n isBelow480: PropTypes.bool.isRequired,\n mention: PropTypes.bool.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport TruncatedEllipsis from '../../truncated-ellipsis';\nimport EditorsManageWireCallout from '../../../editors-manage-wire/editors-manage-wire-callout';\n\nconst Header = styled.div`\n display: flex;\n \n & > .callout {\n display: inline;\n button {\n margin-top: 14px;\n z-index: 1;\n }\n }\n\n & > h2 {\n margin: ${props => (!props.isBelow480 && props.items === 1 ? '8px 24px 0 0' : '8px 0')};\n font-size: 19px;\n line-height: 130%;\n ${props => ((props.theme.isLarge && props.items === 1) || props.theme.isXLarge) && `\n font-size: 24px;\n `};\n ${props => !props.theme.isXLarge && !props.isBelow480 && props.items > 1 && `\n font-size: 17px;\n `};\n\n > a {\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n &:hover {\n text-decoration: none;\n }\n }\n }\n`;\n\nexport default function WireTitle({\n wire, items, showEditorManageTools, isBelow480, clickEventProps,\n}) {\n const showEditorManageWire = showEditorManageTools && !isBelow480\n && (_.get(window, 'Livewire.currentUser.profile.canModifyWiresOfOthers') || wire.ownedByCurrentUser);\n\n const handleClick = () => {\n const { id, name, type } = clickEventProps;\n\n recordStatisticsEvent({\n event: name,\n statisticable: type,\n id,\n clicked_url: `/wires/${wire.slug}`,\n page: window.location.pathname,\n });\n\n return false;\n };\n\n return (\n \n {\n showEditorManageWire && (\n \n \n
\n \n );\n}\n\nWireTitle.propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n userId: PropTypes.number,\n title: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n ownedByCurrentUser: PropTypes.bool.isRequired,\n editorsPicked: PropTypes.bool.isRequired,\n featuredCount: PropTypes.number.isRequired,\n publishedAt: PropTypes.string.isRequired,\n contributor: PropTypes.shape({\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string.isRequired,\n organization: PropTypes.string,\n }),\n }).isRequired,\n showEditorManageTools: PropTypes.bool,\n items: PropTypes.number.isRequired,\n isBelow480: PropTypes.bool.isRequired,\n clickEventProps: PropTypes.shape({\n id: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nWireTitle.defaultProps = {\n showEditorManageTools: true,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport {\n SectionContainer,\n SectionTitle,\n SectionDetails,\n Separator,\n} from '../../shared/sectionable/styles';\nimport Profile from './enquiry-components/profile';\nimport Form from './enquiry-components/form';\nimport Success from '../../shared/enquiry/success';\nimport EnquiryContext from '../../shared/enquiry/context';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: -64px;\n width: 100%;\n`;\n\nconst SSeparator = styled(Separator)`\n ${props => props.theme.isMobile && `\n display: none;\n `};\n`;\n\nconst SSectionContainer = styled(SectionContainer)`\n margin-top: 48px;\n`;\n\nconst SSectionDetails = styled(SectionDetails)`\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);\n`;\n\nconst sectionName = 'enquiry';\nexport default function Enquiry({ profile, investorTypes }) {\n const { state: { showEnquiryForm, contactSent } } = React.useContext(EnquiryContext);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n return (\n \n \n Enquiries \n \n \n \n \n );\n}\n\nEnquiry.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n slug: PropTypes.string,\n profilePictureUrl: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n }).isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport IconedButton from '../../../shared/iconed-button';\nimport EnquiryContext from '../../../shared/enquiry/context';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\n\nconst Container = styled.div`\n display: flex;\n justify-content: space-between;\n border: 1px solid ${props => props.theme.secondaryColorLight};\n border-radius: 4px;\n\n &.no-bottom-border-radius {\n border-radius: 4px 4px 0 0;\n }\n\n ${props => props.theme.isMobileOrTablet && `\n flex-direction: column;\n `};\n`;\n\nconst Img = styled.img`\n border-radius: 4px;\n flex: 0 0 auto;\n margin-right: 20px;\n width: 65px;\n height: 65px;\n`;\n\nconst Details = styled.div`\n display: flex;\n flex-direction: row;\n padding: 16px;\n`;\n\nconst Info = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Name = styled.label`\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n text-transform: uppercase;\n`;\n\nconst Position = styled.label`\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightMedium};\n text-transform: capitalize;\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Divider = styled.hr`\n width: 67px;\n height: 0px;\n border-top: 2px dashed ${props => props.theme.primaryColor};\n margin: 6px 0;\n`;\n\nconst Organisation = styled.label`\n color: ${props => props.theme.secondaryColor};\n font-size: 16px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n`;\n\nconst Actions = styled.div`\n padding: 16px;\n\n ${props => props.theme.isMobileOrTablet && `\n border-top: 1px solid ${props.theme.secondaryColorLight};\n width: 100%;\n `};\n`;\n\nconst Button = styled(IconedButton)`\n background-color: #3c4966;\n width: 120px;\n margin: 0;\n\n &:hover {\n background-color: #414651;\n color: white;\n }\n\n & > span.icon-lw {\n font-size: 16px;\n padding: 5px;\n background-color: ${props => props.theme.bodyColor};\n }\n\n & > span:not(.icon-lw) {\n font-size: 14px;\n }\n\n ${props => props.theme.isMobile && `\n width: 100%;\n `};\n`;\n\nexport default function Profile({ profile }) {\n const {\n id,\n name,\n position,\n organization,\n profilePictureUrl,\n } = profile;\n\n const { state: { showEnquiryForm, contactSent }, dispatch } = React.useContext(EnquiryContext);\n\n const handleClick = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'contributor_profile_enquiries_section_contact_clicked',\n statisticable: 'profile',\n id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm' });\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n const showCompanyName = profile.isCompanyProfile && organization;\n\n return (\n \n \n \n \n )}\n \n );\n}\n\nProfile.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n profilePictureUrl: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Select from 'react-select';\n\nimport Loading from '../../../../shared/loading';\nimport DropdownIndicator from '../../../shared/dropdown-styles';\nimport sendContact from '../../../../services/partnerships/contact-service';\nimport EnquiryContext from '../../../shared/enquiry/context';\nimport Validator from '../../../../shared/validator';\nimport { EMAIL_REGEX } from '../../../../shared/consts';\n\nconst selectorStyles = {\n container: provided => ({\n ...provided,\n fontSize: 18,\n fontWeight: 400,\n textTransform: 'none',\n }),\n control: (provided, state) => ({\n ...provided,\n borderColor: state.isFocused ? '#6f8aa1' : '#e4eaee',\n '&:hover': {\n borderColor: '#6f8aa1',\n },\n borderRadius: 4,\n outline: 'none',\n boxShadow: 'none',\n height: 50,\n }),\n indicatorsContainer: provided => ({\n ...provided,\n height: 50,\n paddingRight: 8,\n }),\n indicatorSeparator: () => ({\n display: 'none',\n }),\n option: (provided, state) => ({\n ...provided,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: state.isSelected ? '#19202d' : (state.isFocused ? '#f3f5fa' : '#fff'),\n fontSize: 18,\n fontWeight: 400,\n textTransform: 'none',\n }),\n placeholder: provided => ({\n ...provided,\n color: '#8ea3b5',\n }),\n valueContainer: provided => ({\n ...provided,\n marginTop: -5,\n paddingLeft: 16,\n }),\n singleValue: provided => ({\n ...provided,\n color: '#19202d',\n }),\n};\n\nconst selectorProps = {\n styles: selectorStyles,\n classNamesPrefix: 'sel',\n components: { DropdownIndicator },\n};\n\nconst Container = styled.form`\n display: flex;\n flex-direction: column;\n border: 1px solid ${props => props.theme.secondaryColorLight};\n border-radius: 0 0 4px 4px;\n border-top: none;\n padding: 8px 16px 32px 16px;\n\n .loading-panel {\n margin-left: auto;\n width: 136px;\n }\n`;\n\nconst Details = styled.div`\n display: flex;\n flex-direction: row;\n\n ${props => props.theme.isMobileOrTablet && `\n flex-direction: column;\n `};\n`;\n\nconst Left = styled.div`\n display: flex;\n flex-direction: column;\n padding-right: 12px;\n width: 50%;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n padding: 0;\n `};\n`;\n\nconst Right = styled.div`\n display: flex;\n flex-direction: column;\n width: 50%;\n padding-left: 12px;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n padding: 0;\n `};\n`;\n\nconst Label = styled.label`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n font-weight: 800;\n text-transform: uppercase;\n margin: 24px 0 10px 0;\n`;\n\nconst InputText = styled.input`\n height: 50px;\n border-radius: 4px;\n border: 1px solid #E9EEF3;\n padding-left: 16px;\n font-size: 19px;\n`;\n\nconst Checkbox = styled.label`\n font-size: 16px;\n margin-bottom: 8px;\n`;\n\nconst Textarea = styled.textarea`\n height: 220px;\n border-radius: 4px;\n border: 1px solid #E9EEF3;\n padding: 16px;\n font-size: 19px;\n resize: vertical;\n`;\n\nconst Button = styled.button`\n border-radius: 2px;\n border-width: 0px;\n height: 36px;\n padding: 5px 0;\n background-color: #191F2D;\n color: white;\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n margin-top: 24px;\n margin-left: auto;\n text-transform: uppercase;\n width: 136px;\n outline: none;\n`;\n\nconst HelpBlock = styled.span`\n color: ${props => props.theme.errorColor};\n font-size: 16px;\n font-weight: ${props => props.theme.fontWeightMedium};\n line-height: 120%;\n text-transform: none;\n`;\n\nconst Footer = styled.footer`\n margin-top: 48px;\n\n & > p {\n font-size: 14px;\n line-height: 130%;\n }\n`;\n\nexport default function Form({ profile, investorTypes }) {\n const { currentUser } = window.Livewire;\n\n const loadingRef = React.useRef();\n\n const { dispatch } = React.useContext(EnquiryContext);\n\n const mappedInvestorTypes = [\n { label: null, value: null },\n ...investorTypes.map(type => ({ label: type.name, value: type.id })),\n ];\n\n const [formData, setFormData] = React.useState({\n name: _.get(currentUser, 'profile.name'),\n email: _.get(currentUser, 'email'),\n investorType: _.find(mappedInvestorTypes, { value: _.get(currentUser, 'profile.investorType') }),\n enquiryAboutOne: null,\n enquiryAboutTwo: null,\n enquiryAboutThree: null,\n });\n\n const [validations, setValidations] = React.useState({\n nameRequiredValid: true,\n emailRequiredValid: true,\n emailFormatValid: true,\n });\n\n const validator = new Validator({\n nameRequired: state => !!state.name.trim(),\n emailRequired: state => !!state.email.trim(),\n emailFormat: state => !state.email.trim() || EMAIL_REGEX.test(state.email),\n });\n\n const handleChange = e => {\n const { target } = e;\n const newData = { ...formData };\n newData[target.name] = target.value;\n setFormData(newData);\n };\n\n const handleInvestorTypeChange = type => {\n const newData = { ...formData };\n newData.investorType = type;\n setFormData(newData);\n };\n\n const handleEnquiryAboutChange = e => {\n const { target } = e;\n const newData = { ...formData };\n newData[target.name] = target.checked ? target.value : null;\n setFormData(newData);\n };\n\n const createContact = e => {\n e && e.preventDefault();\n\n validator.validateForm(formData);\n setValidations(validator.getValidations());\n\n if (!validator.formValid) {\n return;\n }\n\n const {\n enquiryAboutOne,\n enquiryAboutTwo,\n enquiryAboutThree,\n investorType,\n } = formData;\n\n const investorTypeName = investorType ? investorType.label : null;\n\n loadingRef.current.start();\n\n sendContact(profile.activePartnership.id, {\n referable_id: profile.id,\n referable_type: 'Profile',\n name: formData.name,\n email: formData.email,\n phone: formData.phone,\n investor_type: investorTypeName,\n enquiring_about: _.compact([enquiryAboutOne, enquiryAboutTwo, enquiryAboutThree]),\n message_to_contributor: formData.message,\n page: window.location.pathname,\n }).then(() => {\n loadingRef.current.stop();\n dispatch({ type: 'contactSent' });\n }).catch(() => (loadingRef.current.stop()));\n };\n\n const ENQUIRY_ABOUT_OPTIONS = [\n { name: 'enquiryAboutOne', value: 'Book a meeting' },\n { name: 'enquiryAboutTwo', value: 'Attend your next event' },\n { name: 'enquiryAboutThree', value: 'Request information' },\n ];\n\n return (\n \n \n \n \n \n \n );\n}\n\nForm.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n slug: PropTypes.string,\n profilePictureUrl: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n }).isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport classNames from 'classnames';\nimport postal from 'postal';\nimport { useSpring, animated } from 'react-spring';\nimport AnimatedProfileFollowButton from '../../shared/animated-profile-follow-button';\nimport IconedButton from '../../shared/iconed-button';\nimport EnquiryContext from '../../shared/enquiry/context';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\n\nconst height = 68;\nconst Container = styled(animated.div)`\n z-index: 100;\n width: 100vw;\n height: ${height}px;\n background: white;\n position: fixed;\n bottom: 0px;\n box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.15);\n display: flex;\n align-items: flex-end;\n padding: 10px 20px 22px 20px;\n\n & > button {\n margin: 0;\n margin-left: 8px;\n height: 36px;\n align-items: center;\n outline: none;\n }\n\n & > button[name=\"profile-follow-button\"] {\n width: 107px;\n }\n\n &:not(.discreet) > button:not([name=\"profile-follow-button\"]) {\n width: 33px;\n padding: 0;\n background-color: ${props => props.theme.bodyColor};\n\n > span:not(.icon-lw) {\n display: none;\n }\n }\n\n\n &&.discreet {\n > button[name=\"profile-follow-button\"] {\n display: none;\n }\n\n > button:not([name=\"profile-follow-button\"]) {\n background-color: #3c4966;\n min-width: 107px;\n width: 107px;\n > span.icon-lw-contact {\n padding: 3px;\n }\n }\n }\n\n &&&& > button:not([name=\"profile-follow-button\"]) {\n color: white;\n\n > span.icon-lw-contact {\n background-color: ${props => props.theme.bodyColor};\n }\n }\n`;\n\nconst Desc = styled.div`\n flex-grow: 2;\n flex-basis: 50%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n overflow-x: hidden;\n`;\n\nconst Name = styled.span`\n font: ${props => props.theme.fontWeightHeavy} 16px/18px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n overflow-x: hidden;\n width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst Org = styled.span`\n font: ${props => props.theme.fontWeightMedium} 14px/120% ${props => props.theme.fontFamilyBody};\n color: #4b6072;\n overflow-x: hidden;\n width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst followTopic = {\n channel: 'micro-profile.commands',\n topic: 'follow-status',\n};\n\nexport default function StickyFooter({\n profile, followed, yOffset,\n}) {\n const { isMobile } = React.useContext(ThemeContext);\n const { dispatch } = React.useContext(EnquiryContext);\n const [discreet, setDiscreet] = React.useState(followed);\n const showContact = _.includes(profile.activeFeatures, 'premium_enquiry_form')\n && _.get(profile, 'activePartnership');\n\n const isVisible = React.useCallback(\n () => ((!discreet || showContact) && (yOffset > (isMobile ? 255 : 265))),\n [yOffset, discreet, showContact, isMobile],\n );\n\n const styles = useSpring({\n opacity: isVisible() ? 1 : 0,\n transform: `translateY(${isVisible() ? 0 : height}px)`,\n });\n\n const followProps = {\n isProfileFollowedByCurrentUser: false,\n profileId: profile.id,\n followEventName: 'mobile_footer_follow_profile',\n };\n\n const contact = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'mobile_footer_contact_profile',\n statisticable: 'profile',\n id: profile.id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm', payload: { scroll: true, offset: -200 } });\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n React.useEffect(() => () => postal.unsubscribe(followTopic), []);\n\n React.useEffect(() => {\n postal.subscribe({\n ...followTopic,\n callback: d => d.id === profile.id && setDiscreet(d.following && followed),\n });\n }, [profile.id, followed]);\n\n return (\n \n \n {profile.name} \n {profile.organization} \n \n \n \n contact\n \n )}\n \n );\n}\n\nStickyFooter.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n organization: PropTypes.string,\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n followed: PropTypes.bool.isRequired,\n yOffset: PropTypes.number.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport postal from 'postal';\nimport { useSpring, animated } from 'react-spring';\nimport useContributorStateStore from '../common/contributor-state-hook';\nimport AnimatedProfileFollowButton from '../../shared/animated-profile-follow-button';\nimport IconedButton from '../../shared/iconed-button';\nimport EnquiryContext from '../../shared/enquiry/context';\nimport useNavigationStateStore from '../../shared/navigation/navigation-state-hook';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\nimport NavMenu from '../../shared/navigation/nav-menu';\n\nconst height = 52;\nconst Container = styled(animated.div)`\n z-index: 20;\n width: 100vw;\n height: ${height}px;\n background: white;\n position: fixed;\n top: 66px;\n display: flex;\n align-items: center;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);\n\n &.new-nav {\n top: 104px;\n }\n`;\n\nconst Content = styled.div`\n max-width: 1200px;\n padding: 0;\n margin: 0 auto;\n\n ${props => props.theme.isLarge && `\n width: 85%;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n `};\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n `};\n display: flex;\n align-items: center;\n`;\n\nconst Buttons = styled.div`\n max-width: 186px;\n align-self: flex-end;\n display: flex;\n justify-content: space-between;\n\n & > button {\n margin: 0;\n margin-left: 8px;\n height: 36px;\n outline: none;\n }\n\n &:not(.discreet) > button:not([name=\"profile-follow-button\"]) {\n width: 36px;\n padding: 6px;\n background-color: #273147;\n\n > span:not(.icon-lw) {\n display: none;\n }\n }\n\n & > button[name=\"profile-follow-button\"] {\n width: 134px;\n\n .text-box {\n font-size: 14px;\n }\n }\n\n &&.discreet {\n > button[name=\"profile-follow-button\"] {\n display: none;\n }\n\n > button:not([name=\"profile-follow-button\"]) {\n background-color: #3c4966;\n width: 134px;\n > span.icon-lw-contact {\n padding: 3px;\n }\n & > span:not(.icon-lw) {\n font-size: 14px;\n }\n }\n }\n\n &&&& > button:not([name=\"profile-follow-button\"]) {\n color: white;\n\n > span.icon-lw-contact {\n background-color: ${props => props.theme.bodyColor};\n }\n }\n`;\n\nconst followTopic = {\n channel: 'micro-profile.commands',\n topic: 'follow-status',\n};\n\n// eslint-disable-next-line complexity\nexport default function StickyHeader({\n profile,\n followed,\n yOffset,\n isMyself,\n newNavEnabled,\n}) {\n const { dispatch } = React.useContext(EnquiryContext);\n const [discreet, setDiscreet] = React.useState(followed);\n const showFeaturedWires = useNavigationStateStore(state => state.hasFeaturedWires);\n const showLatestWires = useContributorStateStore(state => state.hasLatestWires);\n const showMentions = useContributorStateStore(state => state.hasMentions);\n const showContact = !isMyself\n && _.includes(profile.activeFeatures, 'premium_enquiry_form')\n && _.get(profile, 'activePartnership');\n const navItems = [];\n\n if (showFeaturedWires) {\n navItems.push({ title: 'Featured Wires', sectionName: 'featured-wires' });\n }\n if (showLatestWires) {\n navItems.push({ title: 'Latest Wires', sectionName: 'latest-wires' });\n }\n if (showMentions) {\n navItems.push({ title: 'Mentions', sectionName: 'mentions' });\n }\n navItems.push({ title: 'About', sectionName: 'about' });\n if (showContact) {\n navItems.push({ title: 'Enquiries', sectionName: 'enquiry' });\n }\n\n const navMenuProps = {\n navItems,\n id: profile.id,\n statisticable: 'profile',\n url: `/contributors/${profile.slug}`,\n };\n\n const isVisible = profile.headlineGrab ? yOffset > 300 : yOffset > 180;\n\n const [styles, setStyles] = useSpring(() => ({ transform: `translateY(${-height}px)` }));\n setStyles({\n transform: `translateY(${isVisible ? 0 : -height}px)`,\n config: { tension: isVisible ? 170 : 350, clamp: true },\n });\n\n const followProps = {\n isProfileFollowedByCurrentUser: followed,\n profileId: profile.id,\n followEventName: 'sticky_header_follow_profile',\n };\n\n const contact = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'sticky_header_contact_profile',\n statisticable: 'profile',\n id: profile.id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm', payload: { scroll: true, offset: -200 } });\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n React.useEffect(() => () => postal.unsubscribe(followTopic), []);\n\n React.useEffect(() => {\n postal.subscribe({\n ...followTopic,\n callback: d => d.id === profile.id && setDiscreet(followed && d.following),\n });\n }, [profile.id, followed]);\n\n return (\n \n \n \n \n \n contact\n \n )}\n \n )}\n \n \n );\n}\n\nStickyHeader.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n headlineGrab: PropTypes.string,\n }).isRequired,\n followed: PropTypes.bool.isRequired,\n yOffset: PropTypes.number.isRequired,\n isMyself: PropTypes.bool.isRequired,\n newNavEnabled: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n margin-right: 13px;\n`;\n\nconst Text = styled.span`\n color: ${props => props.theme.secondaryColor};\n font: ${props => props.theme.fontWeightHeavy} 14px/110% ${props => props.theme.fontFamilyBody};\n text-transform: uppercase;\n &:hover {\n cursor: pointer;\n color: ${props => props.theme.bodyColor};\n }\n`;\n\nexport default function NavItem({\n title, onClick,\n}) {\n const handleClick = e => {\n e.preventDefault();\n onClick();\n };\n return (\n \n {title} \n \n );\n}\n\nNavItem.propTypes = {\n title: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport useOnclickOutside from 'react-cool-onclickoutside';\nimport DropdownArrow from '../../shared/dropdown/dropdown-arrow';\nimport {\n DropdownContainer,\n DropdownInputContainer,\n DropdownText,\n Icon,\n OptionsContainer,\n Option,\n} from '../../shared/dropdown/styles';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n`;\n\nconst SDropdownInputContainer = styled(DropdownInputContainer)`\n width: 192px;\n`;\n\nconst SOptionsContainer = styled(OptionsContainer)`\n width: 240px;\n`;\n\nexport default function Orders({ order, onChange }) {\n const options = [\n {\n label: 'Most Followed',\n value: 'most_followed',\n },\n {\n label: 'Most Active',\n value: 'most_active',\n },\n {\n label: 'Most Viewed',\n value: 'most_viewed',\n },\n {\n label: 'Alphabetical',\n value: 'alphabetical',\n },\n ];\n\n const [expanded, setExpanded] = React.useState(false);\n const [selectedOption, setSelectedOption] = React.useState(\n _.find(options, ['value', order]) || options[0],\n );\n\n const ref = useOnclickOutside(() => {\n setExpanded(false);\n });\n\n const toggleExpanded = e => {\n e && e.preventDefault();\n setExpanded(!expanded);\n };\n\n const setOrder = option => e => {\n e && e.preventDefault();\n setSelectedOption(option);\n setExpanded(false);\n onChange(option.value);\n };\n\n return (\n \n \n \n {selectedOption.label} \n \n {expanded && (\n \n {options.map(option => (\n \n {option.label}\n \n ))}\n \n )}\n \n \n );\n}\n\nOrders.propTypes = {\n order: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\n\nconst Arrow = styled.span`\n color: ${props => props.theme.secondaryColor};\n font-size: 13px;\n`;\n\nexport default function DropdownArrow({ expanded }) {\n const iconClass = {\n 'fa-chevron-down': !expanded,\n 'fa-chevron-up': expanded,\n };\n return \n \n {`©${new Date().getFullYear()} Livewire Markets Pty Ltd. All rights reserved.`}\n \n \n {`Version ${window.Livewire.version}`}\n \n \n);\n\nexport default React.memo(Copyright);\n","import React from 'react';\nimport styled from 'styled-components';\nimport { PaddedContainer } from './styles';\n\nconst Container = styled(PaddedContainer)`\n padding-left: 0.2vw;\n padding-bottom: 30px;\n\n ${props => props.theme.isMobile && `\n width: 100%;\n margin: 0;\n background-color: ${props.theme.secondaryColorLight};\n padding: 0 20px;\n `};\n`;\n\nconst Paragraph = styled.p`\n text-align: left;\n color: ${props => props.theme.secondaryColor};\n margin: 0;\n font: ${props => props.theme.fontWeightBold} 12px/110% ${props => props.theme.fontFamilyBody};\n`;\n\nfunction Disclaimer() {\n return (\n \n \n Livewire gives readers access to information and educational content\n provided by financial services professionals and companies (”Livewire\n Contributors”). Livewire does not operate under an Australian financial\n services licence and relies on the exemption available under section\n 911A(2)(eb) of the Corporations Act 2001 (Cth) in respect of any advice\n given. Any advice on this site is general in nature and does not take into\n consideration your objectives, financial situation or needs. Before making\n a decision please consider these and any relevant Product Disclosure\n Statement. Livewire has commercial relationships with some Livewire\n Contributors.\n \n \n );\n}\n\nexport default React.memo(Disclaimer);\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { scroller } from 'react-scroll';\nimport { Logo, SmallButton, PaddedContainer } from './styles';\n\nconst logoHeight = 26;\nconst Container = styled(PaddedContainer)`\n display: flex;\n height: 70px;\n z-index: 200;\n position: sticky;\n align-items: center;\n justify-content: space-between;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 14px;\n background-color: transparent !important;\n\n a.application-navbar-search,\n a.application-navbar-likes,\n a.application-navbar-account-link,\n .navbar-callout-toggle {\n color: ${props => (props.theme.light ? props.theme.bodyColor : 'white')};\n }\n`;\n\nconst Left = styled.div`\n text-align: left;\n display: flex;\n\n\n > a:not(:first-child) {\n margin-left: 30px;\n line-height: ${logoHeight}px;\n color: ${props => (props.theme.light ? props.theme.bodyColor : 'white')};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 14px;\n text-transform: uppercase;\n }\n`;\n\nconst Right = styled.div`\n text-align: right;\n`;\n\nconst LoginButton = styled.a`\n background-color: transparent;\n border: none;\n color: ${props => (props.theme.light ? 'black' : 'white')};\n font-size: 14px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n text-transform: uppercase;\n padding: 10px 20px;\n\n &:hover {\n color: ${props => (props.theme.light ? 'black' : 'white')};\n }\n`;\n\nexport default function Header() {\n const { logo, isUserSignedIn } = React.useContext(ThemeContext);\n\n const scrollToJoinFreeForm = () => scroller.scrollTo('join-free-form', {\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n return (\n \n \n \n \n {!isUserSignedIn && (\n \n join free \n log in \n \n )}\n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport { ThemeContext } from 'styled-components';\nimport classNames from 'classnames';\nimport ScrollTransition from '../../shared/scroll-transition';\nimport Header from '../../layout/navbar/mobile-navbar-elements/header';\nimport Drawer from '../../layout/navbar/mobile-navbar-elements/drawer';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport MobileNavbarContext from '../../layout/navbar/mobile-navbar-context';\nimport buildStaticMenus from '../../layout/navbar/mobile-navbar-elements/static-menus';\n\nconst reducer = (state, { type, payload }) => {\n switch (type) {\n case 'toggle':\n return { ...state, expanded: payload };\n case '_setExpandableMenus': {\n const s = { ...state };\n s.menus[payload.name] = payload.data;\n return s;\n }\n default:\n throw new Error();\n }\n};\n\nfunction actionMapper(hrefFunc) {\n return d => ({\n text: d.name,\n anchor: { href: hrefFunc(d) },\n });\n}\n\nexport default function HeaderMobile() {\n const [scroll, setScroll] = React.useState({\n top: true, // navbar maximised\n up: false, // navbar scrolling up\n down: false, // navbar scrolling down\n });\n\n const {\n isUserSignedIn, categoriesData, seriesData, eventsData,\n } = React.useContext(ThemeContext);\n\n const [state, dispatch] = React.useReducer(reducer, {\n expanded: false,\n menus: buildStaticMenus(isUserSignedIn),\n });\n\n React.useEffect(() => {\n if (_.get(categoriesData, 'categories.length')) {\n dispatch({\n type: '_setExpandableMenus',\n payload: {\n name: 'Categories',\n data: categoriesData.categories.map(actionMapper(d => d.url)),\n },\n });\n }\n }, [categoriesData]);\n\n React.useEffect(() => {\n if (_.get(seriesData, 'series.length')) {\n dispatch({\n type: '_setExpandableMenus',\n payload: {\n name: 'Series',\n data: seriesData.series\n .map(datum => ({ ...datum, name: datum.title }))\n .map(actionMapper(d => d.url)),\n },\n });\n }\n }, [seriesData]);\n\n React.useEffect(() => {\n if (_.get(eventsData, 'events.length')) {\n dispatch({\n type: '_setExpandableMenus',\n payload: {\n name: 'Events',\n data: eventsData.events.map(actionMapper(d => `/events/${d.slug}`)),\n },\n });\n }\n }, [eventsData]);\n\n function updateScrollPosition(currentPosition, previousPosition) {\n setScroll({\n top: currentPosition <= 0,\n down: currentPosition > previousPosition,\n up: currentPosition < previousPosition && currentPosition > 0,\n });\n }\n\n return (\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport MobileNavbarContext from '../mobile-navbar-context';\n\n// Credit goes to Hamburgers' implementation from https://jonsuh.com/hamburgers/\n// We're using the 'spring' type.\nconst size = 15;\nconst Hamburger = styled.ul`\n width: ${size}px;\n height: ${size}px;\n list-style: none;\n margin: ${-0.5 * size}px 0 0 0;\n padding: 0;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translateZ(0);\n color: #fff;\n`;\n\nconst strokeWidth = 2;\nconst Stick = styled.li`\n width: 100%;\n border: 0;\n border-bottom: ${strokeWidth}px solid #fff;\n position: absolute;\n`;\n\nconst toCrossTopTiming = 'cubic-bezier(0.33333, 0.66667, 0.66667, 1)';\nconst toBurgerTopTiming = 'cubic-bezier(0.33333, 0, 0.66667, 0.33333)';\nconst toCrossTransformTiming = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';\nconst toBurgerTransformTiming = 'cubic-bezier(0.215, 0.61, 0.355, 1)';\nconst pct = (2 - Math.sqrt(2)) / 2 / 2;\nconst hamOffset = 0.5 * size;\nconst bottomOffset = (1 - pct) * size;\n\nconst Top = styled(Stick)`\n top: ${pct * size - 0.5 * strokeWidth}px;\n transition: opacity 0s 130ms linear;\n transition-delay: ${props => (props.expanded ? 220 : 130)}ms;\n opacity: ${props => (props.expanded ? 0 : 1)};\n`;\n\nconst Ham = styled(Stick)`\n top: ${props => (props.expanded ? 0 : (hamOffset - 0.5 * strokeWidth))}px;\n transform: ${props => props.expanded && `translateY(${hamOffset}px) rotate(45deg)`};\n transition: ${props => (props.expanded\n ? `top 100ms 150ms ${toBurgerTopTiming}, transform 130ms 220ms ${toBurgerTransformTiming}`\n : `top 100ms 200ms ${toCrossTopTiming}, transform 130ms ${toCrossTransformTiming}`)\n};\n`;\n\nconst Bottom = styled(Stick)`\n top: ${props => (props.expanded ? 0 : (bottomOffset - 0.5 * strokeWidth))}px;\n transform: ${props => props.expanded && `translateY(${hamOffset}px) rotate(-45deg)`};\n transition: ${props => (props.expanded\n ? `top 200ms ${toBurgerTopTiming}, transform 130ms 220ms ${toBurgerTransformTiming}`\n : `top 200ms 200ms ${toCrossTopTiming}, transform 130ms ${toCrossTransformTiming}`)\n};\n`;\n\nexport default function MenuToggle() {\n const { state: { expanded }, dispatch } = React.useContext(MobileNavbarContext);\n\n function onToggle(e) {\n e.preventDefault();\n dispatch({ type: 'toggle', payload: !expanded });\n }\n\n return (\n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useSpring, animated } from 'react-spring';\nimport SearchBarContext from './context';\nimport { saveEvent } from '../../../../shared/search-event';\n\n/* stylelint-disable property-no-vendor-prefix */\nconst Input = styled(animated.input)`\n &&&&& {\n -webkit-appearance: none;\n box-sizing: border-box;\n border: 0;\n border-radius: 4px 0px 0px 4px;\n padding: 0;\n background-color: ${props => props.theme.secondaryColorLight};\n height: 38px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 14px;\n line-height: 38px;\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &::placeholder {\n color: ${props => props.theme.secondaryColor};\n opacity: 0.75;\n }\n`;\n/* stylelint-enable property-no-vendor-prefix */\n\nexport default function InputBox() {\n const {\n state: {\n animation, expanded, query, width, value, pseudoMobile, inputFocus, showStockCodeTick,\n },\n dispatch,\n } = React.useContext(SearchBarContext);\n const inputRef = React.createRef();\n\n const {\n paddingLeft, paddingRight, w,\n } = useSpring({\n // eslint-disable-next-line no-nested-ternary\n paddingLeft: expanded ? (pseudoMobile ? '20px' : '50px') : '0px',\n // eslint-disable-next-line no-nested-ternary\n paddingRight: expanded ? `${((showStockCodeTick ? (pseudoMobile ? 54 : 64) : 0) + 60)}px` : '0px',\n w: expanded ? (width - (pseudoMobile ? 40 : 146)) : 0,\n immediate: !animation,\n onStart: () => inputRef.current && expanded && animation && inputRef.current.focus(),\n onRest: () => {\n if (inputRef.current) {\n if (expanded && animation) {\n if (!inputFocus) {\n dispatch({ type: 'inputFocus', payload: true });\n }\n } else {\n inputRef.current.blur();\n }\n }\n },\n });\n\n const onKeyUp = e => {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n dispatch({ type: _.camelCase(e.key) });\n } else if (query !== value) {\n dispatch({ type: 'setQuery', payload: value });\n }\n };\n\n const onKeyDown = e => {\n if (e.key === 'Enter') {\n e.preventDefault();\n\n if (value.length) {\n saveEvent({ query: value }).finally(() => {\n dispatch({ type: 'search' });\n });\n }\n }\n };\n\n const onClick = () => {\n if (expanded && !animation && inputRef.current) {\n const pos = value.length;\n inputRef.current.setSelectionRange(pos, pos);\n }\n };\n\n const placeholderText = (pseudoMobile || width < 450)\n ? 'Search Livewire'\n : 'Try searching stock codes, companies, contributor names or funds';\n\n return (\n dispatch({ type: 'setValue', payload: inputRef.current.value })}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onClick={onClick}\n value={value}\n placeholder={placeholderText}\n style={{\n paddingLeft,\n paddingRight,\n width: w.interpolate(v => `${v}px`),\n }}\n />\n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport SearchBarContext, { useLockFocus } from './context';\n\n// top: 0.5 * (navbar height - tick height)\n// left: exactly space for magnifying glass icon\n// :before:\n// This is a hidden element to measure the width of the company text.\n// Use transparent text color and exact font-size as the input element.\n// :after:\n// This is the tick element. Easier to style than html text.\nconst Tick = styled.span`\n display: flex;\n position: absolute;\n top: ${props => (props.theme.isMobile ? 15 : 23)}px;\n left: ${props => (props.pseudomobile === 'true' ? 20 : 50)}px;\n height: 20px;\n text-transform: uppercase;\n\n &:before {\n content: \"${props => props.company}\";\n color: transparent;\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n max-width: ${props => props.maxwidth}px;\n }\n\n &:after {\n content: \"${props => props.code}\";\n text-align: center;\n vertical-align: middle;\n width: ${props => (props.pseudomobile === 'true' ? 54 : 64)}px;\n margin-left: ${props => (props.pseudomobile === 'true' ? 2 : 5)}px;\n background-color: ${props => props.theme.secondaryColor};\n font-size: 11px;\n line-height: 20px;\n border-radius: 2px;\n color: white;\n }\n`;\n\nexport default function StockTick() {\n const {\n state: {\n value, pseudoMobile, width,\n },\n } = React.useContext(SearchBarContext);\n\n const maxWidth = width - (pseudoMobile ? 40 : 146) // original input box width\n - (pseudoMobile ? 20 : 50) // minus left padding\n - ((pseudoMobile ? 54 : 64) + 60); // minus right padding\n\n return (\n \n {value.length ? 'clear' : '\\u00d7' }\n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { useSpring, animated } from 'react-spring';\nimport SearchBarContext, { useLockFocus } from './context';\n\nconst Button = styled(animated.button)`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 14px;\n height: 38px;\n ${props => (props.pseudomobile === 'true' ? `\n width: 40px;\n position: relative;\n top: 3px;\n border-width: 0;\n ` : `\n border-width: 1px;\n border-style: solid;\n border-top-color: transparent;\n border-left-color: transparent;\n border-right-color: transparent;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n width: 118px;\n `)};\n`;\n\nconst Icon = styled.span`\n font-weight: 900;\n position: relative;\n top: 1px;\n color: ${props => ((props.theme.isMobile || props.expanded) ? '#fff' : props.theme.secondaryColor)};\n`;\n\nconst toRGBA = (rgbString, alpha) => rgbString.replace('rgb(', 'rgba(').replace(')', `, ${alpha})`);\n\nexport default function SearchLivewireButton() {\n const {\n state: {\n expanded, value, pseudoMobile,\n },\n dispatch,\n } = React.useContext(SearchBarContext);\n // These are in \"rgb(x, y, z)\" format.\n const {\n primaryColor, secondaryColor,\n } = React.useContext(ThemeContext);\n\n const {\n alpha, radius, borderBottomColor, color,\n } = useSpring({\n alpha: expanded ? toRGBA(primaryColor, 1) : toRGBA(primaryColor, 0),\n radius: expanded ? 4 : 0,\n borderBottomColor: expanded ? primaryColor : secondaryColor,\n color: expanded ? '#ffffff' : secondaryColor,\n });\n\n const onClicked = e => {\n e && e.preventDefault();\n if (!expanded) {\n dispatch({ type: 'expand', payload: true });\n } else if (value.length) {\n dispatch({ type: 'search' });\n }\n };\n\n return (\n `${v}px`),\n borderBottomRightRadius: radius.interpolate(v => `${v}px`),\n ...(pseudoMobile ? {} : {\n borderBottomColor,\n color,\n borderTopColor: alpha,\n borderLeftColor: alpha,\n borderRightColor: alpha,\n }),\n }}\n >\n {\n pseudoMobile\n ? `translateX(${v}px)`),\n }}\n />\n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useSpring, animated } from 'react-spring';\nimport SearchBarContext, { useLockFocus } from './context';\nimport QueryHint from './result-box-elements/query-hint';\nimport RecentSearches from './result-box-elements/recent-searches';\nimport SuggestedSearches from './result-box-elements/suggested-searches';\n\nconst lineHeight = 28;\nconst pad = 20;\n\nconst Container = styled(animated.div)`\n cursor: default;\n background-color: #ffffff;\n border-radius: 4px;\n position: relative;\n top: ${props => (props.theme.isMobile ? '-4px' : '-8px')};\n box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);\n overflow: hidden;\n line-height: ${lineHeight}px;\n`;\n\nconst getHeight = (inputFocus, showRecent, rsearch, showSuggestion, suggestions, value) => {\n if (!inputFocus) {\n return 0;\n }\n let lines = 0;\n if (_.get(value, 'length')) {\n lines += 1;\n }\n if (showRecent && rsearch.length) {\n lines += rsearch.length + 1;\n }\n if (showSuggestion && suggestions.length) {\n lines += suggestions.length + 1;\n }\n const height = 2 * pad + lines * lineHeight;\n return height;\n};\n\nconst getWidth = (exp, w, psm) => (exp ? (w - (psm ? 0 : lineHeight)) : 0);\n\nexport default function ResultBox() {\n const {\n state: {\n showRecent, showSuggestion, rsearch, suggestions,\n inputFocus, value, expanded, width, pseudoMobile,\n query, caret,\n },\n dispatch,\n } = React.useContext(SearchBarContext);\n const { h, w, padding } = useSpring({\n h: getHeight(inputFocus, showRecent, rsearch, showSuggestion, suggestions, value),\n w: getWidth(expanded, width, pseudoMobile),\n padding: inputFocus ? `${pad}px` : '0px',\n });\n\n // eslint-disable-next-line complexity\n React.useEffect(() => {\n const len = rsearch.length + suggestions.length;\n if (len && caret >= 0 && caret < len) {\n let item;\n if (rsearch.length && caret >= 0 && caret < rsearch.length) {\n item = rsearch[caret];\n }\n const icaret = caret - rsearch.length;\n if (suggestions.length && icaret >= 0 && icaret < suggestions.length) {\n item = suggestions[icaret];\n }\n if (item) {\n if (item.type) {\n dispatch({ type: 'setValue', payload: item.suggested_term || item.query });\n dispatch({ type: 'setSuggestedSearchItem', payload: item });\n } else {\n dispatch({ type: 'setValue', payload: item.query });\n dispatch({ type: 'setSuggestedSearchItem', payload: null });\n }\n }\n }\n }, [caret, rsearch, suggestions, dispatch]);\n\n return (\n `${v}px`),\n width: w.interpolate(v => `${v}px`),\n }}\n >\n {!!(expanded && _.get(query, 'length')) && \n Search for \n \n {'\\u201c'}\n {value} \n {'\\u201d'}\n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport SearchBarContext from '../context';\nimport RecentEntry from './recent-entry';\nimport { saveEvent } from '../../../../../shared/search-event';\n\nconst Title = styled.h5`\n text-transform: uppercase;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 14px;\n color: ${props => props.theme.primaryColor};\n margin: 0;\n`;\n\nconst Line = styled.div`\n text-transform: none;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 14px;\n margin: 0 -1em;\n padding: 0 1em;\n border-radius: 4px;\n color: ${props => props.theme.secondaryColor};\n background-color: ${props => (props.highlight ? props.theme.secondaryColorLight : 'white')};\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nexport default function RecentSearches() {\n const {\n state: {\n caret, rsearch, highlightedArea,\n },\n dispatch,\n } = React.useContext(SearchBarContext);\n const [highlight, setHighlight] = React.useState(caret);\n\n React.useEffect(() => setHighlight(caret), [caret]);\n\n React.useEffect(() => {\n if (highlight !== -1 && caret < rsearch.length) {\n dispatch({ type: 'setHighlightedArea', payload: 'recent' });\n }\n }, [highlight, caret, dispatch, rsearch.length]);\n\n React.useEffect(() => {\n if (highlightedArea === 'suggested') {\n setHighlight(-1);\n }\n }, [highlightedArea]);\n\n const performSearch = q => e => {\n e.preventDefault();\n saveEvent(q).finally(() => {\n if (q.type) {\n dispatch({ type: 'setSuggestedSearchItem', payload: q });\n }\n dispatch({ type: 'search', payload: q.query });\n });\n };\n\n return (\n \n recent searches \n {rsearch.map((d, i) => (\n setHighlight(i)}\n >\n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SearchBarContext from '../context';\nimport { usePutRemoveRecentSearches } from '../../../../../services/search/recent-service';\n\nconst Recent = styled.span`\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: ${props => props.width}px;\n padding-right: ${props => (props.theme.isMobile ? 2 : 5)}px;\n\n & > strong {\n float: right;\n position: relative;\n top: 4px;\n margin-left: ${props => (props.theme.isMobile ? 2 : 5)}px;\n display: inline-block;\n text-align: center;\n vertical-align: middle;\n width: ${props => (props.theme.isMobile ? 54 : 64)}px;\n height: 20px;\n background-color: ${props => props.theme.secondaryColor};\n font-size: 11px;\n line-height: 20px;\n border-radius: 2px;\n color: white;\n text-transform: uppercase;\n }\n`;\n\n// search bar width, minus 2 horizontal paddings, minus the width of `Company`\nconst getWidth = w => w - 20 * 2 - 28;\n\n// eslint-disable-next-line camelcase\nexport default function RecentEntry({ id, decorated_query }) {\n const { state: { rsearch, width }, dispatch } = React.useContext(SearchBarContext);\n const [, remove] = usePutRemoveRecentSearches();\n\n const removeEntry = React.useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n remove(id).then(() => {\n dispatch({\n type: 'setRecentSearchResult',\n payload: _.filter(rsearch, d => d.id !== id),\n });\n dispatch({ type: 'setValue', payload: '' });\n });\n }, [remove, id, dispatch, rsearch]);\n\n return (\n \n \n );\n}\n\nRecentEntry.propTypes = {\n id: PropTypes.number.isRequired,\n decorated_query: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport SearchBarContext from '../context';\nimport SuggestionEntry from './suggestion-entry';\nimport { saveEvent } from '../../../../../shared/search-event';\n\nconst fontSize = 14;\n\nconst Title = styled.h5`\n text-transform: uppercase;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: ${fontSize}px;\n color: ${props => props.theme.primaryColor};\n margin: 0;\n`;\n\nconst Line = styled.div`\n text-transform: none;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: ${fontSize}px;\n margin: 0 -1em;\n padding: 0 1em;\n border-radius: 4px;\n color: ${props => props.theme.secondaryColor};\n background-color: ${props => (props.highlight ? props.theme.secondaryColorLight : 'white')};\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nexport default function SuggestedSearches() {\n const {\n state: {\n caret, suggestions, rsearch, highlightedArea,\n },\n dispatch,\n } = React.useContext(SearchBarContext);\n\n const [highlight, setHighlight] = React.useState(caret - rsearch.length);\n\n React.useEffect(() => setHighlight(caret - rsearch.length), [caret, rsearch]);\n\n React.useEffect(() => {\n if (highlight !== -1 && caret >= rsearch.length) {\n dispatch({ type: 'setHighlightedArea', payload: 'suggested' });\n }\n }, [highlight, caret, rsearch.length, dispatch]);\n\n React.useEffect(() => {\n if (highlightedArea === 'recent') {\n setHighlight(-1);\n }\n }, [highlightedArea]);\n\n const performSearch = d => e => {\n e.preventDefault();\n saveEvent(d).finally(() => {\n dispatch({ type: 'setSuggestedSearchItem', payload: d });\n dispatch({ type: 'search', payload: d.suggested_term });\n });\n };\n\n return (\n \n suggested searches \n {suggestions.map((d, i) => (\n setHighlight(i)}\n >\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SearchBarContext from '../context';\n\nconst Suggestion = styled.span`\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: ${props => props.width}px;\n padding-right: ${props => (props.theme.isMobile ? 2 : 5)}px;\n\n & em {\n color: ${props => props.theme.bodyColor};\n font-style: normal;\n }\n\n & > strong {\n float: right;\n position: relative;\n top: 4px;\n margin-left: ${props => (props.theme.isMobile ? 2 : 5)}px;\n display: inline-block;\n text-align: center;\n vertical-align: middle;\n width: ${props => (props.theme.isMobile ? 54 : 64)}px;\n height: 20px;\n background-color: ${props => props.theme.secondaryColor};\n font-size: 11px;\n line-height: 20px;\n border-radius: 2px;\n color: white;\n }\n`;\n\nconst Type = styled.span`\n text-transform: capitalize;\n white-space: nowrap;\n`;\n\n// search bar width, minus 2 horizontal paddings, minus the width of `remove`\nconst getWidth = w => w - 20 * 2 - 28;\n\nexport default function SuggestionEntry({ highlight, type }) {\n const { state: { width } } = React.useContext(SearchBarContext);\n\n return (\n \n {type} \n \n );\n}\n\nSuggestionEntry.propTypes = {\n highlight: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useTrail, animated } from 'react-spring';\nimport MobileNavbarContext from '../mobile-navbar-context';\nimport ExpandableMenu from './expandable-menu';\nimport MenusContext from './menus-context';\n\nconst reducer = (state, { type, payload }) => {\n switch (type) {\n // We only allow one expanded menu item at a time.\n case 'setExpandedMenu':\n return { ...state, expandedMenu: payload };\n default:\n throw new Error();\n }\n};\n\nfunction getRealMenus(arr) {\n return _(arr)\n .map((action, text) => ({ text, action }))\n .filter(({ action }) => !(_.isArray(action) && !action.length))\n .value();\n}\n\nexport default function Menus(props) {\n const [state, dispatch] = React.useReducer(reducer, { expandedMenu: null });\n const { state: { menus } } = React.useContext(MobileNavbarContext);\n const [displayableMenus, setDisplayableMenus] = React.useState(getRealMenus(menus));\n const trail = useTrail(displayableMenus.length, {\n opacity: 1,\n transform: 'translateY(-50%)',\n from: {\n opacity: 0,\n transform: 'translate(0)',\n },\n config: { mass: 1, tension: 500, friction: 30 },\n ref: props.trailRef,\n });\n\n React.useEffect(() => {\n setDisplayableMenus(getRealMenus(menus));\n }, [menus]);\n\n return (\n \n \n );\n}\n\nMenus.propTypes = {\n trailRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n current: PropTypes.instanceOf(Element),\n }),\n ]).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n useSpring, useTrail, useChain, animated, config,\n} from 'react-spring';\nimport MenusContext from './menus-context';\n\nexport default function ExpandableMenu(props) {\n const { state, dispatch } = React.useContext(MenusContext);\n const { text, action } = props;\n const [expanded, setExpanded] = React.useState(false);\n const fadeRef = React.useRef();\n const spring = useSpring({\n opacity: expanded ? 1 : 0,\n config: config.slow,\n ref: fadeRef,\n });\n const trailRef = React.useRef();\n const trail = useTrail(action.length, {\n opacity: 1,\n tranform: 'translateY(-50%)',\n config: config.slow,\n ref: trailRef,\n });\n\n useChain([fadeRef, trailRef]);\n\n React.useEffect(() => {\n if (state.expandedMenu && (state.expandedMenu !== text)) {\n setExpanded(false);\n }\n }, [state.expandedMenu, text]);\n\n function onToggleExpandable(e) {\n e.preventDefault();\n setExpanded(!expanded);\n dispatch({ type: 'setExpandedMenu', payload: text });\n }\n\n return (\n \n \n {text}\n ◢\n \n {expanded && (\n \n {trail.map((style, index) => {\n const { text: t, anchor } = action[index];\n return (\n {t} \n );\n })}\n \n )}\n \n );\n}\n\nconst anchorPropType = PropTypes.exact({\n href: PropTypes.string.isRequired,\n target: PropTypes.string,\n 'data-method': PropTypes.string,\n});\n\nExpandableMenu.propTypes = {\n text: PropTypes.string.isRequired,\n action: PropTypes.arrayOf(PropTypes.exact({\n text: PropTypes.string.isRequired,\n anchor: anchorPropType.isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport styled from 'styled-components';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Loading from '../../../shared/loading';\nimport showModal from './show-modal';\nimport { useForm } from '../../../shared/form-validator-hook';\nimport useRegister from '../../shared/sign-up/hooks';\nimport FirstName from '../../shared/sign-up/first-name';\nimport LastName from '../../shared/sign-up/last-name';\nimport Email from '../../shared/sign-up/email';\nimport Password from '../../shared/sign-up/password';\nimport ConfirmPassword from '../../shared/sign-up/confirm-password';\nimport TCP from '../../shared/sign-up/tcp';\nimport { SmallButton } from './styles';\n\nconst Input = styled.input`\n border-radius: 3px;\n border: 1px solid ${props => props.theme.secondaryColorLight};\n height: 40px;\n line-height: 40px;\n padding-left: 10px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 11px;\n color: ${props => props.theme.bodyColor};\n\n\n &::placeholder {\n color: ${props => props.theme.secondaryColor};\n text-transform: capitalize;\n }\n`;\n\n/* stylelint-disable selector-type-no-unknown */\nconst HelpBlock = styled.label`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 11px;\n color: ${props => props.theme.errorColor};\n\n ${Input}:not([data-error=\"show\"]) + & {\n display: none;\n }\n`;\n/* stylelint-enable selector-type-no-unknown */\n\nconst Checkbox = styled.input`\n width: 10px;\n margin-right: 8px;\n`;\n\nconst Label = styled.label`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 11px;\n line-height: 14px;\n`;\n\nconst Button = styled(SmallButton)`\n width: 100%;\n`;\n\nconst H4 = styled.h4`\n display: flex;\n flex-direction: column;\n\n > span {\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 25px;\n line-height: 25px;\n text-align: left;\n }\n`;\n\nconst ReflowContainer = styled.section`\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n width: 100%;\n`;\n\nconst InputContainer = styled.div`\n height: 40px;\n margin: 0 0 20px 0;\n flex-grow: 0;\n flex-shrink: ${props => (props.size === 'half' ? 0.5 : 1)};\n flex-basis: ${props => (props.size === 'half' ? '188px' : '410px')};\n\n &:nth-child(1) {\n margin-right: 5px;\n }\n\n &:nth-child(2) {\n margin-left: 5px;\n }\n\n &:last-child {\n display: flex;\n }\n\n > ${Input} {\n width: 100%;\n }\n`;\n\nconst Hint = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 11px;\n line-height: 14px;\n`;\n\nconst ErrorMessage = styled(HelpBlock)`\n &&&& {\n display: inline;\n }\n`;\n\nexport default function SignUpModal({ visible, email }) {\n const loadingRef = React.useRef();\n const [prefill, setPrefill] = React.useState(null);\n const [focus, setFocus] = React.useState(false);\n const {\n values, useInput, isValid, errors,\n } = useForm({\n firstName: '',\n lastName: '',\n email: '',\n password: '',\n passwordVerification: '',\n tc: false,\n });\n const {\n isEmailUnique, isLoading, start,\n } = useRegister({\n doSubscription: false,\n data: values,\n onEmailNotUnique: () => _.get(loadingRef, 'current') && loadingRef.current.stop(),\n onComplete: () => {\n _.get(loadingRef, 'current') && loadingRef.current.stop();\n window.location.reload();\n },\n });\n\n React.useEffect(() => {\n if (isLoading) {\n _.get(loadingRef, 'current') && loadingRef.current.start();\n }\n }, [isLoading]);\n\n const submit = e => {\n e.preventDefault();\n start();\n };\n\n const onShow = () => {\n if (_.get(email, 'length')) {\n setPrefill(email);\n }\n setFocus(true);\n };\n\n const commonProps = {\n Field: Input,\n Err: HelpBlock,\n useInput,\n errors,\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n Email address is already in use \n )}\n \n \n \n \n \n \n \n \n \n \n \n join free\n \n \n \n \n \n {'Already a member? '}\n Sign in here.\n \n \n \n \n \n );\n}\n\nSignUpModal.propTypes = {\n visible: PropTypes.bool.isRequired,\n email: PropTypes.string,\n};\n\nSignUpModal.defaultProps = {\n email: null,\n};\n","import _ from 'lodash';\nimport postal from 'postal';\n\nexport default function showModal(type, data) {\n const isValidType = _.indexOf(['sign-up', 'sign-in'], type) >= 0;\n return event => {\n event && event.preventDefault();\n if (isValidType) {\n postal.publish({\n channel: `commands.${type}`,\n topic: 'present',\n ...(data ? { data } : {}),\n });\n }\n };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Page = styled.div`\n margin-left: 3vw;\n ${props => props.theme.isXLarge && `\n margin-left: 5vw;\n `};\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n`;\n\n// This will be a polymorphic anchor element.\nconst Header = styled.span`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 12px;\n margin-bottom: 34px;\n text-transform: uppercase;\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Link = styled.a`\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 13px;\n\n &:not(:first-child) {\n margin-bottom: 15px;\n }\n`;\n\nexport default function SiteMapDesktop(props) {\n const { siteMap } = props;\n return (\n \n {siteMap.map(({ name, sections, url }) => (\n \n {url ? {name} : {name} }\n {sections.map(s => {s.name})}\n \n ))}\n \n );\n}\n\nSiteMapDesktop.propTypes = {\n siteMap: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string,\n sections: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })).isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport Accordion from 'react-bootstrap/Accordion';\nimport Card from 'react-bootstrap/Card';\n\nconst SAccordion = styled(Accordion)`\n width: 100%;\n display: flex;\n justify-content: space-between;\n margin-top: 34px;\n color: ${props => props.theme.secondaryColor};\n`;\n\nconst HalfWidth = styled.div`\n flex-basis: 50%;\n`;\n\nconst SCard = styled(Card)`\n margin-bottom: 33px;\n &:last-child {\n margin-bottom: 0;\n }\n`;\n\nconst SHeader = styled(Card.Header)`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 14px;\n line-height: 14px;\n text-transform: uppercase;\n\n &:after {\n content: \"\\\\25e2\";\n font-size: 7px;\n margin-left: 6px;\n }\n\n &.expanded:after {\n content: \"\\\\25e5\";\n }\n`;\n\nconst SCollapse = styled(Accordion.Collapse)`\n &:not(.show) {\n display: none;\n }\n`;\n\nconst SBody = styled(Card.Body)`\n display: flex;\n flex-direction: column;\n margin-top: 6px;\n`;\n\nconst Link = styled.a`\n color: ${props => props.theme.secondaryColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 14px;\n margin: 33px 0 5px 0;\n`;\n\nexport default function SiteMapMobile(props) {\n const { siteMap } = props;\n const [opened, setOpened] = React.useState(-1);\n\n /* eslint-disable react/prop-types */\n const buildCard = offset => ({ name, sections }, i) => {\n const j = i + offset;\n return (\n \n setOpened(opened === j ? -1 : j)}\n className={classNames({ expanded: opened === j })}\n >\n {name}\n \n \n \n {sections.map(s => {s.name})}\n \n \n \n );\n };\n /* eslint-enable react/prop-types */\n\n const half = siteMap.length / 2;\n\n return (\n \n {_.take(siteMap, half).map(buildCard(0))} \n {_.takeRight(siteMap, siteMap.length - half).map(buildCard(half))} \n \n );\n}\n\nSiteMapMobile.propTypes = {\n siteMap: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n sections: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })).isRequired,\n })).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n line-height: 40px;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Div = styled.div`\n position: relative;\n max-width: 1180px;\n width: 82vw;\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n line-height: 25px;\n text-align: left;\n\n ol > li::marker {\n font-weight: ${props => props.theme.fontWeightBold}; \n }\n`;\n\nexport const Headline = styled(Div)`\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport default function Content() {\n return (\n \n {/* eslint-disable max-len */}\n {/* eslint react/jsx-one-expression-per-line: 0 */}\n Updated 9 Feb 2023 \n Livewire Markets – Editorial Content Policy \n What’s in it for the reader? \n Twice-daily sub-editing \n Continual improvement \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\nimport { SectionName, PaddedContainer } from '../common/styles';\n\nconst heroLandscapeAspectRatio = 2882 / 1416;\nconst heroPortraitAspectRatio = 774 / 992;\nconst sectionNamePositionRatio = 183 / 496;\nconst containerHeightVWDesktop = 100 / heroLandscapeAspectRatio;\nconst containerHeightVWMobile = 100 / heroPortraitAspectRatio;\n\nconst Container = styled.div`\n margin-top: ${props => (props.theme.isMobile ? '0' : '-70px')};\n position: relative;\n top: 0;\n width: 100vw;\n height: ${props => (props.theme.isMobile\n ? `${containerHeightVWMobile}vw`\n : `calc(${containerHeightVWDesktop}vw - 130px)`\n )};\n display: flex;\n flex-direction: column;\n align-items: center;\n ${props => (props.theme.isMobile && `\n border-bottom-right-radius: 150px;\n overflow: hidden;\n `)};\n`;\n\nconst Image = styled(Img)`\n position: absolute;\n width: 100vw;\n z-index: 100;\n ${props => (!props.theme.isMobile && `\n margin-top: -130px;\n `)};\n`;\n\nconst Intro = styled(PaddedContainer)`\n z-index: 150;\n ${props => (props.theme.isMobile ? `\n position: relative;\n height: ${containerHeightVWMobile}vw;\n display: flex;\n flex-direction: column;\n padding-top: ${containerHeightVWMobile * sectionNamePositionRatio}vw;\n ` : `\n position: absolute;\n margin-top: 12%;\n margin-left: -7px;\n `)};\n`;\n\nconst Desc = styled.p`\n position: relative;\n ${props => (!props.theme.isMobile && `\n width: 630px;\n `)};\n margin-top: 20px;\n color: white;\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: ${props => (props.theme.isMobile ? 35 : 44)}px;\n line-height: ${props => (props.theme.isMobile ? 46 : 56)}px;\n`;\n\nexport default function Hero() {\n const {\n hero, heroPortrait, isMobile,\n } = React.useContext(ThemeContext);\n\n return (\n \n \n features \n Content to help discover, evaluate and monitor your next investment. \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseDesc, BaseTitle, BaseContainer, BaseImage,\n} from './styles';\n\nconst vPadding = 140;\nconst Container = styled(BaseContainer)`\n margin-top: ${vPadding + 8}px;\n ${props => (!props.theme.isMobile && `\n margin-bottom: ${vPadding + 8}px;\n `)};\n`;\n\nconst Title = styled(BaseTitle)`\n max-width: 493px;\n`;\n\nconst Description = styled(BaseDesc)`\n margin-top: 30px;\n`;\n\nexport default function TrendingContent() {\n const { trending, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#trending', vPadding);\n\n return (\n \n \n Features \n Receive trending content direct to your inbox \n \n We curate the best of the website each day and send it to you in a single email so you\n can stay dialled in to what the experts are saying about the markets.\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseDesc, BaseTitle, BaseContainer, BaseImage,\n} from './styles';\n\nconst vPadding = 90;\nconst Container = styled(BaseContainer)`\n margin-top: ${vPadding + 8}px;\n ${props => (!props.theme.isMobile && `\n margin-bottom: ${vPadding + 8}px;\n `)};\n`;\n\nconst SImage = styled(BaseImage)`\n ${props => (!props.theme.isMobile && `\n max-width: 420px;\n max-height: 403px;\n `)};\n`;\n\nexport default function FollowTrustedFunds() {\n const { follow, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#follow', vPadding);\n\n return (\n \n \n \n \n Features \n Follow your trusted fund managers and never miss their ideas \n \n If you’re pressed for time but value the ideas of contributors you trust, Following is a\n great way to stay up to date with the market. We'll send you an email when\n contributors in your Followed community publish a wire, you can even choose how frequently\n you receive these emails.\n \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseDesc, BaseTitle, BaseContainer, BaseImage,\n} from './styles';\n\nconst vPadding = 200;\nconst Container = styled(BaseContainer)`\n margin-top: ${vPadding + 8}px;\n ${props => (!props.theme.isMobile && `\n margin-bottom: ${vPadding + 8}px;\n `)};\n`;\n\nexport default function WrapUpEmails() {\n const { wrapUp, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#wrapup', vPadding);\n\n return (\n \n \n Features \n Wrap Up Emails: Unclutter your inbox \n \n Wrap Up emails consolidate a full days, weeks or months worth of your followed\n contributors wires into a single beautifully organised email, ensuring you'll never\n miss their valuable insights. You also have full control on how frequently you receive\n your notifications; immediately, daily, weekly or monthly, it's up to you.\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseDesc, BaseTitle, BaseContainer, BaseImage,\n} from './styles';\n\nconst vPadding = 110;\nconst Container = styled(BaseContainer)`\n margin-top: ${vPadding + 8}px;\n ${props => (!props.theme.isMobile && `\n margin-bottom: ${vPadding + 8}px;\n `)};\n`;\n\nconst SImage = styled(BaseImage)`\n ${props => (!props.theme.isMobile && `\n max-width: 528px;\n max-height: 478px;\n `)};\n`;\n\nexport default function ReachOut() {\n const { reachOut, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#enquiries', vPadding);\n\n return (\n \n \n \n \n Features \n Reach out directly to contributors you're impressed with \n \n If you like the way our approved contributors think, initiate contact with our Contact\n Button to quickly receive performance reports, product disclosure statements or even\n arrange a meeting with a fund manager.\n \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\nimport { PaddedContainer } from '../common/styles';\nimport dt, { useIsXXLarge } from '../../../shared/theme';\n\nconst heroPortraitAspectRatio = 774 / 992;\nconst heroWidthMobile = 100;\nconst heroHeightDesktop = 571;\nconst heroHeightMobile = heroWidthMobile / heroPortraitAspectRatio;\n\nconst Top = styled.div`\n margin-top: ${props => (props.theme.isMobile ? '0' : '-70px')};\n height: unset;\n width: 100vw;\n background: linear-gradient(to right, white 70% , ${props => props.theme.secondaryColorLight} 70%);\n\n ${props => (props.theme.isMobile && `\n height: ${heroHeightMobile}vw;\n `)};\n\n ${props => dt(props).theme.isLarge && `\n height: ${heroHeightDesktop}px;\n `};\n\n > div {\n background-size: contain;\n background-repeat: no-repeat;\n background-position: right;\n }\n`;\nconst Container = styled(PaddedContainer)`\n position: relative;\n top: 0;\n display: flex;\n flex-direction: column;\n height: ${props => (props.theme.isMobile ? `${heroHeightMobile}vw` : `${heroHeightDesktop}px`)};\n z-index: 150;\n justify-content: start;\n`;\n\nconst Desc = styled.p`\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n color: ${props => props.theme.bodyColor};\n ${props => (props.theme.isMobile ? `\n margin-top: 67px;\n width: 100%;\n font-size: 35px;\n line-height: 46px;\n ` : `\n margin: 200px 0 36px 0;\n width: 604px;\n font-size: 44px;\n line-height: 56px;\n `)};\n`;\n\n// The round corner on the bottom right is not exactly a circle corner.\n// The area is out of the view width by 44px on the 1440px design.\nconst Bottom = styled.div`\n width: unset;\n border-bottom-right-radius: 200px;\n display: flex;\n justify-content: center;\n position: relative;\n top: -1px;\n background-color: ${props => props.theme.secondaryColorLight};\n padding-top: 20px;\n ${props => (props.theme.isMobile ? `\n padding: 32px 0 110px 0;\n width: calc(100vw + 44px);\n margin-left: -22px;\n ` : `\n flex-wrap: wrap;\n `)};\n\n ${props => dt(props).theme.isLarge && `\n margin-left: -22px;\n padding: 40px 44px 50px 0;\n `};\n\n > div {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n > div {\n display: flex;\n flex-direction: column;\n\n ${props => dt(props).theme.isXLarge && `\n flex-direction: row;\n `};\n }\n } \n`;\n\nconst Title = styled.span`\n text-align: center;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 20px;\n text-transform: uppercase;\n line-height: 20px;\n margin-bottom: ${props => (props.theme.isMobile ? 37 : 28)}px;\n`;\n\nconst Media = styled(Img)`\n width: 150px;\n height: 44px;\n`;\n\nconst Space = styled.span`\n display: block;\n height: ${props => (props.theme.isMobile ? 55 : 44)}px;\n max-width: 86px;\n width: 6vw;\n`;\n\nexport default function Hero() {\n const {\n hero, heroPortrait, media,\n } = React.useContext(ThemeContext);\n\n const isXXLarge = useIsXXLarge();\n\n return (\n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { PaddedContainer } from '../common/styles';\n\nconst Container = styled(PaddedContainer)`\n padding: ${props => (props.theme.isXLarge ? '65px 0 0 0' : '80px 0 68px 0')};\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nconst Title = styled.span`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 20px;\n line-height: 20px;\n text-transform: uppercase;\n`;\n\nconst Desc = styled.p`\n text-align: center;\n margin: 0;\n margin-top: 24px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightRegular};\n ${props => (props.theme.isMobile ? `\n font-size: 35px;\n line-height: 36px;\n ` : `\n font-size: 40px;\n line-height: 42px;\n `)};\n`;\n\nexport default function Welcome() {\n return (\n \n welcome to livewire \n Livewire is Australia’s #1 source of investment ideas \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\nimport Plx from 'react-plx';\nimport {\n BigButton, SectionName, SectionTitle, PaddedContainer, buildPlxData,\n} from '../common/styles';\nimport dt, { useIsXLarge } from '../../../shared/theme';\n\nconst vPadding = 140;\nconst Container = styled(PaddedContainer)`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${props => dt(props).theme.isXLarge && `\n flex-direction: row;\n align-items: flex-start;\n padding-top: ${vPadding + 8}px;\n padding-bottom: ${vPadding + 8}px;\n justify-content: space-between;\n `}\n`;\n\nconst Section = styled.div`\n display: flex;\n flex-direction: column;\n align-items: start;\n ${props => (props.theme.isMobile && `\n width: 100%;\n `)};\n\n ${props => dt(props).theme.isXLarge && `\n width: 31.25vw;\n max-width: 450px;\n `};\n`;\n\nconst Title = styled(SectionTitle)`\n margin: 20px 0 24px;\n`;\n\nconst Desc = styled.p`\n margin: 0;\n margin-bottom: 32px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 20px;\n line-height: 25px;\n`;\n\nconst Button = styled(BigButton)`\n width: 212px;\n`;\n\nconst Image = styled(Img)`\n ${props => (dt(props).theme.isXLarge ? `\n width: 560px;\n height: 374px;\n ` : `\n width: 100%;\n margin-top: 48px;\n `)};\n`;\n\nfunction redirectToSolutions(e) {\n if (e) {\n e.preventDefault();\n }\n window.location = '/company/solutions';\n}\n\nexport default function Purpose() {\n const { purpose } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#purpose-container', vPadding);\n\n const isXLarge = useIsXLarge();\n\n return (\n \n \n \n purpose \n Livewire is changing the way investors discover investments \n \n We are levelling the playing field by giving all investors access to\n high-value investment insights, commentary and analysis from\n Australia’s leading money managers.\n \n \n \n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { BigButton, SectionTitle } from '../common/styles';\nimport Profile from './profile';\n\nconst Container = styled.div`\n border-radius: ${props => (props.theme.isMobile ? 150 : 200)}px 0;\n background-color: ${props => props.theme.secondaryColorLight};\n display: flex;\n flex-direction: column;\n align-items: center;\n ${props => (props.theme.isMobile ? `\n padding: 60px 20px 100px 20px;\n ` : `\n height: 708px;\n `)};\n`;\n\nconst Title = styled(SectionTitle)`\n ${props => (props.theme.isMobile ? `\n text-align: center;\n ` : `\n margin-top: 104px;\n `)};\n margin-bottom: 24px;\n`;\n\nconst Desc = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 20px;\n line-height: 25px;\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n max-width: 1004px;\n width: 70vw;\n `)};\n margin: 0;\n margin-bottom: 24px;\n text-align: center;\n`;\n\nconst gradientWidth = '13vw';\nconst gradientHeight = '370px';\nconst ContributorsContainer = styled.div`\n width: 93.125vw;\n max-width: 1340px;\n display: flex;\n flex-direction: row;\n margin: 0 -${gradientWidth};\n overflow: hidden;\n\n &:hover {\n > div {\n animation-play-state: paused;\n }\n }\n`;\n\nconst GradientContainer = styled.div`\n max-width: 1340px;\n width: 93.125vw;\n height: ${gradientHeight};\n display: flex;\n justify-content: space-between;\n\n &:before {\n order: -1;\n background-image: linear-gradient(\n 90deg,\n ${props => props.theme.secondaryColorLight},\n ${props => props.theme.secondaryColorLight} 50%,\n transparent);\n }\n\n > ${ContributorsContainer} {\n order: 0;\n z-index: 100;\n }\n\n &:after {\n order: 1;\n background-image: linear-gradient(\n 270deg,\n ${props => props.theme.secondaryColorLight},\n ${props => props.theme.secondaryColorLight} 50%,\n transparent);\n border-bottom-right-radius: 50px;\n }\n\n &:after, &:before {\n z-index: 150;\n content: \"\";\n width: ${gradientWidth};\n height: ${gradientHeight};\n max-width: 188px;\n display: block;\n }\n`;\n\nconst AlignLeft = styled.div`\n display: flex;\n justify-content: start;\n overflow: hidden;\n`;\n\nconst AlignRight = styled(AlignLeft)`\n padding-left: 200px;\n`;\n\nconst AutoScrollContainer = styled.div`\n display: flex;\n\n @keyframes autoScroll {\n 100% {\n transform: translateX(-100%);\n }\n }\n animation: autoScroll 40s linear infinite;\n`;\n\nconst ContributorRow = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 60px 0;\n overflow: hidden;\n`;\n\nconst MoreButton = styled(BigButton)`\n height: 60px;\n width: 140px;\n margin: 155px 160px 0px 60px;\n padding: 0;\n background-color: ${props => props.theme.btnSecondaryBackgroundColor};\n\n &:hover {\n background-color: ${props => props.theme.btnSecondaryHoverBackgroundColor};\n }\n`;\n\nfunction gotoContributorsPage() {\n window.location = '/contributors';\n}\n\nexport default function Contributors() {\n const { contributors } = React.useContext(ThemeContext);\n\n const halfLength = contributors.length / 2;\n\n const firstRowProfiles = _.take(contributors, halfLength)\n .map(p => \n Who contributes to Livewire \n \n We showcase investment ideas, analysis and strategies from hundreds of Australia’s most\n credible fund managers and investment professionals – all on the one platform\n \n \n \n {_.times(3, index => (\n \n \n \n {firstRowProfiles}\n \n \n {secondRowProfiles}\n \n \n \n +500 MORE\n \n \n ))}\n \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\nimport Plx from 'react-plx';\nimport {\n BigButton, PaddedContainer, SectionName, SectionTitle, buildPlxData,\n} from '../common/styles';\nimport dt, { useIsXLarge } from '../../../shared/theme';\n\nconst vPadding = 140;\nconst Container = styled(PaddedContainer)`\n padding: ${vPadding + 8}px 0;\n display: flex;\n ${props => (dt(props).theme.isXLarge ? `\n align-items: start;\n justify-content: center;\n ` : `\n flex-direction: column;\n align-items: center;\n `)};\n`;\n\nconst r = 530 / 443;\nconst wDesktop = 528;\nconst wMobile = 90;\nconst Image = styled(Img)`\n ${props => (props.theme.isMobile ? `\n width: ${wMobile}vw;\n height: ${wMobile / r}vw;\n ` : `\n width: ${wDesktop}px;\n height: ${wDesktop / r}px;\n `)};\n`;\n\n// The reason we need a different sized pseudo :before shadow other than the\n// original image size, is the image irregular on shadow shape.\nconst shadowH = 400;\nconst ImageContainer = styled.div`\n ${props => (props.theme.isMobile ? `\n order: 2;\n width: ${wMobile}vw;\n height: ${wMobile / r}vw;\n ` : `\n width: ${wDesktop}px;\n height: ${wDesktop / r}px;\n margin-right: 59px;\n `)};\n\n &:before {\n z-index: 100;\n content: \"\";\n display: block;\n position: relative;\n box-shadow: 0 3px 20px ${props => props.theme.secondaryColor30Transparent};\n ${props => (props.theme.isMobile ? `\n width: ${wMobile}vw;\n height: ${shadowH * wMobile / wDesktop}vw;\n ` : `\n width: ${wDesktop}px;\n height: ${shadowH}px;\n `)};\n }\n\n & > ${Image} {\n position: relative;\n top: -${props => (props.theme.isMobile ? `${shadowH * wMobile / wDesktop}vw` : `${shadowH}px`)};\n z-index: 150;\n }\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: start;\n ${props => (dt(props).theme.isXLarge ? `\n width: 31.25vw;\n margin-left: 59px;\n max-width: 450px;\n ` : `\n width: 100%;\n margin-bottom: 40px;\n max-width: unset;\n `)};\n`;\n\nconst Name = styled(SectionName)`\n margin-bottom: 20px;\n`;\n\nconst Title = styled(SectionTitle)`\n margin-top: 0;\n margin-bottom: 20px;\n ${props => (props.theme.isMobile && `\n font-size: 30px;\n line-height: 36px;\n `)};\n`;\n\nconst Desc = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 20px;\n line-height: 25px;\n margin-top: 0;\n margin-bottom: 32px;\n`;\n\nconst Button = styled(BigButton)`\n width: 300px;\n`;\n\nfunction redirectToFeatures(e) {\n if (e) {\n e.preventDefault();\n }\n window.location = '/company/features';\n}\n\nexport default function Features() {\n const { feature } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#feature-container', vPadding);\n\n const isXLarge = useIsXLarge();\n\n return (\n \n \n \n \n \n \n \n features \n Tools to help discover, evaluate and monitor your next investment. \n \n We seek to simplify the complexities of making investment decisions.\n Our tools are designed to support your process and ensure you are fully\n informed on key financial markets.\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { PaddedContainer } from '../common/styles';\nimport Tile from './tile';\n\nconst Container = styled(PaddedContainer)`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-bottom: 138px;\n`;\n\nconst Texta = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n margin: 0;\n`;\n\nconst Title = styled(Texta)`\n font-weight: ${props => props.theme.fontWeightHeavy};\n ${props => (props.theme.isMobile ? `\n font-size: 17px;\n line-height: 17px;\n ` : `\n font-size: 20px;\n line-height: 20px;\n `)};\n margin-bottom: 20px;\n text-transform: uppercase;\n`;\n\nconst Desc = styled(Texta)`\n font-weight: ${props => props.theme.fontWeightBook};\n ${props => (props.theme.isMobile ? `\n font-size: 35px;\n line-height: 36px;\n text-align: center;\n ` : `\n font-size: 40px;\n line-height: 41px;\n `)};\n`;\n\nconst TileContainer = styled.div`\n display: flex;\n ${props => (props.theme.isMobile ? `\n padding: 0;\n padding-top: 20px;\n flex-direction: column;\n align-items: center;\n ` : `\n padding: 73px 0 14px 0;\n justify-content: center;\n `)};\n`;\n\nexport default function Investors() {\n const { investors } = React.useContext(ThemeContext);\n const texts = [{\n name: 'chris donohoe',\n says: 'Trending on Livewire is well known to be the first email that brokers and advisors read on the way into work.',\n }, {\n name: 'geoff wilson',\n says: 'Livewire has revolutionised the distribution of high quality financial information in Australia',\n }, {\n name: 'steve johnson',\n says: 'Livewire is a new home for serious investors looking for relevant and informed insights.',\n }];\n const data = investors.map((inv, i) => ({ ...inv, ...(texts[i]) }));\n\n return (\n \n from australian fund managers \n What leading fund managers are saying about Livewire. \n \n {data.map(d => \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Img } from 'react-image';\nimport dt from '../../../shared/theme';\n\nconst Container = styled.div`\n width: 216px;\n height: 204px;\n background-color: ${props => props.theme.bodyColor};\n border: none;\n border-radius: 5px;\n box-shadow: 0 0 30px ${props => props.theme.secondaryColor30Transparent};\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0 20px;\n padding: 0 13px 13px 27px;\n\n ${props => (props.theme.isMobile && `\n margin: 20px 0;\n `)};\n\n ${props => dt(props).theme.isXLarge && `\n margin: 0 45px;\n `};\n\n &:first-child {\n margin-left: 0;\n }\n\n &:last-child {\n margin-right: 0;\n }\n`;\n\nconst Head = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: flex-end;\n`;\n\nconst popup = 16;\nconst Headshot = styled(Img)`\n width: 60px;\n height: 60px;\n box-shadow: 0 3px 20px rgba(0, 0, 0, .16);\n position: relative;\n top: -${popup}px;\n`;\n\nconst Logo = styled(Img)`\n width: 78px;\n height: 30px;\n position: relative;\n bottom: ${popup}px;\n`;\n\nconst Texta = styled.p`\n margin: 0;\n font-family: ${props => props.theme.fontFamilyBody};\n color: white;\n text-align: left;\n font-size: 14px;\n line-height: 15px;\n`;\n\nconst Name = styled(Texta)`\n text-transform: uppercase;\n font-weight: ${props => props.theme.fontWeightHeavy};\n margin-top: 6px;\n width: 100%;\n display: flex;\n flex-direction: column;\n\n &:after {\n margin-top: 12px;\n font-size: 32px;\n content: \"\\\\201c\";\n color: ${props => props.theme.primaryColor};\n order: 1;\n }\n\n &:before {\n content: \"\";\n width: 153px;\n height: 0;\n position: relative;\n top: -14px;\n left: 23px;\n border: none;\n border-bottom: 1px solid ${props => props.theme.secondaryColor};\n order: 2;\n }\n`;\n\nconst Says = styled(Texta)`\n font-weight: ${props => props.theme.fontWeightMedium};\n font-style: italic;\n`;\n\nexport default function Tile(props) {\n const {\n logo, headshot, name, says,\n } = props;\n\n return (\n \n \n {name} \n {says} \n \n );\n}\n\nTile.propTypes = {\n logo: PropTypes.string.isRequired,\n headshot: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n says: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport { SectionName, SectionTitle, BigButton } from '../common/styles';\nimport dt from '../../../shared/theme';\n\nconst Container = styled.div`\n border-radius: 0 ${props => (props.theme.isMobile ? 150 : 200)}px;\n background-image: linear-gradient(\n 180deg,\n ${props => props.theme.bodyColor},\n ${props => props.theme.secondaryColor});\n display: flex;\n flex-direction: column;\n padding: 121px 172px 128px 172px;\n ${props => dt(props).theme.isXLarge && `\n flex-direction: row;\n justify-content: center;\n\n &:after {\n order: 0;\n content: \"\";\n width: 9vw;\n max-width: 130px;\n }\n `};\n \n ${props => (props.theme.isMobile && `\n align-items: center;\n padding: 60px 20px 100px 20px;\n `)};\n`;\n\nconst TextContainer = styled.div`\n order: -1;\n display: flex;\n flex-direction: column;\n align-items: start;\n width: ${props => (dt(props).theme.isXLarge ? '31.25vw' : '100%')};\n margin-bottom: 20px;\n`;\n\nconst Name = styled(SectionName)`\n margin-bottom: 20px;\n`;\n\nconst Title = styled(SectionTitle)`\n color: white;\n width: 100%;\n margin: 0;\n margin-bottom: 20px;\n`;\n\nconst Desc = styled.p`\n width: 100%;\n margin: 0;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 19px;\n line-height: 20px;\n color: white;\n`;\n\nconst Button = styled(BigButton)`\n width: 172px;\n box-shadow: 0 3px 20px ${props => props.theme.secondaryColor30Transparent};\n ${props => (props.theme.isMobile ? `\n margin: 20px 0;\n ` : `\n margin-top: 45px;\n `)};\n`;\n\nconst Image = styled(Img)`\n order: 1;\n border-radius: 4px;\n ${props => (props.theme.isMobile && `\n width: 90vw;\n height: 90vw;\n `)} \n \n ${props => dt(props).theme.isXLarge && `\n width: 35.8vw;\n height: 32.2vw;\n `};\n`;\n\nfunction redirectToOurStory(e) {\n if (e) {\n e.preventDefault();\n }\n window.location = '/company/our_story';\n}\n\nexport default function OurStory() {\n const { ourStory } = React.useContext(ThemeContext);\n\n return (\n \n \n our story \n \n From a kitchen table to Australia’s fastest growing investment insights website\n \n \n Livewire Markets started with the idea: Investing would be so much\n simpler if we could cut through this noise to one source that provides\n all the ideas, commentary and tips we need.\n \n \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n line-height: 40px;\n height: 46px;\n max-width: 795px;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Div = styled.div`\n position: relative;\n max-width: 1180px;\n width: 82vw;\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Headline = styled(Div)`\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const Disclaimer = styled(Title)`\n border-bottom: none;\n`;\n\nexport default function Content() {\n return (\n \n {/* eslint-disable max-len */}\n {/* eslint react/jsx-one-expression-per-line: 0 */}\n Updated 25 Jan 2022 \n House Rules \n Who can contribute to Livewire? \n Who reads Livewire \n How do I publish on Livewire? \n What content can I publish on Livewire? \n Use language everyone can understand \n Links and Promotional \n Comments \n 9 top tips to get your wires read on Livewire \n \n );\n}\n","/* eslint-disable max-len */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Section = styled.div`\n max-width: 1180px;\n width: 82vw;\n font-size: 16px;\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n align-items: start;\n line-height: 25px;\n`;\n\nexport const InnerSection = styled(Section)`\n max-width: 1120px;\n`;\n\nexport const Paragraph = styled.p`\n position: relative;\n max-width: 449px;\n margin-top: 24px;\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Intro = styled(Paragraph)`\n max-width: 1180px;\n font-size: 16px;\n margin-top: 44px;\n`;\n\nexport const Headline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const SubHeadline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 18px;\n`;\n\nexport default function Content() {\n return (\n \n \n Legal\n \n\n \n At Livewire Markets and Market Index, we value transparency and want you to have\n easy access to all the essential legal information that governs our relationship. This\n applies to our valued members, readers, partners, advertisers, and anyone who visits our\n websites or engages with our services. We encourage you to review these documents carefully\n to understand your rights and obligations when using our services. If you have any\n questions, please don't hesitate to contact us.\n \n\n For Partners \n \n \n General Terms - Advertising -\n Livewire Markets\n \n \n \n \n General Terms - Advertising - Market Index\n \n \n \n Livewire General Terms\n \n\n For Everyone \n\n \n Terms & Conditions\n \n \n House Rules\n \n \n Privacy Policy\n \n \n If you have any questions, please don't hesitate to contact us.\n \n \n );\n}\n","/* eslint-disable max-len */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Section = styled.div`\n max-width: 1180px;\n width: 82vw;\n font-size: 16px;\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n align-items: start;\n line-height: 25px;\n`;\n\nexport const InnerSection = styled(Section)`\n max-width: 1120px;\n`;\n\nexport const Paragraph = styled.p`\n position: relative;\n max-width: 449px;\n margin-top: 24px;\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Intro = styled(Paragraph)`\n max-width: 1180px;\n font-size: 16px;\n margin-top: 44px;\n`;\n\nexport const Headline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const SubHeadline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 18px;\n`;\n\nconst Span10 = styled.span`\n margin-right: 10px;\n`;\n\nconst Underscore = styled.span`\n text-decoration: underline;\n`;\n\nexport default function Content() {\n return (\n \n General Terms - Advertising - Livewire Markets \n\n 1. Advertising Services \n \n Subject to these Terms, we will provide to you (Partner) the Advertising Services described in the Order Form. The Partner accepts the Order Form by: signing it (including electronically); confirming in writing (including email) that it accepts it; asking us in writing (including email) to provide the services set out in the Order Form. \n \n \n \n Each time the Partner accepts an Order Form, it creates a separate binding agreement (\n Agreement\n ) comprising that Order Form and these Terms. If there is a conflict between these documents, the Order Form prevails.\n \n \n \n You may request future Advertising Services and, where we both agree in writing (which may be by email) on the scope of those additional services and the fees, then we both agree that those additional services are also provided on these Terms without the need for us to prepare a formal Services Schedule.\n \n \n You agree to provide the proposed Partner Content for the advertisement; and to comply with the advertising restrictions in Schedule 1.\n \n \n Advertising submitted electronically must comply with our specifications. We may reject the Partner Content if it is not submitted in accordance with such specifications.\n \n \n You must promptly check any proofs of Partner Content, if we have arranged to provide you with any and notify us of any errors in the proofs or in any Partner Content that we publish for you. We do not accept any responsibility for errors in Partner Content that has been submitted electronically by you.\n \n \n We will review the Partner Content and, if we have any concerns about publishing it, we will promptly notify you and work in good faith to resolve any concerns. We retain ultimate discretion whether to publish any Partner Content and if so, its positioning and placement. We will not charge you and Fees for Partner Content that we do not publish.\n \n \n We may ask to amend Partner Content if we believe it is necessary to comply with these Terms, or any law, pre-existing agreement we have with a third party or a third party’s Intellectual Property Rights. If we amend your Partner Content, this will not reduce the Fee. We will notify you of any changes we need to make, but we will not be liable for any costs, expenses, losses or damages suffered or incurred by you arising from us amending or not publishing your Partner Content. We may mark any Partner Content as “Advertisement” whenever required by law or if we consider it appropriate, to distinguish it from other types of Content.\n \n \n You must not resell advertising space to any third party without our consent.\n \n\n 2. Fees & Cancellations \n 2.1 Fees \n \n You agree to pay the fees for the supply of the Advertising Services as described in the Order Form within 14 days of our invoice date. Once paid, Fees are not refundable.\n \n \n Invoices will be issued at the time of activity booking. Invoice dates will be set to the first day of activity. Invoices will be due 14 days from the invoice date. Invoices will be increased to take account of any taxes, including GST in Australia. If your payment is overdue, we may stop providing Advertising Services.\n \n 2.2 Cancellation \n \n You may cancel the Advertising Services by giving us written notice (which may be email) no less than 60 days before the scheduled publication date in the Order Form. This will cancel the service and the issued invoice will no longer be payable. If the invoice has been paid in advance, it will not be refunded. Treatment of cancellations received after the cancellation deadline are at the discretion of Livewire. Any cancellations after this date (less than 60 days before the scheduled publication date) may be subject to a maximum cancellation fee of 100% of the total cost of the campaign. If the advertising inventory can be replaced with another advertiser, Livewire may reduce or void the cancellation fee, and this will be handled on a case by case basis at the time of cancellation.\n \n \n Livewire reserves the right to determine the cancellation fee up to 100% of the total cost of the campaign. Advertising Services cancelled at the request of the advertiser or agency after commencement (publication date) will not be entitled to a refund of the unused portion of the campaign.\n \n\n 3. Confidentiality \n \n \n Where one of us (\n recipient\n ) receives Confidential Information from the other party (\n discloser\n ) the recipient must: (a) keep the information confidential; (b) not use, disclose or reproduce the information for any purpose other than the purposes of the Agreement; and (c) ensure that its personnel do not do, or omit to do anything, which if done or omitted to be done by it, would breach this clause. The obligations under this clause continue after the end of the Agreement.\n \n \n \n The recipient may use or disclose the information to the extent necessary to comply with any law or the requirements of a regulatory body (including a stock exchange), or to obtain professional legal, insurance or accounting advice, or for use in legal proceedings regarding the Agreement.\n \n \n This clause does not apply to Confidential Information which: (a) is in or becomes part of the public main other than through breach of an obligation of confidence; (b) was known to the recipient at the time of disclosure, unless such knowledge arose through breach of an obligation of confidence; (c) was independently developed by the recipient; or (d) is acquired from a third party who was entitled to disclose it.\n \n\n 4. Intellectual Property \n 4.1 Livewire Materials \n \n You acknowledge that: (a) Livewire and/or its licensors retains ownership of all Intellectual Property Rights in the Livewire Materials and all Intellectual Property Rights used or embodied in the software and Website.\n \n 4.2 Partner Content \n \n As between us and you, you retain ownership of all Intellectual Property Rights in Partner Content.\n \n \n Partner: (a) grants Livewire a non-exclusive, royalty-free, irrevocable, worldwide and transferable right and licence (including the right to sublicense) to use, copy, transmit, store, modify and commercially exploit the Partner Content, and distribute and communicate the Partner Content to the public, via any media channel (and this licence continues indefinitely, unless you delete the Partner Content from our Website as allowed by our policies from time to time); (b) waives any moral rights in the Partner Content; and (c) represents and warrants to Livewire that Partner has all necessary rights to grant the licences and waiver set out in this clause.\n \n \n We may use your branding, logo, trade mark and other Intellectual Property in order for us to provide the Advertising Services to you, including on the Website/s for the purposes of helping Users to navigate to the profile for your company or to promote your use of the Website.\n \n\n 5. Liability \n 5.1 Partner’s Compliance \n \n Partner must comply with the restrictions in Schedule 1 and with Relevant Laws.\n \n \n During and after the term of the Agreement, the Partner agrees to indemnify Livewire (and its directors, employees and agents) against any claims, damages, losses, liabilities, settlements and expenses (including legal costs on an indemnity basis) resulting from the Partner’s acts or omissions, including any claims based on Partner Content (including Intellectual Property infringement); or any breach of the restrictions in Schedule 1 or Relevant Laws.\n \n 5.2 Disclaimer \n \n Partner acknowledges and agrees that Livewire does not guarantee any minimum number of views, clicks, or other audience response to your Content, or any other business or financial outcome from the Advertising Services.\n \n \n Any conditions, warranties or other terms which are not stated in the Agreement, or which might be implied or incorporated into the Agreement, whether by statute, common law or otherwise, are hereby excluded to the fullest extent allowed by law, including any implied conditions, warranties or other terms as to satisfactory quality, fitness for purpose or the use of reasonable skill and care.\n \n 5.3 Limitation of Liability \n \n To the fullest extent permitted by law and regardless of the form of action, whether in contract, tort including negligence, pursuant to statute or otherwise: (a) the liability of Livewire (and any of its directors, employees, agents or related companies) relating to the supply of the Advertising Services is limited in aggregate to the Fees actually paid by the Partner in the 12 months prior to the act or omission which gave rise to the liability; and (b) Livewire (and any of its directors, employees, agents or related companies) shall have no liability for any down-time, lost profit or product, loss of data, increased cost of production, loss of client goodwill or good standing or delay in operation, lost opportunity or any other special, punitive, economic, indirect or consequential loss or damage.\n \n \n Certain rights and remedies may be available under the Competition and Consumer Act 2010 (Cth) and may not be permitted to be excluded, restricted or modified. To the extent permitted by law, the liability of Livewire for breach of any implied warranty or condition that cannot be excluded is restricted, at Livewire’s option to: (a) the re-supply of services or payment of the cost of re-supply of services; or (b) the replacement or repair of goods or payment of the cost of replacement or repair.\n \n\n 5.4 General \n \n Each party’s liability shall be reduced proportionately to the extent that the other party’s acts or omissions causes or contributes to directly or indirectly the loss or damage for which the first party is liable. Each party will not be liable for or be considered to be in breach of or default under this Agreement on account of any delay or failure to perform as required by this Agreement (except an obligation to pay the Fees) as a result of any cause or condition beyond that party’s reasonable control.\n \n\n 6. Term & Termination \n \n The Agreement begins on the date the Order Form is signed by you and continues for so long as we are providing any Advertising Services to you.\n \n \n Either party may terminate the Agreement if the other party: (a) breaches the Agreement and does not remedy the breach within one month of written notice; (b) breaches any term of the Agreement which cannot be remedied (including a breach of confidentiality or Intellectual Property Rights); or (c) becomes insolvent or bankrupt or has an administrator, receiver or liquidator appointed.\n \n\n 7. General \n \n \n Entire Agreement. \n {' '}\n The Agreement contains everything the parties have agreed in relation to the matters it deals with. These Terms apply to all the Advertising Services we provide to you. You acknowledge that you have not relied on any warranty or representation by us except for the warranties or representations specifically stated in the Agreement.\n {' '}\n Notwithstanding any acknowledgment by us of a purchase order or other document submitted by you, any term of such purchase order or other document which is inconsistent with, or which adds to the terms of this agreement, is null and void.\n \n \n \n \n Interpretation. \n {' '}\n Words like including, for example, such as or similar expressions are to be interpreted as meaning including, without limitation. If a clause or part of a clause can be read in a way that makes it illegal, unenforceable or invalid, but can also be read in a way that makes it legal, enforceable and valid, it must be read in the latter way. If any clause or part of a clause is illegal, unenforceable or invalid, that clause or part is to be treated as removed from this document, but the rest of this document is not affected.\n \n \n \n \n Variation & Waiver. \n {' '}\n A variation of the Agreement is only effective if it is in writing and signed by both of us. The fact that a party fails to do, or delays in doing, something the party is entitled to do under the Agreement, does not amount to a waiver of any obligation of, or breach of obligation by, another party. A waiver by a party is only effective if it is in writing.\n \n \n \n \n Assignment. \n {' '}\n Either of us may assign the Agreement as part of any corporate reorganization or sale of business, provided: (i) the assignee agrees in writing to assume all the obligations of the assigning party under the Agreement, and (ii) the assigning party and the assignee give the other party written notice of the assignment.\n \n \n \n \n Independent Contractors – not legal ‘partners’. \n {' '}\n The term ‘Partner’ is used in the Agreement to describe a close commercial relationship however the parties expressly agree that they are independent contractors for purposes of this agreement, and not legal partners or agents. No party has authority to bind the other party.\n \n \n \n \n Governing law. \n {' '}\n This agreement is governed by the laws of New South Wales, Australia. Each of the parties submits to the non-exclusive jurisdiction of courts with jurisdiction there.\n \n \n\n 8. Definitions \n \n \n Advertising Services\n {' '}\n means Livewire publishing Partner Content on its Website and other channels, as specified in the Order Form or otherwise agreed in writing (which may be by email).\n \n \n \n \n Content\n {' '}\n means any data, text, posts, commentary, images, audio or video material and other content that is uploaded, posted or otherwise transmitted through the Website, or provided in an advertisement by Partner.\n \n \n \n \n Intellectual Property\n {' '}\n or\n {' '}\n Intellectual Property Rights\n {' '}\n means all intellectual property rights (including, without limitation, all registered and unregistered copyright, designs, trade marks and patents) of any nature in any technology, trade secrets, domain names, User lists, User details (including, but not limited to, User emails, telephone numbers and addresses) and User-related information, software, program, inventions, designs, works and subject matter or any rights to registration of such rights existing in Australia or elsewhere and whether created before on or after the date of this agreement.\n \n \n \n \n Livewire or us\n {' '}\n means Livewire Markets Pty Ltd (ABN 92 156 343 501).\n \n \n \n \n Livewire Content\n {' '}\n means Content that is created by Livewire and uploaded, posted or otherwise transmitted through the Website by Livewire (other than Content which Livewire posts on behalf of Partner, which is Partner Content).\n \n \n \n \n Livewire Materials\n {' '}\n means materials created by or on behalf of Livewire and provided to Partner in the course of performing this agreement including the Website, documentation, software, Livewire Content, designs, customisations or modifications, reports about the performance of the Website, and other materials or reports provided as part of the Advertising Services.\n \n \n \n \n Order Form\n {' '}\n means the order form provided by Livewire to the Partner specifying the details of the Advertising Services including the Fees and Partner Content.\n \n \n \n \n Partner\n {' '}\n or\n {' '}\n you\n {' '}\n means the partner organisation identified in the Order Form.\n \n \n \n \n Partner Content\n {' '}\n means Content that is provided by you (or developed by us, which you have approved) as part of an Advertising Service.\n \n \n \n \n Relevant Laws\n {' '}\n means laws, regulations, binding undertakings or orders, or the requirements of any licensing regime which are relevant to Partner’s business, the Website or the creation and publication of financial services information, including: the Competition and Consumer Act 2010 (Cth), the Fair Trading Acts of relevant States of Australia or equivalent or other sale of goods legislation; any law of defamation, obscenity or contempt of any court, tribunal or royal commission; State or Commonwealth anti-discrimination legislation; the Privacy Act (Cth); Corporations Act 2001, the Australian Securities and Investments Commission Act 2001, ASIC Market Integrity Rules or other ASIC regulatory guides or instruments, Australian Financial Services licence terms, ASX Listing Rules or Operating Rules.\n \n \n \n \n Website\n {' '}\n means\n {' '}\n www.livewiremarkets.com\n {' '}\n or other websites as notified by Livewire from time to time.\n \n \n\n Schedule 1 – Advertising Restrictions \n \n \n You warrant to Livewire that:\n \n \n );\n}\n","/* eslint-disable max-len */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Section = styled.div`\n max-width: 1180px;\n width: 82vw;\n font-size: 16px;\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n align-items: start;\n line-height: 25px;\n`;\n\nexport const InnerSection = styled(Section)`\n max-width: 1120px;\n`;\n\nexport const Paragraph = styled.p`\n position: relative;\n max-width: 449px;\n margin-top: 24px;\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Headline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const SubHeadline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 18px;\n`;\n\nconst Span10 = styled.span`\n margin-right: 10px;\n`;\n\nconst Underscore = styled.span`\n text-decoration: underline;\n`;\n\nexport default function Content() {\n return (\n \n Livewire Partner Program - General Terms \n\n 1. About Livewire \n \n \n Livewire Markets Pty Ltd ABN 92 156 343 501 (\n Livewire\n {' '}\n or\n {' '}\n us\n ) connects investors with new investment ideas, by partnering with leading financial services firms to provide content for our readers.\n \n \n \n We give readers access to information and educational content provided by financial services professionals and companies. We do not operate under an Australian financial services licence relying on the ‘media’ exemption under section 911A(2)(eb) of the Corporations Act 2001 (Cth) in respect of any advice given.\n \n \n \n We provide content through our own website\n {' '}\n \n www.livewiremarkets.com\n \n {' '}\n (\n Website\n ), through our distribution partners such as Australian Financial Review, IRESS, Google News and Bloomberg, through direct email and through other campaigns and media channels, YouTube, LinkedIn and other forms of social media (collectively called\n {' '}\n Channels\n {' '}\n in these terms). (In these terms,\n {' '}\n Content\n {' '}\n means any data, text, posts, commentary, images, audio or video material and other content that is uploaded, posted or otherwise transmitted through our Channels.)\n \n \n \n We make it clear to our readers that any advice on our Channels is general in nature and does not take into consideration their objectives financial situation or needs.\n \n \n \n Our Terms of Use for our Website users (User Terms) are available at our Website (currently; at\n {' '}\n \n https://www.livewiremarkets.com/pages/terms_and_conditions\n \n ). These User Terms include general disclaimers. If they wish to Partners can add their own disclaimers to Content they provide.\n \n \n \n To contact us please contact your partnerships manager or email us at team@livewiremarkets.com.\n \n \n Please read these terms carefully before ordering any services from us.\n \n\n 2. Our contract with you \n \n \n These\n General Terms\n {' '}\n apply to all products and services we provide to you. Details of our products and services fees subscription duration and any other specific terms will be set out in an\n {' '}\n Order Form\n {' '}\n issued by us to the partner company or organisation identified on the Order Form (referred to in these terms as\n {' '}\n Partner\n {' '}\n or\n {' '}\n you\n ).\n \n \n \n Partner accepts the Order Form by: signing it (including electronically); confirming in writing (including email) that it accepts it; asking us in writing (including email) to provide the services we have offered in the Order Form; or issuing a Purchase Order for the services we have offered in the Order Form.\n \n \n \n Each time the Partner accepts an Order Form it creates a separate binding agreement (\n Partner Agreement\n ) comprising that Order Form and these General Terms. If there is a conflict between these documents the Order Form prevails.\n \n \n\n 3. Livewire Services \n\n \n \n The products and services we offer to our Partners include:\n \n \n \n In these General Terms we refer to any products and services we offer to provide in an Order Form as our\n {' '}\n Services\n . We agree to provide the Services to you on the terms of this Partner Agreement.\n \n \n \n We may modify the description or scope of our Package Services from time to time to reflect changes to our Package Service tiers or descriptions by giving you reasonable prior notice. If you choose not to accept the changes, you may cancel your subscription by giving one month’s notice before the next invoice period. If you continue to pay the Fees after receiving notice of the changes, you are deemed to have accepted the changes.\n \n 4. Providing Content through our Channels \n 4.1 Users \n \n \n We provide access to the Channels to our\n {' '}\n Users\n , who join for free and get access to Content. "\n Contributors\n " are Users who have permission to create Content.\n \n \n \n As part of our Package Services, we will give you logon permissions for an agreed number of your staff to be Contributors, authorised to create and post Partner Content to the Channels. The number of Contributors will be agreed with you and will take into account a particular Contributor’s ability to generate content, rather than solely based on the total number of Contributors.\n \n \n You may change which of your staff are Contributors from time to time, by giving us a written request. If a Contributor leaves your employment you must promptly notify us and, if you ask us to, we will remove them as a Contributor from your account.\n \n \n You acknowledge that each person you nominate as a Contributor must: (a) register to access the Website by providing all information, including a valid email address, that we ask for; and (b) use the Website in accordance with our User Terms.\n \n \n You are responsible for any use of the Website and Channels by your Contributors (including for ensuring they comply with the User Terms).\n \n \n If we reasonably believe one of your Contributors is in breach of the User Terms, Relevant Laws or this Partner Agreement, we may suspend or terminate their access to the Channels. We will tell you if we do this, including our reasons. You acknowledge that in serious cases we may not be able to notify you before acting.\n \n\n 4.2 Restrictions on use \n \n The Partner and its Contributors must not:\n \n\n 4.3 Availability \n \n We will use all commercially reasonable efforts to make the Channels available to you and your Contributors however you acknowledge and agree that: (a) access to the Channels may be prevented by issues outside of our control; and (b) the Channels will not operate on a continuous basis and may be unavailable from time to time (including for maintenance purposes).\n \n\n 4.4 Partner Content \n \n \n Partner Content\n {' '}\n means Content that is: (i) uploaded, posted or otherwise transmitted through the Channels by or on behalf of Partner or its Contributors; or (ii) provided by you (or developed by us) as part of our ‘Fund Profile’ about you (including details about your fund/s and related Product Disclosure Statements) or as an additional service including as a ‘Sponsored Wire’ (or other branded promotion).\n \n \n \n As part of the Package Services, your Contributors may create and post your Partner Content to the Channels. We may provide suggestions and input to Partner Content but you remain responsible for your Partner Content. This includes disclosing ownership of any securities that you may hold when discussing them as part of your Partner Content.\n \n \n You agree that you and your Contributors must not upload, post, or otherwise transmit Content that:\n \n \n \n \n \n (\n Relevant Laws\n {' '}\n means laws, regulations, binding undertakings or orders, or the requirements of any licensing regime which are relevant to Partner’s business, the Services or the creation and publication of financial services information, including: the Corporations Act 2001, the Australian Securities and Investments Commission Act 2001, ASIC Market Integrity Rules or other ASIC regulatory guides or instruments (including Regulatory Guide 234 Advertising financial products and services), Australian Financial Services licence terms, ASX Listing Rules or Operating Rules.)\n \n \n \n \n As part of the Services, we may also publish your Partner Content and advertising materials as part of our ‘Fund Profile’ information, or as a ‘Sponsored Wire’ (or other branded product), in which case you agree to also comply with the restrictions in\n {' '}\n Schedule 1\n .\n \n \n \n Where we publish Partner Content as part of our Fund Profile information (such as your fund information, Product Disclosure Statements, fees, risks and performance data) you agree to ensure such Content is accurate and is kept up to date (for example, external links to your publications or website are kept current).\n \n \n We will comply with your reasonable instructions in displaying your Partner Content, and your branding, logo and other information about you, which may include the display of your own legal disclaimer to be visible to all Users accessing your Partner Content.\n \n \n We will promptly amend or remove from the Channels your Partner Content or your branding, logo or other information about you, where you ask us to do this in writing.\n \n \n We may edit or remove Partner Content that we believe breaches these terms or any Relevant Laws.\n \n \n We retain editorial control over the Channels and we may alter or remove any Content that we believe breaches these General Terms, or where we archive historical content.\n \n\n 4.5 Livewire Content \n \n Livewire Content is anything that is created by Livewire and uploaded or posted to the Channels by us. This includes any content created by Livewire that incorporates contributions from Partners or Contributors. Partner Content that we post on your behalf is not Livewire Content.\n \n\n 5. Fees \n \n You agree to pay us the fees specified on an Order Form (Fees) on the payment terms as also specified on the Order Form.\n \n\n 6. Confidentiality \n \n Each party acknowledges that it may receive confidential information of the other party when performing this agreement. Each party agrees to keep the other party’s confidential information confidential; only use it for the purposes of this agreement; and only disclose it to its own staff in order to perform this agreement, or in order to comply with a law or regulation, to obtain legal or other professional advice or as part of legal proceedings under this agreement.\n \n \n These obligations no longer apply to information which has become publicly known, or was already known to the recipient, or is independently developed by the recipient, or was acquired from a third party without breach of confidence.\n \n \n Confidential information under this agreement includes our Software and the contents of our Website, our User lists and details, our media kit, writing guides and other ‘how to’ guides, and each party’s business, financial, technical, and personal information.\n \n\n 7. Intellectual Property \n \n \n Intellectual Property Rights\n {' '}\n means all intellectual property rights (including all registered and unregistered copyright, designs, trade marks and patents) of any nature in any technology, trade secrets, domain names, software, program, inventions, designs, works and subject matter or any rights to registration of such rights, whether created before, during or after the Term.\n \n \n 7.1 Livewire Materials \n \n \n Livewire Materials\n {' '}\n means materials created by or on behalf of Livewire and provided to Partner in providing Services including our Software Website documentation Livewire Content and other materials or reports provided as part of the Services. You acknowledge that: you have rights to access and use the Livewire Materials on the terms of this agreement but Livewire and/or its licensors retains ownership of all Intellectual Property Rights in the Livewire Materials and no development or customization to your specifications or in accordance with your feedback or suggestions entails ownership by you of any Intellectual Property Rights in any development.\n \n \n 7.2 Partner Content \n \n We acknowledge that you retain ownership of all Intellectual Property Rights in Partner Content.\n \n \n You grant us a non-exclusive royalty-free worldwide and transferable right and licence (including the right to sublicense) to use copy transmit store and modify the Partner Content and publish the Partner Content to the public via any media channel. This licence continues indefinitely unless you delete the Partner Content as allowed by our policies from time to time.\n \n \n You are responsible for ensuring that any of your Contributors waives any moral rights in the Partner Content (or gives consent to how we may use the Partner Content).\n \n \n We may use your branding logo trade mark and other Intellectual Property only for the purpose of providing the Services to you including to help Users on the Website/s to navigate to your company profile or to promote your use of the Channels or your Partner Content. We will use your logos and trade marks according to written usage or formatting guidelines you give us.\n \n 8. Liability \n 8.1 Partner \n \n In their use of the Services, the Partner must comply (and take all reasonable steps to ensure that its Contributors comply) with Relevant Laws, including not engaging in activities which may constitute: market manipulation, false trading, market rigging, fictitious or illegal transactions, false or misleading statements, fraudulent, misleading or deceptive conduct, or insider trading.\n \n \n During and after the Term, the Partner agrees to indemnify Livewire (and its directors, employees and agents) against any claims, damages, losses, liabilities, settlements and expenses (including reasonable legal costs) incurred by Livewire as a result of any claim or action against Livewire by a third party (including a User) which results from (i) any claims based on Partner Content (including Intellectual Property or privacy infringement, or misleading conduct); or (ii) any breach by Partner or its Contributors of Relevant Laws.\n \n 8.2 Livewire Warranties \n \n Livewire warrants to the Partner that the Services: (a) will be provided with due care and skill; (b) will be fit for the purpose for which they are provided; and (c) will be provided within a reasonable time frame.\n \n \n Partner acknowledges and agrees that: (a) Livewire is not responsible for the activities of any User; (b) Livewire makes no representation or warranty: (i) that access to the Services or Channels will be secure, uninterrupted, virus-free and/or error-free; (ii) about the accuracy, reliability or completeness of information on the Channels; or (iii) that Partner will receive a minimum number of readers, engagements, inquiries or other commercial benefits from using the Services or posting Partner Content.\n \n\n 8.3 Limitation of Liability \n \n To the fullest extent permitted by law and regardless of the form of action, whether in contract, tort including negligence, pursuant to statute, or otherwise:\n \n \n \n \n Under the Competition and Consumer Act 2010 (Cth) you may have certain rights and remedies available to you for breach of a consumer guarantee. For a breach of a consumer guarantee held to be a major failure your rights include terminating the contract and receiving a refund for the parts of the services that have not been provided. For breach of a consumer guarantee held to be a minor failure your rights include Livewire rectifying the problem free of charge and within a reasonable time period.\n \n\n 8.4 General \n \n Each party’s liability shall be reduced proportionately to the extent that the other party’s acts or omissions causes or contributes to the loss or damage for which the first party is liable.\n \n \n Each party will not be liable for, or be considered to be in breach of or default under this Agreement on account of any delay or failure to perform as required by this Agreement (except an obligation to pay the Fees) as a result of any cause or condition beyond that party’s reasonable control.\n \n\n 9. Term & Termination \n \n \n This Partner Agreement begins on the\n Start Date\n {' '}\n set out the Order Form and continues for so long as we are providing any Services to you (\n Term\n ).\n \n \n \n Either party may terminate this agreement if the other party: (a) breaches this agreement and does not remedy the breach within one month of written notice; (b) breaches any term of this agreement which cannot be remedied (including the restrictions on use in clause 2 and a breach of confidentiality or Intellectual Property Rights); or (c) becomes insolvent or bankrupt or has an administrator, receiver or liquidator appointed.\n \n \n \n For Package Services: (a) the Term continues for the\n Minimum Term\n {' '}\n set out on the Order Form and then\n automatically renews\n {' '}\n each quarter until terminated under this clause; (b) after the Minimum Term: (i) you may terminate this agreement at any time for convenience by giving us written notice (but shall not be entitled to any refund of Fees already paid); and (ii) we may terminate this agreement for any reason outside our control which compromises our ability to provide you with the access to the Channels or the Services by giving at least three months’ written notice.\n \n \n \n Upon any termination: (a) the rights of Partner and Contributors to access and use the Channels and post Content in those capacities terminate (unless we allow the Partner to continue as a Contributor only); and (b) all sections of this agreement which by their nature should survive termination will survive including accrued rights to payment confidentiality obligations warranty disclaimers limitations of liability and indemnities.\n \n\n 10. General \n \n \n Entire Agreement. \n {' '}\n This Partner Agreement contains everything the parties have agreed in relation to the matters it deals with. You acknowledge that you have not relied on any warranty or representation by us except for the warranties or representations specifically stated in these General Terms or in an Order Form. Despite any acknowledgment by us of a purchase order or other document submitted by you, any term of such purchase order or other document which is inconsistent with or which adds to the terms of this Partner Agreement is null and void.\n \n \n \n \n Interpretation. \n {' '}\n Words like including, for example, such as or similar expressions are to be interpreted as meaning including, without limitation. If a clause or part of a clause can be read in a way that makes it illegal, unenforceable or invalid, but can also be read in a way that makes it legal, enforceable and valid, it must be read in the latter way. If any clause or part of a clause is illegal, unenforceable or invalid, that clause or part is to be treated as removed from this document, but the rest of this document is not affected.\n \n \n \n \n Variation & Waiver. \n {' '}\n A variation of this agreement is only effective if it is in writing and signed by both of us. The fact that a party fails to do, or delays in doing, something the party is entitled to do under this agreement does not amount to a waiver of any obligation of, or breach of obligation by, another party. A waiver by a party is only effective if it is in writing.\n \n \n \n \n Assignment. \n {' '}\n Either of us may assign this agreement as part of any corporate reorganisation or sale of business, provided: (i) the assignee agrees in writing to assume all the obligations of the assigning party under this agreement, and (ii) the assigning party and the assignee give the other party written notice of the assignment.\n \n \n \n \n Independent Contractors – not legal ‘partners’. \n {' '}\n The term ‘Partner’ is used in this agreement to describe a close commercial relationship however the parties expressly agree that they are independent contractors for purposes of this agreement and not legal partners or agents. No party has authority to bind the other party.\n \n \n \n \n Governing law. \n {' '}\n This agreement is governed by the laws of New South Wales, Australia. Each of the parties submits to the non-exclusive jurisdiction of courts with jurisdiction there.\n \n \n\n Schedule 1 – Advertising Restrictions \n \n \n In this Schedule,\n {' '}\n Advertisement\n {' '}\n means Partner Content and advertising materials to be published as part of our Fund Profile information, or to be identified as a ‘Sponsored Wire’ (or other branded offering) including product or fund information, Product Disclosure Statements, fund fees and performance data, e-mail address, URL address, graphics and any other advertisement content for publishing and/or distribution you supply to us, or which we develop for you as part of our Services and which you approve for publication.\n
\n You warrant to Livewire that:\n \n \n );\n}\n","/* eslint-disable max-len */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Section = styled.div`\n max-width: 1180px;\n width: 82vw;\n font-size: 16px;\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n align-items: start;\n line-height: 25px;\n`;\n\nexport const InnerSection = styled(Section)`\n max-width: 1120px;\n`;\n\nexport const Paragraph = styled.p`\n position: relative;\n max-width: 449px;\n margin-top: 24px;\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Intro = styled(Paragraph)`\n max-width: 1180px;\n font-size: 16px;\n margin-top: 44px;\n`;\n\nexport const Headline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const SubHeadline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 18px;\n`;\n\nconst Span10 = styled.span`\n margin-right: 10px;\n`;\n\nconst Underscore = styled.span`\n text-decoration: underline;\n`;\n\nexport default function Content() {\n return (\n \n \n General Terms - Advertising - Market Index\n \n\n 1. Advertising Services \n \n Subject to the other terms of this agreement, we will provide to you (Partner) the Advertising Services described in the Order Form. The Partner accepts the Order Form by: signing it (including electronically); confirming in writing (including email) that it accepts it; asking us in writing (including email) to provide the services set out in the Order Form. \n \n \n \n Each time the Partner accepts an Order Form, it creates a separate binding agreement (\n Agreement\n ) comprising that Order Form and these Terms. If there is a conflict between these documents, the Order Form prevails.\n \n \n \n You may request future Advertising Services and, where we both agree in writing (which may be by email) on the scope of those additional services and the fees, then we both agree that those additional services are also provided on these Terms without the need for us to prepare a formal Services Schedule.\n \n \n You agree to provide the proposed Partner Content for the advertisement; and to comply with the advertising restrictions in Schedule 1.\n \n \n Advertising submitted electronically must comply with our specifications. We may reject the Partner Content if it is not submitted in accordance with such specifications.\n \n \n You must promptly check any proofs of Partner Content, if we have arranged to provide you with any and notify us of any errors in the proofs or in any Partner Content that we publish for you. We do not accept any responsibility for errors in Partner Content that has been submitted electronically by you.\n \n \n We will review the Partner Content and, if we have any concerns about publishing it, we will promptly notify you and work in good faith to resolve any concerns. We retain ultimate discretion whether to publish any Partner Content and if so, its positioning and placement. We will not charge you fees for Partner Content that we do not publish.\n \n \n We may ask to amend Partner Content if we believe it is necessary to comply with these Terms, or any law, pre-existing agreement we have with a third party or a third party’s Intellectual Property Rights. If we amend your Partner Content, this will not reduce the Fee. We will notify you of any changes we need to make, but we will not be liable for any costs, expenses, losses or damages suffered or incurred by you arising from us amending or not publishing your Partner Content. We may mark any Partner Content as “Advertisement” whenever required by law or if we consider it appropriate, to distinguish it from other types of Content.\n \n \n You must not resell advertising space to any third party without our consent.\n \n 2. Fees & Cancellations \n 2.1 Fees \n \n You agree to pay the fees for the supply of the Advertising Services as described in the Order Form within 14 days of our invoice date. Once paid, Fees are not refundable. Invoices will be issued at the time of activity booking. Invoice dates will be set to the first day of activity. Invoices will be due 14 days from the invoice date. Invoices will be increased to take account of any taxes, including GST in Australia. If your payment is overdue, we may stop providing Advertising Services.\n \n 2.2 Cancellation \n \n You may cancel the Advertising Services by giving us written notice (which may be email) no less than 60 days before the scheduled publication date in the Order Form. This will cancel the service and the issued invoice will no longer be payable. If the invoice has been paid in advance, it will not be refunded. Treatment of cancellations received after the cancellation deadline are at the discretion of Fintech. Any cancellations after this date (less than 60 days before the scheduled publication date) may be subject to a maximum cancellation fee of 100% of the total cost of the campaign. If the advertising inventory can be replaced with another advertiser, Fintech may reduce or void the cancellation fee, and this will be handled on a case by case basis at the time of cancellation.\n \n \n Fintech reserves the right to determine the cancellation fee up to 100% of the total cost of the campaign. Advertising Services cancelled at the request of the advertiser or agency after commencement (publication date) will not be entitled to a refund of the unused portion of the campaign.\n \n 3. Confidentiality \n \n \n Where one of us (\n recipient\n ) receives Confidential Information from the other party (\n discloser\n ) the recipient must: (a) keep the information confidential; (b) not use, disclose or reproduce the information for any purpose other than the purposes of the Agreement; and (c) ensure that its personnel do not do, or omit to do anything, which if done or omitted to be done by it, would breach this clause. The obligations under this clause continue after the end of the Agreement.\n \n \n \n The recipient may use or disclose the information to the extent necessary to comply with any law or the requirements of a regulatory body (including a stock exchange), or to obtain professional legal, insurance or accounting advice, or for use in legal proceedings regarding the Agreement.\n \n \n This clause does not apply to Confidential Information which: (a) is in or becomes part of the public domain other than through breach of an obligation of confidence; (b) was known to the recipient at the time of disclosure, unless such knowledge arose through breach of an obligation of confidence; (c) was independently developed by the recipient; or (d) is acquired from a third party who was entitled to disclose it.\n \n 4. Intellectual Property \n 4.1 Fintech Materials \n \n You acknowledge that: (a) Fintech and/or its licensors retains ownership of all Intellectual Property Rights in the Fintech Materials and all Intellectual Property Rights used or embodied in the software and Website.\n \n\n 4.2 Partner Content \n \n As between us and you, you retain ownership of all Intellectual Property Rights in Partner Content.\n \n \n Partner: (a) grants Fintech a non-exclusive, royalty-free, irrevocable, worldwide and transferable right and licence (including the right to sublicense) to use, copy, transmit, store, modify and commercially exploit the Partner Content, and distribute and communicate the Partner Content to the public, via any media channel (and this licence continues indefinitely, unless you delete the Partner Content from our Website as allowed by our policies from time to time); (b) waives any moral rights in the Partner Content; and (c) represents and warrants to Fintech that Partner has all necessary rights to grant the licences and waiver set out in this clause.\n \n \n We may use your branding, logo, trade mark and other Intellectual Property in order for us to provide the Advertising Services to you, including on the Website/s for the purposes of helping Users to navigate to the profile for your company or to promote your use of the Website.\n \n 5. Liability \n 5.1 Partner’s Compliance \n \n Partner must comply with the restrictions in Schedule 1 and with Relevant Laws.\n \n \n During and after the term of the Agreement, the Partner agrees to indemnify Fintech (and its directors, employees and agents) against any claims, damages, losses, liabilities, settlements and expenses (including legal costs on an indemnity basis) resulting from the Partner’s acts or omissions, including any claims based on Partner Content (including Intellectual Property infringement); or any breach of the restrictions in Schedule 1 or Relevant Laws.\n \n\n 5.2 Disclaimer \n \n Partner acknowledges and agrees that Fintech does not guarantee any minimum number of views, clicks, or other audience response to your Content, or any other business or financial outcome from the Advertising Services.\n \n \n Any conditions, warranties or other terms which are not stated in the Agreement, or which might be implied or incorporated into the Agreement, whether by statute, common law or otherwise, are hereby excluded to the fullest extent allowed by law, including any implied conditions, warranties or other terms as to satisfactory quality, fitness for purpose or the use of reasonable skill and care.\n \n\n 5.3 Limitation of Liability \n \n To the fullest extent permitted by law and regardless of the form of action, whether in contract, tort including negligence, pursuant to statute or otherwise: (a) the liability of Fintech (and any of its directors, employees, agents or related companies) relating to the supply of the Advertising Services is limited in aggregate to the Fees actually paid by the Partner in the 12 months prior to the act or omission which gave rise to the liability; and (b) Fintech (and any of its directors, employees, agents or related companies) shall have no liability for any down-time, lost profit or product, loss of data, increased cost of production, loss of client goodwill or good standing or delay in operation, lost opportunity or any other special, punitive, economic, indirect or consequential loss or damage.\n \n \n Certain rights and remedies may be available under the Competition and Consumer Act 2010 (Cth) and may not be permitted to be excluded, restricted or modified. To the extent permitted by law, the liability of Fintech for breach of any implied warranty or condition that cannot be excluded is restricted, at Fintech’s option to: (a) the re-supply of services or payment of the cost of re-supply of services; or (b) the replacement or repair of goods or payment of the cost of replacement or repair.\n \n\n 5.4 General \n \n Each party’s liability shall be reduced proportionately to the extent that the other party’s acts or omissions causes or contributes to, directly or indirectly, the loss or damage for which the first party is liable. Each party will not be liable for, or be considered to be in breach of, or default under this agreement, on account of, any delay or failure to perform as required by this agreement (except an obligation to pay the Fees) as a result of any cause or condition beyond that party’s reasonable control.\n \n 6. Term & Termination \n \n The Agreement begins on the date the date set out in the Order Form or, if there is no date, the date the Order Form is signed by you and continues for so long as we are providing any Advertising Services to you.\n \n \n Either party may terminate the Agreement if the other party: (a) breaches this agreement and does not remedy the breach within one month of written notice; (b) breaches any term of this agreement which cannot be remedied (including a breach of confidentiality or Intellectual Property Rights); or (c) becomes insolvent or bankrupt or has an administrator, receiver or liquidator appointed.\n \n 7. General \n \n \n Entire Agreement. \n {' '}\n The Agreement contains everything the parties have agreed in relation to the matters it deals with. These Terms apply to all the Advertising Services we provide to you. You acknowledge that you have not relied on any warranty or representation by us except for the warranties or representations specifically stated in the Agreement.\n {' '}\n Notwithstanding any acknowledgment by us of a purchase order or other document submitted by you, any term of such purchase order or other document which is inconsistent with, or which adds to the terms of this agreement, is null and void.\n \n \n \n \n Interpretation. \n {' '}\n Words like including, for example, such as or similar expressions are to be interpreted as meaning including, without limitation. If a clause or part of a clause can be read in a way that makes it illegal, unenforceable or invalid, but can also be read in a way that makes it legal, enforceable and valid, it must be read in the latter way. If any clause or part of a clause is illegal, unenforceable or invalid, that clause or part is to be treated as removed from this document, but the rest of this document is not affected.\n \n \n \n \n Variation & Waiver. \n {' '}\n A variation of the Agreement is only effective if it is in writing and signed by both of us. The fact that a party fails to do, or delays in doing, something the party is entitled to do under the Agreement, does not amount to a waiver of any obligation of, or breach of obligation by, another party. A waiver by a party is only effective if it is in writing.\n \n \n \n \n Assignment. \n {' '}\n Either of us may assign the Agreement as part of any corporate reorganization or sale of business, provided: (i) the assignee agrees in writing to assume all the obligations of the assigning party under the Agreement, and (ii) the assigning party and the assignee give the other party written notice of the assignment.\n \n \n \n \n Independent Contractors – not legal ‘partners’. \n {' '}\n The term ‘Partner’ is used in the Agreement to describe a close commercial relationship however the parties expressly agree that they are independent contractors for purposes of this agreement, and not legal partners or agents. No party has authority to bind the other party.\n \n \n \n \n Governing law. \n {' '}\n This agreement is governed by the laws of New South Wales, Australia. Each of the parties submits to the non-exclusive jurisdiction of courts with jurisdiction there.\n \n \n 8. Definitions \n \n \n Advertising Services\n {' '}\n means Fintech publishing Partner Content on its Website and other channels, as specified in the Market Index Insertion Order or otherwise agreed in writing (which may be by email).\n \n \n \n \n Content\n {' '}\n means any data, text, posts, commentary, images, audio or video material and other content that is uploaded, posted or otherwise transmitted through the Website, or provided in an advertisement by Partner.\n \n \n \n \n Intellectual Property\n {' '}\n or\n {' '}\n Intellectual Property\n {' '}\n Rights means all intellectual property rights (including, without limitation, all registered and unregistered copyright, designs, trade marks and patents) of any nature in any technology, trade secrets, domain names, User lists, User details (including, but not limited to, User emails, telephone numbers and addresses) and User-related information, software, program, inventions, designs, works and subject matter or any rights to registration of such rights existing in Australia or elsewhere and whether created before on or after the date of this agreement.\n \n \n \n \n Fees\n {' '}\n means the fees payable by the Partner to Fintech as set out in the Market Index Insertion Order.\n \n \n \n \n Fintech or us\n {' '}\n means Fintech Equity Pty Ltd (ABN 32 637 943 803).\n \n \n \n \n Fintech Content\n {' '}\n means Content that is created by Fintech and uploaded, posted or otherwise transmitted through the Website by Fintech (other than Content which Fintech posts on behalf of Partner, which is Partner Content).\n \n \n \n \n Fintech Materials\n {' '}\n means materials created by or on behalf of Fintech and provided to Partner in the course of performing this agreement including the Website, documentation, software, Fintech Content, designs, customisations or modifications, reports about the performance of the Website, and other materials or reports provided as part of the Advertising Services.\n \n \n \n \n Order Form\n {' '}\n means the order form provided by Livewire to the Partner specifying the details of the Advertising Services including the Fees and Partner Content.\n \n \n \n \n Partner or\n {' '}\n you means the partner organisation identified in the Order Form.\n \n \n \n \n Partner Content\n {' '}\n means Content that is provided by you (or developed by us, which you have approved) as part of an Advertising Service.\n \n \n \n \n Relevant Laws\n {' '}\n means laws, regulations, binding undertakings or orders, or the requirements of any licensing regime which are relevant to Partner’s business, the Website or the creation and publication of financial services information, including: the Competition and Consumer Act, the Fair Trading Acts of relevant States of Australia or equivalent or other sale of goods legislation; any law of defamation, obscenity or contempt of any court, tribunal or royal commission; State or Commonwealth anti-discrimination legislation; the Privacy Act (Cth); Corporations Act 2001, the Australian Securities and Investments Commission Act 2001, ASIC Market Integrity Rules or other ASIC regulatory guides or instruments, Australian Financial Services licence terms, ASX Listing Rules or Operating Rules.\n \n \n \n \n Website\n {' '}\n means\n {' '}\n www.marketindex.com.au\n {' '}\n or other websites as notified by Fintech from time to time.\n \n \n Schedule 1 – Advertising Restrictions \n \n \n You warrant to Fintech that:\n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n line-height: 40px;\n height: 46px;\n max-width: 795px;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Div = styled.div`\n position: relative;\n max-width: 1180px;\n width: 82vw;\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Headline = styled(Div)`\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const Disclaimer = styled(Title)`\n border-bottom: none;\n`;\n\nexport default function Content() {\n return (\n \n {/* eslint-disable max-len */}\n {/* eslint react/jsx-one-expression-per-line: 0 */}\n Updated 9 Feb 2022 \n Privacy Policy \n Introduction \n Personal Information \n What kinds of Personal Information do we collect and hold? \n How do we collect Personal Information? \n How do we use your Personal Information? \n Cookies \n Changes to our privacy policy \n Links to other websites \n Information security \n Changes to our privacy policy \n Access to your information \n Disclaimer \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport ContactForm from './contact-form';\nimport { BaseTitle } from './styles';\n\nconst Container = styled.div`\n position: relative;\n padding-top: ${props => (props.theme.isMobile ? '32px' : '80px')};\n padding-bottom: ${props => (props.theme.isMobile ? '32px' : '80px')};\n padding-left: ${props => (props.theme.isMobile ? '20px' : '')};\n padding-right: ${props => (props.theme.isMobile ? '20px' : '')};\n width: 100vw;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n ${props => (props.theme.isMobile ? `\n background-image: url(${props.theme.linearGradientMobileImage});\n background-size: cover;\n background-position: center;\n ` : `\n background: linear-gradient(-100.09deg, rgba(253, 255, 255, 0.5) 47.62%, rgba(255, 255, 255, 0.5) 54.33%, rgba(144, 237, 255, 0.5) 122.74%), linear-gradient(100.09deg, rgba(253, 255, 255, 0.5) 47.62%, rgba(255, 255, 255, 0.5) 54.33%, rgba(144, 237, 255, 0.5) 122.74%);\n `)};\n`;\n\nconst Title = styled(BaseTitle)`\n max-width: 100%;\n`;\n\nconst FormContainer = styled.div`\n width: 100%;\n max-width: 530px;\n textarea::placeholder,\n input::placeholder {\n text-transform: uppercase;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n }\n\n button {\n width: 100%;\n margin-top: 20px;\n }\n`;\n\nexport default function Contact(props) {\n const { formId, formName, formTitle } = props;\n\n return (\n \n {formTitle} \n \n \n \n );\n}\n\nContact.propTypes = {\n formId: PropTypes.string.isRequired,\n formName: PropTypes.string.isRequired,\n formTitle: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport toastr from 'toastr';\nimport Validator from '../../../shared/validator';\nimport Loading from '../../../shared/loading';\nimport parseFailXhr from '../../../shared/parse-fail-xhr';\nimport { EMAIL_REGEX } from '../../../shared/consts';\nimport mutate from '../../../shared/mutate';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport { contactAsync } from '../../../services/contact-services';\nimport { FormContainer } from './styles';\n\nexport default class ContactForm extends React.Component {\n static propTypes = {\n hideSubmit: PropTypes.bool,\n message: PropTypes.string,\n onAfterSubmit: PropTypes.func,\n };\n\n static defaultProps = {\n hideSubmit: false,\n message: '',\n onAfterSubmit: null,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.handleNameChange = this.handleNameChange.bind(this);\n this.handleCompanyChange = this.handleCompanyChange.bind(this);\n this.handleEmailAddressChange = this.handleEmailAddressChange.bind(this);\n this.handleMobileChange = this.handleMobileChange.bind(this);\n this.handleSendMediaKitChange = this.handleSendMediaKitChange.bind(this);\n this.handleMessageChange = this.handleMessageChange.bind(this);\n\n this.validator = new Validator({\n nameRequired: state => !!state.name,\n emailAddressRequired: state => !!state.emailAddress,\n emailAddressRegex: state => !state.emailAddress || EMAIL_REGEX.test(state.emailAddress),\n messageRequired: state => !!state.message,\n });\n\n this.state = {\n messageSent: false,\n name: '',\n company: '',\n emailAddress: '',\n mobile: '',\n sendMediaKit: false,\n message: this.props.message || '',\n validations: this.validator.getValidations(),\n };\n }\n\n handleNameChange(event) {\n const name = event.target.value;\n\n this.setState(oldState => mutate(oldState, s => {\n s.name = name;\n s.validations.nameRequiredValid = this.validator.validateNameRequired(s);\n }));\n }\n\n handleCompanyChange(event) {\n const company = event.target.value;\n\n this.setState(oldState => mutate(oldState, s => {\n s.company = company;\n }));\n }\n\n handleEmailAddressChange(event) {\n const emailAddress = event.target.value;\n\n this.setState(oldState => mutate(oldState, s => {\n s.emailAddress = emailAddress;\n s.validations.emailAddressRequiredValid = this.validator.validateEmailAddressRequired(s);\n s.validations.emailAddressRegexValid = this.validator.validateEmailAddressRegex(s);\n }));\n }\n\n handleMobileChange(event) {\n const mobile = event.target.value;\n\n this.setState(oldState => mutate(oldState, s => {\n s.mobile = mobile;\n }));\n }\n\n handleSendMediaKitChange(event) {\n const sendMediaKit = event.target.checked;\n\n this.setState(oldState => mutate(oldState, s => {\n s.sendMediaKit = sendMediaKit;\n }));\n }\n\n handleMessageChange(event) {\n const message = event.target.value;\n\n this.setState(oldState => mutate(oldState, s => {\n s.message = message;\n s.validations.messageRequiredValid = this.validator.validateMessageRequired(s);\n }));\n }\n\n clear() {\n this.validator.resetValidation();\n this.setState({\n messageSent: false,\n name: '',\n company: '',\n emailAddress: '',\n mobile: '',\n message: this.props.message || '',\n sendMediaKit: false,\n validations: this.validator.getValidations(),\n });\n }\n\n submit(event) {\n event && event.preventDefault && event.preventDefault();\n\n this.setState(\n state => ({\n validations: this.validator.validateForm(state),\n }),\n () => {\n if (!this.validator.formValid) return;\n\n this.loading.start();\n contactAsync({\n name: this.state.name,\n company: this.state.company,\n emailAddress: this.state.emailAddress,\n mobile: this.state.mobile,\n message: this.state.message,\n sendMediaKit: this.state.sendMediaKit,\n })\n .done(() => {\n this.validator.resetValidation();\n this.setState(s => mutate(s, ss => {\n ss.messageSent = true;\n ss.validations = this.validator.getValidations();\n }));\n toastr.success('Your message has been sent');\n this.props.onAfterSubmit && this.props.onAfterSubmit();\n })\n .fail(xhr => {\n const errors = parseFailXhr(xhr);\n\n errors.anyUnhandledErrors() && toastr.error(errors.getErrorSummary(), 'Error');\n })\n .always(() => this.loading.stop());\n },\n );\n }\n\n renderName() {\n const isValid = this.state.validations.nameRequiredValid;\n return (\n \n \n \n \n );\n }\n}\n","import React from 'react';\nimport { scroller } from 'react-scroll';\nimport styled from 'styled-components';\nimport { PaddedContainer, SectionName, SmallButton } from '../common/styles';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100vw;\n padding-top: ${props => (props.theme.isMobile ? '80px' : '104px')};\n padding-bottom: ${props => (props.theme.isMobile ? '80px' : '104px')};\n background-image: ${props => `url(${props.theme.isMobile ? props.theme.heroPortrait : props.theme.hero})`};\n background-size: cover;\n background-position: center;\n border-bottom-right-radius: ${props => (props.theme.isMobile ? '200px' : '180px')};\n`;\n\nconst SectionNameExt = styled(SectionName)`\n color: white;\n font-size: 16px;\n line-height: 1.5;\n`;\n\nconst Desc = styled.p`\n position: relative;\n margin: 0;\n color: white;\n font-weight: 700;\n ${props => (props.theme.isMobile ? `\n font-size: 48px;\n line-height: 56px;\n ` : `\n max-width: 800px;\n font-size: 64px;\n line-height: 72px;\n `)};\n`;\n\nconst SubDesc = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 18px;\n color: white;\n margin-top: 12px;\n margin-bottom: 24px;\n max-width: 740px;\n`;\n\nconst Button = styled(SmallButton)`\n background-color: #183AD9;\n width: 130px;\n\n &:hover {\n background-color: #19202D;\n }\n`;\n\nexport default function Hero() {\n const scrollToGetInTouchForm = () => scroller.scrollTo('get_in_touch', {\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n return (\n \n \n Partner with us \n Connect with Australia’s most engaged investors \n \n Access our network’s high-quality audience of self-directed and high-net-worth investors,\n wealth advisers, consultants, fund managers, and institutional investors.\n \n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport { scroller } from 'react-scroll';\nimport {\n SectionName, buildPlxData, SmallButton,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst Container = styled(BaseContainer)`\n margin-top: ${props => (props.theme.isMobile ? '32px' : '80px')};\n margin-bottom: ${props => (props.theme.isMobile ? '32px' : '80px')};\n`;\n\nconst Image = styled(Img)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n max-width: 560px;\n width: 44vw;\n `)};\n`;\n\nconst SectionNameExt = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n`;\n\nconst BaseDescExt = styled(BaseDesc)`\n a {\n color: #1E58CF;\n text-decoration: underline;\n }\n`;\n\nconst Button = styled(SmallButton)`\n background-color: #374662;\n margin-top: 8px;\n width: 254px;\n\n &:hover {\n background-color: #BDC8DB;\n }\n`;\n\nexport default function LivewireNetwork() {\n const { livewireNetworkImage, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#livewire_network', 0);\n\n const scrollToGetInTouchForm = () => scroller.scrollTo('get_in_touch', {\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n return (\n \n \n The Livewire network \n Australia’s Leading Destination for Investors \n \n Our brands \n Livewire Markets\n and \n Market Index\n , empower one million investors every month by giving them\n free access to high quality investment information and analysis.\n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst Container = styled.div`\n width: 100vw;\n max-width: 100vw;\n margin: auto;\n ${props => (props.theme.isMobile ? `\n background-image: url(${props.theme.linearGradientMobileImage});\n background-size: cover;\n background-position: center;\n ` : `\n background: linear-gradient(-100.09deg, rgba(253, 255, 255, 0.5) 47.62%, rgba(255, 255, 255, 0.5) 54.33%, rgba(144, 237, 255, 0.5) 122.74%), linear-gradient(100.09deg, rgba(253, 255, 255, 0.5) 47.62%, rgba(255, 255, 255, 0.5) 54.33%, rgba(144, 237, 255, 0.5) 122.74%);\n `)};\n`;\n\nconst InnerContainer = styled(BaseContainer)`\n margin-top: ${props => (props.theme.isMobile ? '32px' : '60px')};\n margin-bottom: ${props => (props.theme.isMobile ? '32px' : '60px')};\n flex-direction: ${props => (props.theme.isMobile ? 'column-reverse' : 'row')};\n`;\n\nconst Image = styled(Img)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n max-width: 560px;\n width: 44vw;\n `)};\n`;\n\nconst SectionNameExt = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n`;\n\nconst BaseDescExt = styled(BaseDesc)`\n a {\n color: #1E58CF;\n text-decoration: underline;\n }\n`;\n\nexport default function SophisticatedInvestors() {\n const { sophisticatedInvestorsImage, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#sophisticated_investors', 0);\n\n return (\n \n \n \n \n \n Quality Retail Audience \n Sophisticated and affluent \n \n Our sophisticated investors have large and diversified portfolios across a\n range of investment types, including managed funds, LICs, ETFs, and Australian\n and global equities.\n \n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst Container = styled(BaseContainer)`\n margin-top: ${props => (props.theme.isMobile ? '32px' : '16px')};\n margin-bottom: ${props => (props.theme.isMobile ? '32px' : '16px')};\n`;\n\nconst Image = styled(Img)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n max-width: 560px;\n width: 44vw;\n `)};\n`;\n\nconst SectionNameExt = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n`;\n\nconst BaseDescExt = styled(BaseDesc)`\n a {\n color: #1E58CF;\n text-decoration: underline;\n }\n`;\n\nexport default function ProfessionalInvestors() {\n const { professionalInvestorsImage, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#professional_investors', 0);\n\n return (\n \n \n Professional Audience \n Connect with professional investors \n \n Our brands have a significant representation of financial professionals,\n including Financial Advisers, Family Offices, Brokers, Fund Managers & Analysts,\n Institutional Investors, Research Consultants, as well as global and local\n Professional Services firms.\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport { scroller } from 'react-scroll';\nimport {\n SectionName, buildPlxData, SmallButton,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst Container = styled.div`\n width: 100vw;\n max-width: 100vw;\n margin: auto;\n\n ${props => (props.theme.isMobile ? `\n background-image: url(${props.theme.linearGradientMobileImage});\n background-size: cover;\n background-position: center;\n ` : `\n background: linear-gradient(-100.09deg, rgba(253, 255, 255, 0.5) 47.62%, rgba(255, 255, 255, 0.5) 54.33%, rgba(144, 237, 255, 0.5) 122.74%), linear-gradient(100.09deg, rgba(253, 255, 255, 0.5) 47.62%, rgba(255, 255, 255, 0.5) 54.33%, rgba(144, 237, 255, 0.5) 122.74%);\n `)};\n`;\n\nconst InnerContainer = styled(BaseContainer)`\n margin-top: ${props => (props.theme.isMobile ? '32px' : '72px')};\n margin-bottom: ${props => (props.theme.isMobile ? '32px' : '72px')};\n flex-direction: ${props => (props.theme.isMobile ? 'column-reverse' : 'row')};\n`;\n\nconst Image = styled(Img)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n max-width: 560px;\n width: 44vw;\n `)};\n`;\n\nconst SectionNameExt = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n`;\n\nconst BaseDescExt = styled(BaseDesc)`\n a {\n color: #1E58CF;\n text-decoration: underline;\n }\n`;\n\nconst Button = styled(SmallButton)`\n background-color: #374662;\n margin-top: 8px;\n width: 170px;\n\n &:hover {\n background-color: #BDC8DB;\n }\n`;\n\nexport default function Solutions() {\n const { solutionsImage, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#solutions', 0);\n\n const scrollToGetInTouchForm = () => scroller.scrollTo('get_in_touch', {\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n return (\n \n \n \n \n \n Solutions \n Proven high performing solutions \n \n We can deliver your message to an engaged audience of investment decision-makers.\n \n \n Campaign Activation:\n Get your brand message to your target audience. Across our Websites,\n eNewsletters, Shows and Events, we offer a unique set of trusted media that\n help you build brand awareness and extend your reach with your target audiences.\n \n \n Premium Content:\n Tell your unique story and capture your value. We work with leading companies,\n creating captivating content that tells their unique stories, cutting through the\n noise and generating genuine engagement.\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport { BaseContainer, BaseTitle } from './styles';\nimport { SectionName } from '../common/styles';\n\nconst Container = styled(BaseContainer)`\n margin-top: ${props => (props.theme.isMobile ? '32px' : '80px')};\n margin-bottom: ${props => (props.theme.isMobile ? '32px' : '80px')};\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nconst Intro = styled.div`\n position: relative;\n text-align: ${props => (props.theme.isMobile ? 'left' : 'center')};\n`;\n\nconst IntroTitle = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n`;\n\nconst IconContainer = styled(BaseContainer)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n width: 76vw;\n max-width: 1088px;\n `)};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n`;\n\nconst Image = styled(Img)`\n width: 120px;\n box-shadow: 0 3px 20px ${props => props.theme.secondaryColorLight};\n margin: 0 10px;\n`;\n\nconst Title = styled(BaseTitle)`\n max-width: 980px;\n`;\n\nconst Desc = styled.p`\n font-size: 18px;\n text-align: left;\n max-width: 980px;\n`;\n\nexport default function FundManagement() {\n const { partnerImages } = React.useContext(ThemeContext);\n\n return (\n \n \n Who we're working with \n \n Trusted by Leading Global & Domestic Brands\n \n \n We work with over 100 of the world’s leading financial services brands,\n creating compelling campaigns that are relevant to a confident investor\n and adviser audience.\n \n \n \n {partnerImages.map(image => \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport { scroller } from 'react-scroll';\nimport { BaseContainer, BaseTitle } from './styles';\nimport { SectionName, SmallButton } from '../common/styles';\n\nconst Container = styled(BaseContainer)`\n margin-top: ${props => (props.theme.isMobile ? '32px' : '52px')};\n margin-bottom: ${props => (props.theme.isMobile ? '32px' : '52px')};\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nconst Intro = styled.div`\n position: relative;\n text-align: ${props => (props.theme.isMobile ? 'left' : 'center')};\n`;\n\nconst IntroTitle = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n`;\n\nconst IconContainer = styled(BaseContainer)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n width: 90vw;\n max-width: 1087px;\n `)};\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n`;\n\nconst Image = styled(Img)`\n max-width: ${props => (props.theme.isMobile ? '100%' : '456px')};\n object-fit: cover;\n`;\n\nconst Title = styled(BaseTitle)`\n max-width: 100%;\n`;\n\nconst Button = styled(SmallButton)`\n background-color: #374662;\n width: 194px;\n\n &:hover {\n background-color: #BDC8DB;\n }\n`;\n\nexport default function Testimonial() {\n const { testimonialImages } = React.useContext(ThemeContext);\n\n const scrollToGetInTouchForm = () => scroller.scrollTo('get_in_touch', {\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n return (\n \n \n What our partners say \n \n Real Results, Real Feedback\n \n \n \n {testimonialImages.map(image => \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { SectionName, SectionTitle } from '../common/styles';\n\nconst Container = styled.div`\n margin: ${props => (props.theme.isMobile ? '67px 0 19px 19px' : '0 auto')};\n padding-bottom: 6px;\n max-width: 1230px;\n width: 85vw;\n display: flex;\n flex-direction: column;\n align-items: start;\n`;\n\nexport const Timestamp = styled(SectionName)`\n font-size: 12px;\n`;\n\nexport const Title = styled(SectionTitle)`\n margin: 6px 0 0 0;\n line-height: 40px;\n height: 46px;\n max-width: 795px;\n border-bottom: 1px dashed ${props => props.theme.primaryColor};\n font-size: ${props => (props.theme.isMobile ? 25 : 40)}px;\n`;\n\nexport const Section = styled.div`\n max-width: 1180px;\n width: 82vw;\n font-size: 16px;\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n align-items: start;\n line-height: 25px;\n`;\n\nexport const InnerSection = styled(Section)`\n max-width: 1120px;\n`;\n\nexport const Paragraph = styled.p`\n position: relative;\n max-width: 449px;\n margin-top: 24px;\n color: ${props => props.theme.bodyColor};\n font-size: 20px;\n line-height: 25px;\n text-align: left;\n`;\n\nexport const Intro = styled(Paragraph)`\n max-width: 1180px;\n font-size: 16px;\n margin-top: 44px;\n`;\n\nexport const Headline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightBold};\n margin-top: 33px;\n`;\n\nexport const SubHeadline = styled(Paragraph)`\n max-width: 1180px;\n width: 82vw;\n font-size: 18px;\n`;\n\nconst Span10 = styled.span`\n margin-right: 10px;\n`;\n\nexport default function Content() {\n return (\n \n {/* eslint-disable max-len */}\n {/* eslint react/jsx-one-expression-per-line: 0 */}\n Updated 26 March 2018 \n Terms & Conditions \n Thank you for visiting www.livewiremarkets.com. We're glad you're here and look forward to giving you all the features and information on offer through the site. But in doing so, there are some rules you must agree to. \n 1. Background \n \n 1.1 \n These Terms of Use (Terms) govern your use of the website located at http://www.livewiremarkets.com (Website) and form a binding contractual agreement between you, the user of the Website and Livewire Markets Pty Ltd ACN 156 343 501 (Livewire).\n \n \n 1.2 \n These Terms are important and you should read them carefully and contact Livewire with any questions before you use the Website. \n \n \n 1.3 \n By using the Website you acknowledge and agree that you have read and understand these Terms and you agree to be bound by them.\n \n \n 1.4 \n Livewire may provide any notice required under these terms by publishing the notice on the Website (Notice). Livewire may amend or vary these Terms at its sole discretion by giving Notice. The varied Terms are to take effect immediately upon Notice being given.\n Your continued use of the Website after any variation of these Terms will be deemed to constitute your acceptance of the varied Terms. If you do not accept the varied Terms, please discontinue your use of the Website and/or terminate your Membership.\n \n \n 2. Definitions \n \n 2.1 \n Confidential Information means any information of Livewire, or of another User which is designated as confidential or which is of a confidential or sensitive nature,\n which is marked or denoted as confidential or which a reasonable person to whom that information is disclosed or to whose knowledge the information comes would consider confidential.\n \n \n \n 2.2 \n Content means anything that is uploaded, posted or otherwise transmitted through the Website, and when it is introduced to the Services by you, it is your Content.\n \n \n 2.3 \n Intellectual Property means all intellectual property rights (including all registered and unregistered copyright, designs, trade marks and patents) of any nature in any technology, trade secrets, User lists, User details (including User emails, telephone numbers and addresses)\n and User-related information, software, program, inventions, designs, works and subject matter belonging to Livewire.\n \n \n \n 2.4 \n Membership means an application to Livewire, through the Website, for a User name, account and password.\n \n \n 2.5 \n Membership Data means any information provided by you to Livewire in any registration form on the Website or otherwise.\n \n \n 2.6 \n Services means the publication of content and information relating to financial markets and other news provided by Livewire to users from time to time through multiple channels, including the Website, email, video and other social media platforms.\n \n \n 2.7 \n Third Party means an entity other than LiveWire or its related bodies corporate.\n \n \n 2.8 \n You means the user or any other party currently accessing the Services.\n \n 3. Use of Website \n \n 3.1 \n Livewire grants you a non-exclusive, non-transferable licence to use the Website and Services subject to the terms and conditions set out in these Terms.\n \n \n 3.2 \n The Website contains links to other websites and may from time to time contain Content added by a Third Party. Livewire does not endorse, sponsor or approve any such user generated content or any content available on any linked website.\n \n \n 3.3 \n Livewire expressly disclaims all liability for any Content transmitted or posted on the Website or Services, or otherwise transmitted to any User by any other means, or by any person, including your reliance on such Content.\n \n 3.4 \n You acknowledge and agree that:\n \n 3.5 \n You agree and understand that you assume all risks when using the Website and Services, including without limitation any and all of the risks associated with any online or offline interactions with other Users and all risk for any damage to your computer system or loss of data.\n \n 4. Financial Content, not Advice \n \n 4.1 \n You acknowledge and agree that:\n \n 5. Conduct and Obligations \n \n 5.1 \n By accepting these Terms, you are representing that you:\n \n \n 5.2 \n You are solely responsible for the Content and all activities that occur under your Membership.\n \n \n 5.3 \n You agree not to upload, post, or otherwise transmit Content that:\n \n \n 5.4 \n You must immediately notify Livewire of any unauthorised use of your User account, login and/or password.\n \n \n 5.5 \n You must ensure you completely sign out of your account at the end of every session where you use the Website, and ensure that all personal data has been deleted from the system.\n \n \n 5.6 \n Livewire may, but is not obliged to, at any time request a form of identification to verify your identity and/or your compliance with these Terms.\n \n \n 5.7 \n Livewire reserves the right to edit or remove Content that violates these Terms or for any other reason it deems necessary in its absolute discretion but shall not be held liable for its failure to do so.\n \n \n 5.8 \n Livewire may record and store information relating to your Membership, including any complaint made against you. Livewire reserves the right to disclose any information as necessary to satisfy any applicable law,\n legal requirement, police investigation or request from a Government authority.\n \n \n \n 5.9 \n Livewire reserves the right, but has no obligation, to monitor disputes between Users of the Website. You agree to hold Livewire harmless in connection with any dispute or claim that you make against any other User of the Website.\n \n 6. Disclaimer of Warranties \n You acknowledge that Livewire makes no representation or warranty: \n \n 6.1 \n \n that your access to the Website or Services (including any Third Party applications or payment platforms on the Website) will be, timely, secure, uninterrupted and/or error-free;\n \n \n \n 6.2 \n that any defects on the Website will be corrected;\n \n \n 6.3 \n that any information disclosed on the Website or Services will be accurate, up to date, complete or useful;\n \n \n 6.4 \n that the Website or the server/s which stores and transmits the Website to you are free from viruses or any other harmful components;\n \n \n 6.5 \n about the accuracy, reliability or completeness of information on the Website or Services.\n \n 7. Confidential Information \n \n 7.1 \n You agree to keep the Confidential Information of Livewire and any other User confidential and to use or disclose such information only for the purposes as authorised by the owner of the Confidential Information.\n \n 7.2 \n The obligations of confidentiality in clause 7.1 will not apply to information which:\n 8. Intellectual Property Rights \n \n 8.1 \n Nothing in these Terms constitutes a transfer of any Intellectual Property rights. You acknowledge and agree that, as between you and Livewire, Livewire owns all Intellectual Property rights in the Website.\n \n \n 8.2 \n By using the Services, posting or adding any content onto the Website, you grant Livewire a perpetual, non-exclusive, royalty-free, irrevocable, worldwide and transferable right and licence to use that Content\n in any way (including, without limitation, reproducing, changing, and communicating the Content to the public) and permit Livewire to authorise any other User to do the same thing if Livewire chooses to do this.\n \n \n \n 8.3 \n You represent and warrant to Livewire that you have all necessary rights to grant the licences and consents set out in clause 8.2.\n \n \n 8.4 \n You must obtain express written permission from Livewire if you wish to reproduce any aspect of the Website or other Intellectual Property owned by Livewire.\n \n 9. Termination and Suspension \n \n 9.1 \n The Terms will continue in force until such time that they are varied or replaced, but Livewire may terminate the Terms or the Website at any time and without prior Notice.\n \n \n 9.2 \n Livewire may suspend or terminate any User from using the Website without Notice.\n \n \n 9.3 \n Livewire reserves the right to change or discontinue any service or feature on the Website in whole or in part at any time in its sole discretion.\n \n \n 9.4 \n Livewire reserves the right to change pricing for any chargeable service or feature on the Website at any time, and will provide Notice in accordance with these Terms where the price is varied.\n \n 10. Indemnity and Limitation of Liability \n \n 10.1 \n \n You agree to indemnify, and continually indemnify, Livewire in relation to all claims, actions, liabilities, costs, losses and expenses (including legal costs on a full indemnity basis)\n that Livewire incurs as a result of your use of the Website or Services, and/or from your failure to comply with these Terms.\n \n \n \n \n 10.2 \n \n You agree that Livewire shall not be liable to you in respect of any losses suffered or incurred by you arising out of or in connection with the provision of the Services,\n including but not limited to, reliance on the information or content on the Website.\n \n \n \n \n 10.3 \n Without limitation to the foregoing, you agree that, to the fullest extent permitted by law:\n \n \n 10.4 \n \n Certain rights and remedies may be available under the Competition and Consumer Act 2010 (Cth) and may not be permitted to be excluded, restricted or modified. Apart from those that cannot be excluded,\n Livewire excludes all conditions and warranties that may be implied by law. To the extent permitted by law, Livewire’s liability for breach of any implied warranty or condition that cannot be excluded is restricted, at our option to:\n (a) the re-supply of services or payment of the cost of re-supply of services; or (b) the replacement or repair of goods or payment of the cost of replacement or repair.\n \n \n 11. Advertisements and Promotion \n \n 11.1 \n Livewire may run sponsored advertisements and promotions from a Third Party on the Website or Services. Your correspondence or business dealings with, or participation in promotions of,\n advertisers other than Livewire found on or through the Website or Services, including payment and delivery of related goods or services, and any other terms, conditions, warranties or representations associated with such dealings,\n are solely between you and such Third Party. Livewire is not responsible or liable for any loss or damage of any sort incurred as the result of any such dealings or as the result of the presence of Third Party advertisers on the Website.\n \n \n 12. General \n \n 12.1 \n These terms prevail in the event that anything in, or associated with, the Website or Services is inconsistent with these Terms.\n \n \n 12.2 \n If a provision of these Terms is invalid or unenforceable it is to be read down or severed to the extent necessary without affecting the validity or enforceability of the remaining provisions.\n \n \n 12.3 \n Any reference in these Terms to including, such as or similar expressions are to be interpreted as including, without limitation.\n \n \n 12.4 \n The failure by Livewire to enforce any provision of these Terms shall not be treated as a waiver of that provision, nor shall it affect Livewire’s right to subsequently enforce that provision.\n \n \n 12.5 \n These Terms and any contract to which they apply shall be governed by the laws of New South Wales and are subject to the jurisdiction of the courts of New South Wales.\n \n \n );\n}\n","import { useMediaQuery } from 'react-responsive';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\n\nexport default function useCommonProps() {\n const mediaQueries = {\n isXXLarge: useMediaQuery({ query: `(min-width: ${theme.breakpointXxlargeMin})` }),\n isXLarge: useMediaQuery({ query: `(min-width: ${theme.breakpointXlargeMin})` }),\n isMediumXLarge: useMediaQuery({ query: '(min-width: 880px)' }),\n isLarge: useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMin})` }),\n isFeaturedLarge: useMediaQuery({ query: '(min-width: 1024px)' }),\n isMobile: useMediaQuery({ query: `(max-width: ${theme.breakpointSmallMax})` }),\n isFeaturedMedium: useMediaQuery({ query: '(min-width: 768px)' }),\n isMobileOrTablet: useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` }),\n };\n\n mediaQueries.isTablet = mediaQueries.isMobileOrTablet && !mediaQueries.isMobile;\n\n return {\n ...theme,\n ...mediaQueries,\n };\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport propTypes from './common/prop-types';\nimport Hero from './fund-components/hero';\nimport Main from './fund-components/main';\n\nexport default function Fund(props) {\n const common = commonProps();\n\n return (\n \n \n );\n}\n\nFund.propTypes = propTypes;\n","import React from 'react';\nimport styled from 'styled-components';\nimport propTypes from '../common/prop-types';\n\nconst Container = styled.div`\n background-color: #F1F3F8;\n min-height: 270px;\n\n ${props => props.showInModal && `\n border-radius: 15px 15px 0px 0px;\n border-top: 1px solid #53627c;\n `};\n\n &.income-series {\n background-color: unset;\n background-image: url('${props => props.incomeSeriesBackground}');\n background-repeat: round;\n background-size: cover;\n\n ${props => props.theme.isMobile && `\n background-image: url('${props.incomeSeriesBackground}');\n `};\n }\n\n &.top-rated {\n background-color: unset;\n background-image: url('${props => props.topRatedFundSeriesDesktopBackground}');\n background-repeat: round;\n background-size: cover;\n\n ${props => props.theme.isMobile && `\n background-image: url('${props.topRatedFundSeriesMobileBackground}');\n `};\n }\n\n ${props => props.theme.isMobileOrTablet && `\n min-height: 130px;\n margin-top: 0;\n `};\n\n ${props => props.theme.isMobile && !props.showInModal && `\n min-height: 95px;\n `};\n\n > div {\n display: flex;\n width: 100%;\n margin: 0 auto;\n justify-content: space-between;\n\n ${props => props.theme.isXLarge && `\n max-width: 1015px;\n `};\n\n ${props => props.theme.isXXLarge && `\n max-width: 1250px;\n `};\n }\n`;\n\nconst BreadcrumbContainer = styled.div`\n margin: 0 auto;\n padding: 0 20px;\n width: 100%;\n\n ${props => props.theme.isLarge && `\n padding: 0 32px;\n `};\n\n ${props => props.theme.isMobileOrTablet && !props.theme.isMobile && `\n padding: 0 28px;\n `};\n\n ${props => props.theme.isMobile && `\n overflow-x: auto;\n scrollbar-color: #8ea3b5;\n `};\n`;\n\nconst Logo = styled.img`\n position: ${props => (props.showInModal ? 'relative' : 'absolute')};\n max-width: 80px;\n\n ${props => props.showInModal && `\n height: 60px;\n `};\n\n ${props => props.theme.isMobile && `\n top: ${(props.showInModal ? 60 : 100)}px;\n right: 20px;\n max-width: 66px;\n `};\n\n ${props => props.theme.isTablet && `\n top: ${(props.showInModal ? 50 : 120)}px;\n right: 28px;\n `};\n\n ${props => props.theme.isLarge && `\n top: ${(props.showInModal ? 50 : 100)}px;\n right: 32px;\n `};\n\n ${props => props.theme.isXLarge && `\n top: ${(props.showInModal ? 30 : 150)}px;\n right: calc(50% - 472px);\n `};\n\n ${props => props.theme.isXXLarge && `\n right: calc(50% - 592px);\n `}\n\n &.income-series {\n max-width: 60px;\n\n ${props => props.theme.isMobile && `\n top: ${(props.showInModal ? 60 : 80)}px;\n `};\n\n ${props => props.theme.isTablet && `\n top: ${(props.showInModal ? 60 : 100)}px;\n max-width: 64px;\n `};\n\n ${props => props.theme.isLarge && `\n top: ${(props.showInModal ? 40 : 90)}px;\n `};\n\n ${props => props.theme.isXLarge && `\n top: ${(props.showInModal ? 30 : 150)}px;\n `};\n }\n`;\n\nexport default function Hero(props) {\n const {\n fund: {\n isInIncomeSeries,\n isInTopRatedFundsSeries,\n },\n showInModal,\n topRatedFundSeriesDesktopBackground,\n topRatedFundSeriesMobileBackground,\n topRatedFundSeriesLogo,\n incomeSeriesBackground,\n incomeSeriesLogo,\n breadcrumb,\n } = props;\n\n // eslint-disable-next-line no-nested-ternary\n const className = isInIncomeSeries ? 'income-series' : isInTopRatedFundsSeries ? 'top-rated' : '';\n const logo = isInIncomeSeries ? incomeSeriesLogo : topRatedFundSeriesLogo;\n\n return (\n \n \n \n {!!isLarge && !showInModal && \n \n {!isLarge && !showInModal && \n \n );\n}\n// eslint-enable-next-line complexity\n\nFund.propTypes = propTypes;\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport StickoutBanner from '../../shared/stickout-banner';\nimport Type from '../../shared/fund/type';\nimport WholesaleTag from '../../shared/fund/wholesale-tag';\nimport Logo from './primary-content-components/logo';\nimport Name from './primary-content-components/name';\nimport Company from './primary-content-components/company';\nimport Facts from './primary-content-components/facts';\nimport Actions from './primary-content-components/actions';\nimport Objective from './primary-content-components/objective';\n\nconst Container = styled(StickoutBanner)`\n border: 1px solid ${props => props.theme.secondaryColor30Transparent};\n padding-bottom: 24px;\n\n ${props => props.theme.isXXLarge && `\n width: 1256px;\n max-width: 1256px;\n `}\n\n ${props => props.theme.isXLarge && `\n width: calc(100% + 64px);\n `};\n\n ${props => props.theme.isLarge && `\n margin-top: -155px;\n `};\n`;\n\nconst Wrapper = styled.div`\n margin: 0;\n padding: 0 20px;\n ${props => props.theme.isLarge && `\n padding: 0 32px;\n `};\n ${props => props.theme.isMobileOrTablet && !props.theme.isMobile && `\n padding: 0 28px;\n `};\n`;\n\nconst Fund = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n ${props => props.theme.isMobileOrTablet && `\n flex-wrap: wrap;\n `};\n ${props => props.theme.isLarge && `\n max-height: 244px;\n `};\n`;\n\nconst DescriptionContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-grow: 2;\n ${props => props.theme.isMobileOrTablet && `\n order: 3;\n width: 100%;\n `};\n`;\n\nconst FlexRow = styled.div`\n display: flex;\n flex-direction: row;\n margin: 28px 0 8px 0;\n\n > div > span {\n font-size: 14px;\n }\n`;\n\nconst Divider = styled.div`\n width: 100%;\n height: 1px;\n background-image: linear-gradient(-96deg, #fff 31%, #d4dfeb 99%);\n padding: 0;\n margin-top: 24px;\n`;\n\nconst getGrowth = fund => {\n const attr = _.find(_.get(fund, 'performance'), p => p.name === 'returnSinceInceptionPercent');\n return parseFloat(_.get(attr, 'value'));\n};\n\nexport default function PrimaryContent({ fund, showInModal, showContactButton }) {\n const factsProps = _.merge(fund, {\n code: fund.apirCode || fund.stockCode,\n // eslint-disable-next-line no-nested-ternary\n codeType: fund.apirCode ? 'apir' : fund.stockCode ? 'stock' : null,\n growth: getGrowth(fund),\n });\n\n const logoProps = {\n url: fund.company.logoPictureUrl,\n color: fund.company.logoColor,\n };\n\n return (\n \n \n \n \n \n {!!fund.fundType && \n \n \n {!!fund.objective && \n \n );\n}\n\nPrimaryContent.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n nameAndStock: PropTypes.string.isRequired,\n published: PropTypes.bool.isRequired,\n fundAssetClass: PropTypes.string,\n apirCode: PropTypes.string,\n stockCode: PropTypes.string,\n fundType: PropTypes.string,\n investmentHorizon: PropTypes.string,\n minimumInvestment: PropTypes.number,\n inceptionDate: PropTypes.string,\n objective: PropTypes.string,\n currency: PropTypes.string,\n performance: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string,\n label: PropTypes.string,\n value: PropTypes.string,\n })).isRequired,\n isFollowedByCurrentUser: PropTypes.bool.isRequired,\n company: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n logoPictureUrl: PropTypes.string,\n logoColor: PropTypes.string,\n }).isRequired,\n fundInvestorVehicleType: PropTypes.string,\n performanceFee: PropTypes.string,\n financialYearEndFeesDate: PropTypes.string,\n wholesale: PropTypes.bool.isRequired,\n }).isRequired,\n showContactButton: PropTypes.bool.isRequired,\n showInModal: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Colour from 'color';\n\nconst Container = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #D7DFE7;\n box-sizing: border-box;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);\n border-radius: 6px;\n margin-right: 24px;\n background-color: ${props => props.bgColor};\n margin-top: -16px;\n width: 118px;\n height: 118px;\n\n ${props => props.theme.isLarge && `\n width: 152px;\n height: 152px;\n `};\n ${props => props.theme.isXLarge && `\n margin-top: -24px;\n `};\n`;\n\nconst ImageContainer = styled.div`\n width: 93px;\n margin: 0 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${props => props.theme.isLarge && `\n width: 117px;\n `};\n`;\n\nconst Img = styled.img`\n max-width: 100%;\n max-height: 100%;\n`;\n\nconst white = Colour('white').hex();\nexport default function Logo({ url, color }) {\n let c;\n try {\n c = Colour(color || white);\n } catch (err) {\n c = Colour(white);\n }\n const bgColor = c.hex();\n return (\n \n {!!url && (\n \n 
\n \n )}\n \n\n );\n}\n\nLogo.propTypes = {\n url: PropTypes.string,\n color: PropTypes.string,\n};\n\nLogo.defaultProps = {\n url: null,\n color: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Text = styled.h1`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => (props.theme.isMobile ? props.theme.fontWeightHeavy : props.theme.fontWeightBold)};\n font-size: ${props => (props.theme.isMobile ? 26 : 32)}px;\n line-height: ${props => (props.theme.isMobile ? 123 : 100)}%;\n color: ${props => props.theme.bodyColor};\n margin: 0;\n ${props => props.theme.isFeaturedLarge && `\n margin-right: 48px;\n `};\n`;\n\nexport default function Name({ name }) {\n return {name} ;\n}\n\nName.propTypes = { name: PropTypes.string.isRequired };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Text = styled.p`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 19px;\n line-height: 120%;\n color: ${props => props.theme.secondaryColor};\n margin-top: 8px;\n margin-bottom: 0;\n\n > a {\n color: ${props => props.theme.secondaryColor};\n\n &:hover {\n color: ${props => props.theme.secondaryColor};\n text-decoration: underline;\n cursor: pointer;\n }\n }\n`;\n\nexport default function Company({ name, slug }) {\n return (\n \n {name}\n \n );\n}\n\nCompany.propTypes = {\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport humanFormat from 'human-format';\nimport Fact from './fact';\nimport GrowthSinceInceptionFact from './growth-since-inception-fact';\nimport Fee from './fee';\nimport Code from './code';\nimport NoPerformanceFee from './no-performance-fee';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n margin-top: 20px;\n\n > div {\n padding-right: 20px;\n\n &:last-child {\n width: fit-content;\n padding-right: 0;\n }\n }\n\n ${props => props.theme.isLarge && `\n justify-content: flex-start;\n\n > div {\n padding-right: 48px;\n }\n `};\n\n ${props => props.theme.isMobile && `\n margin-top: 0px;\n\n & > div:nth-child(2) {\n width: calc(100% - 200px);\n }\n `};\n\n ${props => !props.theme.isFeaturedMedium && `\n width: auto;\n `};\n`;\n\n// eslint-disable-next-line complexity\nexport default function Facts({\n code, codeType, fundType, investmentHorizon, minimumInvestment, inceptionDate,\n growth, currency, managementFee, performanceFee, financialYearEndFeesDate,\n isPerformanceFeeChargedYes, isPerformanceFeeChargedNo,\n}) {\n const CODE_TYPE_TO_LABEL = {\n apir: 'apir',\n stock: null,\n };\n\n const money = (minimumInvestment > 0 && currency)\n ? _.toUpper(`$${humanFormat(minimumInvestment, { decimals: 0, separator: '' })}`)\n : null;\n const showMin = minimumInvestment > 0 && !!currency;\n const showCode = fundType !== 'ETF' || codeType === 'stock';\n const showInception = !!inceptionDate && !Number.isNaN(growth);\n const { isXLarge } = React.useContext(ThemeContext);\n const performanceFeeComponent = isPerformanceFeeChargedNo\n ? \n {!!investmentHorizon && \n );\n}\n// eslint-enable-next-line complexity\n\nFacts.propTypes = {\n code: PropTypes.string.isRequired,\n codeType: PropTypes.oneOf(['apir', 'stock']).isRequired,\n fundType: PropTypes.string,\n investmentHorizon: PropTypes.string,\n minimumInvestment: PropTypes.number,\n inceptionDate: PropTypes.string,\n growth: PropTypes.number,\n currency: PropTypes.string,\n managementFee: PropTypes.string,\n performanceFee: PropTypes.string,\n financialYearEndFeesDate: PropTypes.string,\n isPerformanceFeeChargedYes: PropTypes.bool.isRequired,\n isPerformanceFeeChargedNo: PropTypes.bool.isRequired,\n};\n\nFacts.defaultProps = {\n fundType: null,\n investmentHorizon: null,\n minimumInvestment: 0,\n inceptionDate: null,\n growth: Number.NaN,\n currency: null,\n managementFee: null,\n performanceFee: null,\n financialYearEndFeesDate: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Container, Label, Value } from './styles';\nimport { sinceYears, formatPercent } from '../shared-utils';\n\nconst Values = styled(Value)`\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n\n & > small {\n margin: 0 2px 0 4px;\n font-weight: ${props => props.theme.fontWeightBold};\n white-space: nowrap;\n }\n\n & > span {\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightRegular};\n white-space: nowrap;\n\n ${props => props.theme.isMobileOrTablet && `\n font-size: 12px;\n line-height: 120%;\n width: 100%;\n `};\n }\n`;\n\nexport default function GrowthSinceInceptionFact({ date, percent }) {\n return (\n \n \n \n {formatPercent(percent)}\n p.a.\n {sinceYears(date)}\n \n \n );\n}\n\nGrowthSinceInceptionFact.propTypes = {\n date: PropTypes.string.isRequired,\n percent: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Container } from './styles';\n\nconst SContainer = styled(Container)`\n ${props => !props.theme.isMobileOrTablet && `\n margin-top: auto;\n margin-left: auto;\n `};\n\n ${props => props.theme.isMediumXLarge && !props.theme.isXLarge && `\n &.has-performance-fee {\n margin-bottom: 12px;\n }\n `};\n\n ${props => !props.theme.isMediumXLarge && `\n margin-top: 16px;\n `};\n\n ${props => props.theme.isMobile && `\n margin-top: 0;\n `};\n`;\n\nconst Text = styled.div`\n font: ${props => props.theme.fontWeightRegular} 16px/120% ${props => props.theme.fontFamilyBody};\n text-transform: uppercase;\n\n ${props => props.theme.isMobile && `\n font-size: 14px;\n `};\n`;\n\nexport default function Code({ codeLabel, code, hasPerformanceFee }) {\n return (\n \n {codeLabel ? `${codeLabel}: ${code}` : code} \n \n );\n}\n\nCode.propTypes = {\n codeLabel: PropTypes.string.isRequired,\n code: PropTypes.string.isRequired,\n hasPerformanceFee: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport PerformanceFeeCharged from '../fees-and-pricing-components/performance-fee-charged';\nimport { Container, Label } from './styles';\n\nconst SContainer = styled(Container)`\n & > [class^=\"performance-fee-charged\"] {\n margin-top: 8px;\n }\n`;\n\nexport default function NoPerformanceFee() {\n return (\n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport IconedButton from '../../../shared/iconed-button';\nimport FundFollowButton from '../fund-follow-button';\nimport EnquiryContext from '../../../shared/enquiry/context';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 24px;\n\n ${props => props.theme.isXLarge && `\n padding-top: 32px;\n `};\n\n ${props => props.theme.isMobile && `\n padding-top: 10px;\n `};\n\n width: ${props => (props.theme.isLarge ? 132 : 107)}px;\n\n & button > span:not(.icon-lw) {\n font-size: ${props => (props.theme.isLarge ? 14 : 12)}px;\n }\n\n && > button[name=\"fund-follow-button\"] {\n width: 100%;\n margin-top: 0;\n ${props => props.theme.isMobile && `\n height: 33px;\n `};\n ${props => !props.theme.isLarge && `\n > .icon-box > .icon-lw-user-check {\n left: 0px;\n }\n `};\n }\n\n &&&& button:not([name=\"fund-follow-button\"]) {\n width: 100%;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n }\n\n`;\n\nconst DarkButton = styled(IconedButton)`\n outline: none;\n margin-top: 12px;\n width: 100%;\n height: 36px;\n background-color: #3C4966;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 120px;\n margin-top: 8px;\n align-items: center;\n justify-content: center;\n `};\n\n ${props => props.theme.isMobile && `\n height: 33px;\n & > span:not(.icon-lw) {\n font-size: 14px;\n }\n `};\n\n &:hover {\n background-color: #414651;\n color: ${props => props.theme.bodyBackgroundColor};\n }\n\n & > span.icon-lw {\n font-size: 16px;\n padding: 5px;\n background-color: ${props => props.theme.bodyColor};\n }\n`;\n\nexport default function Actions({ fund, showInModal, showContactButton }) {\n const { dispatch } = React.useContext(EnquiryContext);\n\n const handleContactClick = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'fund_profile_top_section_contact_clicked',\n statisticable: 'fund',\n id: fund.id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm', payload: { scroll: !showInModal } });\n if (showInModal) {\n const el = document.getElementsByName('contact')[0];\n el && el.scrollIntoView({ behavior: 'smooth' });\n }\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n const onMount = () => {\n if (window.location.hash === '#enquiry') {\n dispatch({ type: 'showEnquiryForm', payload: { scroll: true } });\n }\n };\n\n return (\n \n \n \n Contact\n \n )}\n \n );\n}\n\nActions.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n isFollowedByCurrentUser: PropTypes.bool,\n }).isRequired,\n showContactButton: PropTypes.bool.isRequired,\n showInModal: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Text = styled.p`\n font: ${props => props.theme.fontWeightRegular} 19px/130% ${props => props.theme.fontFamilyBody};\n margin: 0;\n margin-top: 24px;\n ${props => props.theme.isFeaturedMedium && `\n max-width: 712px;\n `};\n ${props => props.theme.isFeaturedLarge && `\n max-width: 780px;\n `};\n ${props => props.theme.isXXLarge && `\n max-width: 792px;\n `};\n color: ${props => props.theme.bodyColor};\n`;\nexport default function Objective({ value }) {\n return {value} ;\n}\n\nObjective.propTypes = { value: PropTypes.string.isRequired };\n","import moment from 'moment';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { SectionContainer } from '../../shared/sectionable/styles';\n\nconst Container = styled(SectionContainer)`\n display: flex;\n flex-direction: row;\n justify-content: ${props => (props.theme.isMobile ? 'flex-start' : 'flex-end')};\n margin: 24px 0 0;\n z-index: 1;\n`;\n\nconst GenDate = styled.span`\n font: ${props => props.theme.fontWeightHeavy} 14px/100% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n`;\n\nexport default function Meta({ fund }) {\n const { updatedAt } = fund;\n const timestamp = moment(updatedAt);\n let date;\n if (updatedAt.length && timestamp.isValid()) {\n date = timestamp.format('Do MMM, YY');\n }\n\n if (!date) {\n return null;\n }\n\n return (\n \n {`updated ${date}`} \n \n );\n}\n\nMeta.propTypes = {\n fund: PropTypes.shape({\n updatedAt: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { SectionContainer, SectionTitle } from '../../shared/sectionable/styles';\nimport propTypes from '../common/prop-types';\nimport Details from './info-components/details';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\n\nconst Container = styled(SectionContainer)`\n margin-top: 48px;\n margin-bottom: 120px;\n\n ${props => (props.theme.isMobile ? `\n margin-bottom: 80px;\n ` : `\n &:not(:first-child) {\n border-top: 1px solid #d7dfe7;\n padding-top: 72px;\n }\n `)};\n`;\n\nconst sectionName = 'fund-information';\n\nexport default function Info({ fund }) {\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n return (\n \n information \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nInfo.propTypes = { fund: propTypes.fund };\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport propTypes from '../../common/prop-types';\nimport { SectionDetails } from '../../../shared/sectionable/styles';\nimport withKeyInfo from './hoc-single-info';\n\nconst gap = 32;\nconst Container = styled(SectionDetails)`\n flex-direction: row;\n ${props => (props.theme.isLarge ? `\n & > section {\n flex-basis: 50%;\n }\n\n & > section:first-child {\n margin-right: ${gap}px;\n }\n ` : `\n flex-wrap: wrap;\n & > section {\n flex-basis: 100%;\n }\n\n & > section:first-child {\n margin-bottom: ${gap}px;\n }\n `)};\n\n & > section > *:not(:last-child) {\n margin-bottom: ${gap}px;\n }\n`;\n\nexport default function Details({ fund }) {\n const { fundType, apirCode } = fund;\n const isETF = fundType === 'ETF';\n const showApir = !isETF && apirCode;\n const keys = [\n [\n 'name', 'fundAssetClass', 'currency', 'minimumInvestment',\n 'investmentHorizon', 'geographicalFocus',\n showApir ? 'apirCode' : 'stockCode',\n 'isin',\n ],\n ['fundSize', 'legalStructure', 'domicile', 'inceptionDate', 'fundType', 'moreInfo'],\n ];\n\n return (\n \n {_.times(2).map(index => (\n \n {keys[index].map(key => {\n const Component = withKeyInfo(key);\n return \n ))}\n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nDetails.propTypes = { fund: propTypes.fund };\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport humanFormat from 'human-format';\nimport propTypes from '../../common/prop-types';\nimport FundSizeInfo from './fund-size-info';\nimport InceptionDateInfo from './inception-date-info';\nimport InvestmentHorizonInfo from './investment-horizon-info';\nimport MoreInfo from './more-info';\n\nconst round = { decimals: 0, separator: '' };\nconst upper = key => fnd => _.toUpper(_.get(fnd, key));\n\nconst buildProps = {\n apirCode: { type: 'apir', value: upper('apirCode') },\n currency: { value: upper('currency') },\n fundSize: { Component: FundSizeInfo },\n inceptionDate: { Component: InceptionDateInfo },\n investmentHorizon: { Component: InvestmentHorizonInfo },\n minimumInvestment: {\n value: fnd => _.toUpper(`$${humanFormat(_.get(fnd, 'minimumInvestment'), round)}`),\n },\n name: { type: 'fund name' },\n moreInfo: { type: 'more information', Component: MoreInfo },\n stockCode: { type: 'stock code', value: upper('stockCode') },\n};\n\nconst getType = key => _.lowerCase(_.get(buildProps, `${key}.type`, key));\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n font: ${props => props.theme.fontWeightNormal} 19px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n\n & > span {\n font-weight: ${props => props.theme.fontWeightBold};\n color: ${props => props.theme.secondaryColor};\n font-size: 14px;\n text-transform: uppercase;\n margin-bottom: 4px;\n height: 22px !important;\n }\n\n & > section {\n text-transform: capitalize;\n > small {\n text-transform: none;\n margin-left: 10px;\n font-size: 14px;\n }\n }\n`;\n\nexport default function withKeyInfo(key) {\n const valueFunc = _.get(buildProps, `${key}.value`);\n const ValueComponent = _.get(buildProps, `${key}.Component`);\n\n function Component({ fund }) {\n let value;\n\n if (key === 'moreInfo') {\n const pdsFileUrl = _.get(fund, 'pdsFileUrl');\n const tmdFileUrl = _.get(fund, 'tmdFileUrl');\n\n if (!pdsFileUrl && !tmdFileUrl) {\n return null;\n }\n } else {\n value = _.get(fund, key);\n\n if (!value) {\n return null;\n }\n }\n\n let label = getType(key);\n label = label.startsWith('fund ') ? label.replace('fund ', '') : label;\n\n return (\n \n {label}\n \n {!!valueFunc && valueFunc(fund)}\n {!!ValueComponent && \n \n );\n }\n\n /* eslint-disable-next-line react/require-default-props */\n Component.propTypes = { fund: propTypes.fund };\n\n Component.displayName = _.capitalize(key);\n\n return Component;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { formatMoney } from '../../../shared/fund/format';\n\nexport default function FundSizeInfo({ fund }) {\n const { fundSize, fundSizeDate } = fund;\n\n const money = formatMoney(fundSize);\n const moneyDate = fundSizeDate ? `(${fundSizeDate})` : null;\n\n return (\n <>\n {money}\n {moneyDate}\n \n );\n}\n\nFundSizeInfo.propTypes = {\n fund: PropTypes.shape({\n fundSize: PropTypes.number,\n fundSizeDate: PropTypes.string,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\nexport default function InceptionDateInfo({ fund }) {\n const d = moment(_.get(fund, 'inceptionDate'));\n const diff = moment().diff(d, 'years');\n return (\n <>\n {`${d.format('D MMM YYYY')}`}\n {!!diff && {`(${diff}+ year${diff > 1 ? 's' : ''})`}}\n \n );\n}\n\nInceptionDateInfo.propTypes = {\n fund: PropTypes.shape({\n inceptionDate: PropTypes.string,\n }).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Text = styled.span`\n text-transform: none;\n`;\n\nexport default function InvestmentHorizonInfo({ fund }) {\n return {_.get(fund, 'investmentHorizon')} ;\n}\n\nInvestmentHorizonInfo.propTypes = {\n fund: PropTypes.shape({\n investmentHorizon: PropTypes.string,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\n\nconst Anchor = styled.a`\n display: block;\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 19px;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n`;\n\nexport default function MoreInfo({ fund }) {\n const { id, pdsFileUrl, tmdFileUrl } = fund;\n\n const handleClick = (eventType, url) => {\n recordStatisticsEvent({\n event: eventType,\n statisticable: 'fund',\n id,\n clicked_url: url,\n page: `${window.location.pathname}#fund-info`,\n });\n\n return false;\n };\n\n return (\n <>\n {pdsFileUrl && (\n handleClick('fund_profile_pds_clicked', pdsFileUrl)}>\n Product Disclosure Statement\n \n )}\n {tmdFileUrl && (\n handleClick('fund_profile_tmd_clicked', tmdFileUrl)}>\n Target Market Determination\n \n )}\n \n );\n}\n\nMoreInfo.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number,\n pdsFileUrl: PropTypes.string,\n tmdFileUrl: PropTypes.string,\n }).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { SectionContainer, SectionTitle } from '../../shared/sectionable/styles';\nimport propTypes from '../common/prop-types';\nimport Details from './performance-components/details';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\nimport useFundStateStore from '../common/fund-state-hook';\n\nconst Container = styled(SectionContainer)`\n margin-top: 48px;\n margin-bottom: 0;\n\n ${props => (props.theme.isMobile ? `\n margin-bottom: 24px;\n ` : `\n &:not(:first-child) {\n border-top: 1px solid #d7dfe7;\n padding-top: 72px;\n }\n `)};\n`;\n\nconst sectionName = 'fund-performance';\n\nexport default function Performance({ fund }) {\n const set = useFundStateStore(state => state.set);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n set(state => {\n state.hasPerformanceUpdates = true;\n });\n }, {});\n\n return (\n \n performance \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nPerformance.propTypes = { fund: propTypes.fund };\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport propTypes from '../../common/prop-types';\nimport { SectionDetails } from '../../../shared/sectionable/styles';\nimport { attrs2month } from './utils';\nimport Name from './name';\nimport Highlights from './highlights';\nimport Returns from './returns';\n\nconst Container = styled(SectionDetails)`\n flex-direction: column;\n & > * {\n margin-bottom: ${props => (props.theme.isMobile ? 48 : 32)}px;\n }\n\n & > *:nth-child(1) {\n order: ${props => (props.theme.isMobile ? -1 : -2)};\n }\n\n & > *:nth-child(2) {\n order: ${props => (props.theme.isMobile ? -2 : -1)};\n }\n`;\n\nconst Fees = styled.div`\n & > p {\n font: ${props => props.theme.fontWeightRegular} 16px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n letter-spacing: 0.1px;\n }\n\n & > p.section-title{\n text-transform: uppercase;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 16px;\n font-size: 14px;\n }\n`;\n\nexport default function Details({ fund }) {\n const since = fund.inceptionDate;\n const perf = fund.performance.map(p => ({\n ...p,\n months: attrs2month[p.name],\n value: parseFloat(p.value),\n }));\n const oldest = _.reduce(\n fund.performance,\n (mom, p) => (mom.isAfter(p.updatedAt) ? moment(p.updatedAt) : mom),\n moment(),\n ).format('DD MMM YYYY');\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nDetails.propTypes = { fund: propTypes.fund };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n & > p {\n font: ${props => props.theme.fontWeightBold} 21px/120% ${props => props.theme.fontFamilyBody};\n margin: 0;\n color: ${props => props.theme.bodyColor};\n }\n\n & > .text {\n font-size: 16px;\n line-height: 100%;\n letter-spacing: 0.1px;\n color: ${props => props.theme.secondaryColor};\n\n > .regular {\n margin-top: 3px;\n font-weight: ${props => props.theme.fontWeightRegular};\n }\n\n > .bold {\n margin: 16px 0 0 0;\n font-weight: ${props => props.theme.fontWeightBold};\n }\n }\n`;\n\nexport default function Name({ name, perfUpdateDate }) {\n return (\n \n \n );\n}\n\nName.propTypes = {\n name: PropTypes.string.isRequired,\n perfUpdateDate: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport perfType from './prop-types';\nimport { month2Label } from './utils';\nimport { sinceYears, formatPercent } from '../shared-utils';\n\n/* eslint-disable no-nested-ternary */\nconst Container = styled.div`\n display: flex;\n flex-direction: ${props => (props.theme.isMobileOrTablet ? 'column' : 'row')};\n\n & > div {\n min-width: ${props => (props.theme.isMobile ? '100%' : (props.theme.isXLarge ? '204px' : '126px'))};\n display: flex;\n flex-direction: column;\n margin-bottom: ${props => (props.theme.isMobile ? 40 : 36)}px;\n\n > .period {\n font: ${props => props.theme.fontWeightBold} 14px/16px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n letter-spacing: 0.1px;\n text-transform: uppercase;\n }\n\n > .return {\n > * {\n font: ${props => props.theme.fontWeightBold} 32px/100% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n letter-spacing: 0.1px;\n }\n\n > .small {\n margin-left: 4px;\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 19px;\n }\n\n > .date {\n margin-left: 2px;\n font-size: 19px;\n font-weight: ${props => props.theme.fontWeightRegular};\n }\n }\n }\n\n ${props => props.theme.isMobile && `\n & > div:last-child {\n margin-bottom: 0;\n }\n `};\n`;\n/* eslint-enable no-nested-ternary */\n\nconst Return = ({ val, month, since }) => {\n if (Number.isNaN(val)) {\n return null;\n }\n\n return (\n \n {attrs.map(d => \n );\n}\n\nHighlights.propTypes = {\n perf: perfType.isRequired,\n attrs: PropTypes.arrayOf(PropTypes.number).isRequired,\n since: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport perfType from './prop-types';\nimport { attrs2month, month2Label } from './utils';\nimport { sinceYears, yearsAndMonthsAgo, formatPercent } from '../shared-utils';\n\nconst Container = styled.table`\n width: 100%;\n\n &&&& {\n margin-bottom: 32px;\n }\n\n & td {\n width: 50%;\n height: 56px;\n }\n\n & td:first-child, & th:first-child {\n text-align: left;\n }\n\n & td:last-child, & th:last-child {\n text-align: right;\n }\n\n & > thead {\n font: ${props => props.theme.fontWeightDccc} 14px/16px ${props => props.theme.fontFamilyBody};\n letter-spacing: 0.1px;\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n\n tr {\n border-bottom: 1px solid ${props => props.theme.secondaryColor};\n\n /* stylelint-disable-next-line no-descending-specificity */\n th {\n padding-top: 0px;\n padding-bottom: 16px;\n }\n }\n }\n\n & > tbody {\n font: ${props => props.theme.fontWeightRegular} 19px/100% ${props => props.theme.fontFamilyBody};\n letter-spacing: 0.1px;\n color: ${props => props.theme.bodyColor};\n\n\n > tr {\n border-bottom: 1px solid rgba(16, 58, 107, 0.07);\n\n > .all-text {\n height: 30px;\n padding: 8px 0;\n display: table-cell !important;\n text-align: center !important;\n font: ${props => props.theme.fontWeightRegular} 16px/112% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n }\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n td {\n padding: 20px 0;\n }\n\n td:first-child {\n display: flex;\n flex-direction: column;\n white-space: nowrap;\n small {\n margin-left: 6px;\n font-size: 16px;\n }\n\n .date {\n color: ${props => props.theme.primaryColor};\n font-weight: ${props => props.theme.fontWeightBold};\n white-space: nowrap;\n }\n }\n\n > tr:first-child > td {\n padding-top: 32px;\n }\n\n > tr:last-child {\n border-bottom: 1px solid #d7dfe7;\n\n > td {\n padding-bottom: 48px;\n }\n }\n }\n`;\n\nconst Return = ({ value, months }) => {\n if (Number.isNaN(value)) {\n return null;\n }\n\n return (\n \n \n \n {month2Label(months)}\n {months > 12 && p.a.}\n \n \n {formatPercent(value)} \n \n );\n};\n\nReturn.propTypes = {\n value: PropTypes.number.isRequired,\n months: PropTypes.number.isRequired,\n};\n\nconst ReturnSinceInception = ({ value, since }) => (\n \n \n \n Since Inception\n p.a.\n \n {sinceYears(since, true)}\n \n {formatPercent(value)} \n \n);\n\nReturnSinceInception.propTypes = {\n value: PropTypes.number.isRequired,\n since: PropTypes.string.isRequired,\n};\n\nconst ReturnPartial = ({ since }) => (\n \n \n {`Began ${yearsAndMonthsAgo(since)}`}\n \n \n);\n\nReturnPartial.propTypes = {\n since: PropTypes.string.isRequired,\n};\n\nconst getSlot = (list, months) => _.find(list, { months }) || { months, value: Number.NaN };\nconst isPartial = list => _.find(list, { value: Number.NaN });\n\nexport default function Returns({ perf, since }) {\n return (\n \n \n \n period \n return \n \n \n \n {_.values(attrs2month).map(d => \n );\n}\n\nReturns.propTypes = {\n perf: perfType.isRequired,\n since: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { SectionContainer, SectionTitle } from '../../shared/sectionable/styles';\nimport propTypes from '../common/prop-types';\nimport Details from './fees-and-pricing-components/details';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\nimport useFundStateStore from '../common/fund-state-hook';\n\nconst Container = styled(SectionContainer)`\n margin-top: 24px;\n margin-bottom: 36px;\n\n ${props => (props.theme.isMobile ? `\n margin-top: 0;\n margin-bottom: 24px;\n ` : `\n &:not(:first-child) {\n border-top: 1px solid #d7dfe7;\n padding-top: 72px;\n }\n `)};\n`;\n\nconst sectionName = 'fund-fees';\n\nexport default function FeesAndPricing({ fund }) {\n const set = useFundStateStore(state => state.set);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n set(state => {\n state.hasFeesPricing = true;\n });\n }, {});\n\n return (\n \n fees & pricing \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nFeesAndPricing.propTypes = { fund: propTypes.fund };\n","import React from 'react';\nimport styled from 'styled-components';\nimport propTypes from '../../common/prop-types';\nimport { SectionDetails } from '../../../shared/sectionable/styles';\nimport Fees from './fees';\nimport PerformanceFees from './performance-fees';\nimport Pricing from './pricing';\nimport Message from './message';\n\nconst Container = styled(SectionDetails)`\n flex-direction: column;\n & > * {\n margin-bottom: ${props => (props.theme.isMobile ? 48 : 32)}px;\n }\n`;\n\nexport default function Details({ fund }) {\n const { isPerformanceFeeChargedNo } = fund;\n\n return (\n \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nDetails.propTypes = { fund: propTypes.fund };\n","import React from 'react';\nimport styled from 'styled-components';\nimport TooltipModal from '../tooltip-modal';\nimport { TitleWithInfo, QuestionMark } from '../../../shared/fund/info-styles';\nimport propTypes from '../../common/prop-types';\nimport useFundStateStore from '../../common/fund-state-hook';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport Fee from './fee';\nimport PerformanceFeeCharged from './performance-fee-charged';\n\n/* eslint-disable no-nested-ternary */\nconst Container = styled.div`\n display: flex;\n flex-direction: ${props => (props.theme.isMobileOrTablet ? 'column' : 'row')};\n\n & > div {\n min-width: ${props => (props.theme.isMobile ? '100%' : '33%')};\n display: flex;\n flex-direction: column;\n margin-bottom: 40px;\n\n > .title {\n font: ${props => props.theme.fontWeightBold} 14px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n letter-spacing: 0.1px;\n text-transform: uppercase;\n margin-bottom: 4px;\n display: flex;\n justify-content: flex-start;\n height: 16px;\n\n .question-mark {\n ${QuestionMark};\n }\n }\n\n > .help {\n ${TitleWithInfo};\n }\n\n > .fee {\n > * {\n font: ${props => props.theme.fontWeightBold} 32px/100% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n letter-spacing: 0.1px;\n }\n\n > .small {\n margin-left: 4px;\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 19px;\n }\n\n > .date {\n font-size: 14px;\n line-height: 16px;\n font-weight: ${props => props.theme.fontWeightRegular};\n display: ${props => (props.theme.isMobile ? 'inline' : 'block')};\n margin-left: ${props => (props.theme.isMobile ? 8 : 0)}px;\n }\n }\n\n > .performance-fee-charged {\n margin-top: 4px;\n }\n }\n\n & > div:last-child {\n margin-bottom: 0;\n }\n\n ${props => props.theme.isLarge && `\n & > div:nth-child(1) {\n min-width: 25%;\n }\n & > div:nth-child(2) {\n min-width: 25%;\n }\n `};\n`;\n\nconst costRatioHelp = [\n 'This is the realised total cost ratio which represents the actual fees charged over the course of the financial year, as seen in a financial statement. This includes management or investment fees, performance fees, administration fees and any other fees for underlying funds or similarly outsourced fee arrangements. The purpose of this metric is to provide a level of comparability to support informed decisions when considering the cost of an investment across different investment options.',\n];\n\nconst managementFeeHelp = [\n 'This is the ongoing fee for managing an investment in a fund. Charged as a percentage of the total investment amount under management.',\n];\n\nexport default function Fees({ fund }) {\n const {\n id,\n managementFee,\n totalCostRatio,\n financialYearEndFeesDate,\n isPerformanceFeeChargedUnknown,\n isPerformanceFeeChargedYes,\n } = fund;\n\n const set = useFundStateStore(state => state.set);\n\n const showTooltipModal = (title, helpContent) => event => {\n event.preventDefault();\n set(state => {\n state.showTooltip = true;\n state.tooltipTitle = title;\n state.tooltipContent = helpContent;\n });\n\n recordStatisticsEvent({\n event: 'fund_profile_tooltip_clicked',\n statisticable: 'fund',\n id,\n clicked_url: title.replace(/[\\s,/]/g, '_'),\n page: window.location.pathname,\n });\n };\n\n return (\n \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nFees.propTypes = { fund: propTypes.fund };\n","import React from 'react';\nimport styled from 'styled-components';\nimport Modal from 'react-bootstrap/Modal';\nimport Header from '../../shared/modal/header';\nimport Body from './tooltip-modal-components/tooltip-modal-body';\nimport { PopUpModalStyles } from '../../shared/modal/styles';\nimport useFundStateStore from '../common/fund-state-hook';\n\nconst PopUpModal = styled(Modal)`\n ${PopUpModalStyles};\n`;\n\nexport default function TooltipModal() {\n const set = useFundStateStore(state => state.set);\n const show = useFundStateStore(state => state.showTooltip);\n const title = useFundStateStore(state => state.tooltipTitle);\n const content = useFundStateStore(state => state.tooltipContent);\n\n const handleHide = () => {\n set(state => {\n state.showTooltip = false;\n });\n };\n\n return (\n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Modal from 'react-bootstrap/Modal';\nimport dt from '../../../../shared/theme';\n\nconst StyledBody = styled(Modal.Body)`\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n padding: 40px 32px;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n border-top: 0;\n `};\n\n > .title {\n margin-top: 0;\n margin-bottom: 10px;\n text-transform: uppercase;\n font-weight: ${props => dt(props).theme.fontWeightBold};\n font-size: 21px;\n line-height: 120%;\n color: ${props => dt(props).theme.bodyColor};\n display: flex;\n justify-content: space-between;\n\n ${props => dt(props).theme.isMobile && `\n > span.icon-lw-info-circle {\n display: none;\n }\n `};\n }\n\n > .content {\n margin-top: 16px;\n margin-bottom: 10px;\n font-style: normal;\n font-weight: normal;\n font-size: 19px;\n line-height: 130%;\n color: ${props => dt(props).theme.secondaryColor};\n }\n`;\n\nexport default function Body({\n title, content,\n}) {\n return (\n \n \n );\n}\n\nBody.propTypes = {\n title: PropTypes.string.isRequired,\n content: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../../shared/theme';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport { QuestionMark, TitleWithInfo } from '../../../shared/fund/info-styles';\nimport propTypes from '../../common/prop-types';\nimport useFundStateStore from '../../common/fund-state-hook';\nimport { Container, SSeparator, Title } from './styles';\nimport Fee from './fee';\nimport PerformanceFeeMethodology from './performance-fee-methodology';\n\nconst DetailsContainer = styled.div`\n display: flex;\n flex-direction: ${props => (dt(props).theme.isMobileOrTablet ? 'column' : 'row')};\n\n ${props => dt(props).theme.isLarge && `\n flex-wrap: wrap;\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n flex-wrap: nowrap;\n `};\n\n & > div {\n min-width: ${props => (dt(props).theme.isMobile ? '100%' : '33%')};\n display: flex;\n flex-direction: column;\n margin-bottom: 40px;\n\n > .title {\n font: ${props => dt(props).theme.fontWeightBold} 14px/120% ${props => dt(props).theme.fontFamilyBody};\n color: ${props => dt(props).theme.secondaryColor};\n letter-spacing: 0.1px;\n text-transform: uppercase;\n margin-bottom: 4px;\n display: flex;\n justify-content: flex-start;\n height: 16px;\n\n .question-mark {\n ${QuestionMark};\n }\n }\n\n > .help {\n ${TitleWithInfo};\n }\n\n > .fee {\n > * {\n font: ${props => dt(props).theme.fontWeightBold} 32px/100% ${props => dt(props).theme.fontFamilyBody};\n color: ${props => dt(props).theme.bodyColor};\n letter-spacing: 0.1px;\n }\n\n > .small {\n margin-left: 4px;\n font-weight: ${props => dt(props).theme.fontWeightBold};\n font-size: 19px;\n }\n\n > .date {\n font-size: 14px;\n line-height: 16px;\n font-weight: ${props => dt(props).theme.fontWeightRegular};\n display: ${props => (dt(props).theme.isMobile ? 'inline' : 'block')};\n margin-left: ${props => (dt(props).theme.isMobile ? 8 : 0)}px;\n }\n }\n }\n\n & > div:last-child {\n margin-bottom: 0;\n }\n\n ${props => dt(props).theme.isLarge && `\n & > div:nth-child(1) {\n min-width: 50%;\n }\n & > div:nth-child(2) {\n min-width: 50%;\n }\n & > div:nth-child(3) {\n width: 100%;\n }\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n & > div:nth-child(1) {\n min-width: 25%;\n }\n & > div:nth-child(2) {\n min-width: 25%;\n }\n & > div:nth-child(3) {\n min-width: 25%;\n }\n `};\n`;\n\nconst PERFORMANCE_FEE_HELP = [\n 'The Actual Performance Fee shown here is the actual fee that was charged most recently by the fund in relation to past performance and is not an estimate of the future performance fee that may be charged.',\n];\n\nconst MAX_PERFORMANCE_FEE_HELP = [\n 'A performance fee is a payment made to the manager for generating positive returns over a specific period of time based on set criteria.',\n 'The Performance Fee is shown is in the \"Fees and Costs Summary\" table within the PDS and is intended to indicate the potential on-going performance fee that could be charged.',\n];\n\nexport default function PerformanceFees({ fund }) {\n const {\n id,\n performanceFee,\n performanceFeePds,\n performanceFeeMethodology,\n financialYearEndFeesDate,\n pdsFileUrl,\n } = fund;\n\n const set = useFundStateStore(state => state.set);\n\n const showTooltipModal = (title, helpContent) => event => {\n event.preventDefault();\n set(state => {\n state.showTooltip = true;\n state.tooltipTitle = title;\n state.tooltipContent = helpContent;\n });\n\n recordStatisticsEvent({\n event: 'fund_profile_tooltip_clicked',\n statisticable: 'fund',\n id,\n clicked_url: title.replace(/[\\s,/]/g, '_'),\n page: window.location.pathname,\n });\n };\n\n return (\n \n Performance Fee Details \n \n \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nPerformanceFees.propTypes = { fund: propTypes.fund };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport dt, { useIsMobile, useIsMobileOrTablet, useIsXXLarge } from '../../../../shared/theme';\nimport ExpandableContainer from '../../../../shared/expandable-container';\n\nconst Container = styled.div`\n color: ${props => dt(props).theme.bodyColor};\n font: ${props => dt(props).theme.fontWeightRegular} 16px/130% ${props => dt(props).theme.fontFamilyBody};\n margin-top: 12px;\n\n a, b {\n font-weight: ${props => dt(props).theme.fontWeightBold}\n }\n\n & > .readmore-container {\n p {\n line-height: unset;\n margin-bottom: 0;\n }\n\n & > .showless {\n display: none;\n }\n }\n`;\n\nconst buildComponentToShow = (\n fundId,\n methodology,\n pdsFileUrl,\n lines,\n) => {\n const handlePDSClick = () => recordStatisticsEvent({\n event: 'fund_profile_pds_clicked',\n statisticable: 'fund',\n id: fundId,\n clicked_url: pdsFileUrl,\n page: `${window.location.pathname}#fund-fees`,\n });\n\n const placeholder = (\n <>\n View the \n {!pdsFileUrl\n ? Product Disclosure Statement\n : (\n \n Product Disclosure Statement\n \n )}\n for a full overview of fees and charges.\n \n );\n\n if (!methodology) {\n return placeholder;\n }\n\n return (\n <>\n \n {/* eslint-disable-next-line react/no-danger */}\n \n \n \n );\n};\n\nexport default function PerformanceFeeMethodology({ fundId, methodology, pdsFileUrl }) {\n const isMobile = useIsMobile();\n const isMobileOrTablet = useIsMobileOrTablet();\n const isXXLarge = useIsXXLarge();\n // eslint-disable-next-line no-nested-ternary\n const lines = isMobile || isXXLarge ? 4 : isMobileOrTablet ? 3 : 2;\n\n const componentToShow = buildComponentToShow(fundId, methodology, pdsFileUrl, lines);\n\n return (\n \n {componentToShow}\n \n );\n}\n\nPerformanceFeeMethodology.propTypes = {\n fundId: PropTypes.number.isRequired,\n methodology: PropTypes.string,\n pdsFileUrl: PropTypes.string,\n};\n\nPerformanceFeeMethodology.defaultProps = {\n methodology: null,\n pdsFileUrl: null,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport { Separator } from '../../../shared/sectionable/styles';\nimport propTypes from '../../common/prop-types';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Text = styled.p`\n margin-top: 24px;\n font: ${props => props.theme.fontWeightRegular} 16px/130% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n\n & > a {\n font-weight: ${props => props.theme.fontWeightBold};\n }\n`;\n\nexport default function Message({ fund }) {\n const { id, pdsFileUrl } = fund;\n\n const handlePDSClick = () => recordStatisticsEvent({\n event: 'fund_profile_pds_clicked',\n statisticable: 'fund',\n id,\n clicked_url: pdsFileUrl,\n page: `${window.location.pathname}#fund-fees`,\n });\n\n return (\n \n \n Fee data has been provided by Morningstar, it may not include all costs being charged\n on your investment. For a full overview of fees charged you should review the \n \n Product Disclosure Statement\n \n .\n \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nMessage.propTypes = { fund: propTypes.fund };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport Title from './qanda-components/title';\nimport Details from './qanda-components/details';\nimport { TenTwentyFourCollapseSectionContainer } from './styles';\nimport useGetQandasByFund from '../../../services/funds/qanda-service';\nimport { scrollIfHashMatch } from '../navigation/utils';\nimport useNavigationStateStore from '../navigation/navigation-state-hook';\n\nconst Container = styled(TenTwentyFourCollapseSectionContainer)`\n padding-bottom: 0 !important; /* for bottom stickout */\n margin-bottom: 120px;\n\n ${props => props.theme.isMobileOrTablet && `\n padding-top: 56px;\n `};\n`;\n\nconst sectionName = 'q-and-a';\n\nexport default function Qanda(props) {\n const { fund } = props;\n const [{ data }, getQandas] = useGetQandasByFund();\n const [qandas, setQandas] = React.useState([]);\n const set = useNavigationStateStore(state => state.set);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n React.useEffect(() => {\n _.get(fund, 'id') && getQandas(fund.id);\n }, [fund, getQandas]);\n\n React.useEffect(() => {\n if (_.get(data, 'qandas.length')) {\n const withAnswer = data.qandas.filter(q => _.trim(_.get(q, 'answer')).length);\n setQandas(withAnswer);\n set(state => {\n state.hasQandA = withAnswer.length > 0;\n });\n }\n }, [data, set]);\n\n if (qandas.length === 0) {\n return null;\n }\n\n const detailsProps = {\n qandas, fund,\n };\n\n return (\n \n \n );\n}\n\nQanda.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n qandasUpdatedAt: PropTypes.string,\n }).isRequired,\n manager: PropTypes.shape({\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string.isRequired,\n position: PropTypes.string,\n }).isRequired,\n livewireLogo: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Img } from 'react-image';\nimport styled from 'styled-components';\n\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport Avatar from '../../avatar';\nimport { SectionTitle } from '../styles';\nimport { defaultFundManagerTitle } from '../../consts';\n\nconst Container = styled(SectionTitle)`\n display: flex;\n flex-direction: column;\n ${props => (!props.theme.isXLarge && !props.theme.isMobileOrTablet) && `\n /* large and medium breakpoints, i.e. 569~1024px */\n &&& {\n margin-top: -24px;\n }\n `};\n`;\n\nconst Logo = styled(Img)`\n width: 76px;\n height: 21px;\n`;\n\nconst Headline = styled.span`\n margin-top: 20px;\n`;\n\nconst SubHeadline = styled.span`\n margin-top: 10px;\n text-transform: none;\n && {\n font-size: 21px;\n font-weight: ${props => props.theme.fontWeightRegular};\n line-height: 130%;\n }\n`;\n\nconst Manager = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n height: 60px;\n margin-top: 32px;\n\n & > a {\n height: 60px;\n }\n & > a > img {\n width: 60px;\n height: 60px;\n min-width: 60px;\n margin-right: 16px;\n border: 2px solid #FFFFFF;\n box-sizing: border-box;\n box-shadow: 0px 4px 8px rgba(50, 50, 71, 0.2);\n border-radius: 6px;\n }\n`;\n\nconst NameContainer = styled.div`\n display: flex;\n flex-direction: column;\n text-transform: none;\n`;\n\nconst Name = styled.a`\n font: ${props => props.theme.fontWeightBold} 19px/21px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Position = styled.span`\n margin-top: 2px;\n font: ${props => props.theme.fontWeightegular} 16px/19px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n`;\n\nexport default function Title({ fund, manager, livewireLogo }) {\n const handleClick = e => {\n let { target } = e;\n\n while (!target.getAttribute('href')) {\n target = target.parentElement;\n }\n\n recordStatisticsEvent({\n id: fund.id,\n statisticable: 'fund',\n event: 'fund_profile_contributor_view',\n clicked_url: target.getAttribute('href'),\n page: `${window.location.pathname}#fund-manager-qanda`,\n });\n\n return false;\n };\n\n return (\n \n Manager Q&A \n Introducing, LW's exclusive Q&A with the manager \n {!!manager && (\n \n \n \n {manager.name}\n \n {!!manager.position && {manager.position} }\n {!manager.position && {defaultFundManagerTitle} }\n \n \n )}\n \n );\n}\n\nTitle.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n }).isRequired,\n manager: PropTypes.shape({\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string.isRequired,\n position: PropTypes.string,\n }).isRequired,\n livewireLogo: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { SectionDetails } from '../styles';\nimport QandaItem from './qanda-item';\nimport Compliance from './compliance';\n\nconst Container = styled(SectionDetails)`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: -60px;\n width: 100%;\n`;\n\nconst none = -1;\nexport default function Details({ fund, qandas }) {\n const [opened, setOpened] = React.useState(none);\n const orderedQandas = _.sortBy(qandas, ['order']);\n\n const toggle = (expanded, i) => setOpened(expanded ? i : none);\n\n return (\n \n {orderedQandas.map((qanda, i) => (\n toggle(v, i)}\n />\n ))}\n \n );\n}\n\nDetails.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n qandasUpdatedAt: PropTypes.string,\n }).isRequired,\n qandas: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n order: PropTypes.number.isRequired,\n category: PropTypes.string.isRequired,\n question: PropTypes.string.isRequired,\n questionId: PropTypes.number.isRequired,\n answer: PropTypes.string.isRequired,\n })).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css, ThemeContext } from 'styled-components';\nimport classNames from 'classnames';\nimport { useSpring, animated } from 'react-spring';\nimport useComponentSize from '@rehooks/component-size';\nimport OriginalCard from 'react-bootstrap/Card';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport Truncator from './truncator';\n\nconst active = css`\n box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);\n border-color: ${props => props.theme.primaryColor};\n`;\n\nconst Card = styled(OriginalCard)`\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 32px ${props => (props.theme.isMobile ? 16 : 24)}px;\n margin-bottom: 20px;\n background-color: #FFFFFF;\n border: 1px solid;\n border-color: #d7dfe7;\n box-sizing: border-box;\n box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.08);\n border-radius: 5px;\n ${props => props.theme.isXXLarge && `\n max-width: 840px;\n `};\n\n &:not(.expanded) {\n cursor: pointer;\n transition: box-shadow .3s ease-in-out;\n transition: border-color .3s ease-in-out;\n }\n\n &.expanded { ${active} }\n\n /* hover state on touch interface has a lingering effect. avoid that */\n ${props => !props.theme.isMobile && `\n &:not(.expanded):hover { ${active} }\n `};\n`;\n\nconst catHeight = 20;\nconst toggleHeight = 28;\nconst Toggle = styled.span`\n z-index: 20;\n align-self: flex-end;\n margin-bottom: -${toggleHeight - 0.5 * (toggleHeight - catHeight) - 1}px;\n width: ${toggleHeight}px;\n height: ${toggleHeight}px;\n display: flex;\n justify-content: center;\n align-items: center;\n font: ${props => props.theme.fontWeightRegular} ${props => (props.theme.isMobile ? 26 : 30)}px/100% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.primaryColor};\n cursor: pointer;\n\n &:hover {\n color: #ae8e38; /* 5% darkened */\n }\n`;\n\nconst Category = styled.span`\n font: ${props => props.theme.fontWeightHeavy} 14px/17px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n height: ${catHeight}px;\n`;\n\nconst Question = styled.span`\n font: ${props => props.theme.fontWeightBold} 21px/25px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n min-height: 24px;\n margin-top: ${props => (props.theme.isXLarge ? 8 : 16)}px;\n`;\n\nconst Answer = styled.div`\n font: ${props => props.theme.fontWeightNormal} 18px/130% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n margin-top: 8px;\n`;\n\nconst cah = 48; // collapsed answer height\nexport default function QandaItem({\n fundId, category, question, questionId, answer, expanded, onToggle,\n}) {\n const { isLarge } = React.useContext(ThemeContext);\n const offset = isLarge ? 120 : 50; // This is the offset for navbar and sticky header(in large).\n const [rested, setRested] = React.useState(true);\n const cardRef = React.useRef();\n const answerRef = React.useRef();\n const { height } = useComponentSize(answerRef);\n const summaryAnimation = useSpring({ opacity: expanded ? 0 : 1 });\n const answerAnimation = useSpring({\n height: expanded ? Math.max(cah, height + 10) : cah,\n opacity: expanded ? 1 : 0,\n onFrame: () => {\n if (!rested && expanded && cardRef.current) {\n const { y } = cardRef.current.getBoundingClientRect();\n y < offset && window.scrollBy(0, y - offset);\n }\n },\n onRest: () => {\n !rested && expanded && setRested(true);\n },\n });\n\n const toggle = from => e => {\n e && e.preventDefault();\n if (from === 'body' && !expanded) {\n recordStatisticsEvent({\n event: 'fund_profile_qanda_expanding',\n statisticable: 'fund',\n id: fundId,\n clicked_url: `/question/${questionId}`,\n page: window.location.pathname,\n });\n\n setRested(false);\n onToggle(true);\n } else if (from === 'icon' && expanded) {\n onToggle(false);\n }\n };\n\n const truncated = \n {expanded ? '\\u2212' : '+'} \n {category} \n {question} \n \n {truncated} \n \n \n {answer} \n \n \n );\n}\n\nQandaItem.propTypes = {\n fundId: PropTypes.number.isRequired,\n category: PropTypes.string.isRequired,\n question: PropTypes.string.isRequired,\n questionId: PropTypes.number.isRequired,\n answer: PropTypes.string.isRequired,\n expanded: PropTypes.bool.isRequired,\n onToggle: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Ellipsis from 'ellipsis.js';\n\nexport default class Truncator extends React.Component {\n // eslint-disable-next-line camelcase\n UNSAFE_componentWillMount() {\n this.configure();\n }\n\n componentDidMount() {\n if (this.ellipsis && this.truncateContainer) {\n this.ellipsis.add(this.truncateContainer);\n }\n }\n\n // Turn off react because we mutate with Ellipsis\n shouldComponentUpdate() {\n return false;\n }\n\n configure() {\n this.ellipsis = Ellipsis({\n ellipsis: ['…', ...(new Array(15).fill(' '))].join(''),\n debounce: 500,\n responsive: true,\n className: false,\n lines: 2,\n break_word: true,\n });\n }\n\n render() {\n return (this.truncateContainer = node)}>{this.props.summary};\n }\n}\n\nTruncator.propTypes = {\n summary: PropTypes.string.isRequired,\n};\n","import moment from 'moment';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n padding-left: ${props => (props.theme.isMobile ? 16 : 24)}px;\n`;\n\nconst UpdatedAt = styled.div`\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 12px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 100%;\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n`;\n\nexport default function Compliance({ fund }) {\n const { qandasUpdatedAt } = fund;\n const timestamp = moment(qandasUpdatedAt);\n\n return (\n \n {`updated ${timestamp.format('Do MMM, YY')}`} \n \n );\n}\n\nCompliance.propTypes = {\n fund: PropTypes.shape({\n qandasUpdatedAt: PropTypes.string,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport dt from '../../shared/theme';\n\nconst Container = styled.div`\n width: 154px;\n height: 45px;\n padding: 12px 16px;\n border-radius: 6px;\n background: rgba(193, 157, 63, 0.78);\n box-shadow: 0px 12px 12px rgba(50, 50, 71, 0.08), 0px 16px 24px rgba(50, 50, 71, 0.08);\n backdrop-filter: blur(4px);\n position: fixed;\n bottom: ${props => (dt(props).theme.isMobileOrTablet ? 32 : 48) + props.yOffset}px;\n right: ${props => (dt(props).theme.isMobileOrTablet ? 20 : 48)}px;\n`;\n\nconst HFlex = styled.div`\n flex-grow: 2;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n\n & > .icon-lw-preview {\n :before {\n color: ${props => dt(props).theme.bodyBackgroundColor};\n }\n font-size: 20px;\n margin-left: 8px;\n }\n`;\n\nconst Text = styled.span`\n font: ${props => dt(props).theme.fontWeightHeavy} 17px/20px ${props => dt(props).theme.fontFamilyBody};\n color: ${props => dt(props).theme.bodyBackgroundColor};\n`;\n\nexport default function PreviewMode({ yOffset }) {\n return (\n \n \n Preview Mode \n \n \n \n );\n}\n\nPreviewMode.propTypes = {\n yOffset: PropTypes.number,\n};\n\nPreviewMode.defaultProps = {\n yOffset: 0,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { SectionContainer } from '../../shared/sectionable/styles';\nimport Title from './fund-updates-components/title';\nimport Details from './fund-updates-components/details';\nimport Follow from './fund-updates-components/follow';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\n\nconst Container = styled(SectionContainer)`\n margin-bottom: 104px;\n\n${props => !props.theme.isMobile && `\n margin-top: 64px;\n `};\n`;\n\nconst sectionName = 'fund-updates';\n\nexport default function FundUpdates({ fund }) {\n const { isMobile } = React.useContext(ThemeContext);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n return (\n \n \n );\n}\n\nFundUpdates.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n isFollowedByCurrentUser: PropTypes.bool.isRequired,\n monthlyUpdateFileUrl: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeContext } from 'styled-components';\nimport Follow from './follow';\nimport { SectionTitle } from '../../../shared/sectionable/styles';\n\nexport default function Title({ fund }) {\n const { isMobile } = React.useContext(ThemeContext);\n\n return (\n \n updates\n {!isMobile && \n );\n}\n\nTitle.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n isFollowedByCurrentUser: PropTypes.bool.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport IconedButton from '../../../shared/iconed-button';\nimport { SectionDetails } from '../../../shared/sectionable/styles';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\n\nconst Container = styled(SectionDetails)`\n flex-direction: column;\n ${props => props.theme.isFeaturedLarge && `\n flex-direction: row;\n `};\n`;\n\nconst Description = styled.div`\n font-family: ${props => props.theme.fontFamilyBody};\n ${props => props.theme.isFeaturedLarge && `\n width: 74%;\n margin-right: 28px;\n flex-direction: row;\n `};\n ${props => props.theme.isXXLarge && `\n width: 73%;\n margin-right: 62px;\n `};\n`;\n\nconst ButtonWrap = styled.div`\n margin-top: 42px;\n ${props => props.theme.isFeaturedMedium && `\n margin-top: 38px;\n `};\n ${props => props.theme.isFeaturedLarge && `\n width: 26%;\n margin-top: 0px;\n padding-left: 16px;\n `};\n ${props => props.theme.isXXLarge && `\n width: 27%;\n padding-left: 48px;\n `};\n`;\n\nconst Caption = styled.p`\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 14px;\n line-height: 114%;\n color: ${props => props.theme.secondaryColor};\n letter-spacing: 0.1px;\n text-transform: uppercase;\n margin: 0;\n`;\n\nconst Headline = styled.p`\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 21px;\n line-height: 130%;\n color: #252733;\n letter-spacing: 0.2px;\n text-transform: capitalize;\n margin: 8px 0 0;\n`;\n\nconst Text = styled.p`\n font-weight: ${props => props.theme.fontWeightRegular};\n font-size: 19px;\n line-height: 130%;\n color: ${props => props.theme.bodyColor};\n letter-spacing: 0.1px;\n margin: 8px 0 0;\n`;\n\nconst ViewButton = styled(IconedButton)`\n height: 42px;\n width: 154px;\n margin-top: 0px;\n padding: 3px 0px 3px 3px;\n ${props => props.theme.isFeaturedMedium && `\n width: 157px;\n `};\n ${props => props.theme.isFeaturedLarge && `\n width: 140px;\n `};\n ${props => props.theme.isXXLarge && `\n width: 154px;\n `};\n border: 1px solid ${props => props.theme.secondaryColor};\n box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.08);\n border-radius: 3px;\n box-sizing: border-box;\n text-align: center;\n text-transform: uppercase;\n background-color: ${props => props.theme.bodyBackgroundColor} !important;\n color: ${props => props.theme.bodyColor};\n outline: none;\n\n &:hover {\n border: 1px solid ${props => props.theme.bodyColor};\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n }\n\n &:active {\n border: 1px solid ${props => props.theme.bodyColor};\n box-shadow: none;\n }\n\n & > span.icon-lw {\n height: 34px;\n width: 34px;\n font-size: 22px;\n background-color: ${props => props.theme.secondaryColor};\n color: #ffffff;\n padding: 5px;\n }\n\n & > span:not(.icon-lw) {\n flex-grow: 2;\n font: ${props => props.theme.fontWeightHeavy} 14px/120% ${props => props.theme.fontFamilyBody};\n text-align: center;\n padding: 9px;\n }\n`;\n\nexport default function Details({ fund }) {\n const { id, name, monthlyUpdateFileUrl } = fund;\n\n const viewLink = e => {\n e && e.preventDefault();\n recordStatisticsEvent({\n id,\n statisticable: 'fund',\n event: 'fund_profile_monthly_report_clicked',\n clicked_url: monthlyUpdateFileUrl,\n page: window.location.pathname,\n });\n window.open(monthlyUpdateFileUrl, '_blank', 'noopener,noreferrer');\n };\n\n return (\n \n \n update report \n {`${name} Latest Update`} \n \n For the most recent results including performance for the last reporting period,\n please download the recent update from the manager\n \n \n \n \n \n view update\n \n \n \n );\n}\n\nDetails.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n monthlyUpdateFileUrl: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { TenTwentyFourCollapseSectionContainer } from '../../shared/sectionable/styles';\nimport Title from './invest-components/title';\nimport Details from './invest-components/details';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\nimport useFundStateStore from '../common/fund-state-hook';\n\nconst Container = styled(TenTwentyFourCollapseSectionContainer)`\n padding-bottom: 100px;\n`;\n\nconst sectionName = 'invest';\nexport default function Invest({ fund, investorTypes }) {\n const set = useFundStateStore(state => state.set);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n set(state => {\n state.hasInvest = true;\n });\n }, {});\n\n return (\n \n \n );\n}\n\nInvest.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n company: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n logoColor: PropTypes.string,\n logoPictureUrl: PropTypes.string,\n name: PropTypes.string.isRequired,\n summary: PropTypes.string,\n }).isRequired,\n activePartnership: PropTypes.shape({\n id: PropTypes.number.isRequired,\n }),\n investUrl: PropTypes.string,\n fundPageUrl: PropTypes.string,\n members: PropTypes.arrayOf(PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n role: PropTypes.string,\n })).isRequired,\n pdsFileUrl: PropTypes.string,\n }).isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Color from 'color';\nimport { SectionTitle } from '../../../shared/sectionable/styles';\n\nconst Container = styled(SectionTitle)`\n display: flex;\n flex-direction: column;\n\n &&& {\n padding-bottom: 0;\n }\n\n ${props => !props.theme.isXLarge && `\n width: 100%;\n `};\n\n ${props => props.theme.isMobile && `\n border: none;\n margin: unset;\n padding: unset;\n `};\n\n & > span {\n text-transform: uppercase;\n }\n\n & > span:not(:last-child) {\n margin-bottom: 10px;\n }\n`;\n\nconst logoRatio = 5.625;\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n padding-left: 16px;\n margin-left: -16px;\n margin-bottom: 32px;\n background-color: ${props => props.bgColor};\n border-radius: 4px;\n border: 0.5px solid #dedfe7;\n box-shadow: 0px 3.98892px 3.98892px rgba(50, 50, 71, 0.04);\n height: 52px;\n width: 100%;\n max-width: 320px;\n ${props => props.theme.isMobile && `\n width: auto;\n max-width: 240px;\n margin-left: -32px;\n margin-right: -32px;\n padding-left: 32px;\n border-radius: 0;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n border-left: 0px;\n `};\n\n\n & > img {\n object-fit: contain;\n max-height: 24px;\n max-width: ${24 * logoRatio}px;\n }\n`;\n\nconst white = '#ffffff';\nexport default function Title({ logoPictureUrl, logoColor, name }) {\n let c;\n try {\n c = Color(logoColor || white);\n } catch (err) {\n c = Color(white);\n }\n\n return (\n \n {logoPictureUrl && (\n \n 
\n \n )}\n Investing with\n {name}\n \n );\n}\n\nTitle.propTypes = {\n logoPictureUrl: PropTypes.string.isRequired,\n logoColor: PropTypes.string,\n name: PropTypes.string.isRequired,\n};\n\nTitle.defaultProps = { logoColor: white };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { scroller } from 'react-scroll';\nimport { useIsMobile } from '../../../../shared/theme';\nimport { SectionDetails } from '../../../shared/sectionable/styles';\nimport EnquiryContext from '../../../shared/enquiry/context';\nimport Managers from './managers';\nimport WithUs from './with-us';\nimport GetInTouch from './get-in-touch';\nimport Enquiry from './enquiry';\nimport Summary from './summary';\nimport { scrollIfHashMatch } from '../../../shared/navigation/utils';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport useFundStateStore from '../../common/fund-state-hook';\n\nconst Container = styled(SectionDetails)`\n color: ${props => props.theme.bodyColor};\n ${props => !props.theme.isXLarge && `\n width: 100%;\n `};\n`;\n\nconst sectionName = 'contact';\nexport default function Details({ fund, investorTypes }) {\n const { state: { showEnquiryForm, contactSent } } = React.useContext(EnquiryContext);\n const { activePartnership, company: { summary } } = fund;\n const showEnquiry = showEnquiryForm || contactSent;\n const { dispatch } = React.useContext(EnquiryContext);\n const set = useFundStateStore(state => state.set);\n const isMobile = useIsMobile();\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n const hideInvestModal = () => {\n set(state => {\n state.showInvestModal = false;\n });\n };\n\n const scrollToContactForm = () => {\n scroller.scrollTo('contact', {\n // An offset is required to make the top of the form appear.\n offset: isMobile ? 20 : -100,\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n };\n\n function showContact(e, calledFromModal) {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: calledFromModal ? 'fund_invest_modal_contact_clicked' : 'fund_profile_get_in_touch_section_contact_clicked',\n statisticable: 'fund',\n id: fund.id,\n page: calledFromModal ? `${window.location.pathname}#invest-modal` : window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm' });\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n\n scrollToContactForm();\n }\n\n const contact = e => {\n e && e.preventDefault();\n hideInvestModal();\n showContact(e, true);\n scrollToContactForm();\n };\n\n return (\n \n {!!summary && \n );\n}\n\nDetails.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n activePartnership: PropTypes.shape({\n id: PropTypes.number.isRequired,\n }),\n company: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n summary: PropTypes.string,\n }).isRequired,\n investUrl: PropTypes.string,\n fundPageUrl: PropTypes.string,\n members: PropTypes.arrayOf(PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n })).isRequired,\n pdsFileUrl: PropTypes.string.isRequired,\n }).isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { CommonContainer } from './styles';\nimport Avatar from '../../../shared/avatar';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport { defaultFundManagerTitle } from '../../../shared/consts';\n\nconst Container = styled(CommonContainer)`\n border-top: 0px;\n margin-top: 0px;\n margin-bottom: 48px;\n padding: 0;\n ${props => props.theme.isMobile && `\n margin-bottom: 16px;\n `};\n`;\n\nconst Manager = styled.div`\n display: flex;\n align-items: center;\n ${props => props.theme.isMobile && `\n margin-bottom: 40px;\n `};\n\n & > a {\n flex-shrink: 0;\n margin-right: ${props => (((!props.theme.isXXLarge && props.theme.isXLarge) || props.theme.isMobile) ? 16 : 24)}px;\n\n > img {\n width: ${props => ((!props.theme.isXXLarge && props.theme.isXLarge) ? 72 : 88)}px;\n height: ${props => ((!props.theme.isXXLarge && props.theme.isXLarge) ? 72 : 88)}px;\n margin-right: 0;\n border-radius: 4px;\n border: 2px solid white;\n box-shadow: 0px 2.73684px 5.47368px rgba(50, 50, 71, 0.2);\n }\n }\n`;\n\nconst VFlex = styled.div`\n display: flex;\n flex-direction: column;\n line-height: 100%;\n`;\n\nconst HFlex = styled.div`\n display: flex;\n align-items: baseline;\n`;\n\nconst Name = styled.a`\n font: ${props => props.theme.fontWeightBold} 19px/21px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n min-width: 58px;\n`;\n\nconst text = styled.span`\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightMedium};\n`;\n\nconst Position = styled(text)`\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Company = styled(text)`\n color: #627484;\n`;\n\nexport default function Managers({ id, members, company }) {\n if (members.length === 0) {\n return null;\n }\n\n const handleClick = e => {\n let { target } = e;\n\n while (!target.getAttribute('href')) {\n target = target.parentElement;\n }\n\n recordStatisticsEvent({\n id,\n statisticable: 'fund',\n event: 'fund_profile_contributor_view',\n clicked_url: target.getAttribute('href'),\n page: `${window.location.pathname}#investing-with`,\n });\n\n return false;\n };\n\n return (\n \n {members.slice(0, 2).map(m => (\n \n \n \n {m.name} \n \n {!!m.position && {m.position} }\n {!m.position && {defaultFundManagerTitle} }\n {company.name} \n \n \n ))}\n \n );\n}\n\nManagers.propTypes = {\n id: PropTypes.number.isRequired,\n company: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n members: PropTypes.arrayOf(PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n position: PropTypes.string,\n })).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport StockCode from './stock-code';\nimport InvestModal from './invest-modal';\nimport useFundStateStore from '../../common/fund-state-hook';\n\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport { TriStateButton, CommonContainer, VFlex } from './styles';\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n & > a {\n margin-top: 26px;\n font-size: 19px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 120%;\n letter-spacing: -0.01em;\n text-align: center;\n width: 100%;\n max-width: ${props => ((!props.theme.isXXLarge && props.theme.isXLarge) ? 318 : 304)}px;\n\n ${props => props.theme.isMobileOrTablet && `\n max-width: unset;\n `};\n\n :hover {\n color: ${props => props.theme.primaryColor};\n }\n\n :before {\n content: \"\\uf0f6\";\n font: ${props => props.theme.fontWeightDccc} 18px/1 FontAwesome,serif;\n margin-right: 8px;\n }\n }\n`;\n\nexport default function WithUs({ fund, contact }) {\n const set = useFundStateStore(state => state.set);\n\n const showInvestModal = () => {\n set(state => {\n state.showInvestModal = true;\n });\n };\n\n const invest = e => {\n e && e.preventDefault();\n recordStatisticsEvent({\n id: fund.id,\n event: 'fund_profile_how_to_invest_clicked',\n statisticable: 'fund',\n clicked_url: fund.investUrl,\n page: window.location.pathname,\n });\n\n if (fund.fundType === 'Managed Fund') {\n window.open(fund.investUrl, '_blank', 'noopener,noreferrer');\n } else {\n showInvestModal();\n }\n };\n\n const pdsLinkClick = () => {\n recordStatisticsEvent({\n event: 'fund_profile_pds_clicked',\n statisticable: 'fund',\n id: fund.id,\n clicked_url: fund.pdsFileUrl,\n page: `${window.location.pathname}#investing-with`,\n });\n\n return false;\n };\n\n return (\n \n \n invest with us\n \n \n How To Invest \n {!!fund.pdsFileUrl && (\n \n Product Disclosure Statement\n \n )}\n \n \n );\n}\n\nWithUs.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n fundType: PropTypes.string.isRequired,\n isin: PropTypes.string.isRequired,\n stockCode: PropTypes.string,\n stockExchange: PropTypes.string,\n fundPageUrl: PropTypes.string,\n pdsFileUrl: PropTypes.string.isRequired,\n investUrl: PropTypes.string,\n }).isRequired,\n contact: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Modal from 'react-bootstrap/Modal';\nimport { OptionsContainer, CrossButton } from '../../../funds/common/dropdown/styles';\nimport Header from '../../../shared/modal/header';\nimport InvestModalBody from './invest-modal-components/invest-modal-body';\nimport Contact from './invest-modal-components/invest-contact';\nimport dt, { useIsMobile } from '../../../../shared/theme';\nimport { PopUpModalStyles } from '../../../shared/modal/styles';\nimport useFundStateStore from '../../common/fund-state-hook';\n\nconst SOptionsContainer = styled(OptionsContainer)`\n z-index: 210;\n padding: 112px 0 0 0;\n\n > div.first-of-type {\n position: fixed;\n }\n\n > div.contact {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n > button {\n text-transform: none;\n font-size: 19px;\n max-width: 285px;\n } \n\n > p.external-link {\n font-size: 17px;\n font-weight: 700;\n text-align: center;\n height: 20px;\n margin: 12px 0 40px;\n \n span.icon-lw-external-link {\n font-size: 14px;\n margin-right: 6px;\n }\n }\n }\n`;\n\nconst PopUpModal = styled(Modal)`\n ${PopUpModalStyles};\n padding: 0 16px;\n\n article.horizontal {\n width: unset;\n max-width: 1200px;\n max-height: 100vh;\n\n ${props => dt(props).theme.isMobile && `\n margin: 0;\n border-radius: 0;\n overflow-y: auto;\n\n > div {\n > button.close {\n color: ${dt(props).theme.bodyColor};\n height: 21px;\n position: relative;\n top: 68px;\n right: 20px;\n }\n }\n `}\n }\n`;\n\nexport default function InvestModal({ fund, contact }) {\n const set = useFundStateStore(state => state.set);\n const show = useFundStateStore(state => state.showInvestModal);\n const isMobile = useIsMobile();\n\n const handleHide = () => {\n set(state => {\n state.showInvestModal = false;\n });\n };\n\n return (\n <>\n {!isMobile\n && (\n \n \n ✕ \n \n \n )}\n \n );\n}\n\nInvestModal.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n isin: PropTypes.string.isRequired,\n stockCode: PropTypes.string,\n fundPageUrl: PropTypes.string,\n }).isRequired,\n contact: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { TriStateButton, CommonContainer, VFlex } from './styles';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\nexport default function GetInTouch({ showContact }) {\n return (\n \n \n Get In Touch\n Contact our team to find out more.\n \n \n Contact \n \n \n );\n}\n\nGetInTouch.propTypes = {\n showContact: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { CommonContainer } from './styles';\nimport Form from '../../../shared/enquiry/form';\nimport Success from '../../../shared/enquiry/success';\nimport EnquiryContext from '../../../shared/enquiry/context';\nimport { Separator } from '../../../shared/sectionable/styles';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n flex-basis: 100%;\n border: 1px solid #E5EAEE;\n border-radius: 6px;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);\n background-color: ${props => props.theme.bodyBackgroundColor};\n padding: 32px 24px 48px;\n margin-bottom: -176px;\n\n ${props => props.theme.isMobile && `\n padding: 32px 16px;\n margin-bottom: -160px;\n `};\n`;\n\nconst Title = styled.div`\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 29px;\n font-weight: 700;\n line-height: 120%;\n`;\n\nconst SubTitle = styled.div`\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 20px;\n font-weight: 700;\n line-height: 110%;\n text-transform: uppercase;\n`;\n\nconst SSeparator = styled(Separator)`\n margin-top: 16px;\n`;\n\nconst sectionName = 'enquiry';\nexport default function Enquiry({ fund, investorTypes }) {\n const { state: { showEnquiryForm, contactSent } } = React.useContext(EnquiryContext);\n\n const referable = { ...fund, type: 'Fund' };\n\n if (!fund.activePartnership) {\n return null;\n }\n\n return (\n \n \n Enquiry form \n {fund.name} \n \n \n );\n}\n\nEnquiry.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n company: PropTypes.shape({\n name: PropTypes.string.isRequired,\n }).isRequired,\n activePartnership: PropTypes.shape({\n id: PropTypes.number.isRequired,\n }),\n }).isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Select from 'react-select';\n\nimport Loading from '../../../shared/loading';\nimport DropdownIndicator from '../dropdown-styles';\nimport sendContact from '../../../services/partnerships/contact-service';\nimport EnquiryContext from './context';\nimport Validator from '../../../shared/validator';\nimport { EMAIL_REGEX } from '../../../shared/consts';\n\nconst selectorStyles = {\n container: provided => ({\n ...provided,\n fontSize: 18,\n fontWeight: 400,\n textTransform: 'none',\n }),\n control: (provided, state) => ({\n ...provided,\n borderColor: state.isFocused ? '#6f8aa1' : '#e4eaee',\n '&:hover': {\n borderColor: '#6f8aa1',\n },\n borderRadius: 4,\n outline: 'none',\n boxShadow: 'none',\n height: 50,\n }),\n indicatorsContainer: provided => ({\n ...provided,\n height: 50,\n paddingRight: 8,\n }),\n indicatorSeparator: () => ({\n display: 'none',\n }),\n option: (provided, state) => ({\n ...provided,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: state.isSelected ? '#19202d' : (state.isFocused ? '#f3f5fa' : '#fff'),\n fontSize: 18,\n fontWeight: 400,\n textTransform: 'none',\n }),\n placeholder: provided => ({\n ...provided,\n color: '#8ea3b5',\n }),\n valueContainer: provided => ({\n ...provided,\n marginTop: -5,\n paddingLeft: 16,\n }),\n singleValue: provided => ({\n ...provided,\n color: '#19202d',\n }),\n};\n\nconst selectorProps = {\n styles: selectorStyles,\n classNamesPrefix: 'sel',\n components: { DropdownIndicator },\n};\n\nconst Container = styled.form`\n display: flex;\n flex-direction: column;\n\n .loading-panel {\n margin-left: auto;\n width: 136px;\n }\n`;\n\nconst Details = styled.div`\n display: flex;\n flex-direction: row;\n\n ${props => props.theme.isMobileOrTablet && `\n flex-direction: column;\n `};\n`;\n\nconst Left = styled.div`\n display: flex;\n flex-direction: column;\n padding-right: 12px;\n width: 50%;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n padding: 0;\n `};\n`;\n\nconst Right = styled.div`\n display: flex;\n flex-direction: column;\n width: 50%;\n padding-left: 12px;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n padding: 0;\n `};\n`;\n\nconst Label = styled.label`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n font-weight: 800;\n margin: 24px 0 10px 0;\n`;\n\nconst InputText = styled.input`\n height: 50px;\n border-radius: 4px;\n border: 1px solid #E9EEF3;\n padding-left: 16px;\n font-size: 19px;\n`;\n\nconst Checkbox = styled.label`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n margin-bottom: 8px;\n`;\n\nconst Textarea = styled.textarea`\n height: 220px;\n border-radius: 4px;\n border: 1px solid #E9EEF3;\n padding: 16px;\n font-size: 19px;\n resize: vertical;\n`;\n\nconst Button = styled.button`\n border-radius: 2px;\n border-width: 0px;\n height: 36px;\n padding: 5px 0;\n background-color: #191F2D;\n color: white;\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n margin-top: 24px;\n margin-left: auto;\n text-transform: uppercase;\n width: 136px;\n outline: none;\n`;\n\nconst HelpBlock = styled.span`\n color: ${props => props.theme.errorColor};\n font-size: 16px;\n font-weight: ${props => props.theme.fontWeightMedium};\n line-height: 120%;\n text-transform: none;\n`;\n\nconst Footer = styled.footer`\n margin-top: 48px;\n\n & > p {\n color: ${props => props.theme.bodyColor};\n font-size: 14px;\n font-weight: normal;\n line-height: 130%;\n }\n`;\n\nexport default function Form({ referable, investorTypes, messageToLabel }) {\n const {\n id: referableId,\n type: referableType,\n activePartnership: { id: activePartnershipId },\n } = referable;\n\n const { currentUser } = window.Livewire;\n\n const loadingRef = React.useRef();\n\n const { dispatch } = React.useContext(EnquiryContext);\n\n const mappedInvestorTypes = [\n { label: null, value: null },\n ...investorTypes.map(type => ({ label: type.name, value: type.id })),\n ];\n\n const [formData, setFormData] = React.useState({\n name: _.get(currentUser, 'profile.name'),\n email: _.get(currentUser, 'email'),\n investorType: _.find(mappedInvestorTypes, { value: _.get(currentUser, 'profile.investorType') }),\n enquiryAboutOne: null,\n enquiryAboutTwo: null,\n enquiryAboutThree: null,\n });\n\n const [validations, setValidations] = React.useState({\n nameRequiredValid: true,\n emailRequiredValid: true,\n emailFormatValid: true,\n });\n\n const validator = new Validator({\n nameRequired: state => !!state.name.trim(),\n emailRequired: state => !!state.email.trim(),\n emailFormat: state => !state.email.trim() || EMAIL_REGEX.test(state.email),\n });\n\n const handleChange = e => {\n const { target } = e;\n const newData = { ...formData };\n newData[target.name] = target.value;\n setFormData(newData);\n };\n\n const handleInvestorTypeChange = type => {\n const newData = { ...formData };\n newData.investorType = type;\n setFormData(newData);\n };\n\n const handleEnquiryAboutChange = e => {\n const { target } = e;\n const newData = { ...formData };\n newData[target.name] = target.checked ? target.value : null;\n setFormData(newData);\n };\n\n const createContact = e => {\n e && e.preventDefault();\n\n validator.validateForm(formData);\n setValidations(validator.getValidations());\n\n if (!validator.formValid) {\n return;\n }\n\n const {\n enquiryAboutOne,\n enquiryAboutTwo,\n enquiryAboutThree,\n investorType,\n } = formData;\n\n const investorTypeName = investorType ? investorType.label : null;\n\n loadingRef.current.start();\n\n sendContact(activePartnershipId, {\n referable_id: referableId,\n referable_type: referableType,\n name: formData.name,\n email: formData.email,\n phone: formData.phone,\n investor_type: investorTypeName,\n enquiring_about: _.compact([enquiryAboutOne, enquiryAboutTwo, enquiryAboutThree]),\n message_to_contributor: formData.message,\n page: window.location.pathname,\n }).then(() => {\n loadingRef.current.stop();\n dispatch({ type: 'contactSent' });\n }).catch(() => (loadingRef.current.stop()));\n };\n\n const ENQUIRY_ABOUT_OPTIONS = [\n { name: 'enquiryAboutOne', value: 'Book a meeting/call' },\n { name: 'enquiryAboutTwo', value: 'Request information' },\n { name: 'enquiryAboutThree', value: 'Attend your next event' },\n ];\n\n return (\n \n \n \n {option.value}\n \n ))}\n \n \n \n \n \n \n );\n}\n\nForm.propTypes = {\n referable: PropTypes.shape({\n id: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n }).isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n messageToLabel: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n margin-bottom: 40px;\n`;\n\nconst Content = styled.div`\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 21px;\n line-height: 130%;\n\n a {\n font-weight: ${props => props.theme.fontWeightBold};\n\n &:hover {\n cursor: pointer;\n text-decoration: none;\n }\n\n &.show-less {\n display: block;\n }\n }\n`;\n\nexport default function Summary({ summary }) {\n const initialLength = 350;\n const summaryNeedTruncate = summary.length > initialLength;\n const [showMore, setShowMore] = React.useState(summaryNeedTruncate);\n const summaryToShow = showMore ? _.truncate(summary, {\n length: initialLength,\n separator: /,? +/,\n omission: ' ... ',\n }) : summary;\n\n const toggleShowMore = e => {\n e && e.preventDefault();\n\n setShowMore(!showMore);\n };\n\n return (\n \n \n {summaryToShow}\n {showMore && More}\n {summaryNeedTruncate && !showMore && Less}\n \n \n );\n}\n\nSummary.propTypes = {\n summary: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport classNames from 'classnames';\nimport { useSpring, animated } from 'react-spring';\nimport FundFollowButton from './fund-follow-button';\nimport useFundStateStore from '../common/fund-state-hook';\nimport IconedButton from '../../shared/iconed-button';\nimport EnquiryContext from '../../shared/enquiry/context';\nimport FundNameTwoLines from './fund-name-two-lines';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\n\nconst height = 68;\nconst Container = styled(animated.div)`\n z-index: 100;\n width: 100vw;\n height: ${height}px;\n background: white;\n position: fixed;\n bottom: 0px;\n box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.15);\n display: flex;\n align-items: center;\n padding: 10px 20px 22px 20px;\n\n & > button {\n margin: 0;\n margin-left: 8px;\n height: 36px;\n align-items: center;\n outline: none;\n }\n\n &:not(.discreet) > button:not([name=\"fund-follow-button\"]) {\n width: 33px;\n min-width: 33px;\n padding: 0;\n background-color: ${props => props.theme.bodyColor};\n\n > span:not(.icon-lw) {\n display: none;\n }\n }\n\n\n &&.discreet {\n > button[name=\"fund-follow-button\"] {\n display: none;\n }\n\n > button:not([name=\"fund-follow-button\"]) {\n background-color: #3c4966;\n min-width: 107px;\n width: 107px;\n\n > span.icon-lw-contact {\n padding: 3px;\n }\n }\n }\n\n &&&& > button:not([name=\"fund-follow-button\"]) {\n color: white;\n\n > span.icon-lw-contact {\n background-color: ${props => props.theme.bodyColor};\n }\n }\n\n`;\n\nexport default function StickyFooter({\n fund, yOffset, showContactButton,\n}) {\n const { isMobile } = React.useContext(ThemeContext);\n const { dispatch } = React.useContext(EnquiryContext);\n const [discreet, setDiscreet] = React.useState(fund.isFollowedByCurrentUser);\n const following = useFundStateStore(state => state.followed);\n\n const isVisible = React.useCallback(\n () => ((!discreet || showContactButton) && (yOffset > (isMobile ? 250 : 290))),\n [yOffset, discreet, showContactButton, isMobile],\n );\n\n const styles = useSpring({\n opacity: isVisible() ? 1 : 0,\n transform: `translateY(${isVisible() ? 0 : height}px)`,\n });\n\n const contact = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'mobile_footer_contact_fund',\n statisticable: 'fund',\n id: fund.id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm', payload: { scroll: true, offset: -200 } });\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n React.useEffect(() => {\n setDiscreet(following && fund.isFollowedByCurrentUser);\n }, [following, fund.isFollowedByCurrentUser]);\n\n return (\n \n \n \n contact\n \n )}\n \n );\n}\n\nStickyFooter.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n isFollowedByCurrentUser: PropTypes.bool,\n }).isRequired,\n showContactButton: PropTypes.bool.isRequired,\n yOffset: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport useDimensions from 'react-use-dimensions';\nimport { useChangeAwareLayoutEffect } from 'use-change-aware-effect';\n\nconst maxWidth = 180;\nconst Desc = styled.div`\n flex-grow: 2;\n font: ${props => props.theme.fontWeightDccc} 14px/16.8px ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n text-transform: uppercase;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n\n & > span {\n white-space: nowrap;\n }\n\n & > span:nth-child(2) {\n overflow: hidden;\n text-overflow: ellipsis;\n width: ${maxWidth}px;\n }\n`;\n\nexport default function FundNameTwoLines({ text }) {\n const [index, setIndex] = React.useState(text.length);\n const [setRef, { width }] = useDimensions();\n const lines = [text.substring(0, index), text.substring(index + 1)];\n\n useChangeAwareLayoutEffect(({ did }) => {\n if (did.width.change && width > maxWidth) {\n const i = lines[0].lastIndexOf(' ');\n if (i > 0) {\n setIndex(i);\n window.dispatchEvent(new Event('resize'));\n }\n }\n }, { width, lines });\n\n return (\n \n {lines[0]}\n {!!lines[1].length && {lines[1]}}\n \n );\n}\n\nFundNameTwoLines.propTypes = { text: PropTypes.string.isRequired };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport { useSpring, animated } from 'react-spring';\nimport FundFollowButton from './fund-follow-button';\nimport useFundStateStore from '../common/fund-state-hook';\nimport useNavigationStateStore from '../../shared/navigation/navigation-state-hook';\nimport IconedButton from '../../shared/iconed-button';\nimport EnquiryContext from '../../shared/enquiry/context';\nimport NavMenu from '../../shared/navigation/nav-menu';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\n\nconst height = 52;\nconst Container = styled(animated.div)`\n z-index: 20;\n width: 100vw;\n height: ${height}px;\n background: white;\n position: fixed;\n top: 66px;\n display: flex;\n align-items: center;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);\n\n &.new-nav {\n top: 48px;\n\n ${props => props.theme.isXLarge && `\n top: 104px;\n `};\n }\n`;\n\nconst Content = styled.div`\n max-width: 1200px;\n padding: 0;\n margin: 0 auto;\n\n ${props => props.theme.isLarge && `\n width: 85%;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n `};\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n `};\n display: flex;\n align-items: center;\n`;\n\nconst Buttons = styled.div`\n max-width: 186px;\n align-self: flex-end;\n display: flex;\n justify-content: space-between;\n\n & > button {\n margin: 0;\n margin-left: 8px;\n height: 36px;\n outline: none;\n }\n\n &:not(.discreet) > button:not([name=\"fund-follow-button\"]) {\n width: 36px;\n padding: 6px;\n background-color: ##273147;\n\n > span:not(.icon-lw) {\n display: none;\n }\n }\n\n &&.discreet {\n > button[name=\"fund-follow-button\"] {\n display: none;\n }\n\n > button:not([name=\"fund-follow-button\"]) {\n background-color: #3c4966;\n width: 134px;\n > span.icon-lw-contact {\n padding: 3px;\n }\n & > span:not(.icon-lw) {\n font-size: 14px;\n }\n }\n }\n\n &&&& > button:not([name=\"fund-follow-button\"]) {\n color: white;\n\n > span.icon-lw-contact {\n background-color: ${props => props.theme.bodyColor};\n }\n }\n`;\n\nexport default function StickyHeader({\n fund, showContactButton, yOffset, newNavEnabled,\n}) {\n const { dispatch } = React.useContext(EnquiryContext);\n const [discreet, setDiscreet] = React.useState(fund.isFollowedByCurrentUser);\n const following = useFundStateStore(state => state.followed);\n const showFeaturedWires = useNavigationStateStore(state => state.hasFeaturedWires);\n const showQandA = useNavigationStateStore(state => state.hasQandA);\n const showPerformanceUpdates = useFundStateStore(state => state.hasPerformanceUpdates);\n const showInvest = useFundStateStore(state => state.hasInvest);\n const showFee = useFundStateStore(state => state.hasFeesPricing);\n const navItems = [];\n\n if (showFeaturedWires) {\n navItems.push({ title: 'featured wires', sectionName: 'featured-wires' });\n }\n navItems.push({ title: 'information', sectionName: 'fund-information' });\n if (showPerformanceUpdates) {\n navItems.push({ title: 'performance', sectionName: 'fund-performance' });\n }\n if (showFee) {\n navItems.push({ title: 'fees & pricing', sectionName: 'fund-fees' });\n }\n if (showQandA) {\n navItems.push({ title: 'manager q & a', sectionName: 'q-and-a' });\n }\n if (showInvest) {\n navItems.push({ title: 'invest', sectionName: 'invest' });\n }\n\n const navMenuProps = {\n navItems,\n id: fund.id,\n statisticable: 'fund',\n url: `/fund/${fund.slug}`,\n };\n\n const isVisible = yOffset > 180;\n\n const [styles, setStyles] = useSpring(() => ({ transform: `translateY(${-height}px)` }));\n setStyles({\n transform: `translateY(${isVisible ? 0 : -height}px)`,\n config: { tension: isVisible ? 170 : 350, clamp: true },\n });\n\n const contact = e => {\n e && e.preventDefault();\n\n recordStatisticsEvent({\n event: 'sticky_header_contact_fund',\n statisticable: 'fund',\n id: fund.id,\n page: window.location.pathname,\n });\n\n if (_.get(window, 'Livewire.currentUser.id')) {\n dispatch({ type: 'showEnquiryForm', payload: { scroll: true, offset: -200 } });\n } else {\n window.location = '/sign_up?return_to_section=enquiry';\n }\n };\n\n React.useEffect(() => {\n setDiscreet(following && fund.isFollowedByCurrentUser);\n }, [following, fund.isFollowedByCurrentUser]);\n\n return (\n \n \n \n \n \n contact\n \n )}\n \n \n \n );\n}\n\nStickyHeader.propTypes = {\n fund: PropTypes.shape({\n id: PropTypes.number,\n slug: PropTypes.string.isRequired,\n isFollowedByCurrentUser: PropTypes.bool,\n }).isRequired,\n showContactButton: PropTypes.bool.isRequired,\n yOffset: PropTypes.number.isRequired,\n newNavEnabled: PropTypes.bool.isRequired,\n};\n","import styled from 'styled-components';\n\nconst TextSeparator = styled.span`\n color: #8EA3B5;\n margin: 0 6px;\n font-size: 14px;\n`;\n\nexport default TextSeparator;\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport useFundsStateStore from '../common/funds-state-hook';\nimport { Description, Name, Results } from './hero-components/styles';\n\nconst Banner = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n z-index: 210;\n background-color: #F1F3F8;\n min-height: 186px;\n padding: 0 28px;\n color: ${props => dt(props).theme.bodyBackgroundColor};\n font-weight: ${props => dt(props).theme.fontWeightBold};\n\n ${props => dt(props).theme.isXLarge && `\n padding: 0 calc(50% - 476px);\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n padding: 0 calc(50% - 600px);\n `};\n\n ${props => dt(props).theme.isMobile && `\n padding: 0 20px;\n `};\n`;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst AssetClass = styled.span`\n text-transform: none;\n`;\n\nconst SName = styled(Name)`\n text-transform: capitalize;\n`;\n\nconst fundTypeToLabel = fundType => (\n {\n 'managed-funds': 'managed funds',\n etfs: 'ETFs',\n lics: 'LICs',\n lits: 'LITs',\n }[fundType] || 'funds'\n);\n\nconst BreadcrumbContainer = styled.div`\n background-color: #F1F3F8;\n padding: 0 28px;\n\n ${props => dt(props).theme.isXLarge && `\n padding: 0 calc(50% - 476px);\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n padding: 0 calc(50% - 600px);\n `};\n\n ${props => dt(props).theme.isMobile && `\n padding: 0 20px;\n overflow-x: auto;\n scrollbar-color: #8ea3b5;\n `};\n`;\n\nconst buildHeader = fundType => {\n if (!fundType) {\n return 'Discover Managed Investments';\n }\n\n return `discover ${fundTypeToLabel(fundType)}`;\n};\n\nconst buildDescription = fundType => {\n if (!fundType) {\n return \"Detailed research and information available for Australia's leading Managed Funds, ETFs, LICs and LITs\";\n }\n\n return `Detailed research and information available for Australia's leading ${fundTypeToLabel(fundType)}`;\n};\n\nexport default function Hero() {\n const totalResults = useFundsStateStore(state => state.totalResults);\n const fundType = useFundsStateStore(state => state.appliedFilters.fundTypes[0]);\n const assetClasses = useFundsStateStore(state => state.assetClasses);\n const appliedFiltersAssetClasses = useFundsStateStore(state => state.appliedFilters.assetClasses);\n const breadcrumb = useFundsStateStore(state => state.breadcrumb);\n\n const resultsText = totalResults !== null ? `${totalResults} Result${totalResults === 1 ? '' : 's'}` : null;\n const appliedfiltersTitles = (assetClasses || [])\n .filter(ac => _.indexOf(appliedFiltersAssetClasses, ac.id) >= 0)\n .map(ac => ac.title);\n const assetClassLabel = appliedfiltersTitles.length === 1 ? `invested in ${appliedfiltersTitles[0]}` : '';\n\n return (\n \n \n {!!resultsText && {resultsText} }\n Australia’s 100 Top-Rated Funds \n \n Discover Australia’s top-rated funds in each asset class\n and understand their fee structure, performance and philosophy.\n \n View The Series \n \n \n );\n}\n\nTopRatedFundsSeriesHero.propTypes = topRatedFundsSeriesPropTypes;\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport { incomeSeriesPropTypes } from '../common/prop-types';\nimport useFundsStateStore from '../common/funds-state-hook';\nimport { Description, Name, Results } from './hero-components/styles';\n\nconst Banner = styled.div`\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n align-items: start;\n background-repeat: round;\n background-size: cover;\n background-image: url(${props => props.incomeSeriesBackground});\n padding: 32px 28px;\n width: 100%;\n z-index: 210;\n\n ${props => dt(props).theme.isXLarge && `\n padding: 32px calc(50% - 476px);\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n padding: 32px calc(50% - 600px);\n `};\n\n ${props => dt(props).theme.isMobile && `\n background-repeat: unset;\n flex-direction: column;\n padding: 36px 20px 40px;\n background-image: url(${props.incomeSeriesBackground});\n `};\n`;\n\nconst Logo = styled.img`\n max-width: 300px;\n margin-top: 20px;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n max-width: 33%;\n `};\n\n ${props => dt(props).theme.isMobile && `\n margin-left: auto;\n margin-bottom: 28px;\n margin-top: 0;\n max-height: 44px;\n `};\n`;\n\nconst Primary = styled.div`\n display: flex;\n flex-direction: column;\n max-width: 520px;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n max-width: 372px;\n `};\n\n ${props => dt(props).theme.isMobile && `\n max-width: 100%;\n `};\n`;\n\nconst ViewSeriesLink = styled.a`\n border: 1px solid ${props => dt(props).theme.primaryColor};\n border-radius: 4px;\n color: ${props => dt(props).theme.primaryColor};\n font-size: 16px;\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightHeavy};\n text-transform: uppercase;\n margin-top: 24px;\n width: 165px;\n height: 40px;\n background: transparent;\n text-align: center;\n padding-top: 11px;\n\n ${props => dt(props).theme.isMobile && `\n width: 100%;\n `};\n\n &:hover {\n text-decoration: none !important;\n cursor: pointer;\n }\n`;\n\nconst INCOME_SERIES_URL = 'https://incomeseries.livewiremarkets.com/?utm_campaign=Income+Series+2021&utm_medium=livewire+website&utm_source=engagement+campaign&utm_content=listings+page+banner&utm_term=';\n\nexport default function IncomeSeriesHero({\n incomeSeriesBackground,\n incomeSeriesLogoHorizontal,\n}) {\n const totalResults = useFundsStateStore(state => state.totalResults);\n const resultsText = totalResults !== null ? `${totalResults} Result${totalResults === 1 ? '' : 's'}` : null;\n\n return (\n \n \n {!!resultsText && {resultsText} }\n Livewire Income Series \n \n Discover the best income focused funds, ETFs and LICs/LITs on Livewire by asset class,\n understand their fee structure and see how they perform.\n \n View The Series \n \n \n );\n}\n\nIncomeSeriesHero.propTypes = incomeSeriesPropTypes;\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\n\nconst LW_DISCLAIMER = 'Livewire gives readers access to content provided by '\n + 'financial services professionals and companies (\"Livewire Contributors”). '\n + 'Fund data is provided by Morningstar for personal use only. While every '\n + 'care has been taken in producing these numbers, neither Livewire nor '\n + 'Morningstar can guarantee the complete accuracy of these figures. Should '\n + 'you decide to invest, please read the relevant disclosure documents and '\n + 'consider speaking to a professional. A tax event may be realised when '\n + 'switching investments. Past performance is not a reliable indicator of '\n + 'future performance. Livewire does not operate under an Australian '\n + 'Financial Services Licence (AFSL) and relies on the exemption under '\n + '911A(2)(eb) of the Corporations Act 2001 in respect to any advice given. '\n + 'The advice on this site is general in nature and does not take into '\n + 'account your personal needs or objectives.';\n\nconst Container = styled.div`\n display: flex;\n align-content: center;\n align-items: center;\n margin: ${props => (dt(props).theme.isMobile ? '80px 0 0' : '72px 0 66px')};\n background: #F8F9FB;\n height: ${props => (dt(props).theme.isMobile ? 276 : 120)}px;\n width: 100%;\n`;\n\nconst Content = styled.div`\n white-space: pre-wrap;\n color: ${props => dt(props).theme.secondaryColor};\n font-size: 14px;\n padding: 24px 20px;\n\n ${props => dt(props).theme.isXXLarge && `\n padding: 25px 175px;\n `};\n`;\n\nexport default function Disclaimer() {\n return (\n \n {LW_DISCLAIMER} \n \n\n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\nimport { useIsLarge } from '../../../shared/theme';\nimport { propTypes } from '../common/prop-types';\nimport useFundsStateStore from '../common/funds-state-hook';\nimport Desktop from './card-components/desktop';\nimport MobileOrTablet from './card-components/mobile-or-tablet';\n\nconst Container = styled.div`\n margin-bottom: 8px;\n`;\n\nconst getPerformanceAttribute = (fund, attribute) => _.find(_.get(fund, 'performance'), p => p.name === attribute);\n\nexport default function Card({ fund }) {\n const oneMonthReturnPercent = getPerformanceAttribute(fund, '1MonthReturnPercent');\n const oneYearReturnPercent = getPerformanceAttribute(fund, '1YearReturnPercent');\n const threeYearReturnPercent = getPerformanceAttribute(fund, '3YearReturnPercent');\n const fiveYearReturnPercent = getPerformanceAttribute(fund, '5YearReturnPercent');\n const returnSinceInception = getPerformanceAttribute(fund, 'returnSinceInceptionPercent');\n const currentView = useFundsStateStore(state => state.currentView) || 'summary';\n\n const props = {\n name: fund.name,\n fundType: fund.fundType,\n fundAssetClass: fund.fundAssetClass,\n inceptionDate: fund.inceptionDate,\n minimumInvestment: fund.minimumInvestment,\n managementFee: fund.managementFee,\n performanceFee: fund.performanceFee,\n isPerformanceFeeCharged: fund.isPerformanceFeeCharged,\n totalCostRatio: fund.totalCostRatio,\n financialYearEndFeesDate: fund.financialYearEndFeesDate,\n returnSinceInception: returnSinceInception.value,\n oneMonthReturnPercent: _.get(oneMonthReturnPercent, 'value'),\n oneYearReturnPercent: _.get(oneYearReturnPercent, 'value'),\n threeYearReturnPercent: _.get(threeYearReturnPercent, 'value'),\n fiveYearReturnPercent: _.get(fiveYearReturnPercent, 'value'),\n logoColor: fund.company.logoColor,\n logoPictureUrl: fund.company.logoPictureUrl,\n fundInvestorVehicleType: fund.fundInvestorVehicleType,\n wholesale: fund.wholesale,\n currentView,\n };\n\n const ComponentToShow = useIsLarge() ? Desktop : MobileOrTablet;\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && recordStatisticsEvent({\n event: 'fund_search_fund_card_view',\n statisticable: 'fund',\n id: fund.id,\n page: window.location.pathname,\n });\n }, {});\n\n const showFund = e => {\n e && e.preventDefault();\n\n const { id, slug } = fund;\n const fundProfilePath = `/fund/${slug}`;\n\n recordStatisticsEvent({\n event: 'fund_search_fund_card_clicked',\n statisticable: 'fund',\n id,\n clicked_url: fundProfilePath,\n page: window.location.pathname,\n });\n\n window.location = fundProfilePath;\n };\n\n return (\n \n \n );\n}\n\nCard.propTypes = propTypes;\n","import React from 'react';\nimport { fundCardPropTypes, fundCardDefaultPropTypes } from '../../common/prop-types';\nimport Type from '../../../shared/fund/type';\nimport WholesaleTag from '../../../shared/fund/wholesale-tag';\nimport {\n Primary,\n AssetClass,\n Container,\n Name,\n FlexRow,\n} from './styles';\nimport Logo from './logo';\nimport Summary from './summary';\nimport Performance from './performance';\nimport Fees from './fees';\n\nexport default function Desktop(props) {\n const {\n name,\n fundType,\n fundAssetClass,\n inceptionDate,\n minimumInvestment,\n managementFee,\n performanceFee,\n isPerformanceFeeCharged,\n totalCostRatio,\n financialYearEndFeesDate,\n returnSinceInception,\n oneMonthReturnPercent,\n oneYearReturnPercent,\n threeYearReturnPercent,\n fiveYearReturnPercent,\n logoColor,\n logoPictureUrl,\n currentView,\n wholesale,\n } = props;\n\n return (\n \n \n \n {!!fundType && \n {name} \n {fundAssetClass} \n \n {currentView === 'summary' && (\n \n );\n}\n\nDesktop.propTypes = fundCardPropTypes;\nDesktop.defaultProps = fundCardDefaultPropTypes;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { formatCurrency } from '../../../fund/fund-components/shared-utils';\nimport {\n Fact,\n Title,\n Value,\n} from './styles';\n\nexport default function MonetaryDataFact({\n label,\n value,\n nullReplacement,\n clazz,\n}) {\n return (\n \n {label} \n \n {value ? formatCurrency(value) : nullReplacement}\n \n \n );\n}\n\nMonetaryDataFact.propTypes = {\n label: PropTypes.string.isRequired,\n value: PropTypes.number,\n nullReplacement: PropTypes.string.isRequired,\n clazz: PropTypes.string,\n};\n\nMonetaryDataFact.defaultProps = {\n value: null,\n clazz: null,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../../shared/theme';\nimport PerformanceFeeCharged from '../../../fund/fund-components/fees-and-pricing-components/performance-fee-charged';\nimport {\n Fact,\n Title,\n Value,\n} from './styles';\n\nconst SValue = styled(Value)`\n & > [class^=\"performance-fee-charged\"] {\n height: 20px;\n padding: 0 8px;\n font-size: 13px;\n line-height: 12px;\n margin-top: 8px;\n margin-left: auto;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n height: 16px;\n padding: 0 5px;\n font-size: 11px;\n line-height: 7px;\n margin-left: 0;\n border-radius: 3px;\n `}\n }\n`;\n\nexport default function NoPerformanceFee() {\n return (\n \n Actual Performance Fee \n \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Separator } from '../../../shared/sectionable/styles';\nimport Type from '../../../shared/fund/type';\nimport WholesaleTag from '../../../shared/fund/wholesale-tag';\nimport { fundCardDefaultPropTypes, fundCardPropTypes } from '../../common/prop-types';\nimport {\n Primary,\n Bottom,\n AssetClass,\n Container,\n Name,\n Top,\n FlexRow,\n} from './styles';\nimport Logo from './logo';\nimport Summary from './summary';\nimport Performance from './performance';\nimport Fees from './fees';\n\nconst MobileFlexRow = styled(FlexRow)`\n .tag-container {\n height: 13px;\n font-size: 8px;\n }\n`;\n\nexport default function MobileOrTablet(props) {\n const {\n name,\n fundType,\n fundAssetClass,\n inceptionDate,\n minimumInvestment,\n managementFee,\n performanceFee,\n isPerformanceFeeCharged,\n totalCostRatio,\n financialYearEndFeesDate,\n returnSinceInception,\n oneMonthReturnPercent,\n oneYearReturnPercent,\n threeYearReturnPercent,\n fiveYearReturnPercent,\n logoColor,\n logoPictureUrl,\n currentView,\n wholesale,\n } = props;\n\n return (\n \n \n \n \n {!!fundType && \n {name} \n {fundAssetClass} \n \n \n \n {currentView === 'summary' && (\n \n \n );\n}\n\nMobileOrTablet.propTypes = fundCardPropTypes;\nMobileOrTablet.defaultProps = fundCardDefaultPropTypes;\n","import React from 'react';\nimport styled from 'styled-components';\nimport Filters from './filters';\nimport Sorts from './sorts';\n\nconst ActionContainer = styled.div`\n display: flex;\n\n .sort {\n margin-left: auto;\n }\n`;\n\nexport default function Actions(props) {\n return (\n \n \n );\n}\n","import React from 'react';\nimport { useIsLarge } from '../../../shared/theme';\nimport FundTypeFilter from './filter-components/fund-type-filter';\nimport AssetClassFilter from './filter-components/asset-class-filter';\nimport NameFilter from './filter-components/name-filter';\nimport NameFilterButton from './filter-components/name-filter-button';\nimport TypeAndAssetClassFilter from './filter-components/type-and-asset-class-filter';\n\nexport default function Filters(props) {\n const isLarge = useIsLarge();\n\n return (\n <>\n {!isLarge && 0 ? 'active' : ''} onClick={onClick}>\n Type \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport useGetAssetClasses from '../../../../services/funds/asset-classes-service';\nimport { useIsMobile, useIsMobileOrTablet } from '../../../../shared/theme';\nimport useFundsStateStore from '../../common/funds-state-hook';\nimport { urlToSearchCriteria } from '../../common/utils';\nimport Desktop from './asset-class-filter-components/desktop';\nimport Mobile from './asset-class-filter-components/mobile';\n\nexport default function AssetClassFilter() {\n const isMobile = useIsMobile();\n const isMobileOrTablet = useIsMobileOrTablet();\n const set = useFundsStateStore(state => state.set);\n const showAssetClassFilterHint = useFundsStateStore(state => state.showAssetClassFilterHint);\n const assetClasses = useFundsStateStore(state => state.assetClasses);\n const filteredAssetClasses = useFundsStateStore(state => state.filters.assetClasses);\n const appliedFilterAssetClasses = useFundsStateStore(state => state.appliedFilters.assetClasses);\n const appliedFilterFundTypes = useFundsStateStore(state => state.appliedFilters.fundTypes);\n const filterName = useFundsStateStore(state => state.filters.name);\n const filterCount = filteredAssetClasses.length;\n const searchCriteria = urlToSearchCriteria();\n const type = appliedFilterFundTypes[0] || searchCriteria.type;\n const [, get] = useGetAssetClasses(type, searchCriteria.series, filterName);\n const [showOptions, setShowOptions] = React.useState(false);\n\n useChangeAwareEffect(({ did, isMount }) => {\n (isMount || did.filterName.change || did.type.change) && get().then(({ data }) => {\n const newAssetClasses = _.get(data, 'assetClasses', []);\n const newAppliedFilteredAssetClasses = _.filter(appliedFilterAssetClasses, id => (\n _.find(newAssetClasses, { id })\n ));\n set(state => {\n state.assetClasses = newAssetClasses;\n state.filters.assetClasses = newAppliedFilteredAssetClasses;\n state.appliedFilters.assetClasses = newAppliedFilteredAssetClasses;\n });\n\n if (showAssetClassFilterHint && !isMobileOrTablet) {\n setShowOptions(true);\n }\n });\n }, { filterName, type });\n\n const clearFilter = () => (\n set(state => {\n state.filters.assetClasses = [];\n })\n );\n\n const applyFilter = e => {\n e && e.preventDefault();\n setShowOptions(false);\n\n if (showAssetClassFilterHint) {\n set(state => {\n state.showAssetClassFilterHint = false;\n });\n }\n\n if (_.xor(filteredAssetClasses, appliedFilterAssetClasses).length > 0) {\n set(state => {\n state.filterChanged = true;\n state.appliedFilters.assetClasses = [...filteredAssetClasses];\n });\n }\n sessionStorage.setItem('userChangedFilterCondition', 'true');\n };\n\n const onClick = () => {\n if (showOptions) {\n applyFilter();\n } else {\n if (showAssetClassFilterHint) {\n set(state => {\n state.showAssetClassFilterHint = false;\n });\n }\n setShowOptions(true);\n }\n };\n\n const onClose = () => {\n setShowOptions(false);\n set(state => {\n state.filterChanged = false;\n state.filters.assetClasses = [...appliedFilterAssetClasses];\n });\n };\n\n /* eslint-disable no-nested-ternary */\n const label = filterCount === 0 ? 'Asset Class' : filterCount === 1 ? '1 Asset Class' : `${filterCount} Asset Classes`;\n const className = showOptions ? 'focus' : appliedFilterAssetClasses.length > 0 ? 'active' : '';\n /* eslint-enable no-nested-ternary */\n\n const Component = isMobile ? Mobile : Desktop;\n\n return (\n \n \n {dropdownLabel} \n \n {showOptions && (\n \n Filter by Asset Class \n Select Asset Class \n \n {assetClasses.map(ac => )}\n \n \n 0 ? 'active' : ''} onClick={clearFilter}>\n {filterCount > 1 ? 'Clear All' : 'Clear'}\n \n Apply \n \n \n )}\n {showAssetClassFilterHint && \n );\n}\n\nDesktop.propTypes = filterPropTypes;\n","import React from 'react';\nimport withStyles from '@material-ui/core/styles/withStyles';\nimport Button from '@material-ui/core/Button';\nimport useFundsStateStore from '../../common/funds-state-hook';\n\nconst StyledButton = withStyles(() => ({\n root: {\n height: 40,\n width: 40,\n minWidth: 'unset',\n border: '1px solid #8EA3B5',\n padding: '0 0 0 13px',\n marginRight: 8,\n\n '&.active': {\n border: '1px solid #627484',\n backgroundColor: '#EFF1F6',\n },\n },\n iconSizeMedium: {\n '& > .icon-lw': {\n color: '#19202d',\n fontSize: 18,\n fontWeight: 600,\n },\n },\n}))(Button);\n\nexport default function NameFilterButton() {\n const set = useFundsStateStore(state => state.set);\n const showNameFilter = useFundsStateStore(state => state.showNameFilter);\n\n const toggleShowNameFilter = e => {\n e && e.preventDefault();\n\n set(state => {\n state.showNameFilter = !showNameFilter;\n });\n };\n\n const className = showNameFilter ? 'active' : '';\n\n return (\n \n \n {sortOrderLabel} \n \n {showOptions && (\n \n {sortOrders.map(o => buildOption({ ...o, sortOrder, onClick: setSortOrder }))}\n \n )}\n \n );\n}\n\nDesktop.propTypes = {\n sortOrder: PropTypes.string.isRequired,\n setSortOrder: PropTypes.func.isRequired,\n showOptions: PropTypes.bool.isRequired,\n toggleShowOptions: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { CrossButton, OptionsContainerText } from '../../common/dropdown/styles';\nimport sortOrders from './constants';\nimport {\n buildOption,\n SDropdownContainer,\n SDropdownIcon,\n SOptionsContainer,\n} from './common';\n\nconst SOptionsContainerText = styled(OptionsContainerText)`\n padding-left: 8px;\n`;\n\nconst Separator = styled.div`\n height: 0px;\n border-bottom: 1px solid #EEF1F5;\n margin: 16px -20px 40px;\n`;\n\nexport default function Mobile({\n sortOrder,\n setSortOrder,\n showOptions,\n toggleShowOptions,\n}) {\n return (\n <>\n \n \n \n ✕ \n Sort \n \n \n );\n}\n\nMobile.propTypes = {\n sortOrder: PropTypes.string.isRequired,\n setSortOrder: PropTypes.func.isRequired,\n showOptions: PropTypes.bool.isRequired,\n toggleShowOptions: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt, { useIsMobile } from '../../../shared/theme';\nimport useFundsStateStore from '../common/funds-state-hook';\n\nconst Container = styled.div`\n display: flex;\n width: 100%;\n margin-bottom: 24px;\n`;\n\nconst OptionContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 36px;\n color: ${props => dt(props).theme.bodyColor};\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightRegular};\n font-size: 14px;\n line-height: 120%;\n text-transform: uppercase;\n padding: 0 32px;\n border: 1px solid ${props => dt(props).theme.secondaryColor};\n margin-left: -1px;\n\n ${props => dt(props).theme.isMobile && `\n padding: 0;\n height: 40px;\n width: 42%;\n max-width: 141px;\n `};\n\n &:first-of-type {\n border-radius: 4px 0 0 4px;\n margin-left: auto;\n\n ${props => dt(props).theme.isMobile && `\n width: 29%;\n max-width: 97px;\n `};\n }\n\n &:last-of-type {\n border-radius: 0 4px 4px 0;\n\n ${props => dt(props).theme.isMobile && `\n width: 29%;\n max-width: 97px;\n `};\n }\n\n &:hover {\n border: 1px solid ${props => dt(props).theme.bodyColor};\n cursor: pointer;\n z-index: 1;\n }\n\n &.focus {\n border: 1px solid ${props => dt(props).theme.bodyColor};\n z-index: 1;\n }\n\n &.active {\n border: 1px solid ${props => dt(props).theme.bodyColor};\n background-color: #EFF1F6;\n z-index: 1;\n }\n`;\n\nexport default function ViewOptions() {\n const set = useFundsStateStore(state => state.set);\n const currentView = useFundsStateStore(state => state.currentView);\n\n const setCurrentView = view => (\n set(state => {\n state.currentView = view;\n })\n );\n\n const isMobile = useIsMobile();\n const performanceViewLabel = `Performance${isMobile ? '' : ' View'}`;\n const feesViewLabel = `Fees${isMobile ? '' : ' View'}`;\n\n return (\n \n setCurrentView('summary')}>\n Summary\n \n setCurrentView('performance')}>\n {performanceViewLabel}\n \n setCurrentView('fees')}>\n {feesViewLabel}\n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport useFundsStateStore from '../common/funds-state-hook';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 66px;\n`;\n\nconst Img = styled.img`\n width: 120px;\n height: 110px;\n`;\n\nconst Text = styled.div`\n color: ${props => dt(props).theme.bodyColor};\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightBold};\n font-size: 28px;\n line-height: 130%;\n margin-top: 8px;\n`;\n\nconst SecondaryText = styled.div`\n color: ${props => dt(props).theme.bodyColor};\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightRegular};\n font-size: 19px;\n line-height: 130%;\n text-align: center;\n margin-top: 8px;\n`;\n\nconst Button = styled.button`\n border: none;\n border-radius: 4px;\n outline: none;\n height: 40px;\n width: 335px;\n text-transform: uppercase;\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightHeavy};\n font-size: 16px;\n line-height: 120%;\n margin: 40px 0;\n color: ${props => dt(props).theme.primaryColor};\n background: rgba(193, 157, 63, 0.1);\n\n &:hover {\n background-color: rgba(193, 157, 63, 0.2);\n }\n`;\n\nexport default function NoResults() {\n const resetFilters = useFundsStateStore(state => state.resetFilters);\n const searchNoResultsImageUrl = useFundsStateStore(state => state.searchNoResultsImageUrl);\n\n const resetSearch = e => {\n e && e.preventDefault();\n resetFilters && resetFilters();\n };\n\n return (\n \n 
\n No results found \n \n Try adjusting your search to find what you’re looking for.\n \n \n \n );\n}\n","import React from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\nimport Container from '@material-ui/core/Container';\nimport Fade from '@material-ui/core/Fade';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport CloseIcon from '@material-ui/icons/Close';\nimport IconButton from '@material-ui/core/IconButton';\nimport { useIsXLarge } from '../../../../../shared/theme';\nimport useFundsStateStore from '../../../common/funds-state-hook';\nimport Filter from './filter';\n\nconst useStyles = makeStyles(() => ({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: props => (props.isXLarge ? '0 5%' : '0 32px'),\n },\n}));\n\nconst MainContainer = withStyles(() => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n },\n}))(Container);\n\nconst CrossButton = withStyles(() => ({\n root: {\n marginLeft: 'auto',\n marginBottom: 16,\n color: 'white',\n padding: 0,\n },\n}))(IconButton);\n\nconst CrossIcon = withStyles(() => ({\n root: {\n fontSize: 28,\n },\n}))(CloseIcon);\n\nexport default function FundTypesModal() {\n const isXLarge = useIsXLarge();\n const set = useFundsStateStore(state => state.set);\n const open = useFundsStateStore(state => state.showFundTypesModal);\n const modalClasses = useStyles({ isXLarge });\n\n const handleClose = () => {\n set(state => {\n state.showFundTypesModal = false;\n });\n };\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n","import { useMediaQuery } from 'react-responsive';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\n\nexport default function CommonProps() {\n const mediaQueries = {\n isXXLarge: useMediaQuery({ query: `(min-width: ${theme.breakpointXxlargeMin})` }),\n isXLarge: useMediaQuery({ query: `(min-width: ${theme.breakpointXlargeMin})` }),\n isLarge: useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMin})` }),\n isMobile: useMediaQuery({ query: `(max-width: ${theme.breakpointSmallMax})` }),\n isMobileOrTablet: useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` }),\n };\n\n mediaQueries.isTablet = mediaQueries.isMobileOrTablet && !mediaQueries.isMobile;\n\n return {\n ...theme,\n ...mediaQueries,\n };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SignUpButton from '../../layout/navbar/sign-up-button';\n\nconst Container = styled.div`\n background-color: #1E2737;\n height: 480px;\n width: 100%;\n`;\n\nconst InnerContainer = styled.div`\n display: flex;\n`;\n\nconst Left = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 480px;\n width: 50%;\n\n ${props => props.theme.isLarge && `\n padding-left: 7.5%;\n `};\n\n ${props => props.theme.isXLarge && `\n padding-left: calc(50% - 476px);\n `};\n\n ${props => props.theme.isXXLarge && `\n padding-left: calc(50% - 600px);\n `};\n`;\n\nconst Right = styled.div`\n width: 50%;\n padding-left: 64px;\n`;\n\nconst Img = styled.img`\n height: 480px;\n max-height: 480px;\n width: 100%;\n object-fit: cover;\n`;\n\nconst Headline = styled.div`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 40px;\n line-height: 120%;\n text-transform: none;\n margin-bottom: 16px;\n`;\n\nconst Byline = styled.div`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightRegular};\n font-size: 19px;\n line-height: 130%;\n text-transform: none;\n`;\n\nconst ButtonContainer = styled.div`\n margin-top: 40px;\n width: 100%;\n`;\n\nconst Link = styled.a`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 34px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n margin-left: 20px;\n vertical-align: bottom;\n\n &:hover {\n color: ${props => props.theme.bodyBackgroundColor};\n cursor: pointer;\n }\n`;\n\nexport default function Desktop({ banner, signUpUrl, signInUrl }) {\n const {\n imageUrl,\n headline,\n byline,\n registerButtonCopy,\n } = banner;\n\n return (\n \n \n \n {headline} \n {byline} \n \n \n \n \n 
\n \n \n \n );\n}\n\nDesktop.propTypes = {\n banner: PropTypes.shape({\n id: PropTypes.number.isRequired,\n headline: PropTypes.string.isRequired,\n byline: PropTypes.string,\n imageUrl: PropTypes.string.isRequired,\n registerButtonCopy: PropTypes.string,\n }).isRequired,\n signUpUrl: PropTypes.string.isRequired,\n signInUrl: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SignUpButton from '../../layout/navbar/sign-up-button';\n\nconst Container = styled.div`\n background-color: #1E2737;\n width: 100%;\n padding-bottom: 16px;\n`;\n\nconst Img = styled.img`\n height: 200px;\n max-height: 200px;\n width: 100%;\n object-fit: cover;\n margin-bottom: 16px;\n`;\n\nconst Headline = styled.div`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 29px;\n line-height: 120%;\n margin-bottom: 16px;\n padding: 0 20px;\n`;\n\nconst Byline = styled.div`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightRegular};\n font-size: 19px;\n line-height: 130%;\n padding: 0 20px;\n`;\n\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: 30px;\n padding: 0 20px;\n`;\n\nconst Link = styled.a`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 34px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n margin: 8px auto;\n\n &:hover {\n color: ${props => props.theme.bodyBackgroundColor};\n cursor: pointer;\n }\n`;\n\nexport default function Mobile({ banner, signUpUrl, signInUrl }) {\n const {\n imageUrl,\n headline,\n byline,\n registerButtonCopy,\n } = banner;\n\n return (\n \n \n {headline} \n {byline} \n \n \n \n );\n}\n\nMobile.propTypes = {\n banner: PropTypes.shape({\n id: PropTypes.number.isRequired,\n headline: PropTypes.string.isRequired,\n byline: PropTypes.string,\n imageUrl: PropTypes.string.isRequired,\n registerButtonCopy: PropTypes.string,\n }).isRequired,\n signUpUrl: PropTypes.string.isRequired,\n signInUrl: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport SignUpButton from '../../layout/navbar/sign-up-button';\n\nconst Container = styled.div`\n background-color: #1E2737;\n width: 100%;\n padding: 24px 20px 90px;\n`;\n\nconst Img = styled.img`\n height: 360px;\n max-height: 360px;\n width: 100%;\n object-fit: cover;\n margin-bottom: 40px;\n`;\n\nconst Headline = styled.div`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 40px;\n line-height: 120%;\n margin-bottom: 16px;\n`;\n\nconst Byline = styled.div`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightRegular};\n font-size: 19px;\n line-height: 130%;\n`;\n\nconst ButtonContainer = styled.div`\n margin-top: 40px;\n width: 100%;\n`;\n\nconst Link = styled.a`\n color: ${props => props.theme.bodyBackgroundColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 14px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 34px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n margin-left: 20px;\n vertical-align: bottom;\n\n &:hover {\n color: ${props => props.theme.bodyBackgroundColor};\n cursor: pointer;\n }\n`;\n\nexport default function Tablet({ banner, signUpUrl, signInUrl }) {\n const {\n imageUrl,\n headline,\n byline,\n registerButtonCopy,\n } = banner;\n\n return (\n \n \n {headline} \n {byline} \n \n \n \n );\n}\n\nTablet.propTypes = {\n banner: PropTypes.shape({\n id: PropTypes.number.isRequired,\n headline: PropTypes.string.isRequired,\n byline: PropTypes.string,\n imageUrl: PropTypes.string.isRequired,\n registerButtonCopy: PropTypes.string,\n }).isRequired,\n signUpUrl: PropTypes.string.isRequired,\n signInUrl: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport MREC from '../../shared/mrec';\nimport SidebarContext from './sidebar-context';\n\nexport default function MRECSidebar() {\n const { ads } = React.useContext(SidebarContext);\n return \n \n similar contributors \n \n \n );\n}\n\nSimilarContributors.propTypes = {\n type: PropTypes.oneOf(['list', 'square', 'circle']).isRequired,\n list: listTypes.isRequired,\n};\n","import { useMediaQuery } from 'react-responsive';\nimport sassVariables from '../../../../../assets/stylesheets/_settings.global.scss';\n\nexport default function useTheme() {\n const isMobile = useMediaQuery({ query: `(max-width: ${sassVariables.breakpointMediumMax})` });\n const isLarge = useMediaQuery({ query: `(min-width: ${sassVariables.breakpointLargeMin})` });\n return {\n ...sassVariables,\n isLarge,\n isMobile,\n };\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport humanFormat from 'human-format';\nimport { listTypes, profileTypes } from './prop-types';\nimport Avatar from './avatar';\nimport { recordSimilarContributorsStatistic } from '../../../../services/statistics-service';\n\nconst Container = styled.div`\n margin-top: 16px;\n width: 100%;\n display: flex;\n\n &:first-of-type {\n margin-top: 24px;\n }\n\n & img {\n flex-shrink: 0;\n }\n\n & > .vflex {\n margin: 0px 8px;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n max-width: calc(100% - 133px);\n\n > span {\n width: 100%;\n font: ${props => props.theme.fontWeightHeavy} 14px/111% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n > span.name {\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n text-transform: capitalize;\n }\n }\n\n & > button {\n flex-shrink: 0;\n padding: 0px 8px;\n width: 77px;\n height: 23px;\n border-radius: 2px;\n background-color: #3c4966;\n font: ${props => props.theme.fontWeightHeavy} 11px/13.2px ${props => props.theme.fontFamilyBody};\n text-transform: capitalize;\n border: none;\n color: white;\n\n :hover {\n color: white;\n }\n }\n`;\n\nconst humanCount = d => `${humanFormat(d, { decimals: 1, separator: '' })} follower${d > 1 ? 's' : ''}`;\n\nconst Item = ({\n id, name, profilePictureUrl, followersCount, publicUrl,\n}) => {\n const avatarProps = {\n id,\n name,\n publicUrl,\n profilePictureUrl,\n type: 'list',\n clickable: false,\n };\n const clickHandler = e => {\n e && e.preventDefault();\n recordSimilarContributorsStatistic(id);\n window.location = publicUrl;\n };\n\n return (\n \n \n );\n};\n\nItem.propTypes = profileTypes;\nItem.defaultProps = {\n profilePictureUrl: null,\n followersCount: 0,\n};\n\nexport default function ListView({ list }) {\n return (\n <>\n {list.map(prof => \n \n \n {companyLogo && (\n <>\n \n \n {companyBackgroundColor === white && \n \n \n {name} \n {showCompanyName && {companyName} }\n \n \n \n \n {followersCount > 0 && (\n \n Followed by\n \n {` ${humanFormat(followersCount, { decimals: 1, separator: '' })} `}\n \n people\n \n )}\n \n \n \n \n \n );\n}\n\nContributorTooltip.propTypes = {\n contributor: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n publicUrl: PropTypes.string.isRequired,\n followersCount: PropTypes.number.isRequired,\n company: PropTypes.shape({\n name: PropTypes.string,\n logo: PropTypes.string,\n color: PropTypes.string,\n }),\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport platform from 'platform';\nimport postal from 'postal';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nconst isEmbedded = platform.name === 'Safari'\n && (platform.product || '').match(/ipod|ipad|iphone/i)\n && +platform.version < 11;\n\nconst getModalId = eId => `eventbrite-widget-modal-trigger-${eId}-${Math.round(Math.random() * 1000000)}`;\nconst getIframeId = eId => `eventbrite-widget-container-${eId}`;\n\nexport default function PurchaseTickets(props) {\n const mounted = React.useRef(false);\n const buttonRef = React.useRef();\n const modalId = React.useMemo(() => getModalId(props.eventbriteId), [props.eventbriteId]);\n\n React.useEffect(() => {\n if (!mounted.current) {\n window.EBWidgets.createWidget({\n widgetType: 'checkout',\n eventId: props.eventbriteId,\n ...(isEmbedded\n ? { modal: true, modalTriggerElementId: modalId }\n : { iframeContainerHeight: 425, iframeContainerId: getIframeId(props.eventbriteId) }\n ),\n });\n\n postal.subscribe({\n channel: 'livewire-events.commands',\n topic: 'trigger-purchase-ticket',\n callback: () => buttonRef.current.click(),\n });\n }\n return () => {\n mounted.current = true;\n };\n }, [modalId, props.eventbriteId]);\n\n return (\n \n {\n isEmbedded ? (\n \n {props.buttonText}\n \n ) : (\n \n {props.buttonText}\n \n )\n }\n \n );\n}\n\nPurchaseTickets.propTypes = {\n eventbriteId: PropTypes.string.isRequired,\n buttonText: PropTypes.string,\n};\n\nPurchaseTickets.defaultProps = {\n buttonText: 'Purchase tickets',\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport { propTypes, defaultProps } from '../prop-types';\nimport Avatar from '../../shared/avatar';\n\nconst Container = styled.section`\n border: none;\n padding: 0;\n display: flex;\n\n & > *:first-child {\n flex-shrink: 0;\n }\n\n & > .v-flex {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n`;\n\nconst Name = styled.a`\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n :hover {\n text-decoration: none;\n }\n\n & > span {\n color: ${props => dt(props).theme.bodyColor};\n font: ${props => dt(props).theme.fontWeightDccc} 20px/24px ${props => dt(props).theme.fontFamilyBody};\n text-transform: uppercase;\n > u {\n text-decoration: none;\n border-bottom: 1px solid ${props => dt(props).theme.bodyColor};\n }\n }\n\n & > .fa-chevron-up {\n color: ${props => dt(props).theme.primaryColor};\n transform: rotate(90deg);\n font-size: 14px;\n margin-bottom: 10px;\n }\n`;\n\nconst Title = styled.span`\n font: ${props => dt(props).theme.fontWeightRegular} 14px/16.8px ${props => dt(props).theme.fontFamilyBody};\n color: ${props => dt(props).theme.bodyColor};\n`;\n\nconst Org = styled.span`\n margin-top: 5px;\n font: ${props => dt(props).theme.fontWeightHeavy} 16px/19.2px ${props => dt(props).theme.fontFamilyBody};\n color: ${props => dt(props).theme.secondaryColor};\n`;\n\nexport default function Contributor(props) {\n const { profile, clickDataAttributes } = props;\n\n return (\n \n \n );\n}\n\nContributor.propTypes = propTypes;\nContributor.defaultProps = defaultProps;\n","import React from 'react';\nimport styled from 'styled-components';\nimport {\n propTypes, defaultProps, isContactable,\n} from '../prop-types';\nimport ContactForm from './contact-form';\nimport ContactButton from './contact-button';\nimport AnimatedProfileFollowButton from '../../shared/animated-profile-follow-button';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n &&&& > button[name=\"profile-follow-button\"] {\n width: 100%;\n\n > .icon-box > .icon-lw-user-check {\n left: 0px;\n }\n }\n`;\n\nexport default function Actions(props) {\n const { profile } = props;\n\n if (!profile.canPostWires) {\n return null;\n }\n\n const {\n isOfCurrentUser, isProfileFollowedByCurrentUser, onUnfollow, followEventName, unfollowEventName,\n } = props;\n const contactable = isContactable(props);\n const showFollowButton = !isOfCurrentUser && !isProfileFollowedByCurrentUser;\n\n const followButtonProps = {\n isProfileFollowedByCurrentUser,\n onUnfollow,\n profileId: profile.id,\n followEventName,\n unfollowEventName,\n exp: 'eow_streamlined_micro_profile',\n };\n\n return (\n <>\n \n {!!showFollowButton && \n {!!contactable && \n {this.profilePicture}\n {this.renderMessage()}\n \n \n \n \n \n );\n }\n}\n","import _ from 'lodash';\nimport { useMediaQuery } from 'react-responsive';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Investor from '../investor';\nimport Interests from '../interests';\nimport Holdings from '../holdings';\n\nexport default function commonProps() {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n const profile = _.get(window, 'Livewire.currentUser.profile');\n const isUserSignedIn = !!(_.get(profile, 'firstName'));\n const steps = [\n { name: 'investor', comp: Investor },\n { name: 'interests', comp: Interests },\n { name: 'follow', comp: Holdings },\n ];\n\n return {\n ...theme,\n isMobile,\n isUserSignedIn,\n steps,\n };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Container, Title, Description, Footer, RightButton, Content, List, Name, Line, Error,\n} from './common/styles';\nimport Check from './common/check';\nimport OnboardingContext from './common/context';\nimport { setInvestorType } from '../../services/onboarding-services';\n\nexport default function Investor(props) {\n const { state, dispatch } = React.useContext(OnboardingContext);\n const { nextStep } = props;\n const [invalid, setInvalid] = React.useState(false);\n\n const onSubmit = e => {\n e && e.preventDefault();\n if (state.selectedInvestorType == null) {\n setInvalid(true);\n return;\n }\n setInvestorType(state.selectedInvestorType).then(() => {\n nextStep();\n });\n };\n\n const onSelect = investorTypeId => {\n setInvalid(false);\n dispatch({ type: 'setSelectedInvestorType', payload: investorTypeId });\n };\n\n return (\n \n \n What type of investor are you?\n \n \n Welcome to Livewire, we’d like to understand what type of\n investor you are so we can better personalise your experience on Livewire.\n \n \n Please select which investor type best reflects you. }\n \n \n \n );\n}\n\nInvestor.propTypes = {\n nextStep: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeContext } from 'styled-components';\nimport {\n ContainerAlt, Title, Description,\n Footer, RightButton, LeftButton, Content, List, Name, Line, Error,\n} from './common/styles';\nimport Check from './common/check';\nimport OnboardingContext from './common/context';\nimport { setInvestmentThemes } from '../../services/onboarding-services';\n\nexport default function Interests({ previousStep, nextStep }) {\n const { isMobile } = React.useContext(ThemeContext);\n const { state, dispatch } = React.useContext(OnboardingContext);\n const [invalid, setInvalid] = React.useState(false);\n\n const onToggle = id => {\n setInvalid(false);\n dispatch({ type: 'toggleAssetClassesSelection', payload: id });\n };\n\n const onNext = e => {\n e && e.preventDefault();\n const ids = state.assetClasses.filter(d => d.selected).map(d => d.id);\n if (!ids.length) {\n setInvalid(true);\n return;\n }\n setInvestmentThemes(ids).then(nextStep);\n };\n\n return (\n \n Which investment products do you invest in? \n \n Let us know which investment instruments you invest in so we can make\n sure you’re up to date with content published on Livewire which relate\n to your investments.\n \n \n Please select which investment themes you’re interested in. }\n \n \n \n );\n}\n\nInterests.propTypes = {\n previousStep: PropTypes.func.isRequired,\n nextStep: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport {\n Content, ContainerAlt, Title, Description, Footer, RightButton, LeftButton,\n} from './common/styles';\nimport Available from './holdings-elements/available';\nimport Following from './holdings-elements/following';\nimport { setHoldingsOptOut } from '../../services/onboarding-services';\n\nconst OddButton = styled(LeftButton)`\n color: ${props => props.theme.secondaryColor};\n ${props => (!props.theme.isMobile && `\n align-self: flex-end;\n position: relative;\n top: 68px;\n background-color: transparent;\n `)}\n`;\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: -2vh;\n`;\n\nconst HangingContent = styled(Content)`\n overflow-y: hidden;\n display: flex;\n flex-direction: column;\n ${props => (!props.theme.isMobile && `\n height: 300px;\n `)}\n`;\n\nconst HFlex = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n`;\n\nconst SkipButton = ({ onClick }) => skip ;\nSkipButton.propTypes = { onClick: PropTypes.func.isRequired };\n\nconst BackButton = ({ text, onClick }) => (\n {text} \n);\nBackButton.propTypes = {\n text: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default function Holdings({ previousStep, redirectToUrl }) {\n const { isMobile } = React.useContext(ThemeContext);\n const setOptOut = (event, value) => {\n event.preventDefault();\n\n setHoldingsOptOut(value).then(() => {\n window.location.replace(`onboarding/contributors?redirect_to=${redirectToUrl}`);\n });\n };\n\n const finish = e => {\n setOptOut(e, false);\n };\n\n const skip = e => {\n setOptOut(e, true);\n };\n\n return (\n \n \n Stay Updated: Follow Your Favourite Equities, ETFs & LICs for Latest News\n \n \n Start following equities, ETFs and LICs you’re interested in and we’ll notify you\n via email any related content that has been published. Manage items easily from\n My Follows within your profile settings.\n \n { !isMobile && (\n \n \n \n Next \n \n )}\n { !!isMobile && (\n \n \n )}\n { !!isMobile && (\n \n )}\n {!isMobile && \n );\n}\n\nHoldings.propTypes = {\n previousStep: PropTypes.func.isRequired,\n redirectToUrl: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FollowButton from '../../shared/follow-button';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport { useFollow, useUnfollow } from '../../../services/stock-codes/follow-service';\nimport OnboardingContext from '../common/context';\n\nexport default function OnboardingProductFollowButton({ stockCodeSlug, followed }) {\n const { dispatch } = React.useContext(OnboardingContext);\n const [{ loading: followLoading }, follow] = useFollow();\n const [{ loading: unfollowLoading }, unfollow] = useUnfollow();\n const loadingRef = React.useRef();\n\n React.useEffect(() => {\n if (followLoading || unfollowLoading) {\n loadingRef.current.start();\n }\n }, [followLoading, unfollowLoading]);\n\n const action = followed ? unfollow : follow;\n const type = followed ? 'setUnfollow' : 'setFollow';\n const verb = followed ? 'unfollowing' : 'following';\n\n const toggle = () => {\n loadingRef.current.start({\n onFadeInComplete: () => {\n action(stockCodeSlug)\n .then(() => dispatch({ type, payload: stockCodeSlug }))\n .catch(err => defaultOnErrorHandler(err, `Error ${verb} this stock code`));\n },\n });\n };\n\n return (\n \n \n );\n}\n\nOnboardingProductFollowButton.propTypes = {\n stockCodeSlug: PropTypes.string.isRequired,\n followed: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useDebouncedCallback } from 'use-debounce';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n width: 34vw;\n max-width: 461px;\n `)}\n`;\n\nconst SearchInput = styled.input`\n border: 0;\n border-bottom: 1px solid ${props => props.theme.secondaryColorLight};\n font-size: ${props => (props.theme.isMobile ? '15px' : '11px')};\n font-weight: ${props => props.theme.fontWeightHeavy};\n color: ${props => props.theme.bodyColor};\n padding: 0 0 2px 25px;\n outline: none;\n\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n width: 32vw;\n `)}\n\n &::placeholder {\n color: ${props => props.theme.secondaryColor};\n }\n`;\n\nconst SearchIcon = styled.span`\n position: relative;\n margin-right: -15px;\n color: ${props => props.theme.secondaryColor};\n font-size: ${props => (props.theme.isMobile ? '15px' : '11px')};\n margin-left: 3px;\n`;\n\nexport default function SearchProductsControl({ onSearch }) {\n const { callback: debounced } = useDebouncedCallback(v => onSearch(v), 300);\n\n const onChange = e => {\n e.persist();\n e.preventDefault();\n\n debounced(e.target.value);\n };\n\n return (\n \n \n );\n}\n\nSearchProductsControl.propTypes = {\n onSearch: PropTypes.func.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\n\nconst Image = styled(Img)`\n width: 150px;\n margin-bottom: 40px;\n`;\n\nexport default function Logo({ source }) {\n const { isMobile } = React.useContext(ThemeContext);\n\n if (isMobile) {\n return null;\n }\n\n return \n {name} \n \n \n );\n};\n\nStep.propTypes = {\n name: PropTypes.string.isRequired,\n active: PropTypes.number.isRequired,\n index: PropTypes.number.isRequired,\n};\n\nexport default function StepLegend({ steps, activeStepIndex }) {\n return (\n \n {steps.map((step, index) => {\n const props = { active: activeStepIndex, index };\n return (\n \n {!!index && \n );\n })}\n \n );\n}\n\nStepLegend.propTypes = {\n steps: PropTypes.arrayOf(PropTypes.string).isRequired,\n activeStepIndex: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\nimport toastr from 'toastr';\nimport Validator from '../../shared/validator';\nimport Loading from '../../shared/loading';\nimport parseFailXhr from '../../shared/parse-fail-xhr';\nimport { setPersonalDetails } from '../../services/onboarding-services';\nimport { MINIMUM_PASSWORD_LENGTH } from '../../shared/consts';\n\nexport default class OnboardingProvidePersonalDetailsModal extends React.Component {\n static propTypes = {\n active: PropTypes.bool.isRequired,\n onComplete: PropTypes.func.isRequired,\n currentStepIndex: PropTypes.number.isRequired,\n totalStepCount: PropTypes.number.isRequired,\n provideName: PropTypes.bool.isRequired,\n providePassword: PropTypes.bool.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handlePasswordChange = this.handlePasswordChange.bind(this);\n this.handleVerifyPasswordChange = this.handleVerifyPasswordChange.bind(this);\n this.handleFirstNameChange = this.handleFirstNameChange.bind(this);\n this.handleLastNameChange = this.handleLastNameChange.bind(this);\n\n this.state = {\n password: '',\n verifyPassword: '',\n firstName: '',\n lastName: '',\n userAttemptedToDismiss: false,\n validator: new Validator({\n passwordRequired: s => !this.props.providePassword || !!s.password,\n passwordCorrectLength: s => !this.props.providePassword || !s.password\n || s.password.length >= MINIMUM_PASSWORD_LENGTH,\n passwordContainsDigit: s => !this.props.providePassword || !s.password\n || /[0-9]/.test(s.password),\n verifyPasswordRequired: s => !this.props.providePassword || !!s.verifyPassword,\n passwordsMustMatch: s => !this.props.providePassword || !s.password || !s.verifyPassword\n || s.password === s.verifyPassword,\n userDidNotAttemptToDismiss: s => !this.props.providePassword || !s.userAttemptedToDismiss,\n lastNameRequired: s => !this.props.provideName || !!s.lastName,\n }),\n };\n }\n\n componentDidMount() {\n if (this.props.active) {\n this.$modal.show();\n }\n\n const self = this;\n this.$modal.click(function onClick(e) {\n if (e.target === this) {\n self.setState(state => {\n state.userAttemptedToDismiss = true;\n state.validator.validateForm(state);\n });\n }\n });\n }\n\n componentDidUpdate(prevProps) {\n if (!prevProps.active && this.props.active) {\n this.$modal.fadeIn(800);\n }\n }\n\n handleSubmit(event) {\n event.preventDefault();\n\n this.setState(\n state => state.validator.validateForm(state),\n () => {\n if (!this.state.validator.formValid) return;\n\n const { password, firstName, lastName } = this.state;\n this.loading.start();\n setPersonalDetails(password, firstName, lastName).then(() => {\n this.$modal.fadeOut(800, () => this.loading.stop());\n this.props.onComplete();\n postal.publish({\n channel: 'events.user',\n topic: 'first-name-changed',\n data: { firstName },\n });\n }).catch(err => {\n this.loading.stop();\n const errors = parseFailXhr(err.jqXHR);\n errors.anyUnhandledErrors() && toastr.error(errors.getErrorSummary(), 'Error');\n });\n },\n );\n }\n\n handlePasswordChange(event) {\n const password = event.target.value;\n\n this.setState(state => {\n state.password = password;\n state.userAttemptedToDismiss = false;\n state.validator.validatePasswordRequired(state);\n\n return state;\n });\n }\n\n handleVerifyPasswordChange(event) {\n const verifyPassword = event.target.value;\n\n this.setState(state => {\n state.verifyPassword = verifyPassword;\n state.userAttemptedToDismiss = false;\n state.validator.validateVerifyPasswordRequired(state);\n state.validator.validatePasswordsMustMatch(state);\n\n return state;\n });\n }\n\n handleFirstNameChange(event) {\n const firstName = event.target.value;\n\n this.setState({ firstName });\n }\n\n handleLastNameChange(event) {\n const lastName = event.target.value;\n\n this.setState(state => {\n state.lastName = lastName;\n state.validator.validateLastNameRequired(state);\n\n return state;\n });\n }\n\n renderHeader() {\n const {\n provideName,\n providePassword,\n totalStepCount: total,\n currentStepIndex: current,\n } = this.props;\n return (\n \n {total <= 1 || current === -1 || (\n \n );\n }\n\n renderFirstName() {\n if (!this.props.provideName) {\n return null;\n }\n\n return (\n (this.$modal = $(e))}\n className=\"livewire-modal onboarding-provide-personal-details-modal\"\n tabIndex=\"-1\"\n role=\"dialog\"\n >\n \n {this.renderHeader()}\n \n {provideName && providePassword && (\n \n \n
\n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport toastr from 'toastr';\nimport Validator from '../../shared/validator';\nimport Loading from '../../shared/loading';\nimport parseFailXhr from '../../shared/parse-fail-xhr';\nimport { setInvestmentThemes } from '../../services/onboarding-services';\n\nexport default class OnboardingSelectInvestmentThemesModal extends React.Component {\n static propTypes = {\n active: PropTypes.bool.isRequired,\n onComplete: PropTypes.func.isRequired,\n assetClasses: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n })).isRequired,\n currentStepIndex: PropTypes.number.isRequired,\n totalStepCount: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleAssetClassesChanged = this.handleAssetClassesChanged.bind(this);\n\n this.state = {\n assetClassIds: [],\n userAttemptedToDismiss: false,\n validator: new Validator({\n assetClassesRequired: state => !!state.assetClassIds.length,\n userDidNotAttemptToDismiss: state => !state.userAttemptedToDismiss,\n }),\n };\n }\n\n componentDidMount() {\n if (this.props.active) {\n this.$modal.show();\n }\n\n const self = this;\n this.$modal.click(function onClick(e) {\n if (e.target === this) {\n self.setState(state => {\n state.userAttemptedToDismiss = true;\n state.validator.validateForm(state);\n });\n }\n });\n }\n\n componentDidUpdate(prevProps) {\n if (!prevProps.active && this.props.active) {\n this.$modal.fadeIn(800);\n }\n }\n\n handleSubmit(event) {\n event.preventDefault();\n\n this.setState(\n state => {\n state.userAttemptedToDismiss = false;\n state.validator.validateForm(state);\n\n return state;\n },\n () => {\n if (!this.state.validator.formValid) return;\n\n this.loading.start();\n\n setInvestmentThemes(this.state.assetClassIds).then(() => {\n this.$modal.fadeOut(800, () => this.loading.stop());\n this.props.onComplete();\n }).catch(err => {\n this.loading.stop();\n const errors = parseFailXhr(err.jqXHR);\n errors.anyUnhandledErrors() && toastr.error(errors.getErrorSummary(), 'Error');\n });\n },\n );\n }\n\n handleAssetClassesChanged(event) {\n const assetClassId = parseInt(event.target.value, 10);\n const isSelected = event.target.checked;\n\n this.setState(state => {\n state.userAttemptedToDismiss = false;\n\n if (!isSelected) {\n _.pull(state.assetClassIds, assetClassId);\n } else {\n state.assetClassIds.push(assetClassId);\n }\n\n state.validator.validateAssetClassesRequired(state);\n\n return state;\n });\n }\n\n render() {\n const isInvalid = this.state.validator.userDidNotAttemptToDismissValid\n && this.state.validator.assetClassesRequiredValid;\n return (\n (this.$overlay = $(el))} onClick={() => this.dismiss()} />\n
\n );\n }\n}\n","import styled from 'styled-components';\n\nimport { Column } from '../../../shared/styles';\n\nconst NameColumn = styled(Column)`\n width: 20%;\n`;\n\nconst DataColumn = styled(Column)`\n width: 16%;\n`;\n\nexport {\n DataColumn,\n NameColumn,\n};\n","import moment from 'moment';\nimport { createOrUpdateEvent } from '../../../services/lwadmin/livewire-events/events-service';\n\nexport default class LivewireEvent {\n constructor(source) {\n Object.assign(this, source || {\n id: null,\n name: '',\n slug: '',\n starts_at: null,\n eventbrite_id: '',\n rollover_eventbrite_id: '',\n city: '',\n hidden: false,\n include_digital_pass: true,\n });\n\n this.starts_at = this.starts_at ? moment(this.starts_at) : null;\n this.name = this.name || '';\n this.slug = this.slug || '';\n this.eventbrite_id = this.eventbrite_id || '';\n this.rollover_eventbrite_id = this.rollover_eventbrite_id || '';\n this.city = this.city || '';\n this.starts_at_time = this.starts_at ? this.starts_at.format('HH:mm') : '';\n }\n\n toDto() {\n const startsAtTimeMoment = moment(`1900-01-01T${this.starts_at_time}`);\n\n this.starts_at.hour(startsAtTimeMoment.hour());\n this.starts_at.minute(startsAtTimeMoment.minute());\n\n return {\n id: this.id,\n name: this.name,\n slug: this.slug,\n starts_at: this.starts_at ? this.starts_at.toDate() : null,\n eventbrite_id: this.eventbrite_id,\n rollover_eventbrite_id: this.rollover_eventbrite_id,\n city: this.city,\n hidden: this.hidden,\n include_digital_pass: this.include_digital_pass,\n };\n }\n\n show() {\n this.hidden = false;\n\n return this.save();\n }\n\n hide() {\n this.hidden = true;\n\n return this.save();\n }\n\n save() {\n return createOrUpdateEvent(this.toDto());\n }\n}\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useContentFormatTypeStore = create(set => ({\n contentFormatType: {\n id: null,\n name: null,\n slug: null,\n description: null,\n },\n errors: {},\n set: fn => set(produce(fn)),\n}));\n\nexport default useContentFormatTypeStore;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { scroller } from 'react-scroll';\n\nconst Btn = styled.button`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n border: 0;\n background-color: ${props => props.theme.btnPrimaryBackgroundColor};\n border-radius: 4px;\n text-transform: uppercase;\n color: #fff;\n font-size: ${props => (props.theme.isPortrait ? 16 : 20)}px;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n height: 60px;\n margin-top: ${props => (props.theme.isPortrait ? 36 : 50)}px;\n margin-bottom: ${props => (props.theme.isPortrait ? 70 : 0)}px;\n max-width: 384px;\n width: ${props => (props.theme.isPortrait ? 80 : 26.7)}vw;\n\n &:hover {\n background-color: #9b7e32;\n }\n`;\n\nexport default function Button({ text }) {\n const scrollToForm = () => scroller.scrollTo('form', {\n duration: 1500,\n smooth: 'easeInOutQuint',\n });\n\n return (this.$modal = $(el))}>\n \n \n \n (this.loading = c)}>\n \n \n \n \n \n \n \n \n \n
\n \n {`${this.state.partnership.id ? 'Editing' : 'Creating'} a partnership`}\n
\n\n Partnership name\n
\n \n
\n\n this.handleAccountManagerChange(e)}\n />\n
\n \n Partnership type\n
\n \n
\n\n Send contact emails to\n
\n Dashboard URL\n
\n this.filterExistingCompanies(companies)}\n onCompanySelected={company => this.handleNewCompanySelected(company)}\n />\n {this.renderContributors()}\n {this.renderCompanies()}\n
\n {text}
;\n}\n\nTitle.propTypes = {\n text: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport RelativeTime from '../../../wire/relative-time';\n\nconst CaptionContainer = styled.div`\n display: flex;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n text-transform: uppercase;\n justify-content: space-start;\n align-content: center;\n margin-bottom: 10px;\n\n span {\n font-size: ${props => (props.theme.isMobile ? 13 : 14)}px;\n line-height: 15px;\n }\n\n span.main {\n color: ${props => props.theme.primaryColor};\n }\n\n span.secondary {\n color: ${props => props.theme.secondaryColor};\n font-size: ${props => (props.theme.isMobile ? 13 : 15)}px;\n }\n`;\n\nconst VFlex = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst HFlex = styled.div`\n display: flex;\n`;\n\nconst Secondary = styled.span`\n &&, & > a {\n color: ${props => props.theme.secondaryColor};\n }\n\n ${props => props.theme.isMobile && `\n margin-bottom: 5px;\n `};\n`;\n\nconst Separator = styled(Secondary)`\n margin: 0 8px;\n\n ${props => props.theme.isMobile && `\n margin: 0 4px;\n `};\n`;\n\n// eslint-disable-next-line complexity\nexport default function WireCaption({ wire }) {\n const { isMobile } = React.useContext(ThemeContext);\n const caption = {};\n if (wire.category || wire.series) {\n const seriesTitle = _.get(wire, 'series.title');\n caption.text = seriesTitle || _.get(wire, 'category.name');\n caption.url = seriesTitle ? `/series/${wire.series.slug}` : `/categories/${wire.category.slug}`;\n }\n\n return (\n\n \n
\n \n
\n\n \n {fund.name}\n {!!fund.stockCode &&
Shares in this fund can be purchased on a stock exchange like other listed securities. Please consult your stock broker or financial advisor.
\n\n {!isMobile &&\n
\n \n Symbols and Trading Hours \n
\n \n
\n\n {!!fund.stockCode && (\n isin
\n{fund.isin}
\n\n
\n )}\n\n stock code
\n{fund.stockCode.toUpperCase()}
\n\n
\n\n exchange
\n{ exchangeName }
\n\n
\n trading hours
\n{ tradingHours }
\n\n
\n );\n};\n\nItem.propTypes = {\n ...profileTypes,\n type: validTypes.isRequired,\n};\n\nexport default function GridView({ list, type }) {\n const { isLarge } = React.useContext(ThemeContext);\n\n return (\n <>\n \n {showing.map(p =>
\n \n
\n {!!isNotMobile && \n \n {!!profile.position && (!profile.isCompanyProfile || !profile.organization) && {profile.position} }\n {!isExpanded && \n )}\n
\n \n {!!profile.organization && !profile.isCompanyProfile && {profile.organization} }\n
\n \n {profile.lastName}\n \n )}\n
\n
\n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useSpring, animated } from 'react-spring';\n\nconst Container = styled.section`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: white;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n & > * {\n opacity: 0;\n }\n\n > img {\n width: 96px;\n }\n\n h2 {\n margin: 0;\n }\n\n p {\n margin: 0;\n text-align: center;\n }\n`;\n\nconst pos = y => `translateY(${y}px)`;\nconst neg = y => `translateY(${-y}px)`;\n\nexport default function SuccessInfo({ organization }) {\n const { opacity, y } = useSpring({\n opacity: 1,\n y: 0,\n from: { opacity: 0, y: 150 },\n });\n\n return (\n \n
\n\n \n \n {this.state.validations.nameRequiredValid || (\n Name is required\n )}\n
\n\n\n \n {this.state.validations.emailRequiredValid || (\n Email is required\n )}\n {this.state.validations.emailRegexValid || (\n Email is not in correct format\n )}\n
\n\n\n \n
\n\n\n \n
\n\n \n (this.loading = el)}>\n \n \n \n
\n I would like to
\n\n\n \n \n \n
\n\n\n \n
\n\n\n {organization}\n
\n \n \n \n \n {types.map(({ type }, i) => (\n \n \n \n \n
\n );\n}\n\nChartArea.propTypes = {\n types: typesTypes.isRequired,\n IContainer: PropTypes.elementType,\n IBarChart: PropTypes.elementType,\n IBar: PropTypes.elementType,\n ICell: PropTypes.elementType,\n};\n\nChartArea.defaultProps = {\n IContainer: ResponsiveContainer,\n IBarChart: BarChart,\n IBar: Bar,\n ICell: Cell,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n width: 94px;\n height: 43px;\n border-radius: 3px;\n padding: 0px 8px;\n background-color: ${props => props.theme.bodyColor};\n border: none;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n font: ${props => props.theme.fontWeightBold} 8px/120% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n\n & > .percent {\n color: white;\n font-size: 19px;\n margin-bottom: 7px;\n }\n`;\n\nexport default function Toolty({ active, payload }) {\n if (!active) {\n return null;\n }\n\n return (\n \n
\n );\n};\n\nText.propTypes = {\n isAllTime: PropTypes.bool.isRequired,\n diff: PropTypes.number.isRequired,\n};\n\nexport default function VsPrev({ types, daysAgo }) {\n const isAllTime = !Number.isFinite(daysAgo);\n\n const dateName = React.useCallback(\n () => _.find(DATE_RANGES, { value: daysAgo }).label,\n [daysAgo],\n );\n\n return (\n \n vs prev\n {!isAllTime && {dateName()}}\n
\n \n
\n \n {types.map(({ type, diff }) =>
\n \n {name} \n
\n);\n\nContributor.propTypes = {\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n company: PropTypes.shape({\n color: PropTypes.string,\n name: PropTypes.string,\n logo: PropTypes.string,\n }),\n};\n\nContributor.defaultProps = {\n profilePictureUrl: null,\n company: null,\n};\n\nexport default function Contributors() {\n const current = useLeaderboardStore(state => state.current);\n\n return (\n contributor
\n {current.map(d => \n
\n {current.map(d => {rank(d.rank)})}\n \n livewire rank\n
\n \n {contributorCount}\n total contributors\n
\n \n vs rank\n {!isAllTime && {dateName()}}\n
\n \n
\n \n {diffs.map(d =>
\n \n {diffs.map(d =>
\n \n
\n \n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n {\n event.stopPropagation();\n const id = type.replace('&', 'and').replace(/(\\W)+/g, '_');\n const element = document.querySelector(`#${id}_explanation`);\n if (element) {\n element.click();\n }\n }}\n >\n {type}\n \n ?\n
\n \n
\n \n \n {transitions.map(({ item, props: { x, y, o }, key }) => (\n `translate3d(${jhalf(xv)}px, ${jhalf(yv)}px, 0)`),\n opacity: o,\n }}\n src={item}\n />\n ))}\n \n
\n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n FormContext, Article, Desc, HelpBlock, ReflowContainer, Title, Input, InputContainer, Button,\n} from '../form-context';\nimport { useForm } from '../../../../shared/form-validator-hook';\nimport Loading from '../../../../shared/loading';\nimport { usePostSignIn, useGetMyProfile } from '../../../../services/auth-service';\n\nfunction getSignInError(res, err) {\n if (_.get(res, 'status') !== 201 && _.get(err, 'response.status') === 401) {\n return _.get(err, 'response.data.error', null);\n }\n return null;\n}\n\nexport default function SignInForm({ ebookName }) {\n const { dispatch } = React.useContext(FormContext);\n const {\n values, useInput, isValid, errors,\n } = useForm({\n email: '',\n password: '',\n }, { 'data-error': 'show' });\n const [{ response, loading: signInLoading, error }, signIn] = usePostSignIn();\n const [{ data: profile, loading: profileLoading }, getProfile] = useGetMyProfile();\n const [signInError, setSignInError] = React.useState(null);\n const loadingRef = React.useRef();\n\n function switchToSignUp(e) {\n e.preventDefault();\n dispatch({ type: 'stepToSignUp' });\n }\n\n React.useEffect(() => {\n loadingRef.current && loadingRef.current.toggle(signInLoading || profileLoading);\n }, [signInLoading, profileLoading]);\n\n React.useEffect(() => {\n const err = getSignInError(response, error);\n if (response && !err) {\n getProfile();\n } else if (err) {\n setSignInError(err);\n }\n }, [response, error, getProfile]);\n\n React.useEffect(() => {\n const firstName = _.get(profile, 'first_name');\n if (firstName) {\n dispatch({ type: 'setFirstName', payload: firstName });\n dispatch({ type: 'stepToEmail' });\n }\n }, [profile, dispatch]);\n\n React.useEffect(() => {\n setSignInError(null);\n }, [values]);\n\n function submit(e) {\n e.preventDefault();\n signIn(values);\n }\n\n return (\n - \n {ebook.map((page, i) => )}\n
\n \n {`Hi ${state.firstName}, enter the email you’d like us to`}\n \n \n {'send your '}\n <em>{ebookName}</em>\n {' ebook'}\n \n
\n )}\n \n \n {'We’ve sent your '}\n {ebookName}\n {' ebook to your email address'}\n \n {state.email} \n
\n \n {!!updatedCount && (\n
\n );\n}\n\nLike.propTypes = {\n likeable: PropTypes.shape({\n id: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n likedByUser: PropTypes.bool.isRequired,\n likeCount: PropTypes.number.isRequired,\n }).isRequired,\n like: PropTypes.func.isRequired,\n unlike: PropTypes.func.isRequired,\n returnToSection: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function ContributorLike({\n contributorName,\n contributorProfilePicture,\n}) {\n return (\n \n {(!!runIconAnimation || !!runCountAnimation) && initialCount > 0 && (\n \n {' '}\n {humanFormat(initialCount, { decimals: 1 })}\n {' '}\n \n )}\n {humanFormat(updatedCount, { decimals: 1 })}\n
\n )}\n \n {!runIconAnimation && }\n {!!runIconAnimation &&
\n \n 
\n \n \n \n \n
\n );\n}\n\nContributorLike.propTypes = {\n contributorName: PropTypes.string.isRequired,\n contributorProfilePicture: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Overlay } from 'react-bootstrap';\nimport useOnclickOutside from 'react-cool-onclickoutside';\nimport useWireToolsStore from '../../wire/wire-tools/state-hooks';\nimport dt from '../../../shared/theme';\nimport {\n Button,\n Container,\n Description,\n HintTooltip,\n Title,\n} from '../../shared/hint/styles';\n\nconst SHintTooltip = styled(HintTooltip)`\n inset: 12px auto auto 0 !important;\n\n & > .arrow {\n top: -18px;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 20px solid ${props => dt(props).theme.bodyColor};\n left: 24px !important;\n transform: none !important;\n }\n`;\n\nconst SDescription = styled(Description)`\n .icon-lw-liked {\n position: absolute;\n margin-top: -2px;\n margin-left: 2px;\n }\n`;\n\nconst LikeHint = React.forwardRef((_props, ref) => {\n const set = useWireToolsStore(state => state.set);\n const [show, setShow] = React.useState(false);\n\n React.useEffect(() => {\n setTimeout(() => setShow(true), 1000);\n }, []);\n\n const hide = e => {\n e && e.preventDefault() && e.stopPropagation();\n\n setShow(false);\n\n set(state => {\n state.commentLikeHintShown = true;\n });\n };\n\n const hintRef = useOnclickOutside(() => {\n hide();\n });\n\n return (\n \n \n {props => (\n \n \n \n You can now “like” comments\n <span className=\"icon-lw icon-lw-info-circle\" />\n \n \n Show your support for contributors and readers comments by\n clicking the ‘like’ icon\n \n \n \n \n \n )}\n \n
\n );\n});\n\nexport default LikeHint;\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Headline from './headline';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #F1F3F8;\n min-height: 240px;\n\n ${props => props.theme.isMobileOrTablet && `\n min-height: 130px;\n margin-top: 0;\n `};\n\n ${props => props.theme.isMobile && `\n min-height: 103px;\n `};\n`;\n\nexport default function Hero({ headlineGrab, activeFeatures }) {\n const isPremiumHeadlineGrabEnabled = _.includes(activeFeatures, 'premium_headline_grab');\n return (\n “\n
\n
\n \n \n
\n \n \n {showCompanyName ? organization : name} \n {!showCompanyName\n && {position} }\n {organization} }\n \n
\n {!showEnquiryForm && !contactSent && (\n \n \n \n \n \n \n \n \n \n {ENQUIRY_ABOUT_OPTIONS.map(option => (\n \n \n {option.value}\n \n ))}\n \n \n
\n - \n {trail.map((style, index) => {\n const { text, action } = displayableMenus[index];\n return (\n
\n register today\n to access livewire\n
\n\n
\n \n Livewire is an investing website connecting investors with some of the best fund management and wealth management professionals from Australia and around the world.\n
\n\n The Livewire audience is a highly engaged group of more than 280,000 active users who visit the website each month. It comprises financial advisers, high net worth investors, self-managed super fund members, family offices, stockbrokers, and retail investors.\n
\n\n
\n \n Before creating any content, we expect everyone to consider: What benefit will the reader get from this?\n
\n\n
\n \n All articles authored internally are reviewed by at least one member of our editorial team before publication.\n
\n\n All contributed articles – from either authorised contributors or official partners – are checked for accuracy during our regular twice-daily sub-editing process.\n
\n\n The following are the guiding principles you should consider before publishing anything on Livewiremarkets.com:\n
\n- \n
- Accuracy – To make accurate investment decisions, you need accurate data. Our share price data come from the Australian Securities Exchange (ASX). The performance and fees information for our funds database is sourced from Morningstar Australia. \n
- Readability and Accessibility – Jargon, buzzwords, and confusing acronyms are everywhere within the world’s financial industry landscape. We don’t seek to add to this clutter. At Livewire Markets, we aim to provide stories that are simple and concise. When acronyms or key terms are needed, we try to provide clear, useful definitions. \n
- Deeper insights – We’re not interested in repeating headlines or echoing company talking points. Instead, we dive deeper. We look to fund manager experts, broker reports, and sector trends to go beneath the surface and provide you with the highest quality coverage possible. We link to reputable external sites when they enhance our readers’ understanding of a topic. We don’t want to capture your attention, we want to provide you with the information you need, regardless of where it is. \n
- High journalistic standards – We carefully select our writers and are committed to providing them with regular professional development. We teach them best practices for research, sourcing, and writing, and all content is reviewed to meet our standards of clarity, accuracy, and usefulness. \n
- Transparency – Whenever we publish content that is promotional in nature, this is clearly identified near the top of the article or video post. When we partner with brands and companies in featuring content in our daily EDM, a "Sponsored" tag is placed at the top of the article, right underneath the headline. \n
\n
\n \n We’re not here to bombard you with irrelevant information for the sake of information. We’re here to give you concise, data-driven market news.\n
\n\n If you think we could do better, please send us an email with your suggestions to content@livewiremarkets.com.\n
\n\n \n \n Make confident investment decisions through leading market insights and analysis\n \n \n
\n \n as seen in \n
\n \n {media.map((m, i) => (\n \n {!!i && \n ))}\n
\n \n
\n \n Contributors to Livewire are investment professionals from fund managers and\n wealth management firms. Contributors are typically investment decision-makers,\n including chief investment officers, portfolio managers, analysts and economists.\n
\n\n If you are interested in learning more about becoming a Livewire contributor, please\n send us an enquiry here.\n
\n\n
\n \n The Livewire audience is highly engaged with over 280,000 monthly active users\n visiting the website. The audience is made up of Financial Advisers, High Net Worth\n Investors, Self-Managed Super Funds, Family Offices, Wealth Managers,\n Stockbrokers and Retail Investors.\n
\n\n
\n \n Livewire is a self-publishing platform. Once approved, Contributors gain access to\n Livewire’s editing tool allowing them to publish directly to the Livewire website.\n
\n\n
\n \n Contributors can engage with our readers by publishing educational insights and\n actionable investment ideas. You can post written articles, video, podcasts and pdf\n reports.\n
\n\n Please note product promotion is not allowed for contributed content (See Links\n and Promotional below).\n
\n\n
\n \n You can say smart things without using complicated language. We encourage\n Contributors to use language that everyone can understand and to avoid using\n ‘jargon’. If financial terminology / acronyms are required, then we recommend\n providing a brief explainer. If you are using charts to illustrate your point, they are\n made more effective with contextualizing captions.\n
\n\n
\n \n Product push, promotional content, and links back to product or fund websites are\n not allowed.\n
\n\n Livewire has Sponsored Content and Advertising Solutions for firms looking to\n promote specific products / services - to find out more please email us at team@livewiremarkets.com\n
\n\n
\n \n Commenting is allowed on all posts on Livewire and presents a valuable opportunity\n to engage with end investors. Livewire’s editors review all reader comments to\n before they are published.\n
\n\n We strongly recommend contributors take the time to acknowledge comments and\n to provide responses to any reader questions.\n
\n\n
\n \n Over the years, we’ve learnt a thing or two about what makes for a good read. So, we\n wanted to share a few tips to help you get more eyeballs across your wires.\n
\n- \n
- 100 to 130 words is the ideal length for your introduction. \n
- Keep headlines short; ideally around 6 words or 65 characters. \n
- Personal posts get much higher engagement rates than company posts. \n
- The optimal time to post is between 7am and 11am. \n
- Break up your post using subheads, paragraph breaks, bullets and images. \n
- Use captions with your charts to help your readers with context. \n
- Include links in your article to other wires you’ve posted. \n
- Ask yourself: “Will my article help readers become better investors?” \n
- Use a conclusion to highlight your actionable insight. \n
\n \n (a) \n if the Partner Content contains the name or photographic or pictorial representation of any living person and/or any copy by which any living person can be identified, the Partner has obtained the authority of that person to make use of his/her name or representation or the copy;\n \n \n (b) \n the Partner Content for any financial products and credit products give a balanced message about the returns, features, benefits and risks associated with the product;\n\n \n \n (c) \n warnings, disclaimers and qualifications are not inconsistent with other content in the Partner Content, including any headline claims;\n\n \n \n (d) \n where a fee or cost is referred to in the Partner Content, it gives a realistic impression of the overall level of fees and costs a consumer is likely to pay, including any indirect fees or costs;\n\n \n \n (e) \n where the Partner Content compares different products, comparisons are made between products that have sufficiently similar features;\n\n \n \n (f) \n past performance information will be accompanied by a warning that past performance is not indicative of future performance;\n\n \n \n (g) \n forecasts about the future performance of a financial product are based on reasonable assumptions and will state that the forecasts are not guaranteed to occur;\n\n \n \n (h) \n where the Partner Content states or implies that a particular benefit is likely, it includes a statement about the risks associated with obtaining that benefit, or about the product generally;\n\n \n \n (i) \n claims about features of a product or service are made because a consumer can reasonably expect those features to be available to them;\n\n \n \n (j) \n a Partner Content does not present a one-sided view of a product’s key features to overstate the benefits associated with the product;\n\n \n \n (k) \n photographs and images do not contradict, detract from or reduce the prominence of any warnings, disclaimers or qualifications;\n\n \n \n (l) \n the Partner Contents does not overstate the potential benefits or create unrealistic expectations by giving undue prominence to the benefits compared with the risks;\n\n \n \n (m) \n information about returns and benefits are of net of fees and costs to the greatest extent practicable;\n\n \n \n (n) \n the effect that fees and costs may have on returns and benefits over time are clearly stated, and not hidden or difficult to understand;\n\n \n \n (o) \n information about the risks of a product are clear, and not hidden or difficult to understand, and are given sufficient prominence to information about returns and benefits;\n\n \n \n (p) \n the tone of the Partner Content does not undermine the importance of the risks\n \n \n (q) \n \n the Partner Content:\n \n
\n \n \n \n (i) \n is not false or misleading;\n\n \n \n (ii) \n does not contain a statement that is misleading, false or deceptive;\n\n \n \n (iii) \n does not dishonestly conceal facts;\n\n \n \n (iv) \n does not make representations about future matters without reasonable grounds;\n\n \n \n (v) \n does not contain terms in relation to financial services that are misleading or deceptive or are likely to mislead or deceive;\n \n \n (vi) \n does not make false representations that are misleading in relation to financial products that involve interests in land; and\n \n \n (vii) \n does not engage in bait advertising.\n \n
\n \n \n \n (a) \n \n \n (b) \n \n \n (c) \n \n
\n \n \n Package Services\n {' '}\n – premium access to the Website and other Channels Services and\n distribution to our readers for a subscription fee (based on tiers) for a minimum term.\n
\n \n Sponsored Services and Advertising\n {' '}\n – ‘one off’ items or packages that include services\n such as: Content consulting creation and distribution event sponsorships display\n advertising or email advertising.\n
\n \n Contributor Profiles & Fund Profiles\n {' '}\n – Contributor Profiles give our readers more information about the people who contribute Content such as their biography, career history and education. Fund Profiles give readers more information about specific financial products such as managed funds, ETFs and LICs. The information provided includes qualitative and quantitative information (such as performance data and fees). Some of the data is provided by Morningstar and the remainder directly from the product provider.\n
\n - \n
- \n attempt to modify, copy, adapt or reproduce, decompile, disassemble, reverse engineer or otherwise derive the source code for the software we provide to Partner or Users via the Website (\n Software\n );\n \n
- \n distribute, encumber, sell, rent, lease, sub-license or otherwise transfer, publish or disclose our Software to any third party (or provide the Website passwords or other log-in information), except to Users or as otherwise permitted under this agreement;\n \n
- \n use our Software or other materials (including features on the Website) to build a product or service which competes with us, or to copy our ideas, features, functions or graphics, or share our Software or other materials with any competitors of Livewire;\n \n
- \n use, or misuse, the Software in any way which may impair the functionality of the Software, the Website or the ability of other users to use the Software or the Website;\n \n
- \n transmit or input into the Software or the Website any files or Content that may damage any other person's computing devices or software.\n \n
- \n
- is materially inaccurate, misleading or incorrect; \n
- \n is harmful, obscene, pornographic, defamatory, racist, sexist, threatening, violent, offensive, abusive, vulgar, profane, indecent, unlawful, harassing, or otherwise objectionable to Livewire or other Users;\n \n
- exploits another person in any manner; \n
- includes unauthorised disclosure of personal information; \n
- infringes anyone's Intellectual Property Rights; or \n
- breaches any Relevant Laws. \n
- \n
- \n neither party (and any of its directors, employees, agents or related companies) shall be liable for any down-time, lost profit or product, loss of data, increased cost of production, loss of client goodwill or good standing or delay in operation, lost opportunity or any other special, punitive, economic, indirect or consequential loss or damage (except where such losses are incurred by Livewire as a result of a third party claim covered by the indemnity in clause 8.1); and\n \n
- \n the liability of Livewire (and any of its directors, employees, agents or related companies) relating to the performance of this agreement or the supply of the Software, Channels and Services is limited in aggregate to the Fees paid by the Partner to Livewire in the 12 months prior to the act or omission which gave rise to the liability.\n \n
\n You warrant to Livewire that:\n
\n \n (a) \n the Advertisement for any financial products and credit products give a balanced message about the returns, features, benefits and risks associated with the product;\n \n \n (b) \n warnings, disclaimers and qualifications are not inconsistent with other content in the Advertisement;\n \n \n (c) \n where a fee or cost is referred to in the Advertisement, it gives a realistic impression of the overall level of fees and costs a consumer is likely to pay, including any indirect fees or costs;\n \n \n (d) \n where the Advertisement compares different products, comparisons are made between products that have sufficiently similar features;\n\n \n \n (e) \n past performance information will be accompanied by a warning that past performance is not indicative of future performance;\n\n \n \n (f) \n forecasts about the future performance of a financial product are based on reasonable assumptions and will state that the forecasts are not guaranteed to occur;\n\n \n \n (g) \n where the Advertisement states or implies that a particular benefit is likely, it includes a statement about the risks associated with obtaining that benefit, or about the product generally;\n\n \n \n (h) \n the Advertisement includes a clear explanation of the assumptions made in predicting the benefit;\n\n \n \n (i) \n claims about features of a product or service are made because a consumer can reasonably expect those features to be available to them;\n\n \n \n (j) \n the Advertisement does not overstate the potential benefits or create unrealistic expectations by giving undue prominence to the benefits compared with the risks;\n\n \n \n (k) \n the effect that fees and costs may have on returns and benefits over time are clearly stated, and not hidden or difficult to understand;\n\n \n \n (l) \n information about the risks of a product are clear, and not hidden or difficult to understand, and are given sufficient prominence to information about returns and benefits;\n\n \n \n (m) \n \n
\n \n \n the Advertisement:\n
\n \n \n (i) \n is not false or misleading;\n \n \n (ii) \n does not contain a statement that is misleading, false or deceptive;\n \n \n (iii) \n does not dishonestly conceal facts;\n \n \n (iv) \n does not make representations about future matters without reasonable grounds;\n \n \n (v) \n does not contain terms in relation to financial services that are misleading or\n deceptive or are likely to mislead or deceive;\n \n \n (vi) \n does not make false representations that are misleading in relation to financial products that involve interests in land; and\n \n \n (vii) \n does not engage in bait advertising.\n \n
\n \n \n (a) \n if the Partner Content contains the name or photographic or pictorial representation of any living person and/or any copy by which any living person can be identified, the Partner has obtained the authority of that person to make use of his/her name or representation or the copy;\n \n \n (b) \n the Partner Content for any financial products and credit products give a balanced message about the returns, features, benefits and risks associated with the product;\n\n \n \n (c) \n warnings, disclaimers and qualifications are not inconsistent with other content in the Partner Content, including any headline claims;\n\n \n \n (d) \n where a fee or cost is referred to in the Partner Content, it gives a realistic impression of the overall level of fees and costs a consumer is likely to pay, including any indirect fees or costs;\n\n \n \n (e) \n where the Partner Content compares different products, comparisons are made between products that have sufficiently similar features;\n\n \n \n (f) \n past performance information will be accompanied by a warning that past performance is not indicative of future performance;\n\n \n \n (g) \n forecasts about the future performance of a financial product are based on reasonable assumptions and will state that the forecasts are not guaranteed to occur;\n\n \n \n (h) \n where the Partner Content states or implies that a particular benefit is likely, it includes a statement about the risks associated with obtaining that benefit, or about the product generally;\n\n \n \n (i) \n claims about features of a product or service are made because a consumer can reasonably expect those features to be available to them;\n\n \n \n (j) \n a Partner Content does not present a one-sided view of a product’s key features to overstate the benefits associated with the product;\n\n \n \n (k) \n photographs and images do not contradict, detract from or reduce the prominence of any warnings, disclaimers or qualifications;\n\n \n \n (l) \n the Partner Contents does not overstate the potential benefits or create unrealistic expectations by giving undue prominence to the benefits compared with the risks;\n\n \n \n (m) \n information about returns and benefits are of net of fees and costs to the greatest extent practicable;\n\n \n \n (n) \n the effect that fees and costs may have on returns and benefits over time are clearly stated, and not hidden or difficult to understand;\n\n \n \n (o) \n information about the risks of a product are clear, and not hidden or difficult to understand, and are given sufficient prominence to information about returns and benefits;\n\n \n \n (p) \n the tone of the Partner Content does not undermine the importance of the risks\n \n \n (q) \n \n the Partner Content:\n \n
\n \n \n \n (i) \n is not false or misleading;\n\n \n \n (ii) \n does not contain a statement that is misleading, false or deceptive;\n\n \n \n (iii) \n does not dishonestly conceal facts;\n\n \n \n (iv) \n does not make representations about future matters without reasonable grounds;\n\n \n \n (v) \n does not contain terms in relation to financial services that are misleading or deceptive or are likely to mislead or deceive;\n \n \n (vi) \n does not make false representations that are misleading in relation to financial products that involve interests in land; and\n \n \n (vii) \n does not engage in bait advertising.\n \n
\n \n \n
\n \n This is the Privacy Policy of Livewire Markets Pty Ltd ACN 156 343 501 (Livewire or us/we).\n We understand the importance of your privacy and your concerns about the security of your personal information.\n We are committed to protecting any personal information about you that we hold.\n
\n\n This Privacy Policy outlines how we collect, use, protect, and disclose your Personal Information.\n It also explains how you can access and have it amended, as well as who you can contact should you have an enquiry or complaint.\n
\n\n
\n \n 'Personal Information' means information or an opinion (whether or not true, and whether or not recorded in a material form)\n about an identified individual, or about an individual who is reasonably identifiable.\n
\n\n
\n \n The types of Personal Information we collect about you will depend on the product or service you receive from us.\n The Personal Information we may collect about you includes, but is not limited to:\n
\n- \n
- Your name, phone number, street address and/or email address \n
- \n Any information on your social media profile (e.g. LinkedIn) which you agree to link to your account with us,\n such as your employer, employment history, and professional memberships\n \n
- Your date of birth, gender, employment details, financial details, domicile and citizenship status \n
- Your credit card number or bank account details \n
- If you are acting on behalf of your employer, your job title, employer's name and contact information \n
- Demographic information, such as age bracket, investor type and how you heard about us \n
- Account credentials such as your user ID and password for our online products \n
- Information about your investment profile and interests (including banking and insurance products and security holdings) \n
- your interests in our products, services or events \n
- Personal website usage information, including cookies and other information about your computer, device and browser. \n
\n Where our clients are corporations, we may collect Personal Information from that corporation about different\n contact persons within the corporation including name, job title, and contact information.\n
\n\n We do not adopt Commonwealth Government identifiers, such as a tax file number or a Medicare number, as a means of identifying individuals.\n
\n\n
\n \n We will collect Personal Information directly from you or indirectly from third party sources, or as otherwise permitted by law.\n The Personal Information we collect may be captured from a variety of sources including:\n
\n- \n
- \n direct contact with us or use of our website, product or service - for example, by subscribing to our site, completing an online form,\n entering details about our products or services, accepting an invitation from us or when you send us an email.\n \n
- voluntary submissions (e.g. responses to surveys, requests for information on our products or those of our advertisers/marketing partners) \n
- registrations/applications to receive our products or services or the products we distribute \n
- from your employer \n
- public registers (e.g. if we need to check Personal Information independently of you) \n
\n While some contacts with us such as general enquiries may be made anonymously or by using a pseudonym, if the relationship is to progress any further\n (by you becoming our client or having a business relationship with us) it will be necessary for us to know who you are to enable us to deliver\n our services to you. Similarly, we cannot deal with complaints made anonymously or by pseudonym. If you give us information about another person,\n you should make sure that you are authorised to give us that information. You must also make sure to inform that person of who we are and that\n we may use and disclose their personal information in accordance with this Privacy Policy.\n
\n\n Should a third party give us unsolicited Personal Information about you, we will within a reasonable period determine whether or not we could have\n collected the information directly from you or if it is in a public record and, if not, we will take reasonable steps to destroy or de-identify\n that information unless the law otherwise permits or requires.\n
\n\n
\n \n We may collect, store, use, and process Personal Information where necessary to provide our products or services to you, to improve our products or services, to manage our relationships with you and to provide you with information about other products and services that we, and our commercial partners offer from time to time.\n
\n\n If you would prefer not to receive product and service information, please unsubscribe or contact us to withdraw your consent.\n
\n\n We will not make the Personal Information collected using our products and services available to anyone outside Livewire except with your consent or where required by or permitted by law.\n
\n\n
\n \n A cookie is a small file which can be downloaded on a device when you access our website and is then sent back to our website each time you access our\n website. This website may use cookies. If you do not wish to receive any cookies you may set your browser to refuse cookies. We may use cookies\n to learn about how people use our website, what they are interested in and to help us make a better website.\n
\n\n Like most other websites, we may automatically record details about any computer used to access the website such as the date and time of access,\n the IP address, domain name and details of the information accessed. The use of cookies on our website does not identify you or provide\n access to your device.\n
\n\n
\n \n Sometimes it will be necessary for us to update and change our privacy policy. We reserve the right to change our privacy policy at any time.\n We may notify you about changes to our privacy policy by posting an updated version on our website.\n
\n\n
\n \n Our website may contain links to other websites for you to access. You should be aware that the privacy policies of the operators of those\n other sites may not be the same as ours and you should refer to their privacy policies.\n
\n\n
\n \n We will take all reasonable steps to ensure that any Personal Information about you which we hold is:\n
\n- \n
- Secure: protected from misuse, interference and loss and from unauthorised access, modification or disclosure; and \n
- Appropriate: accurate, complete, up-to-date, relevant and not misleading having regard to the purpose for which it is held and may be used. \n
\n Your Personal Information may be kept in various formats by us, our related companies and relevant third-party providers.\n
\n\n
\n \n Sometimes it will be necessary for us to update and change our privacy policy. We reserve the right to change our privacy policy at any time.\n We may notify you about changes to our privacy policy by posting an updated version on our website.\n
\n\n
\n \n You may request access at any time to Personal Information we hold about you by emailing us at\n team@livewiremarkets.com or by contacting us at the address below. We will deal with all\n requests for access to personal information as quickly as possible but may charge you a fee where access is provided.\n
\n\n If you have a complaint about how we handle your Personal Information, please email us at\n team@livewiremarkets.com\n
\n\n
\n \n Livewire gives readers access to information and educational content provided by financial services professionals and companies\n ("Livewire Contributors"). Livewire does not operate under an Australian financial services licence and relies on the exemption\n available under section 911A(2)(eb) of the Corporations Act 2001 (Cth) in respect of any advice given. Any advice on this site is general\n in nature and does not take into consideration your objectives, financial situation or needs. Before making a decision please consider these\n and any relevant Product Disclosure Statement. Livewire has commercial relationships with some Livewire Contributors.\n
\n\n
\n
\n
\n
\n
Expect a prompt reply – we're committed to connecting with you quickly.
\n \n {!this.state.messageSent || (\n \n Success!\n {' Your message has been sent to the team at Livewire.'}\n
\n )}\n \n a) Livewire retains editorial control over the Website and Services and may alter, amend or cease the operation of the Website at any time in its sole discretion; andb) the Website will not operate on a continuous basis and may be unavailable from time to time (including for maintenance purposes).
\n \n \n \n a) \n Livewire gives you access to research and opinions about financial markets and financial news, but Livewire does not itself provide any opinions, advice or recommendations; like other financial media outlets,\n Livewire’s primary purpose is to publish financial markets content, not to provide financial product advice; and accordingly, Livewire does not hold an Australian Financial Services Licence.\n \n \n b) \n The information provided on the Website or Services is general in nature and does not constitute financial advice. If any of the Content contains financial advice, it is general advice only and does not consider your personal circumstances.\n \n \n c) \n Livewire does not guarantee the accuracy of information on the Website or Services, including information provided by contributors or Third Parties.\n \n \n d) \n You will not rely on the Website or Services to make a financial or investment decision. Before making any decision, you must seek professional advice to take into account your particular investment objectives, financial situation and needs.\n \n \n e) \n You accept sole responsibility for using the information and material on the Website and Services; and the Website and Services is no substitute for financial advice.\n \n
\n \n \n \n a) \n have the capacity to accept these Terms;\n \n \n b) \n will maintain the security and confidentiality of your User account, login details, password and identification; and\n \n \n c) \n will provide, or have provided, and will maintain and promptly update the Membership Data and ensure that information provided is accurate, current and complete.\n \n
\n \n \n \n a) \n is inaccurate, misleading, incorrect, harmful, obscene, pornographic, defamatory, racist, sexist, threatening, violent, offensive, abusive, vulgar, profane, indecent, unlawful, harassing, or otherwise objectionable to Livewire or other Users of the Website,\n including any Content which is likely to offend, insult or humiliate others based on race, religion, ethnicity, gender, age, sexual orientation and/or any physical or mental disability;\n \n \n b) \n exploits another person in any manner;\n \n \n c) \n includes unauthorised disclosure of personal information;\n \n \n d) \n advertises services for non-individuals or for any other reason which is not aligned to the purposes for which the Services are intended;\n \n \n e) \n violates or infringes anyone's intellectual property rights; or\n \n \n f) \n contains software viruses or any other computer code, files or programs designed to interrupt, destroy or limit the functionality of any computer software or hardware or telecommunications equipment.\n \n
\n \n \n \n a) \n is generally available in the public domain except where such availability is as a result of a breach of these Terms;\n \n \n b) \n was known by you before the disclosure of the information; or\n \n \n c) \n is required to be disclosed by a law or a court order.\n \n
\n \n \n \n a) \n Livewire’s maximum liability to you (if any) arising out of any kind of legal claim or action in any way connected to the Services or the Website (including negligence and under statute) will\n be limited to the total amount paid by you (if any) for any chargeable service provided by Livewire in the one month prior to the date of your claim.\n \n \n b) \n In no circumstances will Livewire be liable for any incidental, consequential or indirect damages, personal injury, death, damage to property, loss of property, loss or corruption of data,\n loss of profits, goodwill, bargain or opportunity, loss of anticipated savings or any other similar or analogous loss resulting from your access to, or use of (or inability to use) the Website or Services whether based on warranty,\n contract, tort, negligence, in equity or any other legal theory, and whether or not we knew or should have known of the possibility of such damage or loss.\n \n
\n \n \n
\n\n \n );\n}\n\nHero.propTypes = propTypes;\n","import _ from 'lodash';\nimport React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport ScrollTransition from '../../shared/scroll-transition';\nimport propTypes from '../common/prop-types';\nimport { DesktopSeparator, ContentContainer } from '../../shared/sectionable/styles';\nimport EnquiryContext, { reducer, defaultState } from '../../shared/enquiry/context';\nimport useFundStateStore from '../common/fund-state-hook';\nimport PrimaryContent from './primary-content';\nimport Meta from './meta';\nimport FeaturedWires from '../../shared/sectionable/featured-wires';\nimport Info from './info';\nimport Performance from './performance';\nimport FeesAndPricing from './fees-and-pricing';\nimport Qanda from '../../shared/sectionable/qanda';\nimport PreviewMode from '../../shared/sticky-preview-mode';\nimport FundUpdates from './fund-updates';\nimport LatestWires from '../../contributors/contributor-components/latest-wires';\nimport Invest from './invest';\nimport Disclaimer from './disclaimer';\nimport StickyFooter from './sticky-footer';\nimport StickyHeader from './sticky-header';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n `};\n ${props => props.theme.isLarge && `\n width: 100%;\n padding: 0 32px;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n padding: 0;\n `};\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n padding: 0;\n `};\n`;\n\nconst MarginDesktopSeparator = styled(DesktopSeparator)`\n margin-bottom: 72px;\n`;\n\nconst checkIfShowPerf = f => {\n const date = _.get(f, 'inceptionDate');\n if (!date) {\n return false;\n }\n const perfList = _.get(f, 'performance', []);\n if (!perfList.length) {\n return false;\n }\n const valids = _.filter(perfList, p => !Number.isNaN(parseFloat(_.get(p, 'value'))));\n return valids.length >= 2 && _.some(valids, p => p.name === 'returnSinceInceptionPercent');\n};\n\nconst checkIfShowFees = f => !!f.managementFee;\n\n// eslint-disable-next-line complexity\nexport default function Fund(props) {\n const {\n fund, showInModal, newNavEnabled, viewAllWiresLink,\n } = props;\n const { published, activePartnership } = fund;\n const { isLarge } = React.useContext(ThemeContext);\n const [yOffset, setYOffset] = React.useState(0);\n const [eState, dispatch] = React.useReducer(reducer, defaultState);\n const set = useFundStateStore(state => state.set);\n const fundManager = _.find(fund.members, { role: 'manager' });\n\n React.useEffect(() => {\n set(state => {\n state.followed = fund.isFollowedByCurrentUser;\n });\n }, [set, fund.isFollowedByCurrentUser]);\n\n const qandaProps = {\n fund: _.pick(fund, ['id', 'name', 'qandasUpdatedAt']),\n manager: fundManager,\n livewireLogo: props.livewireLogo,\n };\n\n const fundUpdatesProps = {\n fund: _.pick(fund, ['id', 'name', 'monthlyUpdateFileUrl', 'isFollowedByCurrentUser']),\n };\n\n const showInvestSection = !!activePartnership;\n const showPerf = checkIfShowPerf(fund);\n const showFees = checkIfShowFees(fund);\n const showContactButton = !!activePartnership;\n\n const stickyProps = {\n fund,\n showContactButton,\n yOffset,\n newNavEnabled,\n };\n\n const offsetPreviewMode = !isLarge && yOffset > 250 ? 47 : 0;\n\n return (\n \n
\n
Past performance is not a guarantee of future results.
\nPerformance data has been provided by Morningstar.
\n{name}
\n\n
\n {`Trailing month end returns as of ${perfUpdateDate}`}
\nPerformance after fees, including distributions or dividends paid
\n\n {month2Label(month)}\n
\n );\n};\n\nReturn.propTypes = {\n val: PropTypes.number,\n month: PropTypes.number.isRequired,\n since: PropTypes.string.isRequired,\n};\n\nReturn.defaultProps = { val: Number.NaN };\n\nconst value4Month = (list, months) => _.get(_.find(list, { months }), 'value');\n\nexport default function Highlights({ perf, attrs, since }) {\n return (\n \n {formatPercent(val)}\n {!Number.isFinite(month) && (\n <>\n p.a.\n {sinceYears(since)}\n \n )}\n
\n \n
\n
\n )}\n \n Performance Fee\n
\n \n
\n \n {title}\n \n
\n {content.map(string => (\n{string}
\n ))}\n\n
\n \n Performance Fee Methodology\n
\n {placeholder}
\n\n
\n {!!isMobile &&
\n
\n {showEnquiry\n ? showContact(e, false)} />}\n
\n )}\n \n {fund.name}\n {!!fund.stockCode && fund.fundType !== 'Managed Fund' &&
\n \n \n \n \n \n \n \n \n
\n \n {ENQUIRY_ABOUT_OPTIONS.map(option => (\n \n \n \n {!!resultsText && {resultsText} }\n \n {buildHeader(fundType)}\n {!!assetClassLabel && {` ${assetClassLabel}`} }\n \n \n {buildDescription(fundType)}\n \n \n \n
\n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport { topRatedFundsSeriesPropTypes } from '../common/prop-types';\nimport useFundsStateStore from '../common/funds-state-hook';\nimport { Description, Name, Results } from './hero-components/styles';\n\nconst Banner = styled.div`\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n align-items: start;\n background-repeat: round;\n background-size: cover;\n background-image: url(${props => props.topRatedFundSeriesDesktopBackground});\n padding: 32px 28px;\n width: 100%;\n z-index: 210;\n\n ${props => dt(props).theme.isXLarge && `\n padding: 32px calc(50% - 476px);\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n padding: 32px calc(50% - 600px);\n `};\n\n ${props => dt(props).theme.isMobile && `\n flex-direction: column;\n padding: 36px 20px 40px;\n background-image: url(${props.topRatedFundSeriesMobileBackground});\n `};\n`;\n\nconst Logo = styled.img`\n max-width: 126px;\n\n ${props => dt(props).theme.isMobile && `\n margin-left: auto;\n margin-bottom: 28px;\n max-width: 101px;\n `};\n`;\n\nconst Primary = styled.div`\n display: flex;\n flex-direction: column;\n max-width: 520px;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n max-width: 372px;\n `};\n\n ${props => dt(props).theme.isMobile && `\n max-width: 100%;\n `};\n`;\n\nconst ViewSeriesLink = styled.a`\n border: 1px solid ${props => dt(props).theme.primaryColor};\n border-radius: 4px;\n color: ${props => dt(props).theme.primaryColor};\n font-size: 16px;\n font-family: ${props => dt(props).theme.fontFamilyBody};\n font-weight: ${props => dt(props).theme.fontWeightHeavy};\n text-transform: uppercase;\n margin-top: 24px;\n width: 165px;\n height: 40px;\n background: transparent;\n text-align: center;\n padding-top: 11px;\n\n ${props => dt(props).theme.isMobile && `\n width: 100%;\n `};\n\n &:hover {\n text-decoration: none !important;\n cursor: pointer;\n }\n`;\n\nconst TOP_RATED_FUNDS_SERIES_URL = 'https://topratedfundsseries.livewiremarkets.com/?utm_campaign=Top+Rated+Fund+Series&utm_medium=livewire+website&utm_source=engagement+campaign&utm_content=listings+page+banner';\n\nexport default function TopRatedFundsSeriesHero({\n topRatedFundSeriesDesktopBackground,\n topRatedFundSeriesMobileBackground,\n topRatedFundSeriesLogo,\n}) {\n const totalResults = useFundsStateStore(state => state.totalResults);\n const resultsText = totalResults !== null ? `${totalResults} Result${totalResults === 1 ? '' : 's'}` : null;\n\n return (\n \n {name}\n {!!followersCount && {humanCount(followersCount)}}\n
\n \n \n \n \n {profile.name}\n \n \n \n {profile.position} \n {profile.organisation} \n
\n \n \n \n
\n ) : (\n \n \n \n \n
\n );\n\n return (\n <>\n {avatar}\n {likeIcon}\n \n );\n }\n\n get profilePicture() {\n const n = this.props.notification;\n const { type } = n;\n\n if (type === 'alert_comment_published') {\n return null;\n }\n\n if (type === 'liked_comment') {\n return this.profilePictureForLikeComment;\n }\n\n return (\n \n {this.profileName}\n {` ${action} `}\n {target}\n
\n );\n }\n\n singularStockCodeActionMessage(action, target) {\n return (\n\n {this.stockCodeCompanyName}\n {` ${action} `}\n {target}\n
\n );\n }\n\n singularFundActionMessage(action, target) {\n return (\n\n {this.fundName}\n {` ${action} `}\n {target}\n
\n );\n }\n\n rollupProfilesActionMessage(action) {\n function name(p) {\n return {p.name};\n }\n const profiles = this.props.notification.rolled_up_profiles;\n return (\n\n {() => {\n const len = profiles.length;\n const third = len > 3 ? { name: `${len - 2} others` } : profiles[2];\n const list = _(profiles).take(3).fill(third, 2).map(name)\n .value();\n return (\n
\n {this.profileName}\n {' liked your comment on '}\n {this.wireTitle}\n {` - your comment has ${likeCount} ${likeCount === 1 ? 'like' : 'likes'}`}\n
\n );\n }\n\n renderCommentMessage() {\n return this.singularProfileActionMessage('commented on', this.wireTitle);\n }\n\n renderReplyCommentMessage() {\n const wireTitle = _.get(this.props.notification, 'wire.title', 'Unknown');\n return (\n\n Your comment on\n {' '}\n { wireTitle }\n {' '}\n has a reply\n
\n );\n }\n\n renderContributorAlertMessage() {\n return this.singularProfileActionMessage('has followed', 'you');\n }\n\n renderAlertNewWireMessage() {\n return this.singularProfileActionMessage('published', this.wireTitle);\n }\n\n renderAlertNewCommentMessage() {\n return this.singularProfileActionMessage('published a comment on', this.wireTitle);\n }\n\n renderAlertCommentPublishedMessage() {\n const wireTitle = _.get(this.props.notification, 'wire.title', 'Unknown');\n return (\n\n Your comment on\n {' '}\n { wireTitle }\n {' '}\n has been published\n
\n );\n }\n\n renderContributorMentionedInWireMessage() {\n return this.singularProfileActionMessage('mentioned you in', this.wireTitle);\n }\n\n renderFollowedContributorMentionedInWireMessage() {\n return this.singularProfileActionMessage('mentioned in', this.wireTitle);\n }\n\n renderRollupLikedWireMessage() {\n return this.rollupProfilesActionMessage('liked');\n }\n\n renderRollupCommentMessage() {\n return this.rollupProfilesActionMessage('commented on');\n }\n\n renderStockCodeMentionedInWireMessage() {\n return this.singularStockCodeActionMessage('was tagged in', this.wireTitle);\n }\n\n renderFundMentionedInWireMessage() {\n return this.singularFundActionMessage('was mentioned in', this.wireTitle);\n }\n\n renderMessage() {\n const { type } = this.props.notification;\n const unknown = () => (\n\n {'Unknown alert type: '}\n {type}\n
\n );\n const renderFunc = this[_.camelCase(`render_${type}_message`)] || unknown;\n\n return renderFunc.bind(this)();\n }\n\n render() {\n const notif = this.props.notification;\n\n return (\n- \n {state.investorTypes && (state.investorTypes.map(investorType => (\n
- \n {state.assetClasses.map(asset => (\n
{`Step ${current + 1} of ${total}`}
\n )}\n\n {provideName && providePassword && Provide some personal details}\n {provideName && !providePassword && Provide your name}\n {providePassword && !provideName && Create a password}\n
\n\n
\n
\n
\n
\n \n {showMessage && {msg}}\n \n
\n );\n }\n\n render() {\n const { provideName, providePassword } = this.props;\n\n return (\n\n {'Enter your name and a password for your new account. '}\n {\n `Your password must be at least ${MINIMUM_PASSWORD_LENGTH} characters long,`\n + ' and must include at least one digit.'\n }\n\n
\n )}\n {!provideName && providePassword && (\n\n {'Enter a password for your new account. '}\n {\n `It must be at least ${MINIMUM_PASSWORD_LENGTH} characters long,`\n + ' and must include at least one digit.'\n }\n
\n )}\n\n \n\n {`Step ${this.props.currentStepIndex + 1} of ${this.props.totalStepCount}`}\n
\n )}\nWhich investment themes are you most interested in?
\n\n Select the asset classes and investment topics that you are interested in.\n
\n \n\n {`Step ${this.props.currentStepIndex + 1} of ${this.props.totalStepCount}`}\n
\n )}\nWhat type of investor are you?
\n\n Select the investor type which best describes you.\n
\n \nYou can select at most five expertise categories
\n )}\n- \n {getAreasForDisplay(areas).map(a => {\n const props = {\n ...a,\n key: a.slug,\n clickHandler: () => toggle(a),\n };\n return ;\n })}\n
\n
\n (this.$overlay = $(el))}\n onClick={() => this.dismiss()}\n />\n
\n );\n }\n}\n","import React from 'react';\nimport styled, { ThemeProvider } from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Loading from '../../../shared/loading';\nimport {\n Button,\n ButtonGroup,\n Container,\n Desc,\n Separator,\n Title,\n} from './common/styles';\nimport { subscribeToTrending, unsubscribeFromTrending } from '../../../services/profiles/notification-settings-service';\n\nconst SButtonGroup = styled(ButtonGroup)`\n span.loading-panel-inline {\n padding-top: 10px;\n margin-left: 20px;\n }\n`;\n\nconst Hint = styled.div`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 12px;\n line-height: 13px;\n color: #20BA9C;\n margin-top: 10px;\n margin-bottom: -20px;\n`;\n\nexport default function TrendingControl(props) {\n const { subscribedToTrending, tolSubscriptionOptions, weeklyTOLEnabled } = props;\n const [isSubscribed, setIsSubscribed] = React.useState(subscribedToTrending);\n const [options, setOptions] = React.useState(tolSubscriptionOptions);\n const loadingRef = React.createRef();\n const subscribeLoadingRef = React.createRef();\n const unsubscribeLoadingRef = React.createRef();\n\n React.useEffect(() => {\n loadingRef.current && loadingRef.current.stop();\n subscribeLoadingRef.current && subscribeLoadingRef.current.stop();\n unsubscribeLoadingRef.current && unsubscribeLoadingRef.current.stop();\n });\n\n const subscribe = e => {\n e.preventDefault();\n\n subscribeLoadingRef.current.start();\n\n subscribeToTrending().then(() => {\n setIsSubscribed(true);\n });\n };\n\n const toggleTOLOption = option => {\n loadingRef.current.start();\n\n if (option === 'NEVER') {\n unsubscribeFromTrending('ALL').then(({ data }) => {\n setOptions([]);\n\n if (data.feedback_url) {\n window.location = data.feedback_url;\n }\n });\n } else if (options.includes(option)) {\n unsubscribeFromTrending(option).then(({ data }) => {\n const filteredOptions = options.filter(o => o !== option);\n setOptions(filteredOptions);\n\n if (data.feedback_url && filteredOptions.length === 0) {\n window.location = data.feedback_url;\n }\n });\n } else {\n subscribeToTrending(option).then(() => {\n setOptions([...options, option]);\n });\n }\n };\n\n const unsubscribe = e => {\n e.preventDefault();\n\n unsubscribeLoadingRef.current.start();\n\n unsubscribeFromTrending().then(({ data }) => {\n setIsSubscribed(false);\n\n if (data.feedback_url) {\n window.location = data.feedback_url;\n }\n });\n };\n\n return (\n (this.$modal = $(el))}>\n \n \n \n (this.loading = c)}>\n \n \n \n \n \n
\n Change email address
\n\n \n
\n\n
\n \n \n { wire.profileUrl\n ? {wire.profile.name}\n : wire.profile.name }\n \n { wire.profile.position }\n
\n\n \n \n
\n \n Manage Bookmarks
\n- \n \n
\n 
\n \n
\n );\n}\n\nBookmarksEmptyState.propTypes = {\n illustrationUrl: PropTypes.string.isRequired,\n imageUrl: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Tile = styled.div`\n margin-right: 24px;\n ${props => props.active && `\n color: ${props.theme.bodyColor};\n `};\n`;\n\nconst SelectedLine = styled.div`\n width: 100%;\n height: 0px;\n border: 2px solid #000000;\n margin-top: 16px;\n`;\n\nconst Name = styled.span`\n text-transform: uppercase;\n font-size: 16px;\n`;\n\nexport default function MenuItem({\n name, active, onClick,\n}) {\n const clickHandler = e => {\n e && e.preventDefault();\n if (!active) {\n onClick();\n }\n };\n\n return (\n You have no saved wires
\n\n Find the save icon (\n \n ) on any wire to save.\n
\nManage your saved wires right here, on any device.
\n\n (this.$overlay = $(el))}\n onClick={() => this.dismiss()}\n />\n
\n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport {\n FormHeader, Desc, SmallDesc, TextInput, Button, HelpBlock,\n} from '../common/styles';\nimport Email from '../../shared/sign-up/email';\nimport { useForm } from '../../../shared/form-validator-hook';\nimport { usePostForgotPassword } from '../../../services/auth-service';\nimport PasswordRecoveryContext from './context';\n\nconst Container = styled.div`\n background-color: ${props => props.theme.bodyBackgroundColor};\n border-radius: ${props => (props.theme.isMobile ? '4px' : '0')};\n display: flex;\n flex-direction: column;\n align-items: center;\n width: ${props => (props.theme.isMobile ? '92%' : '33vw')};\n margin-top: ${props => (props.theme.isMobile ? '20px' : '0px')};\n ${props => (props.theme.isMobile ? `\n padding: 35px 15px 15px 15px;\n border-radius: 4px;\n border: 1px solid ${props.theme.secondaryColor30Transparent};\n justify-content: flex-start;\n ` : `\n max-width: 480px;\n justify-content: center;\n padding: 40px;\n `)}\n\n > ${Desc} {\n margin-top: 15px;\n }\n\n > ${SmallDesc} {\n margin-top: ${props => (props.theme.isMobile ? '73px' : '117px')};\n margin-bottom: 50px;\n }\n\n > ${TextInput} {\n margin-top: 34px;\n width: 100%;\n }\n\n > ${Button} {\n margin-top: 34px;\n width: 100%;\n }\n`;\n\nconst getForgotPasswordError = error => {\n if (_.get(error, 'response.status') === 422) {\n return `Email ${_.get(error, 'response.data.errors.email', [])[0]}.`;\n }\n return null;\n};\n\nexport default function Form() {\n const { dispatch } = React.useContext(PasswordRecoveryContext);\n\n const {\n values, useInput, errors, validateForm,\n } = useForm({ email: '' }, { lazy: true });\n\n const [{ response, error }, forgotPassword] = usePostForgotPassword();\n\n const [forgotPasswordError, setForgotPasswordError] = React.useState(null);\n\n React.useEffect(() => {\n const err = getForgotPasswordError(error);\n\n if (err) {\n setForgotPasswordError(err);\n }\n }, [response, error]);\n\n React.useEffect(() => {\n setForgotPasswordError(null);\n }, [values]);\n\n function submit(e) {\n e && e.preventDefault();\n\n if (validateForm()) {\n forgotPassword(values).then(() => dispatch({ type: 'setEmail', payload: values.email }));\n }\n }\n\n return (\n (this.$modal = $(el))}>\n \n \n \n (this.loading = c)}>\n \n \n \n \n \n
\n Change password
\n\n \n
\n\n \n
\n\n
\n Click the ‘Resend Recovery Link’ below to receive a new link.\n This link is valid for 24 hours.\n
\n Return to Login\n
\n
\n If you’re not redirected click the link below to return to the login page.\n
\n {!isMobile && (\n
- \n
\n \n \n
\n );\n}\n\nHeader.propTypes = {\n seriesId: PropTypes.number.isRequired,\n description: PropTypes.string,\n latestWire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n primaryImageUrl: PropTypes.string.isRequired,\n mediaTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n }).isRequired,\n wireBg: PropTypes.string.isRequired,\n appleRating: PropTypes.number.isRequired,\n /* eslint-disable-next-line react/require-default-props */\n breadcrumb: PropTypes.string,\n};\n\nHeader.defaultProps = {\n description: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { recordStatisticsEvent } from '../../../../services/statistics-service';\nimport relativeTime from '../../../../shared/relative-time';\nimport WireTitle from '../wire-title';\nimport ImageWithListenButton from '../shared/image-with-listen-button';\nimport useTheme from '../theme';\n\nconst Container = styled.section`\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n position: relative;\n z-index: 1;\n border-radius: 4px 4px 60px 40px;\n box-shadow: 0px 26.5px 17.7px rgba(50, 50, 71, 0.14), 0px 26.6px 36.2px -17px rgba(50, 50, 71, 0.17);\n\n &:hover {\n cursor: pointer;\n }\n\n > div {\n width: 486px;\n height: 267px;\n padding: 26px 30px 0 0;\n margin-bottom: 0;\n border-radius: 4px 4px 0 0;\n\n ${props => props.theme.isROILarge && !props.theme.isROIMedium && `\n width: 369px;\n height: 203px;\n `};\n\n ${props => props.theme.isROIXSmall && `\n width: unset;\n height: unset;\n `};\n\n &.text-wrapper {\n height: min-content;\n background-color: #19202D;\n padding: 24px 24px 32px;\n border-radius: 0 0 60px 4px;\n \n > div > h2 {\n font-size: 24px;\n line-height: 120.5%;\n \n ${props => props.theme.isROIXLarge && `\n font-size: 29px;\n `};\n \n > button {\n color: #FFF;\n }\n }\n \n > p.wire-details {\n color: #8EA3B5; \n font-size: 18px;\n font-weight: 700;\n text-transform: uppercase;\n line-height: 120%;\n margin: 0 0 8px 0;\n \n ${props => props.theme.isROIMobile && `\n font-size: 16px;\n `};\n }\n }\n }\n`;\n\nexport default function Wire({ wire }) {\n const wireUrl = `/wires/${wire.slug}`;\n\n const handleClick = () => {\n recordStatisticsEvent({\n event: 'link_click',\n statisticable: 'wire',\n id: wire.id,\n clicked_url: `/wires/${wire.slug}`,\n page: window.location.pathname,\n custom_data: {\n section: 'series_header',\n page: 'series',\n },\n });\n };\n\n const wireClicked = e => {\n e && e.preventDefault();\n handleClick();\n window.location = wireUrl;\n };\n\n return (\n \n \n {!!appleRating && (\n \n The Rules of\n {' '}\n Investing\n {' '}\n Podcast\n \n {description && (\n \n
\n \n \n {[...Array(intRating)].map(i => )}\n {appleRating - intRating > 0 && }\n \n \n {appleRating}\n {' '}\n Rating\n \n Apple Podcasts\n
\n )}\n\n {description}\n
\n )}\n\n {!!hasPodcast && (\n \n )}\n
\n \n {!latestWire.primaryImageUrl\n && }\n
\n \n
\n \n
\n \n {relativeTime(wire.firstPublishedAt, false)}\n
\n\n \n \n \n
\n );\n}\n\nListenDropdown.propTypes = {\n seriesId: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport dt from '../../../shared/theme';\nimport plural from '../../shared/format';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n margin-top: 48px;\n\n ${props => dt(props).theme.isLarge && `\n margin-top: 64px;\n `};\n`;\n\nconst Number = styled.div`\n font: ${props => dt(props).theme.fontWeightBold} 14px/17px ${props => dt(props).theme.fontFamilyBody};\n text-transform: uppercase;\n`;\n\nconst Title = styled.div`\n font: ${props => dt(props).theme.fontWeightMedium} 40px/48px ${props => dt(props).theme.fontFamilyBody};\n letter-spacing: -0.02em;\n text-transform: capitalize;\n`;\n\nconst Separator = styled.div`\n width: 100%;\n height: 0px;\n border: none;\n border-bottom: 1px solid #D7DFE7;\n margin-top: 24px;\n`;\n\nexport default function Headline({ total }) {\n return (\n \n
\n
\n \n
\n \n {props => (\n \n \n \n You can now “save” wires\n <span className=\"icon-lw icon-lw-info-circle\" />\n \n \n Save wires by clicking/tapping on the save icon\n located at the top and bottom of a wire.\n \n \n \n \n )}\n \n
\n );\n});\n\nexport default Hint;\n","import useInfinitiveScrollableWire from '../../shared/infinitive-scrollable-wires-hook';\n\nconst INIT = 9;\n\nconst useScrollableWires = props => useInfinitiveScrollableWire({\n ...props,\n isScrollable: false,\n initNumber: INIT,\n entityName: 'wires',\n});\n\nexport default useScrollableWires;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ContactForm from './contact-form';\n\nexport default class ContactFormModal extends React.Component {\n static propTypes = {\n hideSubject: PropTypes.bool,\n subject: PropTypes.string,\n message: PropTypes.string,\n title: PropTypes.string,\n };\n\n static defaultProps = {\n hideSubject: false,\n subject: '',\n message: '',\n title: 'Contact us',\n };\n\n present() {\n this.$overlay.fadeIn();\n this.$modal.fadeIn();\n this.contactForm.clear();\n }\n\n dismiss() {\n this.$overlay.fadeOut();\n this.$modal.fadeOut();\n }\n\n render() {\n return (\n \n \n \n );\n}\n\nNavbarWidthContainer.propTypes = {\n clsName: PropTypes.string,\n children: PropTypes.node.isRequired,\n};\n\nNavbarWidthContainer.defaultProps = { clsName: '' };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport ReactTooltip from 'react-tooltip';\nimport dt from '../../../shared/theme';\nimport StockCodeFollowButton from '../../stock-codes/stock-code-follow-button';\n\nconst TooltipContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-content: center;\n\n .loading-panel {\n margin: -5px 0 0 20px;\n\n button {\n height: 26px;\n width: 100px;\n padding: 3px 0 3px 3px;\n\n .icon-lw {\n font-size: 14px;\n padding: 3px;\n line-height: 14px;\n }\n\n span {\n line-height: 20px;\n }\n }\n }\n`;\n\nconst StockCodeContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n`;\n\nconst CompanyName = styled.div`\n font-size: medium;\n color: ${props => dt(props).theme.bodyColor};\n white-space: nowrap;\n line-height: 18px;\n`;\n\nconst StockExchange = styled.div`\n font-size: small;\n color: ${props => dt(props).theme.secondaryColor};\n line-height: 14px;\n`;\n\nconst CountryFlag = styled.div`\n display: flex;\n margin-left: 20px;\n align-items: center;\n\n .icon {\n max-width: 40px;\n }\n`;\n\nexport default function Tooltip({ tooltipId, stockCode }) {\n const country = { asx: 'au', nasdaq: 'us' }[_.toLower(stockCode.stockExchange)];\n\n return (\n \n \n \n {stockCode.stockExchange} \n {stockCode.companyName} \n \n {!!country && (\n \n \n \n )}\n \n \n );\n}\n\nTooltip.propTypes = {\n tooltipId: PropTypes.string.isRequired,\n stockCode: PropTypes.shape({\n id: PropTypes.number,\n stockExchange: PropTypes.string,\n code: PropTypes.string,\n slug: PropTypes.string,\n companyName: PropTypes.string,\n isStockCodeFollowedByCurrentUser: PropTypes.bool.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\n\nexport default class Embed extends React.Component {\n static propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n embedWireUrl: PropTypes.string.isRequired,\n linkWireUrl: PropTypes.string.isRequired,\n }).isRequired,\n }\n\n presentEmbedWireModal(e) {\n e && e.preventDefault && e.preventDefault();\n postal.publish({\n channel: 'wire.view.commands',\n topic: 'present-embed-wire-modal',\n data: {\n embedWireUrl: this.props.wire.embedWireUrl,\n linkWireUrl: this.props.wire.linkWireUrl,\n },\n });\n }\n\n render() {\n return (\n this.presentEmbedWireModal(e)} title=\"Share this wire directly or by embedding it in your site\">\n \n \n \n \n \n \n );\n}\n\nStatisticsGroup.propTypes = wirePropType;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport humanFormat from 'human-format';\nimport { subscribe, disconnect } from '../../../channels/pub-sub-service';\n\nexport default function ViewCount({ wire }) {\n const [count, setCount] = React.useState(wire.viewCount);\n\n React.useEffect(() => () => disconnect(), []);\n\n React.useEffect(() => {\n subscribe(\n { channel: 'WireStatisticChannel', id: wire.id },\n {\n received: data => {\n const { viewCount } = data;\n\n if (Number.isInteger(viewCount)) {\n setCount(viewCount);\n }\n },\n },\n );\n }, [wire.id]);\n\n return (\n <>\n \n {humanFormat(count, { decimals: 1 })}\n \n );\n}\n\nViewCount.propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n viewCount: PropTypes.number.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport truncateString from '../../../shared/truncate-string';\n\nconst Paragraph = styled.p`\n margin-top: 16px;\n margin-bottom: 0;\n`;\n\nexport default function Blurb() {\n const { isOnWireSide, profile } = React.useContext(ThemeContext);\n\n if (isOnWireSide || !profile.blurb) {\n return null;\n }\n\n return (\n \n {truncateString(profile.blurb, 250, { separator: ' ' })}\n \n );\n}\n","// Ported from Rails' String truncate (https://apidock.com/rails/String/truncate)\nexport default function truncateString(input, truncateAt, options = {}) {\n if (input.length < truncateAt) return input.slice(0);\n\n const omission = options.omission || '...';\n const lengthWithRoomForOmission = truncateAt - omission.length;\n const stop = (() => {\n if (!options.separator) return lengthWithRoomForOmission;\n\n const rindex = input.lastIndexOf(options.separator, lengthWithRoomForOmission);\n\n return rindex === -1 ? lengthWithRoomForOmission : rindex;\n })();\n\n return `${input.slice(0, stop)}${omission}`;\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport PropTypes from 'prop-types';\nimport toastr from 'toastr';\n\nimport signUpAsync from '../../services/auth/sign-up-async';\nimport ErrorBoundary from '../../shared/error-boundary';\nimport mutate from '../../shared/mutate';\nimport breakpoints from '../../shared/breakpoints';\nimport Validator from '../../shared/validator';\nimport parseFailXhr from '../../shared/parse-fail-xhr';\nimport Loading from '../../shared/loading';\nimport { EMAIL_REGEX, MINIMUM_PASSWORD_LENGTH } from '../../shared/consts';\n\nfunction helpBlock(message) {\n return {message};\n}\n\nexport default class CampaignSignUpForm extends React.Component {\n static propTypes = {\n showPreHeaderCopy: PropTypes.bool,\n redirectTo: PropTypes.string,\n title: PropTypes.string,\n email: PropTypes.string,\n };\n\n static defaultProps = {\n showPreHeaderCopy: false,\n redirectTo: null,\n title: 'Register free today',\n email: '',\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleFirstNameChange = this.handleFirstNameChange.bind(this);\n this.handleLastNameChange = this.handleLastNameChange.bind(this);\n this.handleEmailChange = this.handleEmailChange.bind(this);\n // eslint-disable-next-line max-len\n this.handleTermsAndConditionsAcceptedChange = this.handleTermsAndConditionsAcceptedChange.bind(this);\n this.openSignInModal = this.openSignInModal.bind(this);\n this.handlePasswordChange = this.handlePasswordChange.bind(this);\n this.handleVerifyPasswordChange = this.handleVerifyPasswordChange.bind(this);\n this.present = this.present.bind(this);\n this.dismiss = this.dismiss.bind(this);\n\n this.state = {\n firstName: '',\n lastName: '',\n email: props.email,\n emailIsUnique: true,\n // eslint-disable-next-line react/no-unused-state\n termsAndConditionsAccepted: false,\n password: '',\n // eslint-disable-next-line react/no-unused-state\n verifyPassword: '',\n validator: new Validator({\n lastNameRequired: state => !this.$lastNameInput.is(':visible') || !!state.lastName,\n emailRequired: state => !!state.email,\n emailRegex: state => !!state.email || EMAIL_REGEX.test(state.email),\n emailIsUnique: state => state.emailIsUnique,\n termsAndConditionsMustBeAccepted: state => state.termsAndConditionsAccepted,\n passwordRequired: state => !this.$passwordInput.is(':visible') || !!state.password,\n passwordCorrectLength: state => !this.$passwordInput.is(':visible') || !state.password || state.password.length >= MINIMUM_PASSWORD_LENGTH,\n passwordContainsDigit: state => !this.$passwordInput.is(':visible') || !state.password || /[0-9]/.test(state.password),\n verifyPasswordRequired: state => !this.$passwordInput.is(':visible') || !!state.verifyPassword,\n passwordsMustMatch: state => !this.$passwordInput.is(':visible') || !state.password || !state.verifyPassword || state.password === state.verifyPassword,\n }),\n };\n this.firstNameInput = React.createRef();\n this.emailInput = React.createRef();\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'commands.campaigns',\n topic: 'present-sign-up-modal',\n callback: () => this.present(),\n });\n\n let onMobileOrTablet = breakpoints.upTo_medium();\n $(window).on('resize', _.throttle(() => {\n const currentlyOnMobileOrTablet = breakpoints.upTo_medium();\n\n if (currentlyOnMobileOrTablet !== onMobileOrTablet) {\n onMobileOrTablet = currentlyOnMobileOrTablet;\n\n this.forceUpdate();\n if (onMobileOrTablet) {\n this.$campaignSignUpForm.hide();\n } else {\n this.$campaignSignUpForm.show();\n }\n }\n }, 1000 / 60));\n }\n\n handleSubmit(event) {\n if (event) event.preventDefault();\n\n this.setState(\n state => state.validator.validateForm(state),\n () => {\n if (!this.state.validator.formValid) return;\n\n this.loading.start();\n\n signUpAsync({\n email: this.state.email,\n firstName: this.state.firstName,\n lastName: this.state.lastName,\n password: this.state.password,\n }).done(data => {\n const redirectPart = this.props.redirectTo ? `&redirect_to=${encodeURIComponent(this.props.redirectTo)}` : '';\n\n window.location = `/users/confirmation?confirmation_token=${data.confirmation_token}${redirectPart}`;\n }).fail(xhr => {\n this.loading.stop();\n\n const errors = parseFailXhr(xhr);\n\n if (errors.email && errors.email.hasAlreadyBeenTaken) {\n this.setState(oldState => mutate(oldState, state => {\n state.emailIsUnique = false;\n state.validator.validateEmailIsUnique(state);\n }));\n errors.email.hasAlreadyBeenTaken.handled = true;\n }\n\n if (errors.anyUnhandledErrors()) {\n toastr.error(errors.getErrorSummary(), 'Unhandled errors');\n }\n });\n },\n );\n }\n\n handleFirstNameChange(event) {\n this.setState({ firstName: event.target.value });\n }\n\n handleLastNameChange(event) {\n const lastName = event.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.lastName = lastName;\n state.validator.validateLastNameRequired(state);\n }));\n }\n\n handleEmailChange(event) {\n const email = event.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.email = email;\n state.emailIsUnique = true;\n state.validator.validateEmailRequired(state);\n state.validator.validateEmailRegex(state);\n state.validator.validateEmailIsUnique(state);\n }));\n }\n\n handleTermsAndConditionsAcceptedChange(event) {\n const termsAndConditionsAccepted = event.target.checked;\n\n this.setState(oldState => mutate(oldState, state => {\n state.termsAndConditionsAccepted = termsAndConditionsAccepted;\n state.validator.validateTermsAndConditionsMustBeAccepted(state);\n }));\n }\n\n handlePasswordChange(event) {\n const password = event.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.password = password;\n state.validator.validatePasswordRequired(state);\n }));\n }\n\n handleVerifyPasswordChange(event) {\n const verifyPassword = event.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.verifyPassword = verifyPassword;\n state.validator.validateVerifyPasswordRequired(state);\n state.validator.validatePasswordsMustMatch(state);\n }));\n }\n\n prefillEmail(email) {\n this.emailInput.current.value = email;\n }\n\n present() {\n if (breakpoints.upTo_medium()) {\n this.$campaignSignUpForm.fadeIn();\n $('body').addClass('has-fullscreen-modal');\n } else {\n $('html,body').animate({ scrollTop: 0 }, 400);\n }\n }\n\n dismiss() {\n this.$campaignSignUpForm.fadeOut();\n $('body').removeClass('has-fullscreen-modal');\n }\n\n focusInput() {\n const firstNameInputRef = this.firstNameInput.current;\n firstNameInputRef.focus();\n }\n\n // eslint-disable-next-line class-methods-use-this\n openSignInModal(event) {\n if (event) event.preventDefault();\n postal.publish({\n channel: 'commands.sign-in',\n topic: 'present',\n });\n }\n\n renderHeader() {\n const onMobileOrTablet = breakpoints.upTo_medium();\n return (\n \n {!onMobileOrTablet && this.props.showPreHeaderCopy\n && (\n \n \n )}\n \n );\n }\n\n renderFirstName() {\n return (\n \n \n );\n }\n\n renderLastName() {\n const isValid = this.state.validator.lastNameRequiredValid;\n return (\n \n (this.$lastNameInput = $(el))}\n onChange={this.handleLastNameChange}\n id=\"lastName\"\n />\n {isValid || helpBlock('Last name is required')}\n \n );\n }\n\n renderEmail() {\n const v = this.state.validator;\n return (\n \n \n \n {v.emailIsUniqueValid || (\n \n This email address has already been used to create an account. \n Did you want to \n sign in\n or \n reset your password\n instead?\n \n )}\n \n );\n }\n\n renderPassword() {\n const v = this.state.validator;\n const passwordValid = v.passwordRequiredValid && v.passwordCorrectLengthValid;\n const verifyPasswordValid = v.verifyPasswordRequiredValid && v.passwordsMustMatchValid;\n return (\n \n \n (this.$passwordInput = $(el))}\n onChange={this.handlePasswordChange}\n id=\"password\"\n />\n {v.passwordRequiredValid || helpBlock('Password is required')}\n {v.passwordCorrectLengthValid\n || helpBlock(`Password must be at least ${MINIMUM_PASSWORD_LENGTH} characters`)}\n {v.passwordContainsDigitValid || helpBlock('Password must include at least one digit')}\n \n \n \n \n );\n }\n\n renderTC() {\n const isValid = this.state.validator.termsAndConditionsMustBeAcceptedValid;\n return (\n \n \n \n \n {isValid || (\n {helpBlock('Please accept the terms and conditions')} \n )}\n \n );\n }\n\n renderForm() {\n return (\n \n );\n }\n\n render() {\n const onMobileOrTablet = breakpoints.upTo_medium();\n return (\n \n (this.$campaignSignUpForm = $(e))}\n className={`campaign-sign-up-form ${onMobileOrTablet && 'livewire-modal'}`}\n tabIndex=\"-1\"\n role=\"dialog\"\n >\n \n {this.renderHeader()}\n {this.renderForm()} \n \n
\n \n );\n }\n}\n","/*\nregistration: {\n email,\n firstName,\n lastName,\n password\n}\n*/\nexport default function signUpAsync(registration) {\n return $.post(\n '/api/v1/registrations',\n {\n registration: {\n email: registration.email,\n first_name: registration.firstName,\n last_name: registration.lastName,\n password: registration.password,\n },\n },\n );\n}\n","import React from 'react';\nimport axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetSuggestedSearches(query, length) {\n const common = (v, len) => ({ params: v ? { query: v, highlight_size: len } : null });\n const [state, q] = useAxios({\n cache: { ignoreCache: true },\n url: '/api/v1/suggested_searches',\n method: 'GET',\n ...common(query, length),\n }, { manual: true });\n const executeQuery = React.useCallback((newQuery, size) => q(common(newQuery, size)), [q]);\n return [state, executeQuery];\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useSpring, animated } from 'react-spring';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { useIsMobileOrTablet } from '../../../shared/theme';\nimport SearchBarContext, { reducer, defaultState } from './search-bar-elements/context';\nimport InputBox from './search-bar-elements/input-box';\nimport StockTick from './search-bar-elements/stock-tick';\nimport Cross from './search-bar-elements/cross';\nimport SearchLivewireButton from './search-bar-elements/search-livewire-button';\nimport MagnifyGlassIcon from './search-bar-elements/magnify-glass-icon';\nimport ResultBox from './search-bar-elements/result-box';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { useGetRecentSearches } from '../../../services/search/recent-service';\nimport useGetSuggestedSearches from '../../../services/search/suggested-service';\nimport breakpoints from '../../../shared/breakpoints';\n\nconst Container = styled(animated.form)`\n ${props => props.pseudomobile === 'true' && `\n right: '24px';\n `};\n\n ${props => props.theme.isMobileOrTablet && `\n right: 8px;\n `};\n\n position: absolute;\n z-index: ${props => (props.theme.isMobile ? 512 : 200)};\n height: ${props => (props.theme.isMobile ? 50 : 66)}px;\n line-height: ${props => (props.theme.isMobile ? 50 : 66)}px;\n background-color: ${props => props.theme.bodyColor};\n`;\n\nconst fontSize = 14;\nconst widestGlyph = 9.875; // `W`\nconst relaxRatio = 1.4; // some characters won't be `W`\nconst longestTypeGlyph = 64; // `Contributor`\n\nconst getOptimumLen = w => {\n const avgGlyphWidth = (w < breakpoints.smallMax ? fontSize : widestGlyph) / relaxRatio;\n return Math.round((w - longestTypeGlyph) / avgGlyphWidth);\n};\n\n/* eslint-disable no-nested-ternary */\nconst animateWidth = s => (s.expanded ? s.width : (s.pseudoMobile ? 40 : 146));\nconst animateX = s => (s.pseudoMobile ? (s.showRecent ? 146 : 182) : (s.expanded ? s.width : 146));\n/* eslint-enable no-nested-ternary */\n\nexport default function SearchBar({ isMobile, isUserSignedIn }) {\n const [state, dispatch] = React.useReducer(reducer, {\n ...defaultState,\n showRecent: isUserSignedIn,\n isMobile,\n pseudoMobile: isMobile,\n });\n const setWidth = React.useCallback(w => dispatch({ type: 'setWidth', payload: w }), [dispatch]);\n const setRecentResults = React.useCallback(\n d => dispatch({ type: 'setRecentSearchResult', payload: _.get(d, 'recent_searches', []) }),\n [dispatch],\n );\n const setSuggestedResults = React.useCallback(\n d => dispatch({ type: 'setSuggestionResult', payload: _.get(d, 'suggested_searches', []) }),\n [dispatch],\n );\n\n useChangeAwareEffect(({ did }) => {\n if (did.winWidth.notChange) {\n return;\n }\n let width;\n if (isMobile) {\n width = window.innerWidth - 8 * 2;\n } else {\n const primaryNavLeft = document.getElementById('primary-nav').getClientRects()[0].left;\n const restNavLeft = document.getElementById('rest-nav').getClientRects()[0].left;\n width = restNavLeft - primaryNavLeft;\n }\n setWidth(width);\n }, { winWidth: window.innerWidth });\n\n const { w, x } = useSpring({\n w: animateWidth(state),\n x: animateX(state),\n immediate: !state.animation,\n });\n\n const [, qRecent] = useGetRecentSearches();\n const [, qSuggest] = useGetSuggestedSearches();\n\n React.useEffect(() => {\n state.expanded && state.showRecent && qRecent(state.query)\n .then(({ data }) => setRecentResults(data))\n .catch(() => { /* throw away error */ });\n }, [state.expanded, state.query, state.showRecent, qRecent, setRecentResults]);\n\n React.useEffect(() => {\n state.expanded && state.showSuggestion && qSuggest(state.query, getOptimumLen(state.width))\n .then(({ data }) => setSuggestedResults(data))\n .catch(() => { /* throw away error */ });\n }, [\n state.expanded, state.query, state.width, state.showSuggestion, qSuggest, setSuggestedResults,\n ]);\n\n const containerBlured = e => {\n if (state.focus) {\n dispatch({ type: 'inputFocus', payload: false });\n dispatch({ type: 'focus', payload: false });\n } else {\n const { currentTarget } = e;\n setTimeout(() => {\n if (!currentTarget.contains(document.activeElement)) {\n dispatch({ type: 'inputFocus', payload: false });\n dispatch({ type: 'expand', payload: false });\n dispatch({ type: 'focus', payload: false });\n }\n }, 0);\n }\n };\n\n const isMobileOrTablet = useIsMobileOrTablet();\n\n return (\n (this.$overlay = $(el))} />\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport breakpoints from '../../shared/breakpoints';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n\n > .nw-content-container {\n width: ${props => props.width};\n }\n`;\n\nexport default function NavbarWidthContainer({ clsName, children }) {\n const isXXLarge = useMediaQuery({ minWidth: breakpoints.xxlargeMin });\n const isXLarge = useMediaQuery({ minWidth: breakpoints.xlargeMin });\n const isLarge = useMediaQuery({ minWidth: breakpoints.largeMin });\n\n let width = 'calc(100% - 40px)';\n if (isXXLarge) {\n width = '1200px';\n } else if (isXLarge) {\n width = '953px';\n } else if (isLarge) {\n width = '85%';\n }\n\n return (\n (this.$modal = $(el))}>\n \n \n \n \n (this.contactForm = c)}\n hideSubject={this.props.hideSubject}\n hideSubmit\n subject={this.props.subject}\n message={this.props.message}\n onAfterSubmit={() => this.dismiss()}\n />\n \n \n \n
\n {this.props.title}
\n\n {children}\n
\n \n The content you're trying to access is exclusive to Livewire members. \n It's free to become a member, so...\n
\n )}\n {!onMobileOrTablet && ({this.props.title}
)}\n {onMobileOrTablet && (\n{this.props.title}
\n \n\n {!!fundData &&
\n \n \n );\n}\n\n/* eslint-disable-next-line react/require-default-props */\nFundModal.propTypes = { features: PropTypes.string };\n","import React from 'react';\nimport axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetFunds(type, order, page, fundAssetClasses, series, name,\n companySlug) {\n const common = (t, o, p, ac, s, n, cl) => ({\n params: {\n type: t, order: o, page: p, fund_asset_classes: ac, series: s, name: n, company_slug: cl,\n },\n });\n\n const [state, q] = useAxios({\n url: '/api/v1/funds',\n method: 'GET',\n ...common(type, order, page, fundAssetClasses, series, name, companySlug),\n }, { manual: true });\n\n const executeQuery = React.useCallback((t, o, p, ac, s, n, cl) => q(\n common(t, o, p, ac, s, n, cl),\n ), [q]);\n\n return [state, executeQuery];\n}\n","import _ from 'lodash';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport styled from 'styled-components';\nimport useInfiniteScroll from 'react-infinite-scroll-hook';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport dt, { useIsMobileOrTablet } from '../../../shared/theme';\nimport { Separator } from '../../shared/sectionable/styles';\nimport LogoSeparator from '../../shared/logo-separator';\nimport InfiniteScrollEndText from '../../shared/infinite-scroll-end-text';\nimport Disclaimer from './disclaimer';\nimport Card from './card';\nimport Actions from './actions';\nimport ViewOptions from './view-options';\nimport NoResults from './no-results';\nimport NameFilter from './filter-components/name-filter';\nimport Tail from '../../shared/feed/styles';\nimport FundModal from '../fund-modal';\nimport useGetFunds from '../../../services/funds/search-service';\nimport useFundsStateStore from '../common/funds-state-hook';\nimport { searchCriteriaToUrl, urlToSearchCriteria } from '../common/utils';\n\nconst bottomRootMargin = 600;\nconst loadingDelay = 10;\n\nconst Container = styled.div`\n width: 100%;\n padding-top: 56px;\n\n ${props => dt(props).theme.isMobileOrTablet && `\n padding-top: 40px;\n `};\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0 28px;\n\n ${props => dt(props).theme.isXLarge && `\n padding: 0 calc(50% - 476px);\n `};\n\n ${props => dt(props).theme.isXXLarge && `\n padding: 0 calc(50% - 600px);\n `};\n\n ${props => dt(props).theme.isMobileOrTablet && `\n padding: 0 20px;\n `};\n`;\n\nconst SSeparator = styled(Separator)`\n margin-top: 12px;\n margin-bottom: 24px;\n`;\n\nconst Logo = styled(LogoSeparator)`\n margin: ${props => (dt(props).theme.isMobileOrTablet ? 40 : 56)}px 0;\n`;\n\nexport default function Main(props) {\n const { newNavEnabled, companySlug, isCompany } = props;\n const searchCompanySlug = isCompany ? companySlug : null;\n const searchCriteria = urlToSearchCriteria();\n const [{ loading }, getFunds] = useGetFunds();\n const set = useFundsStateStore(state => state.set);\n const funds = useFundsStateStore(state => state.funds);\n const totalResults = useFundsStateStore(state => state.totalResults);\n const assetClasses = useFundsStateStore(state => state.assetClasses);\n const appliedFilterFundTypes = useFundsStateStore(state => state.appliedFilters.fundTypes);\n const appliedFilterAssetClasses = useFundsStateStore(state => state.appliedFilters.assetClasses);\n const filterName = useFundsStateStore(state => state.filters.name);\n const filterChanged = useFundsStateStore(state => state.filterChanged);\n const sortOrder = useFundsStateStore(state => state.sortOrder);\n const sortOrderChanged = useFundsStateStore(state => state.sortOrderChanged);\n const showNameFilter = useFundsStateStore(state => state.showNameFilter);\n const [showLoadMoreButton, setShowLoadMoreButton] = React.useState(false);\n const [hasNextPage, setHasNextPage] = React.useState(true);\n const [page, setPage] = React.useState(1);\n\n const resetFilters = React.useCallback(() => {\n set(state => {\n state.filters.assetClasses = [];\n state.filters.fundTypes = [];\n state.filters.name = '';\n state.appliedFilters.assetClasses = [];\n state.appliedFilters.fundTypes = [];\n });\n }, [set]);\n\n React.useEffect(() => {\n set(state => {\n state.resetFilters = resetFilters;\n });\n }, [set, resetFilters]);\n\n const buildFiltersAndParams = () => {\n const {\n type,\n assetFilters,\n sortOrder: urlSortOrder,\n series: urlSeries,\n } = searchCriteria;\n // eslint-disable-next-line no-nested-ternary\n const fundTypes = appliedFilterFundTypes.length > 0\n ? appliedFilterFundTypes : type ? [type] : [];\n\n if (assetFilters.length > 0 || urlSortOrder || urlSeries) {\n const ids = (assetClasses || [])\n .filter(ac => _.indexOf(assetFilters, ac.slug) >= 0)\n .map(ac => ac.id);\n\n set(state => {\n state.filters.assetClasses = [...ids];\n state.filters.fundType = fundTypes;\n state.filterChanged = true;\n state.appliedFilters.assetClasses = [...ids];\n state.appliedFilters.fundTypes = fundTypes;\n state.sortOrder = urlSortOrder || 'default';\n state.series = urlSeries;\n });\n }\n };\n\n const onData = React.useCallback(({ data }) => {\n if (funds.length === 0 || filterChanged || sortOrderChanged) {\n setShowLoadMoreButton(true);\n setHasNextPage(false);\n const hasMorePage = data.total > data.funds.length;\n setPage(1);\n setHasNextPage(hasMorePage);\n setShowLoadMoreButton(hasMorePage);\n set(state => {\n state.funds = data.funds;\n state.totalResults = _.get(data, 'total', 0);\n state.filterChanged = false;\n state.sortOrderChanged = false;\n state.breadcrumb = data.breadcrumb;\n });\n } else {\n const displayedFunds = [...funds, ...data.funds];\n setHasNextPage(totalResults > displayedFunds.length);\n set(state => {\n state.funds = displayedFunds;\n });\n }\n }, [funds, totalResults, filterChanged, sortOrderChanged, set]);\n\n // eslint-disable-next-line complexity\n useChangeAwareEffect(({ did, isMount }) => {\n const type = appliedFilterFundTypes[0];\n\n if (did.assetClasses.change) {\n buildFiltersAndParams();\n }\n\n const slugs = (assetClasses || [])\n .filter(ac => _.indexOf(appliedFilterAssetClasses, ac.id) >= 0)\n .map(ac => ac.slug);\n const newUrl = searchCriteriaToUrl(\n type,\n slugs,\n sortOrder,\n searchCriteria.series,\n searchCompanySlug || null,\n );\n\n if (sessionStorage.getItem('userChangedFilterCondition')) {\n sessionStorage.removeItem('userChangedFilterCondition');\n window.location = newUrl.replace(/\\/$/, '');\n return;\n }\n\n if (isMount) {\n getFunds(type,\n sortOrder,\n page,\n appliedFilterAssetClasses,\n searchCriteria.series,\n filterName,\n searchCompanySlug).then(onData);\n } else if (\n did.appliedFilterAssetClasses.change\n || did.appliedFilterFundTypes.change\n || did.sortOrder.change\n || did.filterName.change\n ) {\n if (searchCompanySlug) {\n if (newUrl !== window.location.href) {\n window.location.href = newUrl;\n }\n }\n\n if (assetClasses.length > 0) {\n if (searchCompanySlug && appliedFilterAssetClasses.length > 0) {\n window.location = newUrl.replace(/\\/$/, '');\n } else {\n window.history.pushState(null, document.title, newUrl.replace(/\\/$/, ''));\n }\n }\n\n getFunds(type,\n sortOrder,\n 1,\n appliedFilterAssetClasses,\n searchCriteria.series,\n filterName,\n searchCompanySlug).then(onData);\n }\n }, {\n assetClasses,\n appliedFilterAssetClasses,\n appliedFilterFundTypes,\n filterName,\n sortOrder,\n searchCompanySlug,\n });\n\n const onLoadMore = React.useCallback(isLoadMoreClicked => {\n if (!showLoadMoreButton || !!isLoadMoreClicked) {\n setHasNextPage(totalResults > funds.length);\n const newPage = page + 1;\n\n getFunds(searchCriteria.type,\n sortOrder,\n newPage,\n appliedFilterAssetClasses,\n searchCriteria.series,\n filterName,\n searchCompanySlug)\n .then(res => {\n setShowLoadMoreButton(false);\n onData({ data: res.data });\n });\n setPage(newPage);\n }\n }, [funds, totalResults, appliedFilterAssetClasses, filterName, sortOrder,\n showLoadMoreButton, page, getFunds, searchCriteria, onData, searchCompanySlug]);\n\n const [infiniteRef] = useInfiniteScroll({\n loading,\n hasNextPage,\n onLoadMore,\n rootMargin: `0px 0px ${bottomRootMargin}px 0px`,\n delayInMs: loadingDelay,\n });\n\n const isMobileOrTablet = useIsMobileOrTablet();\n const hasResult = totalResults > 0;\n\n set(state => {\n state.loadingFunds = loading;\n });\n\n return (\n \n {}}\n onChange={() => {}}\n />\n\n \n
\n )\n : null}\n \n \n \n Setup Company Branding \n \n \n \n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\n\nimport {\n Button,\n Container,\n SuccessMessage,\n} from '../../common/form';\n\nimport { propTypes, defaultProps } from '../prop-types';\nimport useContentFormatTypeStore from './state-hook';\nimport {\n createContentFormatType,\n updateContentFormatType,\n} from '../../../../services/lwadmin/content-format-type/content-format-type-service';\n\nimport withNameInput from '../../common/input';\n\nconst Name = withNameInput('contentFormatType', 'name', useContentFormatTypeStore);\nconst Slug = withNameInput('contentFormatType', 'slug', useContentFormatTypeStore);\nconst Description = withNameInput('contentFormatType', 'description', useContentFormatTypeStore);\n\nconst SContainer = styled(Container)`\n padding-bottom: 40px;\n`;\n\nexport default function Form(props) {\n const [saving, setSaving] = React.useState(false);\n const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n\n const set = useContentFormatTypeStore(state => state.set);\n const contentFormatType = useContentFormatTypeStore(state => state.contentFormatType);\n const { id } = contentFormatType;\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && set(state => {\n state.contentFormatType = (props || defaultProps).contentFormatType;\n });\n }, {});\n\n const saveContentFormatType = e => {\n e && e.preventDefault();\n\n setSaving(true);\n\n const payload = {\n name: contentFormatType.name,\n slug: contentFormatType.slug,\n description: contentFormatType.description,\n };\n\n const createOrUpdate = id\n ? updateContentFormatType(id, payload)\n : createContentFormatType(payload);\n\n createOrUpdate.then(resp => {\n setSaving(false);\n setShowSuccessMessage(true);\n\n const createdId = _.get(resp, 'data.id');\n if (createdId) {\n set(state => {\n state.contentFormatType.id = createdId;\n });\n }\n\n set(state => {\n state.errors = {};\n });\n }).catch(error => {\n setSaving(false);\n setShowSuccessMessage(false);\n\n set(state => {\n state.errors = _.get(error, 'response.data', {});\n });\n\n setSaving(false);\n });\n };\n\n return (\n \n {showSuccessMessage && (\n \n Content Format Type successfully saved\n \n )}\n \n );\n}\n\nForm.propTypes = propTypes;\nForm.defaultProps = defaultProps;\n","import moment from 'moment';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport JSONPretty from 'react-json-pretty';\nimport JSONPrettyMon from 'react-json-pretty/dist/monikai';\nimport styled from 'styled-components';\nimport { Button } from '../../common/form';\nimport { HeaderMixin } from '../../shared/styles';\nimport { approveFundDataReview } from '../../../../services/lwadmin/fund/fund-service';\n\nconst SButton = styled(Button)`\n margin-right: 8px;\n`;\n\nconst SModal = styled(Modal)`\n & > article.horizontal {\n min-width: 1200px;\n height:fit-content !important;\n }\n`;\n\nconst Title = styled.h5`\n ${HeaderMixin};\n font-size: 14px;\n text-align: center;\n`;\n\nconst Column = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst ColumnHeader = styled(Title)`\n ${HeaderMixin};\n font-size: 14px;\n text-align: left;\n margin: 4px 0px;\n`;\n\nconst Body = styled(Modal.Body)`\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n margin: 20px 20px 0 20px;\n flex-wrap: wrap;\n padding: 0 !important;\n height: 100%;\n`;\n\nexport default function DataReviewModal({ context }) {\n const {\n state: {\n showDataReviewModal,\n dataReview,\n fund: { id: fundId, name },\n }, dispatch,\n } = React.useContext(context);\n\n const [confirmStep, setConfirmStep] = React.useState(false);\n\n const dismiss = React.useCallback(e => {\n e && e.preventDefault();\n setConfirmStep(false);\n dispatch({ type: 'dismissDataReviewModal' });\n }, [dispatch]);\n\n if (!dataReview) {\n return null;\n }\n\n const {\n id: reviewId,\n current,\n toReview,\n createdAt,\n } = dataReview;\n\n const cancel = e => {\n e.preventDefault();\n\n if (confirmStep) {\n setConfirmStep(false);\n } else {\n dispatch({ type: 'dismissDataReviewModal' });\n }\n };\n\n const confirmOrApprove = e => {\n e.preventDefault();\n\n if (confirmStep) {\n setConfirmStep(false);\n approveFundDataReview(fundId, reviewId).then(() => dispatch({ type: 'dataReviewApproved', payload: { fundId, reviewId } }));\n } else {\n setConfirmStep(true);\n }\n };\n\n return (\n \n \n \n { name }\n \n \n Data Provider Update Review - (\n {moment(createdAt).format('DD/MM/YY @ h.mma')}\n )\n \n \n \n \n Current \n \n \n To review \n \n \n \n <SButton className=\"btn btn-default\" onClick={cancel}>\n Cancel\n </SButton>\n <SButton className=\"btn btn-primary\" onClick={confirmOrApprove}>\n {confirmStep ? 'Confirm' : 'Approve'}\n </SButton>\n \n \n );\n}\n\nDataReviewModal.propTypes = {\n context: PropTypes.func.isRequired,\n};\n","import _ from 'lodash';\n\nconst formatErrors = errors => {\n if (typeof errors === 'string') {\n return [{ key: 'error', error: errors }];\n }\n return _.flatten(\n _.map(_.pickBy(errors, v => v.length), (errorList, field) => errorList.map(err => ({\n error: `${_.capitalize(field)}: ${err}`,\n key: `error-${field}-${err}`,\n }))),\n );\n};\n\nexport default formatErrors;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Select from 'react-select';\nimport Loading from '../../../../shared/loading';\nimport { selectorProps, InputText, HelpBlock } from '../../common/form';\nimport { usePostQuestion, usePutQuestion } from '../../../../services/lwadmin/fund/question-service';\nimport useStore from './store-hook';\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n font: ${props => props.theme.fontWeightHeavy} 14px/120% ${props => props.theme.fontFamilyBody};\n margin: 10px 0;\n padding: 5px 10px;\n border-radius: 4px;\n box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);\n border: 1px solid ${props => props.theme.secondaryColorLight};\n background-color: ${props => props.theme.secondaryColorLightest};\n\n & [class$=\"-ValueContainer\"] {\n margin-top: 0px !important;\n\n [class$=\"-singleValue\"], [class$=\"-multiValue\"] {\n font-weight: ${props => props.theme.fontWeightHeavy};\n }\n }\n\n & > .category {\n width: 280px;\n margin-right: 20px;\n font-size: 12px;\n text-transform: uppercase;\n color: ${props => props.theme.secondaryColor};\n }\n\n & > label {\n width: 160px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n & > .question {\n flex-basis: 100%;\n color: ${props => props.theme.bodyColor};\n font-size: 18px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n margin: 10px 0;\n }\n\n & > .types {\n width: 500px;\n margin-left: 10px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n > [class$=\"-control\"] {\n width: 100%;\n }\n\n > span {\n margin-left: 10px;\n background-color: ${props => props.theme.secondaryColorLight};\n border-radius: 3px;\n border: 1px solid ${props => props.theme.primaryColor};\n padding: 2px 5px;\n font-size: 12px;\n }\n }\n\n & > .fa-edit {\n margin-right: -40px;\n margin-left: 20px;\n font-weight: ${props => props.theme.fontWeightBlack};\n font-size: 20px;\n color: ${props => props.theme.primaryColor};\n }\n\n & > .btn-group {\n margin: 0 !important;\n display: flex;\n flex-basis: 100%;\n justify-content: flex-end;\n\n > button, > .loading-panel {\n margin-left: 20px;\n }\n }\n`;\n\nconst plainMapper = value => ({ value, label: value });\n\nexport default function Editor({\n question, onCancel, onUpdated, onCreated,\n}) {\n const [err, setErr] = React.useState(false);\n const loadingRef = React.useRef();\n const [{ loading: uloading }, updateQ] = usePutQuestion();\n const [{ loading: cloading }, createQ] = usePostQuestion();\n const cats = useStore(state => state.cats);\n const [q, setQ] = React.useState(question);\n\n // React.useEffect(() => setQ(question), [question]);\n\n React.useEffect(() => {\n loadingRef.current && loadingRef.current.toggle(cloading || uloading);\n }, [cloading, uloading]);\n\n React.useEffect(() => setErr(false), [q]);\n\n const cancel = e => {\n e && e.preventDefault();\n setQ(question);\n onCancel();\n };\n\n const save = e => {\n e && e.preventDefault();\n (q.id ? updateQ : createQ)({\n ...q,\n catId: q.category.value,\n fundTypes: q.fundTypes.map(t => t.value),\n }).then(result => {\n (q.id ? onUpdated : onCreated)({ ...q, id: q.id || result.id });\n }).catch(error => {\n // eslint-disable-next-line no-console\n console.log(`Error saving question: ${JSON.stringify(error)}`);\n setErr(true);\n });\n };\n\n return (\n \n setQ({ ...q, category: d })}\n />\n \n setQ({ ...q, fundTypes: d })}\n />\n \n setQ({ ...q, description: d.target.value })}\n />\n {!!err && Failed to save question. }\n \n );\n}\n\nEditor.propTypes = {\n question: PropTypes.shape({\n id: PropTypes.number,\n category: PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n }),\n description: PropTypes.string,\n fundTypes: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n })),\n order: PropTypes.number,\n }).isRequired,\n onCancel: PropTypes.func.isRequired,\n onUpdated: PropTypes.func,\n onCreated: PropTypes.func,\n};\n\nEditor.defaultProps = {\n onUpdated: () => null,\n onCreated: () => null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport {\n Button,\n Container,\n SuccessMessage,\n} from '../../../common/form';\n\nimport { propTypes, defaultProps } from '../prop-types';\nimport useBannerStore from './state-hook';\nimport {\n createBanner,\n updateBanner,\n} from '../../../../../services/lwadmin/homepage/banner-service';\n\nimport withNameFileUpload from '../../../common/file-upload';\nimport withNameInput from '../../../common/input';\n\nconst Name = withNameInput('banner', 'name', useBannerStore);\nconst Image = withNameFileUpload('banner', 'image', useBannerStore, 'image/png, image/jpeg', 'Image');\nconst Headline = withNameInput('banner', 'headline', useBannerStore);\nconst Byline = withNameInput('banner', 'byline', useBannerStore);\nconst RegisterButtonCopy = withNameInput('banner', 'registerButtonCopy', useBannerStore, 'Register Button Copy');\n\nconst SContainer = styled(Container)`\n padding-bottom: 40px;\n`;\n\nexport default function Form(props) {\n const [saving, setSaving] = React.useState(false);\n const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n\n const set = useBannerStore(state => state.set);\n const banner = useBannerStore(state => state.banner);\n\n const { id } = banner;\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && set(state => {\n state.banner = (props || defaultProps).banner;\n });\n }, {});\n\n const saveBanner = e => {\n e && e.preventDefault();\n\n setSaving(true);\n\n const payload = {\n name: banner.name,\n image: banner.image,\n headline: banner.headline,\n byline: banner.byline,\n register_button_copy: banner.registerButtonCopy,\n };\n\n const createOrUpdate = id\n ? updateBanner(id, payload)\n : createBanner(payload);\n\n createOrUpdate.then(resp => {\n setSaving(false);\n setShowSuccessMessage(true);\n\n const createdId = _.get(resp, 'data.id');\n if (createdId) {\n set(state => {\n state.banner.id = createdId;\n });\n }\n\n set(state => {\n state.errors = {};\n });\n }).catch(error => {\n setSaving(false);\n setShowSuccessMessage(false);\n\n set(state => {\n state.errors = _.get(error, 'response.data', {});\n });\n\n setSaving(false);\n });\n };\n\n return (\n \n {showSuccessMessage && (\n \n Banner successfully saved\n \n )}\n \n );\n}\n\nForm.propTypes = propTypes;\nForm.defaultProps = defaultProps;\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Link, Separator } from './styles';\n\nconst Title = styled.h1`\n color: ${props => props.theme.bodyColor};\n margin-bottom: 10px;\n`;\n\nconst Description = styled.span`\n font-size: 18px;\n color: ${props => props.theme.secondaryColor};\n margin-left: 20px;\n`;\n\nexport default function Header({ type, profile }) {\n const positionAndOrganisation = _.join(_.compact([profile.position, profile.organization]), ', ');\n\n return (\n <>\n \n {`Profile ${type} | `}\n <Link href={`/admin/profiles/${profile.slug}`}>{profile.name}</Link>\n {positionAndOrganisation && <Description>{positionAndOrganisation}</Description>}\n \n \n Tools \n Configuration \n Create series \n \n window.location.reload()}\n />\n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport toastr from 'toastr';\nimport Validator from '../../../../shared/validator';\nimport Loading from '../../../../shared/loading';\nimport mutate from '../../../../shared/mutate';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport ConfirmationModal from '../../../shared/confirmation-modal';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport {\n getById, createOrUpdate, deleteById, archive, unarchive,\n} from '../../../../services/lwadmin/series/series-service';\n\nexport default class EditSeriesModal extends React.Component {\n static propTypes = {\n seriesDidSave: PropTypes.func,\n }\n\n static defaultProps = {\n seriesDidSave: null,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n titleRequired: state => !!state.series.title,\n slugRequired: state => !!state.series.slug,\n descriptionRequired: state => !!state.series.description,\n });\n this.state = {\n series: {\n title: '',\n slug: '',\n description: '',\n archived: false,\n },\n validations: this.validator.getValidations(),\n // eslint-disable-next-line react/no-unused-state\n slugHasBeenManuallyChanged: false,\n };\n\n this.handleTitleChange = this.handleTitleChange.bind(this);\n this.handleSlugChange = this.handleSlugChange.bind(this);\n this.handleDescriptionChange = this.handleDescriptionChange.bind(this);\n this.dismiss = this.dismiss.bind(this);\n this.deleteSeries = this.deleteSeries.bind(this);\n this.toggleArchive = this.toggleArchive.bind(this);\n this.present = this.present.bind(this);\n // eslint-disable-next-line max-len\n this.presentDeleteSeriesConfirmationModal = this.presentDeleteSeriesConfirmationModal.bind(this);\n }\n\n componentDidMount() {\n const self = this;\n\n this.$modal.click(function onClick(e) {\n if (e.target === this) self.dismiss();\n });\n }\n\n handleTitleChange(e) {\n const title = e.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.series.title = title;\n state.validations.titleRequiredValid = this.validator.validateTitleRequired(state);\n\n if (!state.slugHasBeenManuallyChanged) {\n state.series.slug = _.snakeCase(title);\n state.validations.slugRequiredValid = this.validator.validateSlugRequired(state);\n }\n }));\n }\n\n handleSlugChange(e) {\n const slug = e.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.slugHasBeenManuallyChanged = !!slug;\n state.series.slug = slug;\n state.validations.slugRequiredValid = this.validator.validateSlugRequired(state);\n }));\n }\n\n handleDescriptionChange(e) {\n const description = e.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.series.description = description;\n state.validations.descriptionRequired = this.validator.validateDescriptionRequired(state);\n }));\n }\n\n save(evt) {\n evt && evt.preventDefault && evt.preventDefault();\n\n this.setState(\n state => ({\n validations: this.validator.validateForm(state),\n }),\n () => {\n if (!this.validator.formValid) return;\n\n this.loading.start();\n createOrUpdate(this.state.series)\n .then(() => {\n this.dismiss();\n this.props.seriesDidSave && this.props.seriesDidSave();\n })\n .catch(e => {\n this.loading.stop();\n defaultOnErrorHandler(e, 'Error saving series');\n });\n },\n );\n }\n\n present(seriesId = null) {\n this.validator.resetValidation();\n this.setState({\n validations: this.validator.getValidations(),\n });\n this.$overlay.fadeIn();\n this.$modal.fadeIn();\n this.$titleInput.focus();\n\n if (seriesId === null) {\n this.setState({\n series: {\n title: '',\n slug: '',\n description: '',\n archived: false,\n },\n // eslint-disable-next-line react/no-unused-state\n slugHasBeenManuallyChanged: false,\n });\n } else {\n this.loading.start();\n getById(seriesId)\n .then(result => this.setState({\n series: _.pick(result.data, [\n 'id', 'title', 'slug', 'description', 'archived', 'number_of_wires',\n ]),\n // eslint-disable-next-line react/no-unused-state\n slugHasBeenManuallyChanged: true,\n }))\n .catch(e => defaultOnErrorHandler(e, 'Error loading series'))\n .finally(() => this.loading.stop());\n }\n }\n\n dismiss() {\n this.$overlay.fadeOut();\n this.$modal.fadeOut();\n }\n\n presentDeleteSeriesConfirmationModal() {\n this.deleteSeriesConfirmationModal.present();\n }\n\n deleteSeries() {\n this.loading.start();\n\n const numberOfWires = this.state.series.number_of_wires;\n\n deleteById(this.state.series.id)\n .then(() => {\n this.dismiss();\n this.props.seriesDidSave && this.props.seriesDidSave();\n toastr.clear();\n toastr.success(`Series has been deleted, ${numberOfWires} wires un-assigned`);\n })\n .catch(e => defaultOnErrorHandler(e, 'Error deleting this series'))\n .finally(() => this.loading.stop());\n }\n\n presentArchiveSeriesConfirmationModal() {\n this.toggleArchiveConfirmationModal.present();\n }\n\n toggleArchive() {\n this.loading.start();\n\n const wasArchived = this.state.series.archived;\n\n (wasArchived ? unarchive : archive)(this.state.series.id)\n .then(() => {\n this.setState(state => {\n state.series.archived = !state.series.archived;\n return state;\n });\n this.dismiss();\n this.props.seriesDidSave && this.props.seriesDidSave();\n toastr.clear();\n toastr.success(`Series has been ${wasArchived ? 'un' : ''}archived`);\n })\n .catch(e => defaultOnErrorHandler(e, `Error ${wasArchived ? 'un' : ''}archiving this series`))\n .finally(() => this.loading.stop());\n }\n\n render() {\n const action = this.state.series.archived ? 'Unarchive' : 'Archive';\n return (\n \n
\n );\n }\n}\n","import React from 'react';\nimport TolTag from '../../shared/tol-tag';\nimport RelativeTime from '../relative-time';\nimport Bookmark from '../bookmark';\nimport {\n Container,\n Secondary,\n Separator,\n TopLine,\n BottomLine,\n} from './styles';\nimport { captionProps, defaultCaptionProps } from './prop-types';\n\nexport default function Desktop({ wire }) {\n const {\n caption,\n campaign,\n timestamp,\n isSponsored,\n showBookmarkHint,\n } = wire;\n\n return (\n (this.$overlay = $(el))} onClick={() => (this.dismiss())} />\n
\n );\n }\n}\n","import theme from '../../../../assets/stylesheets/_settings.global.scss';\n\nexport default function commonProps() {\n return theme;\n}\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport { createCompany, updateCompany } from '../../../../services/lwadmin/company/company-service';\nimport CompaniesContext from './context';\nimport MemberSearchControl from './member-search-control';\n\nconst MemberTitle = styled.div`\n font-size: 16px;\n`;\n\nconst Members = styled.ul`\n list-style: none;\n padding: 0;\n margin-top: 8px;\n`;\n\nconst Member = styled.li`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n`;\n\n/* eslint-disable complexity */\nexport default function EditCompanyModal() {\n const {\n state: {\n showEditModal,\n currentEditingCompany,\n },\n dispatch,\n } = React.useContext(CompaniesContext);\n\n const [errors, setErrors] = React.useState({});\n\n const overlayRef = React.useRef();\n const modalRef = React.useRef();\n\n const dismiss = e => {\n e && e.preventDefault();\n setErrors({});\n dispatch({ type: 'dismissModal' });\n };\n\n const modalDismiss = e => {\n e && e.preventDefault();\n e.target === modalRef.current && dismiss();\n };\n\n React.useEffect(() => {\n if (showEditModal) {\n $(modalRef.current).fadeIn();\n $(overlayRef.current).fadeIn();\n } else {\n $(overlayRef.current).fadeOut();\n $(modalRef.current).fadeOut({ complete: () => dispatch({ type: 'dismissModal' }) });\n }\n }, [showEditModal, dispatch]);\n\n const handleInputChange = e => {\n e && e.preventDefault();\n\n setErrors({});\n\n const { name, value } = e.target;\n\n currentEditingCompany[name] = value;\n };\n\n const saveCompany = e => {\n e && e.preventDefault();\n\n if (currentEditingCompany.id) {\n updateCompany(currentEditingCompany).then(() => {\n dispatch({ type: 'companyUpdated', payload: currentEditingCompany });\n dismiss();\n }).catch(error => {\n setErrors(error.response.data);\n });\n } else {\n createCompany(currentEditingCompany).then(response => {\n dispatch({ type: 'companyCreated', payload: { id: response.data.id, ...currentEditingCompany } });\n dismiss();\n }).catch(error => {\n setErrors(error.response.data);\n });\n }\n };\n\n const removeMember = (e, member) => {\n e && e.preventDefault();\n dispatch({ type: 'removeMember', payload: member });\n };\n\n return (\n (this.$modal = $(el))}>\n \n \n \n (this.loading = c)}>\n \n \n \n \n \n \n \n
\n \n {!!this.state.category.id && Editing a category}\n {!!this.state.category.id || Create a new category}\n
\n\n \n {this.state.validations.nameRequiredValid || Category name is required}\n
\n\n \n
\n {!!this.state.category.id && (\n\n \n
\n )}\n \n \n
\n );\n}\n/* eslint-enable complexity */\n","import _ from 'lodash';\nimport React from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport styled from 'styled-components';\nimport Loading from '../../../../shared/loading';\nimport CompaniesContext from './context';\nimport { HeaderMixin } from '../../shared/styles';\nimport Upload from './brand-components/upload';\nimport Color from './brand-components/color';\nimport Preview from './brand-components/preview';\nimport useSaveBrand from './brand-components/save-brand-hook';\n\nconst SModal = styled(Modal)`\n & > article.horizontal {\n min-width: 700px;\n min-height: 550px;\n }\n`;\n\nconst Title = styled.h5`\n ${HeaderMixin};\n font-size: 14px;\n text-align: center;\n`;\n\nconst Body = styled(Modal.Body)`\n display: flex;\n margin: 20px 25px 40px 25px;\n flex-wrap: wrap;\n padding: 0 !important;\n height: 100%;\n`;\n\nconst BtnGroup = styled.div`\n margin: 25px;\n display: flex;\n justify-content: flex-end;\n`;\n\nexport default function BrandCompanyModal() {\n const {\n state: { showBrandModal, currentEditingCompany: company },\n dispatch,\n } = React.useContext(CompaniesContext);\n const [color, setColor] = React.useState(company.logoColor);\n const [logo, setLogo] = React.useState(company.logoPictureUrl);\n const [{ loading, complete, company: newCompany }, save] = useSaveBrand();\n\n const loadingRef = React.useRef();\n\n const dismiss = React.useCallback(e => {\n e && e.preventDefault();\n dispatch({ type: 'dismissModal' });\n }, [dispatch]);\n\n const saveHandler = e => {\n e && e.preventDefault();\n save(company, logo, color);\n };\n\n React.useEffect(() => {\n complete && dismiss();\n }, [complete, dismiss]);\n\n React.useEffect(() => {\n const c = _.pickBy(newCompany, (v, k) => k !== 'dirty');\n newCompany.dirty && dispatch({ type: 'companyUpdated', payload: c });\n }, [newCompany, dispatch]);\n\n React.useEffect(() => {\n setLogo(company.logoPictureUrl);\n setColor(company.logoColor || '');\n }, [company]);\n\n React.useEffect(() => {\n loadingRef.current && loadingRef.current.toggle(loading);\n }, [loading]);\n\n const safeLogo = _.get(logo, 'content', logo);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n {`${currentEditingCompany.id ? 'Editing' : 'Creating'} company`}\n
\n\n \n {errors.name && {errors.name}}\n
\n\n \n {errors.summary && {errors.summary}}\n
\n\n \n {errors.administrator_email && {errors.administrator_email}}\n
\n\n \n {errors.website_url && {errors.website_url}}\n
\n\n Team Members \n \n {currentEditingCompany.members.map(member => (\n \n {`${member.name} (${member.role})`}\n removeMember(e, member)}>Remove\n \n ))}\n \n
\n \n \n \n \n \n
\n \n (this.deleteSeriesConfirmationModal = el)}\n title=\"Delete series\"\n message=\"Are you sure you want to delete this series?\"\n onConfirm={this.deleteSeries}\n />\n (this.toggleArchiveConfirmationModal = el)}\n title={`${action} series`}\n message={`Are you sure you want to ${_.toLower(action)} this series?`}\n onConfirm={this.toggleArchive}\n />\n \n );\n }\n}\n","import styled from 'styled-components';\nimport dt from '../../../../../shared/theme';\n\nconst Aside = styled.aside`\n & > h2 {\n font: ${props => dt(props).theme.fontWeightDccc} 20px/24px ${props => dt(props).theme.fontFamilyBody};\n text-transform: uppercase;\n margin-bottom: 8px;\n }\n`;\n\nexport default Aside;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n align-items: center;\n padding: 16px 0;\n\n & > span {\n flex-grow: 2;\n margin-left: 18px;\n color: ${props => props.theme.bodyColor};\n font: ${props => props.theme.fontWeightRegular} 17px/17px ${props => props.theme.fontFamilyBody};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n }\n`;\n\nconst Img = styled.img`\n border-radius: 4px;\n border: 2px solid white;\n width: 32px;\n height: 32px;\n filter: drop-shadow(0px 4px 4px rgba(50, 50, 71, 0.08));\n`;\n\nexport default function Contributor({\n name, profilePictureUrl, isDefault, isCompanyProfile, organization,\n}) {\n const src = profilePictureUrl || window.getLivewireAssetPath('avatar-fallback.png');\n const nameToShow = isCompanyProfile && !!organization ? organization : name;\n\n return (\n \n 
\n {`${nameToShow}${isDefault ? ' (Default)' : ''}`}\n \n );\n}\n\nContributor.propTypes = {\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n isDefault: PropTypes.bool.isRequired,\n isCompanyProfile: PropTypes.bool,\n organization: PropTypes.string,\n};\n\nContributor.defaultProps = {\n profilePictureUrl: null,\n isCompanyProfile: false,\n organization: null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport classNames from 'classnames';\nimport Checkbox from '../../../../shared/checkbox';\nimport useFeatureWireStore from './state-hooks';\n\nconst Container = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n border-radius: 6px;\n padding: 12px 16px;\n width: 100%;\n\n &.has-border {\n border: 1px solid #D7DFE7;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst Primary = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Type = styled.div`\n color: ${props => props.theme.primaryColor};\n font-size: 11px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 16px;\n text-transform: uppercase;\n margin-bottom: 2px;\n`;\n\nconst Name = styled.div`\n font-size: 14px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 16px;\n text-transform: uppercase;\n margin-bottom: 2px;\n`;\n\nconst Company = styled.div`\n color: ${props => props.theme.secondaryColor};\n font-size: 14px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n line-height: 16px;\n`;\n\nexport default function Option({ featureable, border }) {\n const {\n name,\n company,\n type,\n } = featureable;\n\n const set = useFeatureWireStore(state => state.set);\n const selected = useFeatureWireStore(state => state.selectedFeatureable);\n const isSelected = !!_.find(selected, featureable);\n\n const toggleSelection = e => {\n e && e.preventDefault();\n\n let newSelected;\n\n if (isSelected) {\n const index = _.findIndex(selected, featureable);\n newSelected = [\n ..._.take(selected, index),\n ..._.takeRight(selected, selected.length - index - 1),\n ];\n } else {\n newSelected = [...selected, featureable];\n }\n\n set(state => {\n state.selectedFeatureable = newSelected;\n });\n };\n\n return (\n \n \n {type} \n {name} \n {company} \n \n \n );\n}\n\nOption.propTypes = {\n featureable: PropTypes.shape({\n name: PropTypes.string.isRequired,\n company: PropTypes.string,\n type: PropTypes.string.isRequired,\n }).isRequired,\n border: PropTypes.bool,\n};\n\nOption.defaultProps = {\n border: false,\n};\n","import axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nexport default function useGetStockCodes() {\n return useAxios({\n cache: { ignoreCache: true },\n url: '/api/v1/lwadmin/stock_codes',\n method: 'GET',\n }, { manual: true });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { Link } from '../../shared/styles';\nimport {\n Button,\n Container,\n Row,\n Separator,\n SuccessMessage,\n} from '../../common/form';\nimport { propTypes, defaultProps } from '../prop-types';\nimport {\n createFund,\n updateFund,\n setMemberRole,\n unsetMembersRoles,\n usePostQanda,\n useGetFundNetAssetsFromDataProvider,\n useGetFundFeesFromDataProvider,\n useGetFundPerformanceFromDataProvider,\n} from '../../../../services/lwadmin/fund/fund-service';\nimport useGetQandasByFund from '../../../../services/funds/qanda-service';\nimport { useGetCompanies } from '../../../../services/lwadmin/company/company-service';\nimport useGetFundAssetClasses from '../../../../services/lwadmin/fund-asset-class/fund-asset-class-service';\nimport useGetStockCodes from '../../../../services/lwadmin/stock-code/stock-code-service';\nimport { getAllSeries } from '../../../../services/lwadmin/series/series-service';\nimport FundContext, { reducer, buildDefaultState } from './context';\nimport Partnership from './partnership';\nimport BasicFields from './basic-fields';\nimport FundFacts from './fund-facts';\nimport FundNetAssets from './fund-net-assets';\nimport DpFundNetAssets from './dp-fund-net-assets';\nimport FundPerformance from './fund-performance';\nimport DpFundPerformance from './dp-fund-performance';\nimport FundFees from './fund-fees';\nimport DpFundFees from './dp-fund-fees';\nimport FilesAndLinks from './files-and-links';\nimport FeaturedWires from './featured-wires';\nimport Qanda from './qanda';\nimport DataReviews from './data-reviews';\nimport ManualOverrides from './manual-overrides';\nimport Errors from './errors';\nimport withNameTextarea from './hoc-textarea';\n\nconst SContainer = styled(Container)`\n padding-bottom: 40px;\n`;\n\nconst ButtonRow = styled(Row)`\n justify-content: flex-end;\n`;\n\nconst SButton = styled(Button)`\n margin-left: 16px;\n`;\n\nconst Disclaimer = withNameTextarea('disclaimer');\n\nexport default function Form({ fund, questions, autoSyncData }) {\n const {\n id,\n publicUrl,\n dataReviews,\n } = fund;\n const [state, dispatch] = React.useReducer(reducer, buildDefaultState(fund));\n const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n const [saving, setSaving] = React.useState(false);\n const [gettingPerformance, setGettingPerformance] = React.useState(false);\n const [gettingFees, setGettingFees] = React.useState(false);\n const [gettingNetAssets, setGettingNetAssets] = React.useState(false);\n\n const [, getCompanies] = useGetCompanies();\n const [, getFundAssetClasses] = useGetFundAssetClasses();\n const [, getStockCodes] = useGetStockCodes();\n const [, getQandas] = useGetQandasByFund(false);\n const [, createQanda] = usePostQanda();\n const [, getPerformanceFromDataProvider] = useGetFundPerformanceFromDataProvider(state.fund.id);\n const [, getFeesFromDataProvider] = useGetFundFeesFromDataProvider(state.fund.id);\n const [, getNetAssetsFromDataProvider] = useGetFundNetAssetsFromDataProvider(state.fund.id);\n\n const getPerformance = e => {\n e && e.preventDefault();\n\n setGettingPerformance(true);\n\n getPerformanceFromDataProvider().then(resp => {\n setGettingPerformance(false);\n dispatch({ type: 'setDpPerformance', payload: resp.data });\n });\n };\n\n const getFees = e => {\n e && e.preventDefault();\n\n setGettingFees(true);\n\n getFeesFromDataProvider().then(resp => {\n setGettingFees(false);\n dispatch({ type: 'setDpFees', payload: resp.data });\n });\n };\n\n const getNetAssets = e => {\n e && e.preventDefault();\n\n setGettingNetAssets(true);\n\n getNetAssetsFromDataProvider().then(resp => {\n setGettingNetAssets(false);\n dispatch({ type: 'setDpNetAssets', payload: resp.data });\n });\n };\n\n const saveFund = e => {\n e && e.preventDefault();\n\n const f = state.fund;\n const fType = _.get(f, 'fundType.value');\n const payload = {\n name: f.name,\n fund_type: fType,\n apir_code: f.apirCode,\n data_provider_id: f.dataProviderId,\n isin: f.isin,\n stock_code: _.get(f, 'stockCode.value'),\n inception_date: f.inceptionDate,\n objective: f.objective,\n geographical_focus: f.geographicalFocus,\n investment_horizon: _.get(f, 'investmentHorizon.value'),\n minimum_investment: f.minimumInvestment,\n fund_size: f.fundSize,\n fund_size_date: f.fundSizeDate,\n currency: f.currency,\n legal_structure: f.legalStructure,\n domicile: f.domicile,\n invest_url: f.investUrl,\n fund_page_url: f.fundPageUrl,\n pds_file_url: !f.pdsFileUrl && autoSyncData ? f.dpPdsFileUrl : f.pdsFileUrl,\n monthly_update_file_url: f.monthlyUpdateFileUrl,\n tmd_file_url: f.tmdFileUrl,\n monthly_update_url_type: _.get(f, 'monthlyUpdateUrlType.value'),\n disclaimer: f.disclaimer,\n company_id: _.get(f, 'company.value'),\n fund_asset_class_id: _.get(f, 'fundAssetClass.value'),\n member_ids: (f.members || []).map(member => member.value),\n featured_wire_urls: _.compact(f.featuredWireUrls),\n performance: f.performance,\n management_fee: f.managementFee,\n performance_fee_charged: _.get(f, 'performanceFeeCharged.value'),\n performance_fee_pds: f.performanceFeePds,\n performance_fee: f.performanceFee,\n performance_fee_methodology: f.performanceFeeMethodology,\n total_cost_ratio: f.totalCostRatio,\n financial_year_end_fees_date: f.financialYearEndFeesDate,\n buy_spread: f.buySpread,\n sell_spread: f.sellSpread,\n pds_fees_date: f.pdsFeesDate,\n latest_prospectus_date: f.latestProspectusDate,\n day_end_entry_price: f.dayEndEntryPrice,\n day_end_exit_price: f.dayEndExitPrice,\n day_end_nav_price: f.dayEndNavPrice,\n day_end_pricing_update_date: f.dayEndPricingUpdateDate,\n day_end_market_price: f.dayEndMarketPrice,\n day_end_market_price_date: f.dayEndMarketPriceDate,\n day_end_nav: f.dayEndNav,\n day_end_nav_date: f.dayEndNavDate,\n fund_investor_vehicle_type: f.fundInvestorVehicleType,\n dp_category: f.dpFundCategory,\n wholesale: f.wholesale,\n series_ids: (f.series || []).map(s => s.value),\n };\n\n setSaving(true);\n const createOrUpdate = f.id ? updateFund(f.id, payload) : createFund(payload);\n\n createOrUpdate.then(async resp => {\n const createdId = _.get(resp, 'data.id');\n const updatedIsin = _.get(resp, 'data.isin') || '';\n const updatedDpPdsFileUrl = _.get(resp, 'data.dpPdsFileUrl') || '';\n if (_.get(state, 'fund.isin') !== updatedIsin) {\n dispatch({ type: 'setIsin', payload: updatedIsin });\n }\n if (_.get(state, 'fund.dpPdsFileUrl') !== updatedDpPdsFileUrl) {\n dispatch({ type: 'setDpPdsFileUrl', payload: updatedDpPdsFileUrl });\n }\n\n if (state.manager) {\n await setMemberRole(f.id || createdId, state.manager.value, 'manager');\n } else if (f.id) {\n unsetMembersRoles(f.id);\n }\n\n if (!f.id) {\n dispatch({ type: 'setId', payload: createdId });\n const answered = state.qandas.filter(\n // no type no Q&A\n q => fType && _.indexOf(q.fundTypes, fType) >= 0 && q.answer !== null,\n );\n if (answered.length) {\n const qandas = await Promise.all(answered.map(qanda => createQanda(createdId, qanda)));\n dispatch({\n type: 'setQandaIds',\n payload: answered.map((d, i) => ({ id: qandas[i].id, questionId: d.questionId })),\n });\n }\n }\n setSaving(false);\n setShowSuccessMessage(true);\n dispatch({ type: 'setErrors', payload: {} });\n }).catch(error => {\n setSaving(false);\n setShowSuccessMessage(false);\n dispatch({ type: 'setErrors', payload: _.get(error, 'response.data', {}) });\n });\n };\n\n useChangeAwareEffect(({ isMount }) => {\n if (!isMount) {\n return;\n }\n getCompanies().then(({ data }) => {\n data && dispatch({ type: 'setCompanyOptions', payload: data });\n });\n getFundAssetClasses().then(({ data }) => {\n data && dispatch({ type: 'setFundAssetClassOptions', payload: data });\n });\n getStockCodes().then(({ data }) => {\n data && dispatch({ type: 'setStockCodeOptions', payload: data });\n });\n getAllSeries('active').then(({ data }) => {\n data && dispatch({ type: 'setSeriesOptions', payload: data });\n });\n if (id) {\n getQandas(id).then(({ data }) => {\n data && dispatch({ type: 'setQandas', payload: { questions, answers: data } });\n });\n } else {\n dispatch({ type: 'setQandas', payload: { questions, answers: null } });\n }\n\n if (autoSyncData) {\n getPerformance();\n getFees();\n getNetAssets();\n saveFund();\n dispatch({ type: 'setPdsfileurl', payload: state.fund.dpPdsFileUrl });\n }\n }, {});\n\n React.useEffect(() => {\n setShowSuccessMessage(false);\n dispatch({ type: 'setErrors', payload: {} });\n }, [state.fund]);\n\n const getLatestPDS = e => {\n e && e.preventDefault();\n\n dispatch({ type: 'setPdsfileurl', payload: state.fund.dpPdsFileUrl });\n\n window.open(state.fund.dpPdsFileUrl, '_blank', 'noreferrer');\n };\n\n const partnership = _.get(state, 'fund.company.partnership');\n\n return (\n \n \n View\n Fund successfully saved }\n \n \n Get Latest PDS\n \n \n { gettingNetAssets ? 'Getting Net Assets' : 'Get Net Assets' }\n \n \n { gettingFees ? 'Getting Fees' : 'Get Fees' }\n \n \n { gettingPerformance ? 'Getting Performance' : 'Get Performance' }\n \n \n {saving ? 'Saving' : 'Save'}\n \n \n \n \n );\n}\n\nForm.propTypes = propTypes;\nForm.defaultProps = defaultProps;\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useSeriesConfigurationStore = create(set => ({\n config: {\n rulesOfInvestingPodcastAppleRating: null,\n },\n errors: {},\n set: fn => set(produce(fn)),\n}));\n\nexport default useSeriesConfigurationStore;\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nconst prefix = '/api/v1/profiles/me/contributor/wires';\n\nexport function useGetFeatureableWires() {\n const common = query => ({ params: { query } });\n const [state, q] = useAxios({\n url: `${prefix}/featureable`,\n method: 'GET',\n }, { manual: true });\n const executeQuery = query => q(common(query));\n return [state, executeQuery];\n}\n\nexport function useGetFeaturedWires() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${prefix}/featured`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function usePostFeaturedWires() {\n const common = (wireId, oldWireId) => ({\n data: {\n wire_id: wireId,\n ...(oldWireId ? { old_wire_id: oldWireId } : {}),\n },\n });\n\n const [state, q] = useAxios({\n url: `${prefix}/featured`,\n method: 'POST',\n }, { manual: true });\n const executeQuery = (newId, oldId) => q(common(newId, oldId));\n return [state, executeQuery];\n}\n\nexport function useDeleteUnfeatureWire(wireId) {\n return useAxios({\n url: `/api/v1/profiles/me/contributor/wires/featured/wire/${wireId}`,\n method: 'DELETE',\n }, { manual: true });\n}\n","import _ from 'lodash';\nimport axios from 'axios';\n\nconst base = '/api/v1/lwadmin/series';\n\nexport function getAllSeries(filter) {\n return axios.get(`${base}`, {\n cache: { ignoreCache: true },\n params: { filter: filter || 'all' },\n });\n}\n\nexport function getById(id) {\n return axios.get(`${base}/${id}`, { cache: { ignoreCache: true } });\n}\n\nexport function deleteById(id) {\n return axios.delete(`${base}/${id}`);\n}\n\nexport function createOrUpdate(series) {\n return axios.post(\n `${base}/${_.get(series, 'id', '')}`,\n _.pick(series, ['title', 'slug', 'description']),\n );\n}\n\nexport function archive(id) {\n return axios.post(`${base}/${id}/archive`);\n}\n\nexport function unarchive(id) {\n return axios.post(`${base}/${id}/unarchive`);\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport {\n FormField,\n HelpBlock,\n Textarea,\n Label,\n Row,\n} from './form';\n\nexport default function withNameTextarea(objectName, name, store, label) {\n const kebab = _.kebabCase(name);\n const capitalize = _.capitalize(name);\n const snake = _.snakeCase(name);\n\n function PlainInput() {\n const set = store(state => state.set);\n const value = store(state => state[objectName][name]);\n const errors = store(state => state.errors);\n\n const onChange = e => {\n e && e.preventDefault();\n\n const v = _.get(e, 'target.value', '');\n\n set(state => {\n state[objectName][name] = v;\n });\n };\n\n return (\n \n \n \n {errors[snake]} }\n \n
\n );\n }\n\n PlainInput.displayName = capitalize;\n\n return PlainInput;\n}\n","import produce from 'immer';\nimport create from 'zustand';\n\nconst useContentFormatTypesStore = create(set => ({\n contentFormatTypes: [],\n set: fn => set(produce(fn)),\n}));\n\nexport default useContentFormatTypesStore;\n","import styled from 'styled-components';\n\nimport { Column } from '../../shared/styles';\n\nconst NameColumn = styled(Column)`\n width: 30%;\n`;\n\nconst UrlColumn = styled(Column)`\n width: 40%;\n`;\n\nconst ActionColumn = styled(Column)`\n width: 30%;\n`;\n\nexport {\n ActionColumn,\n NameColumn,\n UrlColumn,\n};\n","import _ from 'lodash';\nimport axios from 'axios';\nimport csrfToken from '../../../shared/meta';\n\nconst base = '/api/v1/lwadmin/categories';\n\nexport function getAll() {\n return axios.get(base, { cache: { ignoreCache: true } });\n}\n\nexport function getById(id) {\n return axios.get(`${base}/${id}`, { cache: { ignoreCache: true } });\n}\n\nexport function createOrUpdate(category) {\n const url = category.id ? `${base}/${category.id}` : base;\n return axios.post(\n url,\n _.pick(category, ['id', 'name', 'description']),\n { headers: { 'X-CSRF-TOKEN': csrfToken() } },\n );\n}\n\nexport function regenSlug(id) {\n return axios.post(\n `${base}/${id || ''}/regenerate_slug`,\n null,\n { headers: { 'X-CSRF-TOKEN': csrfToken() } },\n );\n}\n","export default function getScrollTop() {\n return document.body.scrollTop || document.documentElement.scrollTop;\n}\n","// Action Cable provides the framework to deal with WebSockets in Rails.\n// You can generate new channels where WebSocket features live using\n// the `rails generate channel` command.\n\nimport { createConsumer } from '@rails/actioncable';\n\nexport default createConsumer();\n","import consumer from './consumer';\n\nconst subscribe = (channel, options) => {\n const { connected, received } = options;\n\n return consumer.subscriptions.create(\n channel,\n {\n connected() {\n connected && connected();\n },\n received(data) {\n received && received(data);\n },\n },\n );\n};\n\nconst disconnect = () => consumer.disconnect();\n\nexport {\n subscribe,\n disconnect,\n};\n","import _ from 'lodash';\nimport defaultOnErrorHandler from './default-on-error-handler';\nimport debounceAction from './debounce-action';\nimport shareTo from '../services/wire/share-service';\n\nconst validMedium = ['wire-page-share', 'publisher-prompt', 'scheduled-prompt'];\n\nconst socialMedia = ['Twitter', 'Facebook', 'Linked_In'];\n\nfunction clickToShare({ wireId, source, medium }) {\n const validSources = _.map(socialMedia, _.toLower);\n if (!_.includes(validSources, source) || !_.includes(validMedium, medium)) {\n return;\n }\n\n const action = debounceAction({\n getCurrentValue: () => Date.now(),\n actionPromise: () => shareTo(wireId, source, medium),\n onNext: d => _.get(d, 'data.share_url') && window.open(d.data.share_url, '_blank'),\n onError: e => defaultOnErrorHandler(e, 'Error sharing wire'),\n });\n action();\n}\n\nexport { clickToShare, socialMedia };\n","import axios from 'axios';\n\nexport default function shareTo(wireId, source, medium) {\n return axios.get(\n `/api/v1/wire/${wireId}/share/source/${source}/medium/${medium}`,\n { cache: { ignoreCache: true } },\n );\n}\n","import _ from 'lodash';\nimport localforage from 'localforage';\n\nconst DEFERRED_SEARCH_EVENT_KEY = 'deferred-search-event';\n\n// Due to this issue:\n// https://github.com/localForage/localForage/issues/843\n// We cannot use the default driver order, which prefers INDEXEDDB.\n// LOCALSTORAGE is confirmed to work on Firefox/Chrome/Safari/Opera\nconst eventStore = localforage.createInstance({\n driver: localforage.LOCALSTORAGE,\n name: 'livewire_stat_event',\n storeName: 'deferred',\n version: _.get(window, 'Livewire.version', '1.0'),\n});\n\nconst cacheStore = localforage.createInstance({\n driver: localforage.LOCALSTORAGE,\n name: 'livewire_cache',\n storeName: 'api',\n version: _.get(window, 'Livewire.version', '1.0'),\n});\n\nexport {\n DEFERRED_SEARCH_EVENT_KEY,\n cacheStore,\n eventStore,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport MicroProfile from '../micro-profiles/micro-profile';\nimport ErrorBoundary from '../../shared/error-boundary';\nimport Loading from '../../shared/loading';\n\nexport default class FollowingList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n contributors: props.contributors,\n };\n }\n\n handleRemoveUnfollowedContributor(index) {\n this.setState(prevState => ({\n contributors: [\n ...prevState.contributors.slice(0, index),\n ...prevState.contributors.slice(index + 1),\n ],\n }));\n }\n\n renderContributor(contributor, index) {\n const keys = [\n 'id', 'name', 'organization', 'position', 'slug', 'first_name',\n 'last_name', 'profile_picture_url', 'areas_of_expertise',\n 'active_partnership',\n ];\n return (\n _.camelCase(k)),\n canPostWires: true,\n }}\n isProfileFollowedByCurrentUser\n onUnfollow={() => this.handleRemoveUnfollowedContributor(index)}\n />\n );\n }\n\n render() {\n return (\n \n (this.loading = el)} variant=\"full-page\">\n \n {this.state.contributors.map((c, index) => this.renderContributor(c, index))}\n {!this.state.contributors.length && (\n \n \n \n );\n }\n}\n\nFollowingList.propTypes = {\n contributors: PropTypes.arrayOf(PropTypes.shape({})),\n};\n\nFollowingList.defaultProps = {\n contributors: [],\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport Main from './audience-components/main';\nimport { recordStatisticsEvent } from '../../services/statistics-service';\n\nexport default function Audience(props) {\n const common = commonProps();\n\n React.useEffect(() => {\n recordStatisticsEvent({\n event: 'audience_report_page_view',\n statisticable: 'profile',\n id: _.get(window, 'Livewire.currentUser.profile.id'),\n });\n }, []);\n\n if (!props.partnership) {\n return null;\n }\n\n return (\n \n \n \n );\n}\n\nAudience.propTypes = {\n partnership: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n cachedAnalyticsDataUrls: PropTypes.shape({\n followersDataUrl: PropTypes.string,\n contributorRankingDataUrl: PropTypes.string,\n investorTypesDataUrl: PropTypes.string,\n }),\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n }),\n investorTypes: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n contributorCount: PropTypes.number.isRequired,\n};\n\nAudience.defaultProps = {\n partnership: null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport DashboardContext, { reducer, buildDefaultState } from './dashboard-components/context';\nimport Main from './dashboard-components/main';\nimport { recordStatisticsEvent } from '../../services/statistics-service';\n\nexport default function Dashboard(props) {\n const common = commonProps();\n const [state, dispatch] = React.useReducer(\n reducer,\n buildDefaultState(_.get(props.partnership, 'contributors', [])),\n );\n\n React.useEffect(() => {\n recordStatisticsEvent({\n event: 'performance_report_page_view',\n statisticable: 'profile',\n id: _.get(window, 'Livewire.currentUser.profile.id'),\n });\n }, []);\n\n if (!props.partnership) {\n return null;\n }\n\n return (\n \n \n \n \n \n );\n}\n\nDashboard.propTypes = {\n partnership: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n cachedAnalyticsDataUrls: PropTypes.shape({\n performanceDataFromDatabaseUrl: PropTypes.string,\n }),\n contributors: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n createdAt: PropTypes.string,\n })).isRequired,\n }),\n mobileImageUrl: PropTypes.string.isRequired,\n newDashboard: PropTypes.bool.isRequired,\n};\n\nDashboard.defaultProps = {\n partnership: null,\n};\n","import _ from 'lodash';\nimport postal from 'postal';\nimport React from 'react';\nimport SignInButton from '../layout/navbar/sign-in-button';\nimport breakpoints from '../../shared/breakpoints';\nimport getScrollTop from '../../shared/get-scroll-top';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nexport default class CampaignHeader extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.showSignUpModal = this.showSignUpModal.bind(this);\n }\n\n componentDidMount() {\n let onTabletOrMobile = breakpoints.upTo_medium();\n\n function updateOpacity() {\n const $header = $('header.campaign-header');\n const fadeTo = (() => {\n if (breakpoints.upTo_medium()) return 1;\n\n const scrollTop = getScrollTop();\n const headerHeight = $header.height();\n\n if (scrollTop > headerHeight) return 1;\n\n return scrollTop / headerHeight;\n })();\n const $lightLogoImg = $('#lightLogoImg');\n const $darkLogoImg = $('#darkLogoImg');\n\n $lightLogoImg.css('opacity', 1 - fadeTo);\n $darkLogoImg.css('opacity', fadeTo);\n $header.css({\n 'background-color': `rgba(255,255,255,${fadeTo})`,\n 'border-bottom': `1px solid rgba(255,255,255,${fadeTo})`,\n 'box-shadow': `0 2px 5px rgba(0,0,0,${fadeTo / 2})`,\n });\n }\n\n $(window).on('scroll', _.throttle(() => updateOpacity(), 1000 / 60));\n $(window).on('resize', _.throttle(() => {\n updateOpacity();\n\n const currentlyOnTabletOrMobile = breakpoints.upTo_medium();\n\n if (currentlyOnTabletOrMobile !== onTabletOrMobile) {\n this.forceUpdate();\n }\n\n onTabletOrMobile = currentlyOnTabletOrMobile;\n }, 1000 / 60));\n updateOpacity();\n }\n\n // eslint-disable-next-line class-methods-use-this\n showSignUpModal(event) {\n if (event) event.preventDefault();\n\n postal.publish({\n channel: 'commands.campaigns',\n topic: 'present-sign-up-modal',\n });\n }\n\n render() {\n const onTabletOrMobile = breakpoints.upTo_medium();\n\n return (\n \n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport Header from './series-lead-elements/header';\nimport WhatIsInside from './series-lead-elements/what-is-inside';\nimport Companies from './series-lead-elements/companies';\nimport Form from './series-lead-elements/form';\nimport Footer from './series-lead-elements/footer';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\n\nconst Div = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport default function Root(props) {\n const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });\n const themeState = {\n ...props,\n ...theme,\n isPortrait,\n };\n\n const header = {\n title: 'How to build a bullet proof income portfolio',\n buttonText: 'download my ebook',\n desc: 'This ebook will educate you about the different income generating '\n + 'asset classes, provide expert views on the state of play in each asset '\n + 'class, and demonstrate how they can be combined to create an income '\n + 'strategy.',\n };\n\n const inside = {\n title: 'Learn to combine asset classes to generate income',\n desc: 'Record low interest rates mean the returns from many income '\n + 'generating assets are too skinny to live off. So, to provide a '\n + 'roadmap, in this special report Livewire provide an overview of each '\n + 'of the asset classes listed below, as well as some of the pros and '\n + 'cons of each.',\n bullets: [\n 'Equities (Australia)',\n 'Equities (International)',\n 'Australian Government Bonds (AGBS)',\n 'Corporate Bonds',\n 'Unlisted Real Assets',\n 'Residential Mortgage Backed Securities (RMBS)',\n 'Other Debt Assets',\n 'Hybrids',\n 'Alternatives',\n ],\n };\n\n return (\n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nRoot.propTypes = {\n logo: PropTypes.string.isRequired,\n cover: PropTypes.string.isRequired,\n ebook: PropTypes.arrayOf(PropTypes.string).isRequired,\n partners: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport Header from './series-lead-elements/header';\nimport WhatIsInside from './series-lead-elements/what-is-inside';\nimport Companies from './series-lead-elements/companies';\nimport Form from './series-lead-elements/form';\nimport Footer from './series-lead-elements/footer';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\n\nconst Div = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport default function Root(props) {\n const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });\n const themeState = {\n ...props,\n ...theme,\n isPortrait,\n };\n\n const header = {\n title: 'The one thing investors can’t ignore in 2020',\n buttonText: 'download my 2020 ebook',\n desc: 'We reached out to 45 of Australia’s top fund managers and analysts '\n + 'and asked them to pick one idea for the year ahead and distill it '\n + 'into just a few paragraphs. From equities to fixed income, Macro to '\n + 'alternatives, Livewire’s 2020 eBook delivers some eye-opening insights '\n + 'across a variety of asset classes to help investors navigate the year '\n + 'ahead.',\n };\n\n const inside = {\n title: 'Learn from Australia’s best fund managers',\n desc: '2019 saw a year of unpredictability. From trade wars, to failed '\n + 'IPOs, to the boom of tech stocks – it was never easy to see what was '\n + 'around the corner. So, will 2020 deliver the same unpredictability? '\n + 'Livewire has teamed up with our contributors to deliver expert '\n + 'insights on the year to come, across a variety of asset classes '\n + 'including:',\n bullets: [\n 'Australian equities',\n 'Income',\n 'Real estate',\n 'Global equities',\n 'Fixed Income',\n 'Alternatives',\n 'Infrastructure',\n 'Disruption',\n 'Macro',\n 'Multi-Asset',\n ],\n };\n\n return (\n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nRoot.propTypes = {\n logo: PropTypes.string.isRequired,\n cover: PropTypes.string.isRequired,\n ebook: PropTypes.arrayOf(PropTypes.string).isRequired,\n partners: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { Img } from 'react-image';\n\nconst Image = styled(Img)`\n width: ${props => (props.theme.isPortrait ? 50 : 20)}vw;\n`;\n\nexport default function Logo() {\n const { logo } = React.useContext(ThemeContext);\n\n return \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nRoot.propTypes = {\n logo: PropTypes.string.isRequired,\n cover: PropTypes.string.isRequired,\n ebook: PropTypes.arrayOf(PropTypes.string).isRequired,\n partners: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import postal from 'postal';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport debounceAction from '../../shared/debounce-action';\nimport defaultOnErrorHandler from '../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../shared/error-boundary';\nimport Loading from '../../shared/loading';\nimport assignWireCategory from '../../services/wire/category-service';\nimport { getAllCategories } from '../../services/categories-service';\n\nexport default class EditorsAssignCategoryModal extends React.Component {\n static propTypes = {\n onDismiss: PropTypes.func,\n };\n\n static defaultProps = {\n onDismiss: null,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n categories: [],\n wire: null,\n assignedCategoryId: null,\n show: false,\n };\n\n this.saveAssignedCategoryId = debounceAction({\n getCurrentValue: () => this.state.assignedCategoryId,\n actionPromise: () => assignWireCategory(\n this.state.wire.wire_id,\n this.state.assignedCategoryId,\n ),\n onBeforeAction: () => this.assignedCategoryIdLoading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error updating assigned category'),\n onAfterAction: () => this.assignedCategoryIdLoading.stop(),\n });\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'commands.categories',\n topic: 'assign-wire-category',\n callback: data => this.present(data.wire),\n });\n }\n\n handleAssignedCategoryChange(e) {\n const assignedCategoryId = e.target.value;\n\n this.setState({\n assignedCategoryId,\n }, () => this.saveAssignedCategoryId());\n }\n\n dismiss() {\n this.setState({ show: false });\n this.props.onDismiss && this.props.onDismiss();\n }\n\n present(wire) {\n this.setState({\n wire,\n assignedCategoryId: wire.category_id,\n show: true,\n }, () => {\n this.mainLoading.start();\n getAllCategories()\n .then(result => this.setState({ categories: result.data.categories }))\n .catch(e => defaultOnErrorHandler(e, 'Error loading categories'))\n .finally(() => this.mainLoading.stop());\n });\n }\n\n render() {\n return (\n \n this.dismiss()}\n >\n \n \n \n (this.mainLoading = el)}>\n \n \n \n \n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { propTypes } from './wire-comment-components/prop-types';\nimport DesktopVariant from './wire-comment-components/desktop-variant';\nimport MobileVariant from './wire-comment-components/mobile-variant';\nimport { useIsMobile } from '../../shared/theme';\n\nexport default function WireComment(props) {\n const isMobile = useIsMobile();\n\n if (props.variant === 'mobile' && isMobile) {\n return \n \n );\n}\n\nContributor.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n joinedCurrentRoleAt: PropTypes.string,\n recentCareer: PropTypes.shape({\n organisation: PropTypes.string,\n position: PropTypes.string,\n joinedAt: PropTypes.string,\n leftAt: PropTypes.string,\n }),\n joinedIndustryAt: PropTypes.string,\n accred: PropTypes.string,\n countryName: PropTypes.string,\n cityName: PropTypes.string,\n profilePictureUrl: PropTypes.string,\n headlineGrab: PropTypes.string,\n blurb: PropTypes.string,\n investmentPhilosophy: PropTypes.arrayOf(PropTypes.string),\n linkedinUrl: PropTypes.string,\n twitterUrl: PropTypes.string,\n activePartnership: PropTypes.shape({\n id: PropTypes.number,\n }),\n areasOfExpertise: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n slug: PropTypes.string,\n name: PropTypes.string,\n })),\n canPostWires: PropTypes.bool,\n company: PropTypes.shape({\n name: PropTypes.string,\n logo: PropTypes.string,\n color: PropTypes.string,\n }),\n fund: PropTypes.shape({\n name: PropTypes.string,\n type: PropTypes.string,\n publicUrl: PropTypes.string,\n }),\n activeFeatures: PropTypes.arrayOf(PropTypes.string),\n }).isRequired,\n stats: PropTypes.shape({\n viewsCount: PropTypes.number,\n followersCount: PropTypes.number,\n wiresCount: PropTypes.number,\n since: PropTypes.string,\n }).isRequired,\n isProfileFollowedByCurrentUser: PropTypes.bool.isRequired,\n isOfCurrentUser: PropTypes.bool.isRequired,\n investorTypes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n ).isRequired,\n viewAllWiresLink: PropTypes.string,\n};\n\nContributor.defaultProps = {\n viewAllWiresLink: '',\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeContext } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport TruncatedEllipsis from '../../shared/truncated-ellipsis';\nimport WireCaption from '../../wire/wire-caption';\nimport { recordStatisticsEvent } from '../../../services/statistics-service';\nimport { useGetPaginatedWiresMentioningContributor } from '../../../services/wires/from-contributor-service';\nimport {\n SectionContainer,\n SectionTitle,\n SectionSubTitle,\n SectionDetails,\n} from '../../shared/sectionable/styles';\nimport Tail from '../common/styles';\nimport { scrollIfHashMatch } from '../../shared/navigation/utils';\nimport useContributorStateStore from '../common/contributor-state-hook';\n\nconst WiresContainer = styled.ul`\n display: flex;\n flex-direction: row;\n list-style: none;\n padding: 0;\n margin: 0 0 40px;\n\n &:last-of-type {\n margin: 0;\n }\n\n ${props => props.theme.isMobileOrTablet && `\n flex-direction: column;\n `};\n`;\n\nconst Wire = styled.li`\n min-width: 33.33%;\n padding-right: 20px;\n\n &.fixed-width {\n width: 33.33%;\n }\n\n ${props => props.theme.isMobileOrTablet && `\n margin-bottom: 32px;\n padding: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &.fixed-width {\n width: 100%;\n }\n `};\n`;\n\nconst CaptionRow = styled.div`\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: 800;\n font-size: 12px;\n line-height: 120%;\n text-transform: uppercase;\n\n & > span.separator {\n font-size: 16px;\n font-weight: ${props => props.theme.fontWeightBolder};\n }\n`;\n\nconst WireTitle = styled.a`\n display: block;\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: 800;\n font-size: 16px;\n line-height: 120%;\n text-transform: uppercase;\n margin-top: 4px;\n\n &:hover {\n color: ${props => props.theme.bodyColor};\n }\n`;\n\nconst Author = styled.a`\n display: block;\n color: ${props => props.theme.secondaryColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: 800;\n text-transform: uppercase;\n font-size: 14px;\n line-height: 120%;\n margin-top: 8px;\n\n &:hover {\n color: ${props => props.theme.secondaryColor};\n }\n`;\n\nconst Organisation = styled.div`\n color: ${props => props.theme.secondaryColor};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 12px;\n line-height: 120%;\n margin-top: 4px;\n`;\n\nconst INIT_WIRE_NUMBER = 3;\nconst MAX_WIRE_NUMBER = 9;\n\nconst sectionName = 'mentions';\n\nexport default function Mention({ profile }) {\n const { isXLarge, isMobileOrTablet } = React.useContext(ThemeContext);\n const {\n id, slug, name, organization, isCompanyProfile,\n } = profile;\n const [{ data }, getMentionWires] = useGetPaginatedWiresMentioningContributor(id);\n const [wires, setWires] = React.useState([]);\n const [total, setTotal] = React.useState(0);\n const [showViewMore, setShowViewMore] = React.useState(false);\n const [showViewAll, setShowViewAll] = React.useState(false);\n const set = useContributorStateStore(state => state.set);\n\n React.useEffect(() => {\n getMentionWires(1);\n }, [getMentionWires]);\n\n React.useEffect(() => {\n const totalCount = _.get(data, 'total') || 0;\n setTotal(totalCount);\n setShowViewMore(totalCount > INIT_WIRE_NUMBER);\n setWires(_.get(data, 'wires') || []);\n set(state => {\n state.hasMentions = totalCount > 0;\n });\n }, [data, set]);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && scrollIfHashMatch(sectionName);\n }, {});\n\n if (wires.length === 0) {\n return null;\n }\n\n const buildWireTitle = title => {\n if (isMobileOrTablet) {\n return title;\n }\n\n const lines = isXLarge ? 4 : 5;\n\n return (\n \n \n Mentions\n {`Recent wires which mention ${showCompanyName ? organization : name}`} \n \n \n {_.chunk(wiresToShow, INIT_WIRE_NUMBER).map((group, index) => (\n // eslint-disable-next-line react/no-array-index-key\n \n {group.map(wire => (\n \n \n \n handleWireClick(wire)}>\n {buildWireTitle(wire.title)}\n \n \n {wire.profile.isCompanyProfile && !!wire.profile.organization\n ? wire.profile.organization : wire.profile.name}\n \n {!wire.profile.isCompanyProfile\n && (\n \n {wire.profile.organization}\n \n )}\n \n ))}\n \n ))}\n {showViewMore && (\n \n \n \n )}\n {showViewAll && (\n \n \n \n )}\n \n \n );\n}\n\nMention.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n }).isRequired,\n};\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './editorial-content-policy-elements/content';\n\nexport default function Privacy(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport JoinForm from './common/join-form';\nimport Hero from './features-elements/hero';\nimport TrendingContent from './features-elements/trending-content';\nimport FollowTrustedFunds from './features-elements/follow-trusted-funds';\nimport WrapUpEmails from './features-elements/wrap-up-emails';\nimport ReachOut from './features-elements/reach-out';\n\nconst Container = styled.div`\n width: 100vw;\n display: flex;\n flex-direction: column;\n`;\n\nexport default function Features(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: false,\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nFeatures.propTypes = {\n logo: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n heroPortrait: PropTypes.string.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport Header from './common/header';\nimport JoinForm from './common/join-form';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Hero from './homepage-elements/hero';\nimport Welcome from './homepage-elements/welcome';\nimport Purpose from './homepage-elements/purpose';\nimport Contributors from './homepage-elements/contributors';\nimport Features from './homepage-elements/features';\nimport Investors from './homepage-elements/investors';\nimport OurStory from './homepage-elements/our-story';\n\nconst Container = styled.div`\n width: 100vw;\n display: flex;\n flex-direction: column;\n`;\n\nexport default function Homepage(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nHomepage.propTypes = {\n logo: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n heroPortrait: PropTypes.string.isRequired,\n ourStory: PropTypes.string.isRequired,\n media: PropTypes.arrayOf(PropTypes.string).isRequired,\n purpose: PropTypes.string.isRequired,\n contributors: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n avatar: PropTypes.string,\n company: PropTypes.string,\n })).isRequired,\n investors: PropTypes.arrayOf(PropTypes.shape({\n logo: PropTypes.string.isRequired,\n headshot: PropTypes.string.isRequired,\n })).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './house-rules-elements/content';\n\nexport default function Privacy(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './legal-elements/content';\nimport Contact from './common/contact';\n\nexport default function Legal(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './livewire-advertising-agreement-elements/content';\n\nexport default function LivewireAdvertisingAgreement(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './livewire-general-terms-elements/content';\n\nexport default function LivewireGeneralTerms(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './marketindex-advertising-agreement-elements/content';\n\nexport default function MarketindexAdvertisingAgreement(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport JoinForm from './common/join-form';\nimport Contact from './common/contact';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Hero from './our-story-elements/hero';\nimport Mission from './our-story-elements/mission';\nimport Values from './our-story-elements/values';\nimport Story from './our-story-elements/story';\nimport Career from './our-story-elements/career';\nimport PartnerWithUs from './our-story-elements/partner-with-us';\n\nexport default function OurStory(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: false,\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nOurStory.propTypes = {\n logo: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n heroPortrait: PropTypes.string.isRequired,\n ourStory: PropTypes.string.isRequired,\n values: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Contact from './common/contact';\nimport JoinForm from './common/join-form';\n\nexport default function OurStory(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: false,\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nOurStory.propTypes = {\n logo: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n heroPortrait: PropTypes.string.isRequired,\n ourStory: PropTypes.string.isRequired,\n values: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport { SectionTitle, PaddedContainer } from '../common/styles';\nimport Profile, { profileWidth } from './profile';\n\nconst members = [\n { name: 'Tom McKay', title: 'Co-Founder', titleSecondary: 'Managing Director' },\n { name: 'James Marlay', title: 'Co-Founder', titleSecondary: 'Executive Director' },\n { name: 'Alex Cowie', title: 'Editorial Director' },\n { name: 'Anthony Deane', title: 'Product Director' },\n { name: 'Adrian Cachia', title: 'Partnerships Director' },\n { name: 'Amit Friedmann', title: 'Chief Technology Officer' },\n { name: 'Eddie Orchard', title: 'Partnerships Manager' },\n { name: 'Patrick Poke', title: 'Editor' },\n { name: 'Tais Santiago', title: 'Partnerships Manager' },\n { name: 'Maria Lucia Perez', title: 'Events Manager' },\n { name: 'Huy Hoang', title: 'Software Engineer' },\n { name: 'Zhengang Li', title: 'Software Engineer' },\n];\n\nconst Container = styled.div`\n width: 100vw;\n display: flex;\n justify-content: center;\n border-top-left-radius: 200px;\n border-bottom-right-radius: 200px;\n background-color: ${props => props.theme.secondaryColorLight};\n`;\n\nconst contentPct = 76.1;\n\nconst Content = styled.div`\n max-width: 1096px;\n width: ${contentPct}vw;\n display: flex;\n flex-direction: column;\n padding: 140px 0;\n`;\n\nconst MobileContainer = styled(PaddedContainer)`\n padding-top: 95px;\n display: flex;\n flex-direction: column;\n`;\n\nconst Title = styled(SectionTitle)`\n margin: 0;\n`;\n\nconst Desc = styled.p`\n margin-top: 20px;\n margin-bottom: ${props => (props.theme.isMobile ? 38 : 50)}px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 20px;\n line-height: 25px;\n ${props => (!props.theme.isMobile && `\n width: 468px;\n `)};\n`;\n\nexport default function Team() {\n // two tile layout, with 20px padding on both sides, and 20px spacing in between\n const minWidthMobile = 2 * profileWidth + 2 * 20 + 20;\n const isTwoTilesPerRow = useMediaQuery({ query: `(min-width: ${minWidthMobile}px)` });\n const { team, isMobile } = React.useContext(ThemeContext);\n const data = members.map((d, i) => ({ ...d, photo: team[i] }));\n\n // The three tiles per row extra element is based on 14 team members to combat\n // the 'space-between' layout for the last row. Adjust that if team member\n // number is changed.\n const ProfileContainer = styled.div`\n display: flex;\n ${(isMobile && !isTwoTilesPerRow) ? `\n flex-direction: column;\n align-items: center;\n ` : `\n flex-wrap: wrap;\n justify-content: space-between;\n `};\n `;\n\n function renderContent() {\n return (\n \n The Livewire Team \n \n Our team is committed to delivering our purpose: to help investors make\n confident investment decisions\n \n \n {data.map(profile => \n \n );\n }\n\n return isMobile\n ? (\n \n {renderContent()}\n \n )\n : (\n \n \n {renderContent()}\n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport Hero from './our-story-elements/hero';\nimport Mission from './our-story-elements/mission';\nimport Values from './our-story-elements/values';\nimport Story from './our-story-elements/story';\nimport Career from './our-story-elements/career';\nimport PartnerWithUs from './our-story-elements/partner-with-us';\n\nexport default function OurStory(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: false,\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nOurStory.propTypes = {\n logo: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n heroPortrait: PropTypes.string.isRequired,\n ourStory: PropTypes.string.isRequired,\n values: PropTypes.arrayOf(PropTypes.string).isRequired,\n partnerWithUsImage: PropTypes.string.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './privacy-elements/content';\n\nexport default function Privacy(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport Contact from './solutions-elements/contact';\nimport Hero from './solutions-elements/hero';\nimport LivewireNetwork from './solutions-elements/livewire-network';\nimport SophisticatedInvestors from './solutions-elements/sophisticated-investors';\nimport ProfessionalInvestors from './solutions-elements/professional-investors';\nimport SolutionsSection from './solutions-elements/solutions';\nimport FundManagement from './solutions-elements/fund-management';\nimport Testimonial from './solutions-elements/testimonial';\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow-x: hidden;\n font-family: Lato, Texta, Arial, Helvetica, sans-serif !important;\n\n button {\n font-size: 14px;\n font-family: Lato, Texta, Arial, Helvetica, sans-serif !important;\n padding: 8px 16px;\n }\n`;\n\nexport default function Solutions(props) {\n const state = {\n ...props,\n ...commonProps(),\n light: false,\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nSolutions.propTypes = {\n logo: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n heroPortrait: PropTypes.string.isRequired,\n investorEngagementImg: PropTypes.string.isRequired,\n footprintImg: PropTypes.string.isRequired,\n ongoingContentSupportImg: PropTypes.string.isRequired,\n partnerImages: PropTypes.arrayOf(PropTypes.string).isRequired,\n testimonialImages: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst vPadding = 140;\nconst Container = styled(BaseContainer)`\n ${props => (props.theme.isMobile ? `\n align-items: center;\n margin-top: 35px;\n ` : `\n align-items: left;\n margin-top: ${vPadding + 8}px;\n margin-bottom: ${vPadding + 8}px;\n `)};\n\n & > .right {\n position: relative;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n ${props => (props.theme.isMobile ? `\n order: 1;\n width: auto;\n margin-left: -20px;\n margin-right: -20px;\n ` : `\n order: 3;\n margin-left: -40px;\n margin-top: -40px;\n top: -23px;\n max-width: 560px;\n min-width: 540px;\n width: 44vw;\n padding-left: 4vw;\n `)};\n }\n`;\n\nconst Box = styled.div`\n position: relative;\n padding: 0px 10px;\n background: white 0% 0% no-repeat padding-box;\n box-shadow: 0px 3px 20px -8px ${props => props.theme.secondaryColor};\n border-radius: 10px;\n opacity: 1;\n text-align: center;\n ${props => (props.theme.isMobile ? `\n width: 39vw;\n min-width: 146px;\n height: 31vw;\n min-height: 116px;\n margin: 20px;\n ` : `\n margin-left: 40px;\n margin-top: 40px;\n width: 196px;\n height: 156px;\n `)};\n`;\n\nconst BoxTitle = styled.div`\n margin-top: 23px;\n margin-bottom: 18px;\n color: ${props => props.theme.bodyColor};\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n text-align: center;\n ${props => (props.theme.isMobile ? `\n font-size: 29px;\n line-height: 37px;\n ` : `\n font-size: 39px;\n line-height: 51px;\n `)};\n\n :after {\n content: '%';\n font-size: 50%;\n position: absolute;\n top: 16px;\n }\n`;\n\nconst BoxDesc = styled(SectionName)`\n font-size: ${props => (props.theme.isMobile ? 13 : 18)}px;\n`;\n\nexport default function AudienceEngagement() {\n const { isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#audience-engagement-container', vPadding);\n\n return (\n \n \n Solutions \n Engage the right audience ready to make decisions \n \n 89% of our readers are actively seeking investments.\n Livewire attracts serious investors and advisers who are\n actively looking for investment opportunities.\n \n \n \n \n 47 \n self directed investors \n \n \n 21 \n sophisticated & family office \n \n \n 20 \n \n Advisors &\n
\n Wealth managers\n \n \n \n 12 \n funds & institutions \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Img } from 'react-image';\nimport styled, { keyframes } from 'styled-components';\n\nexport const r = 551 / 565;\nexport const wDesktop = 551;\n// 82vw is the maximium width we can keep all of the tiles inside the boundary\nexport const wMobile = 82;\nconst rMD = wMobile / wDesktop;\n\nconst BaseImage = styled(Img)`\n position: absolute;\n box-shadow: 0px 3px 20px ${props => props.theme.secondaryColorLight};\n border-radius: 20px;\n background-color: white;\n transform: translate(0px, 0px);\n`;\n\nconst Image = styled(BaseImage)`\n cursor: pointer;\n z-index: 2;\n width: ${props => (props.theme.isMobile ? `${107 * rMD}vw` : '107px')};\n`;\n\nconst ActiveImage = styled(BaseImage)`\n cursor: initial;\n z-index: 1;\n width: ${props => (props.theme.isMobile ? `${211 * rMD}vw` : '211px')};\n`;\n\nconst rand = range => (Math.random() * 2 * range - range);\n\nexport default function CompanyTestimonial(props) {\n const {\n img, offset, isCurrent, onClick,\n } = props;\n\n const float = keyframes`\n 0% {\n transform: translate(0px, 0px);\n }\n 50% {\n transform: translate(${rand(15)}px, ${rand(15)}px);\n }\n 100% {\n transform: translate(0px, 0px);\n }\n `;\n\n const bound = {\n top: offset.top - (isCurrent ? 52 : 0),\n left: offset.left - (isCurrent ? 52 : 0),\n };\n const AnimatedImage = styled(isCurrent ? ActiveImage : Image)`\n animation: ${float} 10s ease-in-out infinite;\n top: ${p => (p.theme.isMobile ? `${bound.top * rMD}vw` : `${bound.top}px`)};\n margin-left: ${p => (p.theme.isMobile ? `${bound.left * rMD}vw` : `${bound.left}px`)};\n `;\n\n const propData = {\n src: img,\n ...(isCurrent ? {} : { onClick }),\n };\n return \n \n \n \n Solutions \n Ongoing Content support \n \n Our team of content experts provide advice and analysis\n to help improve your performance and is committed to\n your success.\n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst vPadding = 170;\nconst Container = styled(BaseContainer)`\n ${props => (props.theme.isMobile ? `\n margin-top: 85px;\n ` : `\n margin-top: ${vPadding + 8}px;\n margin-bottom: ${vPadding + 8}px;\n `)};\n`;\n\nconst FootprintImg = styled(Img)`\n position: relative;\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n margin-left: -40px;\n max-width: 542px;\n `)};\n`;\n\nexport default function Footprint() {\n const { footprintImg, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#footprint-container', vPadding);\n\n return (\n \n \n \n \n Solutions \n Enhance your online footprint \n \n Livewire's content distribution network includes Australian Financial Review,\n IRESS, Google News and Bloomberg.\n \n \n \n );\n}\n","import React from 'react';\nimport { Img } from 'react-image';\nimport styled, { ThemeContext } from 'styled-components';\nimport Plx from 'react-plx';\nimport {\n SectionName, buildPlxData,\n} from '../common/styles';\nimport {\n BaseContainer, BaseDesc, BaseTitle,\n} from './styles';\n\nconst vPadding = 100;\nconst Container = styled(BaseContainer)`\n ${props => (props.theme.isMobile ? `\n margin-top: 85px;\n ` : `\n margin-top: ${vPadding + 8}px;\n margin-bottom: ${vPadding + 8}px;\n `)};\n`;\n\nconst Image = styled(Img)`\n ${props => (props.theme.isMobile ? `\n width: 100%;\n ` : `\n max-width: 560px;\n width: 44vw;\n `)};\n`;\n\nexport default function InvestorEngagement() {\n const { investorEngagementImg, isMobile } = React.useContext(ThemeContext);\n const plxData = buildPlxData('#investor_engagement', vPadding);\n\n return (\n \n \n Solutions \n Australia's most engaged investor platform \n \n We are levelling the playing field by giving all investors access to\n high-value investment insights, commentary and analysis from Australia's\n leading money managers.\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { SectionName } from '../common/styles';\nimport { BaseDesc } from './styles';\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: ${props => (props.theme.isMobile ? 54 : 83)}px;\n width: 100vw;\n`;\n\nconst Title = styled(SectionName)`\n color: ${props => props.theme.bodyColor};\n`;\n\nconst Desc = styled(BaseDesc)`\n position: relative;\n max-width: unset;\n margin-top: 27px;\n text-align: center;\n ${props => (props.theme.isMobile ? `\n margin: 27px 20px 0 20px;\n ` : `\n width: 788px;\n `)};\n`;\n\nexport default function Reason() {\n return (\n \n Why work with Livewire? \n \n Livewire is Australia's fastest-growing investment platform with more than\n 250,000 investors and advisers now accessing it each month. Every day, Livewire\n showcases investment ideas and strategies from hundreds of Australia's most\n credible fund managers and investment professionals.\n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport { Page } from './common/styles';\nimport Header from './common/header';\nimport SiteMap from './common/site-map';\nimport Footer from './common/footer';\nimport Content from './terms-and-conditions-elements/content';\n\nexport default function TermsAndConditions(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n light: true,\n };\n\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nexport default function EditorsPickButton(props) {\n function pick(event) {\n event && event.preventDefault();\n\n postal.publish({\n channel: 'commands.editors-picks',\n topic: 'pick-wire',\n data: { wire: props.wire },\n });\n }\n\n return (\n \n \n \n );\n}\n\nEditorsPickButton.propTypes = {\n wire: PropTypes.shape({\n wire_id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n wire: PropTypes.objectOf(PropTypes.object).isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport MREC from '../shared/mrec';\n\nexport default function MRECMobile(props) {\n return {name} ;\n}\n\nCaption.propTypes = { name: PropTypes.string.isRequired };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport useFundsStateStore from './common/funds-state-hook';\nimport Hero from './funds-components/hero';\nimport TopRatedFundsSeriesHero from './funds-components/top-rated-funds-series-hero';\nimport IncomeSeriesHero from './funds-components/income-series-hero';\nimport Main from './funds-components/main';\nimport FundTypesModal from './funds-components/filter-components/fund-type-filter-components/fund-types-modal';\n\nconst INCOME_SERIES = 'income_series';\nconst TOP_RATED_FUNDS_SERIES = 'top_rated_funds_series';\n\nexport default function Funds(props) {\n const {\n showAssetClassFilterHint,\n searchNoResultsImageUrl,\n topRatedFundSeriesDesktopBackground,\n isCompany,\n } = props;\n const showHeroComponent = topRatedFundSeriesDesktopBackground !== '';\n const set = useFundsStateStore(state => state.set);\n set(state => {\n state.showAssetClassFilterHint = showAssetClassFilterHint;\n state.searchNoResultsImageUrl = searchNoResultsImageUrl;\n });\n\n const params = new URLSearchParams(window.location.search);\n const series = params.get('series');\n const isInTopRatedFundsSeries = series === TOP_RATED_FUNDS_SERIES;\n const isInIncomeSeries = series === INCOME_SERIES;\n const totalResults = useFundsStateStore(state => state.totalResults);\n const resultsText = totalResults !== null ? `${totalResults} Result${totalResults === 1 ? '' : 's'}` : null;\n document.querySelectorAll('span[role=\"__fund_hero_component_count\"]').forEach(e => {\n e.innerHTML = resultsText;\n });\n // eslint-disable-next-line no-nested-ternary\n const HeroComponent = isInIncomeSeries\n ? \n {!isCompany && !!showHeroComponent && HeroComponent}\n \n \n );\n}\n\nFunds.propTypes = {\n showAssetClassFilterHint: PropTypes.bool.isRequired,\n searchNoResultsImageUrl: PropTypes.string.isRequired,\n topRatedFundSeriesDesktopBackground: PropTypes.string.isRequired,\n isCompany: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport CommonProps from './common/common-props';\nimport Desktop from './banner-components/desktop';\nimport Mobile from './banner-components/mobile';\nimport Tablet from './banner-components/tablet';\n\nexport default function Banner({ banner }) {\n const commonProps = CommonProps();\n const { isTablet, isMobileOrTablet } = commonProps;\n /* eslint-disable no-nested-ternary */\n const BannerToShow = !isMobileOrTablet ? Desktop : isTablet ? Tablet : Mobile;\n /* eslint-enable no-nested-ternary */\n\n return (\n \n \n );\n}\n\nBanner.propTypes = {\n banner: PropTypes.shape({\n id: PropTypes.number.isRequired,\n headline: PropTypes.string.isRequired,\n byline: PropTypes.string,\n imageUrl: PropTypes.string.isRequired,\n registerButtonCopy: PropTypes.string,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from '../corporate/common/common-props';\nimport SiteMap from '../corporate/common/site-map';\nimport Footer from '../corporate/common/footer';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n ${props => (props.theme.isMobile && `\n width: 100vw;\n `)};\n`;\n\nexport default function FooterWithSiteMap(props) {\n const common = commonProps();\n const state = {\n ...props,\n ...common,\n };\n\n return (\n \n \n {\n common.isMobile\n ? \n \n );\n}\n\nFooterWithSiteMap.propTypes = {\n // eslint-disable-next-line react/no-unused-prop-types\n sitemapLogo: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\n\nconst Banner = styled.header`\n display: block;\n background-color: #F1F3F8;\n width: 100%;\n z-index: 210;\n`;\n\nconst Container = styled.div`\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n `};\n ${props => props.theme.isLarge && `\n width: 85%;\n `};\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n `};\n padding: ${props => (props.theme.isMobileOrTablet ? '22px 20px 26px 20px' : '36px 0 40px 0')};\n`;\n\nconst Headline = styled.h5`\n color: ${props => props.theme.primaryColor};\n margin: 0;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 14px;\n`;\n\nconst SecondaryHeadline = styled(Headline)`\n color: #627484;\n`;\n\nconst Name = styled.h1`\n color: ${props => props.theme.bodyColor};\n display: flex;\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n ${props => (props.theme.isMobileOrTablet ? `\n font-size: 34px;\n line-height: 44px;\n margin: 10px 0 10px 0;\n ` : `\n font-size: 40px;\n line-height: 52px;\n margin: 0;\n `)};\n`;\n\nconst QuotedName = styled.span`\n text-overflow: ellipsis;\n overflow-x: hidden;\n white-space: nowrap;\n`;\n\nconst Desc = styled.p`\n color: #627484;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 14px;\n line-height: ${props => (props.theme.isMobileOrTablet ? 18 : 22)}px;\n margin: 0;\n`;\n\nexport default function Header(props) {\n const mediaQueries = {\n isXXLarge: useMediaQuery({ query: '(min-width: 1366px)' }),\n isXLarge: useMediaQuery({ query: '(min-width: 1025px)' }),\n isLarge: useMediaQuery({ query: '(min-width: 769px)' }),\n isMobileOrTablet: useMediaQuery({ query: '(max-width: 768px)' }),\n };\n const {\n headline, name, description, quoteName, secondaryHeadline,\n } = props;\n\n return (\n \n \n \n { secondaryHeadline\n ? \n {'\\u201c'}\n {name} \n {'\\u201d'}\n \n )\n : {name} \n }\n {description && {description} }\n \n \n \n );\n}\n\nHeader.propTypes = {\n headline: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n description: PropTypes.string,\n quoteName: PropTypes.bool,\n secondaryHeadline: PropTypes.bool,\n};\n\nHeader.defaultProps = {\n description: null,\n quoteName: false,\n secondaryHeadline: false,\n};\n","import React from 'react';\nimport ApplicationNavbarContext from '../application-navbar-context';\n\nexport default function Logo() {\n const { state: { userSignedIn } } = React.useContext(ApplicationNavbarContext);\n\n return (\n \n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction signUp() {\n window.location = '/sign_up';\n}\n/*\nProps:\n- string contributorName: optional, if included then includes the contributor name in the CTA\n*/\nexport default class SignUpInfoNagbar extends React.Component {\n static propTypes = {\n contributorName: PropTypes.string,\n };\n\n static defaultProps = {\n contributorName: null,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n showInfo: true,\n scrollWindowTop: 0,\n scrollWindowBottom: 0,\n };\n }\n\n componentDidMount() {\n const existingOnScroll = window.onscroll || (() => {});\n let onScrollTimer;\n window.onscroll = () => {\n existingOnScroll();\n clearTimeout(onScrollTimer);\n onScrollTimer = setTimeout(() => {\n this.onWindowScroll();\n }, 250);\n };\n }\n\n onWindowScroll() {\n // NOTE present the info CTA if scroll down past 25px threshold,\n // dismiss if scroll up\n const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;\n\n if (scrollTop < this.state.scrollWindowTop) {\n this.setShowInfoState(false);\n }\n\n if (scrollTop > this.state.scrollWindowBottom) {\n this.setShowInfoState(true);\n }\n\n if (scrollTop < this.state.scrollWindowTop || scrollTop > this.state.scrollWindowBottom) {\n this.setState(state => {\n state.scrollWindowTop = scrollTop - 25;\n state.scrollWindowBottom = scrollTop + 25;\n\n return state;\n });\n }\n }\n\n setShowInfoState(showInfo) {\n if (this.state.showInfo === showInfo) return;\n\n this.setState({ showInfo });\n }\n\n render() {\n return (\n
Discover your next investment.';\nconst DEFAULT_CAMPAIGN_COPY = \"Join 120,000 Australians and gain unparalleled access to the trade ideas and investment strategies of Australia's leading investors\";\nconst DEFAULT_CAMPAIGN_LANDING_PAGE_CSS_CLASS = 'campaign-landing-page-default';\n\nfunction openSignUpModal(event) {\n event && event.preventDefault();\n\n postal.publish({\n channel: 'commands.campaigns',\n topic: 'present-sign-up-modal',\n });\n}\n\nexport default class SignUpModal extends React.Component {\n /* Props:\n showImmediately: boolean, if true shows the modal immediately\n redirectTo: string, url to redirect to, default is default sign up redirect path\n campaignHeader: Optional text for Header, allows string & html\n campaignCopy: Optional text for Header, allows string & html\n */\n\n static propTypes = {\n showImmediately: PropTypes.bool.isRequired,\n redirectTo: PropTypes.string.isRequired,\n campaignHeader: PropTypes.string,\n campaignCopy: PropTypes.string,\n campaignLandingPageCssClass: PropTypes.string,\n showLearnMoreLink: PropTypes.bool,\n }\n\n static defaultProps = {\n campaignHeader: DEFAULT_CAMPAIGN_HEADER,\n campaignCopy: DEFAULT_CAMPAIGN_COPY,\n campaignLandingPageCssClass: DEFAULT_CAMPAIGN_LANDING_PAGE_CSS_CLASS,\n showLearnMoreLink: true,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.toggleModal = this.toggleModal.bind(this);\n this.dismiss = this.dismiss.bind(this);\n this.present = this.present.bind(this);\n\n this.state = {\n showModal: false,\n allowClose: true,\n campaignHeader: props.campaignHeader,\n campaignCopy: props.campaignCopy,\n campaignLandingPageCssClass: props.campaignLandingPageCssClass,\n showLearnMoreLink: props.showLearnMoreLink,\n redirectTo: props.redirectTo,\n email: '',\n };\n this.campaignSignUpForm = React.createRef();\n }\n\n componentDidMount() {\n // NOTE Show the modal when clicking embedded videos within shielded wires,\n // bottom form on wire page, register buttons\n $(document)\n .on(\n 'click',\n [\n 'button.btn_register',\n '.wire[data-shielded=true] .embedded-video',\n 'a[data-id=register-button]',\n ].join(', '),\n event => {\n if ($(event.target).parents('article').length) {\n const linkIsInternal = /^(http?.:\\/\\/((www|staging)?\\.?livewiremarkets\\.com|localhost:?[0-9]?[0-9]?[0-9]?[0-9]?\\/)|\\/).*/.test(event.target.href);\n\n if (!linkIsInternal) return;\n }\n\n this.present();\n event.preventDefault();\n },\n );\n\n // NOTE present immediately if the showImmediately prop is set\n if (this.props.showImmediately) {\n this.present();\n }\n\n // NOTE invert to make it trigger the first time\n let onMobileOrTablet = !breakpoints.upTo_medium();\n const updateOpacity = () => {\n const currentlyOnMobileOrTablet = breakpoints.upTo_medium();\n\n if (currentlyOnMobileOrTablet !== onMobileOrTablet) {\n onMobileOrTablet = currentlyOnMobileOrTablet;\n\n if (onMobileOrTablet) {\n this.$lightLogoImg.hide();\n this.$darkLogoImg.show();\n } else {\n this.$lightLogoImg.show();\n this.$darkLogoImg.hide();\n }\n this.$header.css({\n 'background-color': `rgba(255,255,255,${onMobileOrTablet ? 1 : 0})`,\n 'border-bottom': `1px solid rgba(255,255,255,${onMobileOrTablet ? 1 : 0})`,\n 'box-shadow': `0 2px 5px rgba(0,0,0,${onMobileOrTablet ? 0.5 : 0})`,\n });\n this.forceUpdate();\n }\n };\n\n $(window).on('resize', _.throttle(() => updateOpacity(), 1000 / 60));\n updateOpacity();\n\n postal.subscribe({\n channel: 'commands.sign-up',\n topic: 'toggle-sign-up',\n callback: () => this.toggleModal(),\n });\n postal.subscribe({\n channel: 'commands.sign-up',\n topic: 'present',\n callback: data => {\n if (data) {\n this.setState(state => update(state, {\n campaignHeader: { $set: data.campaignHeader || state.campaignHeader },\n campaignCopy: { $set: data.campaignCopy || state.campaignCopy },\n redirectTo: { $set: data.redirectTo || state.redirectTo },\n email: { $set: data.email || state.email },\n }));\n }\n\n this.present();\n },\n });\n postal.subscribe({\n channel: 'commands.sign-up',\n topic: 'dismiss',\n callback: () => this.dismiss(),\n });\n }\n\n setShowModalState(showModal) {\n if (this.state.showModal === showModal) return;\n\n if (showModal) {\n this.showModal();\n } else {\n this.hideModal();\n }\n\n this.setState({ showModal });\n\n postal.publish({\n channel: 'events.sign-up',\n topic: showModal ? 'present' : 'dismiss',\n });\n }\n\n dismiss() {\n this.setShowModalState(false);\n }\n\n present() {\n this.setShowModalState(true);\n }\n\n showModal() {\n this.$modal.fadeIn({\n duration: 400,\n complete: () => {\n if (this.state.email) {\n this.campaignSignUpForm.current.prefillEmail(this.state.email);\n }\n this.campaignSignUpForm.current.focusInput();\n },\n });\n }\n\n hideModal() {\n this.$modal.fadeOut(400);\n }\n\n toggleModal() {\n this.setShowModalState(!this.state.showModal);\n }\n\n render() {\n const onMobileOrTablet = breakpoints.upTo_medium();\n\n return (\n\n \n 
\n \n \n {showCompanyName ? organisation : fullName}\n {!showCompanyName\n && {organisation}}\n \n \n );\n};\n\nContributor.propTypes = {\n slug: PropTypes.string.isRequired,\n first_name: PropTypes.string.isRequired,\n last_name: PropTypes.string,\n organisation: PropTypes.string,\n profile_picture_url: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n};\n\nContributor.defaultProps = {\n last_name: null,\n organisation: null,\n profile_picture_url: null,\n isCompanyProfile: false,\n};\n\nexport default function Following({ contributors }) {\n return (\n \n );\n}\n\nFollowing.propTypes = {\n contributors: PropTypes.arrayOf(PropTypes.shape({\n slug: PropTypes.string.isRequired,\n })).isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport Sticky from 'react-stickynode';\nimport Trending from './trending';\nimport MRECSidebar from './mrec-sidebar';\nimport { listTypes } from './similar-contributors-components/prop-types';\nimport SimilarContributors from './similar-contributors';\nimport SidebarContext from './sidebar-context';\n\nconst SSticky = styled(Sticky)`\n .sticky-inner-wrapper {\n z-index: 1;\n }\n`;\n\nexport default function Sidebar(props) {\n /*\n We want to align with the top boundary of the left side wire-tools.\n The top position is being calculated as:\n .navbar height(152px)\n + .navbar's border width on the bottom(1px)\n + article.wire's top margin, which is 30px, referring to\n app/assets/stylesheets/components.wires.scss\n - MREC's top padding, which is 20px, referring to\n app/assets/stylesheets/components.mrec.scss\n */\n const showSimilarContributors = _.get(props, 'similarContributors.type')\n && _.get(props, 'similarContributors.list.length');\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nSidebar.propTypes = {\n ads: PropTypes.shape({\n path: PropTypes.string.isRequired,\n format: PropTypes.string.isRequired,\n targeting: PropTypes.shape({\n userid: PropTypes.number.isRequired,\n investorType: PropTypes.string,\n investorInterests: PropTypes.arrayOf(PropTypes.string),\n wireid: PropTypes.number,\n contributorid: PropTypes.number,\n category: PropTypes.string,\n }).isRequired,\n }).isRequired,\n // eslint-disable-next-line react/no-unused-prop-types\n trending: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n profile: PropTypes.objectOf(PropTypes.object).isRequired,\n category: PropTypes.objectOf(PropTypes.object),\n series: PropTypes.objectOf(PropTypes.object),\n isSponsored: PropTypes.bool,\n })).isRequired,\n similarContributors: PropTypes.shape({\n type: PropTypes.string,\n list: listTypes,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nexport default class LivewireEventCountdown extends React.Component {\n static propTypes = {\n starts_at: PropTypes.string.isRequired,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n startsAt: moment(this.props.starts_at),\n };\n }\n\n componentDidMount() {\n setInterval(() => this.forceUpdate(), 1000);\n }\n\n render() {\n const duration = moment.duration(this.state.startsAt.diff(moment()));\n\n if (duration.asSeconds() <= 0) {\n return ;\n }\n\n const days = Math.floor(duration.asDays());\n\n duration.subtract(days, 'd');\n\n const hours = Math.floor(duration.asHours());\n\n duration.subtract(hours, 'h');\n\n const minutes = Math.floor(duration.asMinutes());\n\n duration.subtract(minutes, 'm');\n\n const seconds = Math.floor(duration.asSeconds());\n\n return (\n \n \n );\n }\n}\n","import React from 'react';\nimport moment from 'moment';\nimport Loading from '../../shared/loading';\nimport { useGetLivewireEvents } from '../../services/events-service';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nclass LivewireEvent {\n constructor(source) {\n Object.assign(this, source);\n\n this.starts_at = this.starts_at ? moment(this.starts_at) : null;\n }\n}\n\nconst renderEvent = event => {\n const url = `/events/${event.slug}`;\n return (\n \n \n {event.registered ? 'Registered' : 'Register'}\n \n \n );\n};\n\nexport default function LivewireEventsSidebar() {\n const [events, setEvents] = React.useState([]);\n const loadingRef = React.useRef();\n const [{ data: eventsData, loading, error }] = useGetLivewireEvents();\n\n React.useEffect(() => {\n if (eventsData && eventsData.length) {\n setEvents(eventsData.events.map(d => new LivewireEvent(d)));\n }\n }, [eventsData]);\n\n React.useEffect(() => loadingRef.current[loading ? 'start' : 'stop'](), [loading]);\n\n return (\n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport PurchaseTickets from './purchase-tickets';\n\nexport default function LivewireLive2019(props) {\n const agenda = {\n '1:00pm': ['Welcome and Overview'],\n '1:10pm': ['The Great Debate: Should you be risk on or risk off?'],\n '2:00pm': ['Fireside Chat with Scott Nuttall, Co-President and Co-Chief Operating Officer, KKR'],\n '2:20pm': ['Panel: The Good, the Bad and the Ugly'],\n '3:00pm': ['Networking and Refreshments'],\n '3:30pm': ['Welcome message from Bell Direct'],\n '3:40pm': ['How tomorrow’s generation lives and what it means for your portfolio'],\n '4:00pm': ['Panel: Ten years from now this is how the investing world has changed'],\n '4:40pm': ['Shocking predictions for 2020 and beyond'],\n '5:00pm': ['Live music, drinks and canapes by Chiswick'],\n };\n\n const VCenter = styled.div`\n text-align: center;\n max-width: 100%;\n height: auto;\n `;\n\n const ButtonContainer = styled.div`\n text-align: center;\n max-width: 100%;\n height: auto;\n margin-top: 30px;\n margin-bottom: 30px;\n `;\n\n const Agenda = styled.table`\n width: 100%;\n max-width: 100%;\n margin-bottom: 1rem;\n background-color: transparent;\n border-collapse: collapse;\n `;\n\n const THead = styled.thead`\n display: table-header-group;\n vertical-align: middle;\n border-color: inherit;\n `;\n\n const TH = styled.th`\n border-bottom: 2px solid #e9ecef;\n padding: .25rem;\n vertical-align: top;\n border: 1px solid #e9ecef;\n text-align: left;\n `;\n\n const TD = styled.td`\n padding: .25rem;\n vertical-align: top;\n border: 1px solid #e9ecef;\n `;\n\n const Image = styled.img`\n max-width: 100%;\n height: auto;\n padding-bottom: 30px;\n `;\n\n const SmallImage = styled(Image)`\n max-width: 25%;\n height: auto;\n padding-bottom: 30px;\n `;\n\n const VideoContainer = styled.div`\n position: relative;\n padding-bottom: 349px;\n padding-top: 30px;\n overflow: hidden;\n `;\n\n const IFrame = styled.iframe`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n `;\n\n const CellLine = styled.div`\n padding: 7px;\n `;\n\n return (\n \n \n \n\n
\n\n\n \n \n Time \n Details \n \n \n \n {_.map(agenda, (value, key) => (\n \n \n {key} \n \n \n {value.map((line, index) => (\n \n {index ? line : {line}}\n \n ))}\n \n \n ))}\n \n \n\n \n \n\n \n \n \n \n );\n}\n\nLivewireLive2019.propTypes = {\n eventbriteId: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport postal from 'postal';\nimport classNames from 'classnames';\nimport { propTypes, defaultProps } from './prop-types';\nimport { useIsMobile } from '../../shared/theme';\nimport MicroProfile from './micro-profile';\nimport Contributor from './mp-components/contributor';\nimport Expertise from './mp-components/expertise';\nimport Actions from './mp-components/actions';\n\nconst Profile = styled.section`\n font-size: 18px;\n position: relative;\n\n &.--form-expanded {\n border-radius: 0 0 4px 4px;\n box-shadow: 0 10px 20px rgba(53, 65, 76, 0.2);\n transition: box-shadow .3s ease-in;\n\n > .micro-profile-areas-of-expertise {\n border-radius: 0;\n border-bottom: 0;\n }\n }\n`;\n\nexport default function EowCompactMobile(props) {\n const [expanded, setExpanded] = React.useState(false);\n const isMobile = useIsMobile();\n\n React.useEffect(() => {\n postal.subscribe({\n channel: 'micro-profile.commands',\n topic: 'present-lead-capture-form',\n callback: () => setExpanded(true),\n });\n }, []);\n\n if (!isMobile) {\n // This check is here to double check the server side done by:\n // `browser.device.mobile?`\n // is inline with the client mobile concept.\n return \n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useWizard } from 'react-wizard-primitive';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport commonProps from './common/common-props';\nimport Logo from './common/logo';\nimport StepLegend from './common/step-legend';\nimport OnboardingContext, { reducer, defaultState } from './common/context';\nimport { get } from '../../services/onboarding-services';\n\nconst Wizard = styled.div`\n display: flex;\n flex-direction: column;\n width: 100vw;\n height: 100vh;\n min-height: 700px;\n justify-content: ${props => (props.theme.isMobile ? 'flex-start' : 'center')};\n align-items: center;\n background: transparent ${props => props.theme.linearGradientLightTheme} no-repeat padding-box;\n padding: 0;\n\n ${props => (props.theme.isMobile ? `\n justify-content: flex-strat;\n background-color: white;\n ` : `\n justify-content: center;\n background: transparent ${props.theme.linearGradientLightTheme} no-repeat padding-box;\n\n &:after {\n content: '';\n height: 10vh;\n max-height: 110px;\n }\n `)}\n`;\n\nexport default function Onboarding(props) {\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n const common = commonProps();\n\n const {\n previousStep, nextStep, activeStepIndex, resetToStep, getStep,\n } = useWizard();\n\n React.useEffect(() => {\n get().then(result => {\n dispatch({ type: 'setInvestorTypes', payload: result.data.investorTypes });\n dispatch({ type: 'setAssetClasses', payload: result.data.assetClasses });\n dispatch({ type: 'setProductsAvailable', payload: result.data.stockCodes });\n });\n }, []);\n\n useChangeAwareEffect(({ isMount }) => {\n if (!isMount) {\n return;\n }\n const { investorType, assetClasses } = _.get(window, 'Livewire.currentUser.profile', {});\n let step = 0;\n if (investorType) {\n dispatch({ type: 'setSelectedInvestorType', payload: investorType });\n step = 1;\n }\n if (_.get(assetClasses, 'length')) {\n window.location.replace(props.redirectToUrl);\n return;\n }\n resetToStep(step);\n }, {});\n\n const stepProps = {\n previousStep, nextStep, redirectToUrl: props.redirectToUrl, features: props.features,\n };\n\n return (\n \n \n \n d.name)}\n activeStepIndex={activeStepIndex}\n />\n {common.steps.map(d => {\n const { comp: Step, name } = d;\n return getStep().isActive\n ? \n \n \n\n );\n}\n\nOnboarding.propTypes = {\n logo: PropTypes.string.isRequired,\n redirectToUrl: PropTypes.string.isRequired,\n /* eslint-disable-next-line react/require-default-props */\n features: PropTypes.string,\n};\n","import React from 'react';\nimport toastr from 'toastr';\nimport OnboardingProvidePersonalDetailsModal from './onboarding-provide-personal-details-modal';\nimport OnboardingSelectInvestorTypeModal from './onboarding-select-investor-type-modal';\nimport OnboardingSelectInvestmentThemesModal from './onboarding-select-investment-themes-modal';\nimport { getStepsToComplete } from '../../services/onboarding-services';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nexport default class OnboardingWizard extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.onStepComplete = this.onStepComplete.bind(this);\n\n this.state = {\n loaded: false,\n stepsToComplete: {},\n activeStep: null,\n };\n }\n\n componentDidMount() {\n getStepsToComplete().then(result => this.setState(state => {\n state.stepsToComplete = result.data.steps_to_complete;\n state.loaded = true;\n const stcKeys = Object.keys(state.stepsToComplete);\n state.activeStep = stcKeys.length && stcKeys[0];\n return state;\n })).catch(err => toastr.error(err, 'Error'));\n }\n\n componentDidUpdate() {\n if (this.state.activeStep) {\n if (!this.isDetailsStep) {\n window.location = '/onboarding';\n } else {\n this.$overlay.show();\n }\n }\n }\n\n onStepComplete() {\n const { nextStepKey } = this;\n\n if (nextStepKey == null) {\n this.closeWizard();\n return;\n }\n\n this.setState({ activeStep: nextStepKey });\n }\n\n get nextStepKey() {\n const stepKeys = Object.keys(this.state.stepsToComplete);\n const activeStepIndex = stepKeys.indexOf(this.state.activeStep);\n\n if (activeStepIndex === -1 || stepKeys.length === activeStepIndex + 1) {\n return null;\n }\n\n return stepKeys[activeStepIndex + 1];\n }\n\n get isDetailsStep() {\n return this.state.activeStep === 'provide_personal_details';\n }\n\n closeWizard() {\n this.setState({ activeStep: null });\n this.$overlay.fadeOut(800);\n }\n\n render() {\n if (!this.state.loaded) {\n return null;\n }\n\n const { activeStep, stepsToComplete: stc } = this.state;\n const { isDetailsStep } = this;\n\n if (activeStep && !isDetailsStep) {\n return null;\n }\n\n const isTypeStep = activeStep === 'select_investor_type';\n const isThemeStep = activeStep === 'select_investment_themes';\n const investorTypes = isTypeStep ? stc.select_investor_type.investor_types : [];\n const currentStepIndex = Object.keys(stc).indexOf(activeStep);\n const totalStepCount = Object.keys(stc).length;\n const assetClasses = isThemeStep ? stc.select_investment_themes.asset_classes : [];\n\n return (\n \n (this.$overlay = $(el))}\n className=\"livewire-modal-overlay onboarding-modal-overlay\"\n />\n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport toastr from 'toastr';\nimport Validator from '../../shared/validator';\nimport Loading from '../../shared/loading';\nimport parseFailXhr from '../../shared/parse-fail-xhr';\nimport ErrorBoundary from '../../shared/error-boundary';\nimport { EMAIL_REGEX } from '../../shared/consts';\nimport { contactAsContributorAsync, contactAsPartnerAsync } from '../../services/contact-services';\n\nexport default class ContactFormSnowflake extends React.Component {\n static propTypes = {\n contactType: PropTypes.oneOf(['contributor', 'partner']).isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.handleNameChange = this.handleNameChange.bind(this);\n this.handleEmailAddressChange = this.handleEmailAddressChange.bind(this);\n this.handleMobilePhoneNumberChange = this.handleMobilePhoneNumberChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n\n this.validator = new Validator({\n nameRequired: () => !!this.state.name,\n emailAddressRequired: () => !!this.state.emailAddress,\n emailAddressRegex: () => !this.state.emailAddress\n || EMAIL_REGEX.test(this.state.emailAddress),\n mobilePhoneNumberRequired: () => !!this.state.mobilePhoneNumber,\n }, {\n onValidationChanged: () => {\n this.setState(s => (s.validations = this.validator.getValidations()));\n },\n });\n this.state = {\n name: '',\n emailAddress: '',\n mobilePhoneNumber: '',\n };\n this.state.validations = this.validator.getValidations();\n }\n\n handleNameChange(event) {\n const name = event.target.value;\n this.setState({ name });\n this.validator.validateNameRequired();\n }\n\n handleEmailAddressChange(event) {\n const emailAddress = event.target.value;\n this.setState({ emailAddress });\n this.validator.validateEmailAddressRequired();\n this.validator.validateEmailAddressRegex();\n }\n\n handleMobilePhoneNumberChange(event) {\n const mobilePhoneNumber = event.target.value;\n this.setState({ mobilePhoneNumber });\n this.validator.validateMobilePhoneNumberRequired();\n }\n\n handleSubmit(event) {\n event.preventDefault();\n\n if (!this.validator.validateForm().formValid) return;\n\n this.loading.start();\n const contactMethod = this.props.contactType === 'contributor'\n ? contactAsContributorAsync\n : contactAsPartnerAsync;\n contactMethod(_.pick(this.state, ['name', 'emailAddress', 'mobilePhoneNumber']))\n .done(() => {\n this.setState({\n messageSent: true,\n name: '',\n emailAddress: '',\n mobilePhoneNumber: '',\n });\n this.validator.resetValidation();\n toastr.success('Your message has been sent');\n })\n .fail(xhr => {\n const errors = parseFailXhr(xhr);\n errors.anyUnhandledErrors() && toastr.error(errors.getErrorSummary(), 'Error');\n })\n .always(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from './common-props';\n\nconst Banner = styled.header`\n display: block;\n background-color: #F1F3F8;\n width: 100%;\n z-index: 210;\n height: 150px;\n`;\n\nconst Container = styled.div`\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n padding: ${props => (props.theme.isMobileOrTablet ? '22px 20px 26px 20px' : '36px 0 40px 0')};\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n `};\n ${props => props.theme.isLarge && `\n width: 85%;\n `};\n ${props => props.theme.isXLarge && `\n width: 953px;\n `};\n ${props => props.theme.isXXLarge && `\n width: 1200px;\n `};\n`;\n\nconst Name = styled.h1`\n color: ${props => props.theme.bodyColor};\n display: flex;\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n ${props => (props.theme.isMobileOrTablet ? `\n font-size: 34px;\n line-height: 44px;\n margin: 10px 0 10px 0;\n ` : `\n font-size: 40px;\n line-height: 52px;\n margin: 0;\n `)};\n`;\n\nconst Desc = styled.p`\n color: ${props => props.theme.secondaryColorLight};\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightMedium};\n font-size: 14px;\n line-height: ${props => (props.theme.isMobileOrTablet ? 18 : 22)}px;\n margin: 0;\n`;\n\nexport default function Header(props) {\n const common = commonProps();\n const {\n name, description,\n } = props;\n\n return (\n \n \n \n {name} \n {description && {description} }\n \n \n \n );\n}\n\nHeader.propTypes = {\n name: PropTypes.string.isRequired,\n description: PropTypes.string,\n};\n\nHeader.defaultProps = {\n description: null,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport toastr from 'toastr';\nimport { ThemeProvider } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport commonProps from './contributor-profile-editor-components/common-props';\nimport parseFailXhr from '../../../shared/parse-fail-xhr';\nimport { defaultProfileCompleteness, profileCompletenessType } from './headers-components/score';\nimport HeaderWrapper from './headers-components/wrapper';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Loading from '../../../shared/loading';\nimport About from './contributor-profile-editor-components/about';\nimport Expertise from './contributor-profile-editor-components/expertise';\nimport Disclaimer from './contributor-profile-editor-components/disclaimer';\nimport Career from './contributor-profile-editor-components/career';\nimport InvestmentPhilosophy from './contributor-profile-editor-components/investment-philosophy';\nimport HeadlineGrab from './contributor-profile-editor-components/headline-grab';\nimport FeaturedWires from './contributor-profile-editor-components/featured-wires';\nimport SocialLinks from './contributor-profile-editor-components/social-links';\nimport { useGetContributorProfile } from '../../../services/profiles/contributor-settings-service';\n\nconst desc = 'As a contributor on Livewire you can provide your readers with'\n + ' information explaining your investment experience and expertise.'\n + ' Completing the information below can help improve your readership and'\n + ' awareness on Livewire.';\n\nconst fallbackProfile = {\n accred: '',\n areasOfExpertise: [],\n blurb: '',\n city: null,\n country: null,\n disclaimer: '',\n headlineGrab: '',\n investmentPhilosophy: [],\n activeFeatures: [],\n joinedCurrentRoleAt: null,\n joinedIndustryAt: null,\n organisation: '',\n position: '',\n recentCareer: null,\n linkedinUrl: null,\n twitterUrl: null,\n};\n\nconst keyGetter = (v, k) => _.camelCase(k);\n\nconst VAL_CONVERTER = {\n recentCareer: v => (v ? _.mapKeys(v, keyGetter) : null),\n areasOfExpertise: v => (v ? _.map(v, a => ({ ...a, assignedToMe: a.assigned_to_me })) : []),\n};\nconst fallback = (v, k) => v || fallbackProfile[k];\nconst valueGetter = (v, k) => (VAL_CONVERTER[k] ? VAL_CONVERTER[k](v) : fallback(v, k));\n\nexport default function ContributorProfileEditor({ profileCompleteness, newNavEnabled }) {\n const [profile, setProfile] = React.useState(fallbackProfile);\n const [{ data, loading, error }, get] = useGetContributorProfile();\n const loadingRef = React.useRef();\n const headerRef = React.useRef();\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get();\n }, {});\n\n React.useEffect(() => loadingRef.current.toggle(loading), [loading]);\n\n React.useEffect(() => {\n data && setProfile(_(data).mapKeys(keyGetter).mapValues(valueGetter).value());\n }, [data]);\n\n React.useEffect(() => {\n if (error) {\n const errors = parseFailXhr(error);\n errors.anyUnhandledErrors() && toastr.error(errors.getErrorSummary(), 'Error loading contributor profile');\n }\n }, [error]);\n\n const {\n activeFeatures, organisation, position,\n } = profile;\n\n const isStd = _.includes(activeFeatures, 'standard_profile_page');\n const prmFeaturedWires = _.includes(activeFeatures, 'premium_featured_wires');\n const prmSocialLinks = _.includes(activeFeatures, 'premium_social_links');\n\n const stdProps = {\n ...profile,\n onUpdate: d => headerRef && headerRef.current && headerRef.current.update(d),\n };\n\n return (\n \n \n \n \n );\n}\n\nContributorProfileEditor.propTypes = {\n profileCompleteness: profileCompletenessType,\n newNavEnabled: PropTypes.bool,\n};\nContributorProfileEditor.defaultProps = {\n profileCompleteness: defaultProfileCompleteness,\n newNavEnabled: false,\n};\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { useMediaQuery } from 'react-responsive';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container } from './common/styles';\nimport { defaultProfileCompleteness, profileCompletenessType } from './headers-components/score';\nimport HeaderWrapper from './headers-components/wrapper';\nimport TrendingControl from './trending-control';\nimport FollowOptionsControl from './follow-options-control';\nimport NotificationsControl from './notifications-control';\n\nexport default function EmailPreferencesControl({\n profileCompleteness,\n followFrequenciesToUpdate,\n subscribedToTrending,\n tolSubscriptionOptions,\n notifyOnFollowOptions,\n notifyOnLikeOptions,\n notifyOnCommentOptions,\n notifyOnMentionOptions,\n isContributorOrEditor,\n newNavEnabled,\n weeklyTOLEnabled,\n}) {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n\n return (\n \n \n \n \n );\n}\n\nEmailPreferencesControl.propTypes = {\n profileCompleteness: profileCompletenessType,\n followFrequenciesToUpdate: PropTypes.arrayOf(PropTypes.string),\n subscribedToTrending: PropTypes.bool.isRequired,\n tolSubscriptionOptions: PropTypes.arrayOf(PropTypes.string).isRequired,\n notifyOnFollowOptions: PropTypes.arrayOf(PropTypes.string).isRequired,\n notifyOnLikeOptions: PropTypes.arrayOf(PropTypes.string).isRequired,\n notifyOnCommentOptions: PropTypes.arrayOf(PropTypes.string).isRequired,\n notifyOnMentionOptions: PropTypes.arrayOf(PropTypes.string).isRequired,\n isContributorOrEditor: PropTypes.bool.isRequired,\n newNavEnabled: PropTypes.bool,\n weeklyTOLEnabled: PropTypes.bool,\n};\n\nEmailPreferencesControl.defaultProps = {\n profileCompleteness: defaultProfileCompleteness,\n followFrequenciesToUpdate: null,\n newNavEnabled: false,\n weeklyTOLEnabled: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\n\nimport commonProps from './common/common-props';\nimport ProfileComment from '../../comments/profile-comment';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n width: 90%;\n\n ${props => props.theme.isMobileOrTablet && `\n width: 100%;\n `};\n\n article {\n padding: 16px 16px 0 16px !important;\n margin: 0 0 16px 0 !important;\n }\n`;\n\nexport default function MyComments({ comments }) {\n const common = commonProps();\n\n return (\n \n \n {comments.map(comment => ( \n \n );\n}\n\nMyComments.propTypes = {\n comments: PropTypes.arrayOf(PropTypes.shape({\n body: PropTypes.string,\n publishedAt: PropTypes.string,\n id: PropTypes.number,\n wire: PropTypes.shape({\n title: PropTypes.string,\n slug: PropTypes.string,\n }).isRequired,\n userId: PropTypes.number,\n })).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport { useScrollableWires } from './common/scrollable-wires-hooks';\nimport Tail from './common/wires-list-tail';\nimport commonProps from './common/common-props';\nimport { useGetPaginatedWiresFromContributor } from '../../../services/wires/from-contributor-service';\nimport Wire from './common/wire';\n\nexport default function MyPublishedWires({ profileId }) {\n const common = commonProps();\n const {\n wires, infiniteRef, expandList, showExpand, hasMore,\n } = useScrollableWires({ useGetWires: () => useGetPaginatedWiresFromContributor(profileId) });\n\n return (\n \n <>\n \n {wires.map(wire => You have seen all the results }\n \n \n \n );\n}\n\nMyPublishedWires.propTypes = {\n profileId: PropTypes.number.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from '../common/common-props';\nimport MenuItem from './menu-item';\nimport MENU_ITEMS from './constants';\n\nconst Menu = styled.div`\n display: flex;\n margin: 48px 20px 0 20px;\n color: ${props => props.theme.secondaryColor};\n border: none;\n font-size: 16px;\n line-height: 19px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n`;\n\nconst Line = styled.div`\n margin: -3px 20px 24px 20px;\n height: 0px;\n border: 1px solid ${props => props.theme.secondaryColorLight};\n`;\n\nexport default function InlineMenu() {\n const common = commonProps();\n const [activeItem, setActiveItem] = React.useState(null);\n\n React.useEffect(() => {\n setActiveItem(_.find(MENU_ITEMS, item => _.endsWith(window.location.pathname, item)) || 'none');\n }, []);\n\n const buildClickHandler = page => () => {\n window.location = `/profiles/me/my_wires/${page}`;\n };\n\n const menuItems = MENU_ITEMS.map(page => ({\n name: page,\n active: activeItem === page,\n onClick: buildClickHandler(page),\n }));\n\n return (\n \n \n \n );\n}\n","import React from 'react';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport SidebarItem from './common/sidebar-item';\n\nexport default function MyWiresSidebar() {\n return (\n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Dropzone from 'react-dropzone';\nimport moment from 'moment';\nimport postal from 'postal';\nimport update from 'immutability-helper';\nimport debounceAction from '../../../shared/debounce-action';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport Validator from '../../../shared/validator';\nimport mutate from '../../../shared/mutate';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport PasswordChangeModal from './password-change-modal';\nimport EmailChangeModal from './email-change-modal';\nimport { defaultProfileCompleteness, profileCompletenessType } from './headers-components/score';\nimport HeaderWrapper from './headers-components/wrapper';\nimport {\n setFirstName, setLastName, setOrganisation, setPosition, setDob,\n getIncompleteDetails, getDetails, removePicture, updatePicture,\n} from '../../../services/profiles/personal-details-service';\n\nexport default class PersonalDetailsEditor extends React.Component {\n static propTypes = { profileCompleteness: profileCompletenessType, newNavEnabled: false };\n\n static defaultProps = { profileCompleteness: defaultProfileCompleteness, newNavEnabled: false };\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n lastNameRequired: state => !!state.profile.lastName,\n });\n this.state = {\n profile: {\n firstName: '',\n lastName: '',\n organisation: '',\n position: '',\n email: '',\n profilePictureUrl: '',\n },\n day: 0,\n month: 0,\n year: 0,\n investorTypes: [],\n incompleteDetails: [],\n validations: this.validator.getValidations(),\n };\n\n this.saveFirstName = debounceAction({\n getCurrentValue: () => this.state.profile.firstName,\n actionPromise: () => setFirstName(this.state.profile.firstName),\n onBeforeAction: () => this.firstNameLoading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving first name'),\n onAfterAction: () => {\n this.firstNameLoading.stop();\n postal.publish({\n channel: 'events.user',\n topic: 'first-name-changed',\n data: {\n firstName: this.state.profile.firstName,\n },\n });\n },\n });\n this.saveLastName = debounceAction({\n getCurrentValue: () => this.state.profile.lastName,\n getIsValid: () => this.validator.lastNameRequiredValid,\n actionPromise: () => setLastName(this.state.profile.lastName),\n onBeforeAction: () => this.lastNameLoading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving last name'),\n onAfterAction: () => this.lastNameLoading.stop(),\n });\n this.saveOrganisation = debounceAction({\n getCurrentValue: () => this.state.profile.organisation,\n actionPromise: () => setOrganisation(this.state.profile.organisation),\n onBeforeAction: () => this.organisationLoading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving company'),\n onAfterAction: () => {\n this.header && this.header.update({ organization: this.state.profile.organisation });\n this.organisationLoading.stop();\n },\n });\n this.savePosition = debounceAction({\n getCurrentValue: () => this.state.profile.position,\n actionPromise: () => setPosition(this.state.profile.position),\n onBeforeAction: () => this.positionLoading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving job title'),\n onAfterAction: () => {\n this.header && this.header.update({ position: this.state.profile.position });\n this.positionLoading.stop();\n },\n });\n this.saveDateOfBirth = debounceAction({\n getCurrentValue: () => this.dateOfBirthTimeStamp,\n getIsValid: () => this.dateOfBirthTimeStamp.isValid(),\n actionPromise: () => setDob(this.dateOfBirthTimeStamp),\n onBeforeAction: () => this.dateOfBirthLoading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving date of birth'),\n onAfterAction: () => {\n this.dateOfBirthLoading.stop();\n this.setState(state => update(state, {\n incompleteDetails: arr => arr.filter(x => x !== 'date_of_birth'),\n }));\n postal.publish({\n channel: 'profile.events',\n topic: 'personal-details-changed',\n });\n },\n });\n }\n\n componentDidMount() {\n this.loading.start();\n getIncompleteDetails()\n .then(r => this.setState({ incompleteDetails: _.get(r, 'data.incomplete_details', []) }))\n .catch(error => defaultOnErrorHandler(error, 'Error loading incomplete details'));\n\n getDetails()\n .then(result => {\n const profile = _.get(result, 'data.profile', {});\n this.loading.stop();\n this.setState({\n profile: {\n firstName: profile.first_name,\n lastName: profile.last_name,\n organisation: profile.organisation || '',\n position: profile.position || '',\n email: profile.email,\n profilePictureUrl: profile.profile_picture_url,\n },\n investorTypes: _.get(result, 'data.investor_types', []),\n day: parseInt(moment(profile.date_of_birth).format('DD'), 10) || 0,\n month: parseInt(moment(profile.date_of_birth).format('MM'), 10) - 1 || 0,\n year: parseInt(moment(profile.date_of_birth).format('YYYY'), 10) || 0,\n }, () => {\n this.saveFirstName.resetInitialValue();\n this.saveLastName.resetInitialValue();\n this.saveOrganisation.resetInitialValue();\n this.savePosition.resetInitialValue();\n this.saveDateOfBirth.resetInitialValue();\n });\n })\n .catch(e => {\n this.loading.stop();\n defaultOnErrorHandler(e, 'Error loading personal details');\n });\n }\n\n handleFirstNameChange(e) {\n const firstName = e.target.value;\n\n this.setState(state => update(state, {\n profile: {\n firstName: { $set: firstName },\n },\n }), () => this.saveFirstName());\n }\n\n handleLastNameChange(e) {\n const lastName = e.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.profile.lastName = lastName;\n state.validations.lastNameRequiredValid = this.validator.validateLastNameRequired(state);\n }), () => this.saveLastName());\n }\n\n handleOrganisationChange(e) {\n const organisation = e.target.value;\n\n this.setState(state => update(state, {\n profile: {\n organisation: { $set: organisation },\n },\n }), () => this.saveOrganisation());\n }\n\n handlePositionChange(e) {\n const position = e.target.value;\n\n this.setState(state => update(state, {\n profile: {\n position: { $set: position },\n },\n }), () => this.savePosition());\n }\n\n handleDayChange(e) {\n const day = parseInt(e.target.value, 10);\n\n this.setState({ day }, () => this.saveDateOfBirth());\n }\n\n handleMonthChange(e) {\n const month = parseInt(e.target.value, 10);\n\n this.setState({ month }, () => this.saveDateOfBirth());\n }\n\n handleYearChange(e) {\n const year = parseInt(e.target.value, 10);\n\n this.setState({ year }, () => this.saveDateOfBirth());\n }\n\n get dateOfBirthTimeStamp() {\n return moment(_.pick(this.state, 'year', 'month', 'day'));\n }\n\n updateProfilePicture(files) {\n if (!files.length) return;\n\n this.profilePictureLoading.start();\n updatePicture(files[0])\n .then(result => this.setState(state => update(state, {\n profile: { profilePictureUrl: { $set: result.data.profile_picture_url } },\n })))\n .catch(e => defaultOnErrorHandler(e, 'Error updating the profile picture'))\n .finally(() => this.profilePictureLoading.stop());\n }\n\n removeProfilePicture() {\n this.profilePictureLoading.start();\n removePicture()\n .then(result => this.setState(state => update(state, {\n profile: { profilePictureUrl: { $set: _.get(result, 'data.profile_picture_url') } },\n })))\n .catch(e => defaultOnErrorHandler(e, 'Error removing profile picture'))\n .finally(() => this.profilePictureLoading.stop());\n }\n\n updateEmailFromModalResult(email) {\n this.setState(state => update(state, {\n profile: {\n email: { $set: email },\n },\n }));\n }\n\n renderDobPicker() {\n const currentYear = (new Date()).getFullYear();\n const daysInMonth = moment({ year: this.state.year, month: this.state.month }).daysInMonth();\n return (\n \n (this.header = c)}\n title=\"Personal Details\"\n profileCompleteness={this.props.profileCompleteness}\n newNavEnabled={this.props.newNavEnabled}\n />\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport SidebarItem from './common/sidebar-item';\nimport { getIncompleteDetails } from '../../../services/profiles/personal-details-service';\n\nexport default class ProfileEditorSidebar extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n incomplete: false,\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'profile.events',\n topic: 'personal-details-changed',\n callback: () => this.refresh(),\n });\n\n this.refresh();\n }\n\n refresh() {\n getIncompleteDetails()\n .then(r => this.setState({ incomplete: _.get(r, 'data.incomplete_details.length') > 0 }))\n .catch(error => defaultOnErrorHandler(error, 'Error finding any incomplete details'));\n }\n\n render() {\n const canPostWires = _.get(window, 'Livewire.currentUser.profile.canPostWires');\n\n return (\n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport LivewireBrand from './common/livewire-brand';\nimport Form from './forgot-password-elements/form';\nimport RecoveryEmailSentConfirmation from './forgot-password-elements/recovery-email-sent-confirmation';\nimport PasswordRecoveryContext, { reducer, defaultState } from './forgot-password-elements/context';\n\nconst Page = styled.div`\n width: 100vw;\n display: flex;\n ${props => (\n props.theme.isMobile ? `\n flex-direction: column-reverse;\n align-items: center;\n background: ${props.theme.linearGradientDarkThemeRect}\n ` : 'flex-direction: row')};\n`;\n\nexport default function ForgotPassword(props) {\n const common = commonProps();\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n const state = {\n ...st,\n ...props,\n ...common,\n };\n const { email } = state;\n\n return (\n \n \n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nForgotPassword.propTypes = {\n logo: PropTypes.string.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport LivewireBrand from './common/livewire-brand';\nimport ExpiredPane from './reset-password-elements/expired-pane';\nimport ResetForm from './reset-password-elements/reset-form';\nimport CompletePane from './reset-password-elements/complete-pane';\nimport ResetPasswordContext, { reducer, defaultState } from './reset-password-elements/context';\n\nconst Page = styled.div`\n width: 100vw;\n display: flex;\n ${props => (\n props.theme.isMobile ? `\n flex-direction: column-reverse;\n align-items: center;\n background: ${props.theme.linearGradientDarkThemeRect}\n ` : 'flex-direction: row')};\n`;\n\nconst ValidPanes = ({ complete }) => (!complete ? \n \n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nResetPassword.propTypes = {\n logo: PropTypes.string.isRequired,\n valid: PropTypes.bool.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport SignInPane from './sign-in-elements/sign-in-pane';\nimport LivewireBrand from './common/livewire-brand';\nimport { Page } from './common/styles';\n\nexport default function SignIn(props) {\n const state = {\n ...props,\n ...commonProps(),\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nSignIn.propTypes = {\n logo: PropTypes.string.isRequired,\n redirectTo: PropTypes.string.isRequired,\n linkedInLogo: PropTypes.string.isRequired,\n linkedInAuthorizeUrl: PropTypes.string.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport commonProps from './common/common-props';\nimport SignUpPane from './sign-up-elements/sign-up-pane';\nimport LivewireBrand from './common/livewire-brand';\nimport { Page } from './common/styles';\n\nexport default function SignUp(props) {\n const state = {\n ...props,\n ...commonProps(),\n };\n\n return (\n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nSignUp.propTypes = {\n logo: PropTypes.string.isRequired,\n redirectTo: PropTypes.string.isRequired,\n linkedInLogo: PropTypes.string.isRequired,\n linkedInAuthorizeUrl: PropTypes.string.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport { sendEvent } from '../../shared/search-event';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\nimport ContributorResultsContext, { reducer, defaultState } from './contributor-results-components/context';\nimport WiresContainer from './contributor-results-components/wires-container';\nimport Profile from './contributor-results-components/profile';\nimport TopKeywords from './contributor-results-components/top-keywords';\nimport TopStockCodes from './contributor-results-components/top-stock-codes';\nimport Colleagues from './contributor-results-components/colleagues';\nimport SimilarContributors from './contributor-results-components/similar-contributors';\n\nconst Columnar = styled.div`\n padding-top: ${props => (props.theme.isDesktop ? 49 : 25)}px;\n\n & section.sidebar > article:first-child {\n margin-top: 0;\n }\n`;\n\nexport default function SearchResultsContributor({\n profile,\n isProfileFollowedByCurrentUser,\n isOfCurrentUser,\n isScrollable,\n activeTab,\n}) {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMax})` });\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n\n React.useEffect(() => {\n (async () => sendEvent())();\n }, []);\n\n const className = isDesktop || isMobile ? 'columnar' : 'columnar no-sidebar';\n\n return (\n \n \n \n \n \n \n \n )}\n \n {isDesktop && (\n \n \n )}\n \n \n \n \n );\n}\n\nSearchResultsContributor.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n contributorOrEditor: PropTypes.bool.isRequired,\n }).isRequired,\n isProfileFollowedByCurrentUser: PropTypes.bool.isRequired,\n isOfCurrentUser: PropTypes.bool.isRequired,\n isScrollable: PropTypes.bool,\n activeTab: PropTypes.oneOf(['all', 'latest', 'mentions']).isRequired,\n};\n\nSearchResultsContributor.defaultProps = {\n isScrollable: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport { sendEvent } from '../../shared/search-event';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\nimport KeywordResultsContext, { reducer, defaultState } from './keyword-results-components/context';\nimport WiresMentioning from './keyword-results-components/wires-mentioning';\nimport TopKeywords from './keyword-results-components/top-keywords';\nimport LogoSeparator from '../shared/logo-separator';\nimport TopContributors from './keyword-results-components/top-contributors';\n\nconst Columnar = styled.div`\n padding-top: ${props => (props.theme.isDesktop ? 49 : 25)}px;\n\n & section.sidebar > article:first-child {\n margin-top: 0;\n }\n`;\n\nexport default function SearchResultsKeyword({ keyword }) {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMax})` });\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n\n React.useEffect(() => {\n (async () => sendEvent())();\n }, []);\n\n const className = isDesktop || isMobile ? 'columnar' : 'columnar no-sidebar';\n\n return (\n \n \n \n \n \n {!isDesktop && (\n \n \n )}\n \n {isDesktop && (\n \n \n )}\n \n \n \n \n );\n}\n\nSearchResultsKeyword.propTypes = {\n keyword: PropTypes.shape({\n value: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport { sendEvent } from '../../shared/search-event';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\nimport LogoSeparator from '../shared/logo-separator';\nimport Company from './listed-company-results-components/company';\nimport WiresMentioning from './listed-company-results-components/wires-mentioning';\nimport TopKeywords from './listed-company-results-components/top-keywords';\nimport TopContributors from './listed-company-results-components/top-contributors';\nimport StockCodeHeader from '../stock-codes/stock-code-header';\nimport ListedCompanyCodeResultsContext, { reducer, defaultState } from './listed-company-results-components/context';\n\nconst Columnar = styled.div`\n padding-top: ${props => (props.theme.isDesktop ? 49 : 25)}px;\n\n & section.sidebar > article:first-child {\n margin-top: 0;\n }\n`;\n\nexport default function SearchResultsListedCompany(props) {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMax})` });\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n const { stockCode, isProductPage, ad } = props;\n\n React.useEffect(() => {\n (async () => sendEvent())();\n }, []);\n\n const className = isDesktop || isMobile ? 'columnar' : 'columnar no-sidebar';\n\n return (\n \n \n \n {\n isProductPage && \n \n {!isProductPage && \n \n )}\n \n {isDesktop && (\n \n \n )}\n \n \n \n \n );\n}\n\nSearchResultsListedCompany.propTypes = {\n stockCode: PropTypes.shape({\n stockExchange: PropTypes.string.isRequired,\n code: PropTypes.string.isRequired,\n companyName: PropTypes.string.isRequired,\n slug: PropTypes.string.isRequired,\n isStockCodeFollowedByCurrentUser: PropTypes.bool.isRequired,\n mentionedIn30DaysCount: PropTypes.number.isRequired,\n totalMentionedCount: PropTypes.number.isRequired,\n }).isRequired,\n isProductPage: PropTypes.bool,\n ad: PropTypes.string.isRequired,\n};\n\nSearchResultsListedCompany.defaultProps = {\n isProductPage: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport { sendEvent } from '../../shared/search-event';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\nimport LogoSeparator from '../shared/logo-separator';\nimport OrganisationResultsContext, { reducer, defaultState } from './organisation-results-components/context';\nimport PublishedBy from './organisation-results-components/published-by';\nimport MentionedWires from './organisation-results-components/mentioned-wires';\nimport Contributors from './organisation-results-components/contributors';\nimport TopStockCodes from './organisation-results-components/top-stock-codes';\nimport TopKeywords from './organisation-results-components/top-keywords';\nimport TopAreasOfExpertise from './organisation-results-components/top-areas-of-expertise';\n\nconst Columnar = styled.div`\n padding-top: ${props => (props.theme.isDesktop ? 49 : 25)}px;\n\n & section.sidebar > article:first-child {\n margin-top: 0;\n }\n`;\n\nexport default function SearchResultsOrganisation({ organisation }) {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMax})` });\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n\n React.useEffect(() => {\n (async () => sendEvent())();\n }, []);\n\n const className = isDesktop || isMobile ? 'columnar' : 'columnar no-sidebar';\n\n return (\n \n \n \n \n \n {!isDesktop && (\n \n \n )}\n \n {isDesktop && (\n \n \n )}\n \n \n \n \n );\n}\n\nSearchResultsOrganisation.propTypes = {\n organisation: PropTypes.string.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { sendEvent } from '../../shared/search-event';\nimport ErrorBoundary from '../../shared/error-boundary';\nimport Callout from '../../shared/callout';\nimport { setLocationHash } from '../../shared/location';\nimport breakpoints from '../../shared/breakpoints';\n\nconst FilterDescriptions = {\n wires: 'Wires',\n contributors: 'Contributors',\n keywords: 'Keywords',\n 'stock-codes': 'Stock Codes',\n};\n\nfunction getFilterTypeDescription(filterType) {\n return FilterDescriptions[filterType];\n}\n\nexport default class SearchFilter extends React.Component {\n /* eslint-disable react/no-unused-prop-types */\n static propTypes = {\n hasWires: PropTypes.bool.isRequired,\n hasContributors: PropTypes.bool.isRequired,\n hasKeywords: PropTypes.bool.isRequired,\n hasStockCodes: PropTypes.bool.isRequired,\n }\n /* eslint-enable react/no-unused-prop-types */\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n selectedFilter: null,\n presented: false,\n };\n\n _.some(FilterDescriptions, (desc, key) => {\n const test = props[`has${desc.replace(' ', '')}`];\n if (test) {\n this.state.selectedFilter = key;\n }\n return test;\n });\n }\n\n componentDidMount() {\n $(document).on('mouseup.searchFilter', e => {\n if (breakpoints.getScreenSize() === 'small') return;\n\n const $target = $(e.target);\n\n if ($target.parents('.search-results-search-filter').length) return;\n\n this.setState({\n presented: false,\n });\n });\n\n if (this.state.selectedFilter) {\n this.setFilter(null, this.state.selectedFilter);\n }\n\n (async () => sendEvent())();\n }\n\n componentWillUnmount() {\n $(document).off('mouseup.searchFilter');\n }\n\n setFilter(e, filterType) {\n if (e && e.preventDefault) e.preventDefault();\n\n this.setState({\n selectedFilter: filterType,\n presented: false,\n });\n setLocationHash(`#nav-${filterType}`);\n }\n\n togglePresented() {\n this.setState(state => ({\n presented: !state.presented,\n }));\n }\n\n render() {\n return (\n \n {!!this.state.selectedFilter && (\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nexport default class SearchInput extends React.Component {\n static propTypes = {\n query: PropTypes.string,\n }\n\n static defaultProps = {\n query: '',\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = { query: this.props.query };\n }\n\n handleQueryChange(e) {\n const query = e.target.value;\n\n this.setState({ query });\n }\n\n performSearch(e) {\n if (e && e.preventDefault) e.preventDefault();\n\n window.location = `/search/wires?query=${this.state.query}`;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport { sendEvent } from '../../shared/search-event';\nimport WireResultsContext, { reducer, defaultState } from './wire-results-components/context';\nimport TitleMatch from './wire-results-components/title-match';\nimport SimilarTo from './wire-results-components/similar-to';\nimport LogoSeparator from '../shared/logo-separator';\nimport OtherWires from './wire-results-components/other-wires';\nimport TopKeywords from './wire-results-components/top-keywords';\nimport TopStockCodes from './wire-results-components/top-stockcodes';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\n\nconst Columnar = styled.div`\n padding-top: ${props => (props.theme.isDesktop ? 49 : 25)}px;\n`;\n\nexport default function SearchResultsWire({ query, titleMatchedWires, searchUpdateEnabled }) {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpointLargeMax})` });\n const [st, dispatch] = React.useReducer(reducer, defaultState);\n const titleMatchedWireIDs = _.map(titleMatchedWires, 'id');\n\n React.useEffect(() => {\n (async () => sendEvent())();\n }, []);\n\n const className = isDesktop || isMobile ? 'columnar' : 'columnar no-sidebar';\n\n return (\n \n \n \n \n \n \n \n )}\n \n {isDesktop && (\n \n \n )}\n \n \n \n \n );\n}\n\nSearchResultsWire.propTypes = {\n query: PropTypes.string.isRequired,\n titleMatchedWires: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n summary: PropTypes.string.isRequired,\n firstPublishedAt: PropTypes.string.isRequired,\n isSponsored: PropTypes.bool.isRequired,\n commentCount: PropTypes.number.isRequired,\n likeCount: PropTypes.number.isRequired,\n liked: PropTypes.bool.isRequired,\n featuredCount: PropTypes.number.isRequired,\n userId: PropTypes.number.isRequired,\n editorsPicked: PropTypes.bool.isRequired,\n ownedByCurrentUser: PropTypes.bool.isRequired,\n category: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n series: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }),\n profile: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n }).isRequired,\n })).isRequired,\n searchUpdateEnabled: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Header from './the-rules-of-investing-components/header';\nimport Main from './the-rules-of-investing-components/main';\n\nexport default function TheRulesOfInvesting(props) {\n const {\n id, slug, description, numberOfWires,\n } = props.series;\n const {\n appleRating, latestWire, wireBg, breadcrumb,\n } = props;\n\n return (\n \n (this.contactFormModal = c)}\n hideSubject={this.props.hideSubject}\n subject={this.props.subject}\n message={this.props.message}\n title={this.props.modalTitle}\n />\n this.contactFormModal.present()}\n >\n {this.props.buttonTitle}\n \n \n );\n }\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useIsMobile } from '../../shared/theme';\n\nconst Hr = styled.hr`\n margin: 20px 0;\n width: 100%;\n border: none;\n border-bottom: 1px solid #d7dfe7;\n`;\n\nexport default function FullWidthHrMobile() {\n const isMobile = useIsMobile();\n\n if (!isMobile) {\n return null;\n }\n\n return
;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { formatInvestorVehicle } from './format';\nimport dt from '../../../shared/theme';\n\nconst Container = styled.span`\n display: flex;\n align-items: center;\n height: 14px;\n margin: 0 16px;\n text-transform: uppercase;\n border: 1px solid #627484;\n box-sizing: border-box;\n border-radius: 2.4px;\n font: ${props => dt(props).theme.fontWeightBold} 10px/12px ${props => dt(props).theme.fontFamilyBody};\n color: #627484;\n`;\n\nconst Tag = styled.span`\n padding: 0 4px;\n margin: 0;\n`;\n\nexport default function InvestorVehicle({ name }) {\n const label = formatInvestorVehicle(name);\n\n if (!label) {\n return null;\n }\n return (\n\n {label} \n \n );\n}\n\nInvestorVehicle.propTypes = { name: PropTypes.string };\n\nInvestorVehicle.defaultProps = {\n name: null,\n};\n","import React from 'react';\nimport TrendingPanel from './trending-panel';\n\nexport default function TrendingPanelMobile(props) {\n return (
\n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\nimport breakpoints from '../../shared/breakpoints';\n\nconst TYPES = [\n 'Cash', 'Equities', 'Fixed Income', 'Managed Fund (Aust.)',\n 'Managed Fund (Global)', 'Property', 'Unlisted Investments',\n];\n\nconst Input = ({ label }) => {\n const kebab = _.kebabCase(label);\n return (\n \n );\n};\n\nInput.propTypes = {\n label: PropTypes.string.isRequired,\n};\n\nexport default class StyleGuideLivewireWizardStepModal extends React.Component {\n componentDidMount() {\n postal.subscribe({\n channel: 'commands.style-guide-livewire-wizard-step-modal',\n topic: 'present',\n callback: () => this.present(),\n });\n }\n\n present() {\n breakpoints.upFrom_medium() && this.$overlay.fadeIn(400);\n this.$modal.fadeIn(400);\n }\n\n dismiss() {\n breakpoints.upFrom_medium() && this.$overlay.fadeOut(400);\n this.$modal.fadeOut(400);\n }\n\n render() {\n return (\n (this.$overlay = $(el))} onClick={this.dismiss} />\n
\n (this.$modal = $(el))}>\n \n \n \n (this.loading = el)}>\n \n \n \n {!!this.state.series.id && (\n \n \n
\n \n \n {`${this.state.series.id ? 'Editing' : 'Creating'} a series`}\n \n
\n\n \n
\n )}\n \n \n
\n You're not currently following any contributors
\n )}\n\n \n })
\n })
\n \n
\n \n \n \n \n {onTabletOrMobile || Already a member?}\n {onTabletOrMobile && }\n
\n \n
\n \n
\n \n
\n Assign a Category
\n\n {this.state.categories.map(category => (\n \n this.handleAssignedCategoryChange(e)}\n value={category.id}\n />\n {category.name}\n \n ))}\n (this.assignedCategoryIdLoading = el)} />\n
\n \n Wealth managers\n
\n \n \n
\n )\n }\n \n \n \n
\n );\n}\n","import React from 'react';\nimport classNames from 'classnames';\nimport MainNavbarContext from '../main-navbar-context';\nimport ApplicationNavbarContext from '../application-navbar-context';\n\nexport default function SubNav() {\n const { state, dispatch } = React.useContext(ApplicationNavbarContext);\n const { state: mainNavbarState } = React.useContext(MainNavbarContext);\n const [menus, setMenus] = React.useState([]);\n\n React.useEffect(() => {\n if (state.activeExpandableMenu) {\n const sourceMenu = mainNavbarState[state.activeExpandableMenu] || [];\n setMenus(sourceMenu);\n } else {\n dispatch({ type: 'hideSubNav' });\n }\n }, [state.activeExpandableMenu, mainNavbarState, dispatch]);\n\n function createOnMouseEnter(name) {\n return () => {\n if (state.subNavHoverTimeout) {\n clearTimeout(state.subNavHoverTimeout);\n }\n dispatch({\n type: 'setSubNavHoverTimeout',\n payload: setTimeout(() => dispatch({ type: 'showPreviewNav', payload: name }), 500),\n });\n };\n }\n\n function onMouseLeave() {\n if (state.subNavHoverTimeout) {\n clearTimeout(state.subNavHoverTimeout);\n dispatch({ type: 'setSubNavHoverTimeout', payload: null });\n }\n }\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport SignUpButton from '../sign-up-button';\nimport SignInButton from '../sign-in-button';\n\nexport default function UnregisteredNav() {\n return (\n - \n {menus.map(({ name, url }) => (\n
- \n
- \n
\n \n - \n
\n \n
\n
\n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport update from 'immutability-helper';\nimport PropTypes from 'prop-types';\n\nimport breakpoints from '../../../shared/breakpoints';\nimport CampaignSignUpForm from '../../campaigns/campaign-sign-up-form';\nimport SignInButton from './sign-in-button';\n\nconst DEFAULT_CAMPAIGN_HEADER = 'Livewire.\n
\n \n Get investment ideas \n {this.props.contributorName && (\n \n from \n {this.props.contributorName}\n \n \n )}\n when you sign up to Livewire Markets.\n
\n \nDiscover your next investment.';\nconst DEFAULT_CAMPAIGN_COPY = \"Join 120,000 Australians and gain unparalleled access to the trade ideas and investment strategies of Australia's leading investors\";\nconst DEFAULT_CAMPAIGN_LANDING_PAGE_CSS_CLASS = 'campaign-landing-page-default';\n\nfunction openSignUpModal(event) {\n event && event.preventDefault();\n\n postal.publish({\n channel: 'commands.campaigns',\n topic: 'present-sign-up-modal',\n });\n}\n\nexport default class SignUpModal extends React.Component {\n /* Props:\n showImmediately: boolean, if true shows the modal immediately\n redirectTo: string, url to redirect to, default is default sign up redirect path\n campaignHeader: Optional text for Header, allows string & html\n campaignCopy: Optional text for Header, allows string & html\n */\n\n static propTypes = {\n showImmediately: PropTypes.bool.isRequired,\n redirectTo: PropTypes.string.isRequired,\n campaignHeader: PropTypes.string,\n campaignCopy: PropTypes.string,\n campaignLandingPageCssClass: PropTypes.string,\n showLearnMoreLink: PropTypes.bool,\n }\n\n static defaultProps = {\n campaignHeader: DEFAULT_CAMPAIGN_HEADER,\n campaignCopy: DEFAULT_CAMPAIGN_COPY,\n campaignLandingPageCssClass: DEFAULT_CAMPAIGN_LANDING_PAGE_CSS_CLASS,\n showLearnMoreLink: true,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.toggleModal = this.toggleModal.bind(this);\n this.dismiss = this.dismiss.bind(this);\n this.present = this.present.bind(this);\n\n this.state = {\n showModal: false,\n allowClose: true,\n campaignHeader: props.campaignHeader,\n campaignCopy: props.campaignCopy,\n campaignLandingPageCssClass: props.campaignLandingPageCssClass,\n showLearnMoreLink: props.showLearnMoreLink,\n redirectTo: props.redirectTo,\n email: '',\n };\n this.campaignSignUpForm = React.createRef();\n }\n\n componentDidMount() {\n // NOTE Show the modal when clicking embedded videos within shielded wires,\n // bottom form on wire page, register buttons\n $(document)\n .on(\n 'click',\n [\n 'button.btn_register',\n '.wire[data-shielded=true] .embedded-video',\n 'a[data-id=register-button]',\n ].join(', '),\n event => {\n if ($(event.target).parents('article').length) {\n const linkIsInternal = /^(http?.:\\/\\/((www|staging)?\\.?livewiremarkets\\.com|localhost:?[0-9]?[0-9]?[0-9]?[0-9]?\\/)|\\/).*/.test(event.target.href);\n\n if (!linkIsInternal) return;\n }\n\n this.present();\n event.preventDefault();\n },\n );\n\n // NOTE present immediately if the showImmediately prop is set\n if (this.props.showImmediately) {\n this.present();\n }\n\n // NOTE invert to make it trigger the first time\n let onMobileOrTablet = !breakpoints.upTo_medium();\n const updateOpacity = () => {\n const currentlyOnMobileOrTablet = breakpoints.upTo_medium();\n\n if (currentlyOnMobileOrTablet !== onMobileOrTablet) {\n onMobileOrTablet = currentlyOnMobileOrTablet;\n\n if (onMobileOrTablet) {\n this.$lightLogoImg.hide();\n this.$darkLogoImg.show();\n } else {\n this.$lightLogoImg.show();\n this.$darkLogoImg.hide();\n }\n this.$header.css({\n 'background-color': `rgba(255,255,255,${onMobileOrTablet ? 1 : 0})`,\n 'border-bottom': `1px solid rgba(255,255,255,${onMobileOrTablet ? 1 : 0})`,\n 'box-shadow': `0 2px 5px rgba(0,0,0,${onMobileOrTablet ? 0.5 : 0})`,\n });\n this.forceUpdate();\n }\n };\n\n $(window).on('resize', _.throttle(() => updateOpacity(), 1000 / 60));\n updateOpacity();\n\n postal.subscribe({\n channel: 'commands.sign-up',\n topic: 'toggle-sign-up',\n callback: () => this.toggleModal(),\n });\n postal.subscribe({\n channel: 'commands.sign-up',\n topic: 'present',\n callback: data => {\n if (data) {\n this.setState(state => update(state, {\n campaignHeader: { $set: data.campaignHeader || state.campaignHeader },\n campaignCopy: { $set: data.campaignCopy || state.campaignCopy },\n redirectTo: { $set: data.redirectTo || state.redirectTo },\n email: { $set: data.email || state.email },\n }));\n }\n\n this.present();\n },\n });\n postal.subscribe({\n channel: 'commands.sign-up',\n topic: 'dismiss',\n callback: () => this.dismiss(),\n });\n }\n\n setShowModalState(showModal) {\n if (this.state.showModal === showModal) return;\n\n if (showModal) {\n this.showModal();\n } else {\n this.hideModal();\n }\n\n this.setState({ showModal });\n\n postal.publish({\n channel: 'events.sign-up',\n topic: showModal ? 'present' : 'dismiss',\n });\n }\n\n dismiss() {\n this.setShowModalState(false);\n }\n\n present() {\n this.setShowModalState(true);\n }\n\n showModal() {\n this.$modal.fadeIn({\n duration: 400,\n complete: () => {\n if (this.state.email) {\n this.campaignSignUpForm.current.prefillEmail(this.state.email);\n }\n this.campaignSignUpForm.current.focusInput();\n },\n });\n }\n\n hideModal() {\n this.$modal.fadeOut(400);\n }\n\n toggleModal() {\n this.setShowModalState(!this.state.showModal);\n }\n\n render() {\n const onMobileOrTablet = breakpoints.upTo_medium();\n\n return (\n
(this.$modal = $(el))} className=\"full-screen-modal sign-up-modal\">\n (this.$header = $(el))}>\n \n\n
\n );\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport breakpoints from '../../../shared/breakpoints';\n\nexport default function ThroughPortal(WrappedComponent) {\n return class extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n showPortal: breakpoints.upTo_medium(),\n };\n }\n\n componentDidMount() {\n $(window).on('resize', () => {\n this.setState({\n showPortal: breakpoints.upTo_medium(),\n });\n });\n }\n\n componentWillUnmount() {\n $(window).off('resize');\n }\n\n render() {\n return this.state.showPortal ? (\n ReactDOM.createPortal(\n \n \n (this.$lightLogoImg = $(el))}\n />\n (this.$darkLogoImg = $(el))}\n />\n \n
\n \n {onMobileOrTablet\n ? (\n \n Sign up\n \n )\n : Already a member?}\n
\n \n
\n \n
\n \n \n \n
\n \n \n {/* eslint-disable react/no-danger */}\n \n \n {/* eslint-enable react/no-danger */}\n { this.state.showLearnMoreLink && (\n \n \n \n
\n \n
\n \n \n
\n Time until event
\n\n {days}\n {' d '}\n {hours}\n {' h '}\n {minutes}\n {' m '}\n {seconds}\n {' s '}\n
\n{event.name}
\n \n\n \n {error && \n
\n \n Livewire\n {' events'}\n
\nError loading events
}\n- \n {events.map(renderEvent)}\n
\n Magellan’s Hamish Douglass and Platinum’s Andrew Clifford headline an exceptional\n speaker lineup at Livewire Live 2019.\n
\n\n Join us at Livewire Live 2019\n
\n By Investors, For Investors.\n
\n #LWL19\n
PROUDLY SPONSORED BY
\n\n Livewire Live 2019 is an investor event like no other. We’ve assembled the top tier\n wealth managers and fund managers to debate the most challenging issues facing investors\n in an innovative and engaging format.\n
\n\n \n Tuesday, 10th September 2019\n
\n The Domain Theatre, Art Gallery of NSW\n
\n 1:00pm - 5:00pm\n \n
\n Followed by live music, drinks and canapés at Chiswick at the Gallery: 5:00pm to 7:00pm\n
\n Cost: $155 plus booking fee\n
\n\n
Why come to LWL19?
\n\n Front Row Seats\n
\n Magellan’s Hamish Douglass and Platinum’s Andrew Clifford will reveal the 10 global\n companies that will dominate the next decade.\n
\n Exclusive Access\n
\n Australia’s best hedge funds will open up on\n ‘The Good, The Bad and The Ugly’\n {' '}\n of stocks listed on the ASX.\n
\n Debate\n
\n Watch a live debate as two teams go head-to-head and make their case for why you should be\n ‘Risk On, or Risk Off’\n {' '}\n in the current environment.\n
\n Beat the Crowd\n
\n The emerging markets of Asia are full of opportunity; we’ve got a local guide to help you\n beat the crowd.\n
\n Shocking Predictions\n
\n Be challenged and entertained with these shocking predictions about the events that will\n shape markets in 2020 and beyond.\n
Agenda
\n\n With access to the experts, you will gain the knowledge to be more confident and\n successful with your future investments.\n
\n\n This is an unmissable event and one afternoon only. Tickets are limited and sell out.\n Be sure to secure your spot today!\n {' '}\n We look forward to seeing you there.\n {' '}\n
\n\nFAQs
\n\nDirections to the Domain Theatre, Art Gallery of NSW.
\nFrom the front entrance, ground level
\n- \n
- Head towards the rear of the Gallery \n
- Take the escalators down three levels \n
- Turn left \n
- The Domain Theatre is straight ahead \n
Accessible directions
\nFrom the rear entrance, lower level 1
\n- \n
- Take the lift (on your left) down two levels, to 3 \n
- Head through the double glass doors \n
- The Domain Theatre is across the foyer on your right \n
\n How can I contact the organiser with any questions?\n
\n Should you have any questions regarding Livewire Live 2019 please contact us at\n {' '}\n team@livewiremarkets.com\n
\n \n (this.topPagination = x)} {...paginationOpts} />\n \n (this.notificationsSpinner = x)}>\n \n {!!this.state.notifications.length || (\n \n \n
\n Notifications
\n\n You have no notifications\n
\n )}\n {!!this.state.notifications.length && this.renderNotifications()}\n - \n
\n this.handleDayChange(e)}\n >\n {_.range(0, daysInMonth).map(d => )}\n \n this.handleMonthChange(e)}\n >\n {_.range(0, 12).map(month => (\n \n ))}\n \n this.handleYearChange(e)}\n >\n {_.range(currentYear - 100, currentYear + 1).map(year => (\n \n ))}\n \n
\n );\n }\n\n render() {\n return (\n - \n
\n \n Search Livewire by \n \n \n {getFilterTypeDescription(this.state.selectedFilter)}\n \n \n)}\n show={this.state.presented}\n togglePresent={() => this.togglePresented()}\n classModifier=\"btn btn-link\"\n >\n
\n )}\n \n \n \n
\n \n Select content type
\n- \n {_.map(FilterDescriptions, (desc, key) => (this.props[`has${desc.replace(' ', '')}`]\n ?
- this.setFilter(e, key)}>{desc} \n : null\n ))}\n
\n
\n );\n}\n\nTheRulesOfInvesting.propTypes = {\n series: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string.isRequired,\n description: PropTypes.string,\n numberOfWires: PropTypes.number.isRequired,\n }).isRequired,\n appleRating: PropTypes.number.isRequired,\n latestWire: PropTypes.shape.isRequired,\n wireBg: PropTypes.string.isRequired,\n /* eslint-disable-next-line react/require-default-props */\n breadcrumb: PropTypes.string,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ContactFormModal from './contact-form-modal';\nimport ErrorBoundary from '../../shared/error-boundary';\n\nexport default class ContactFormModalButton extends React.Component {\n static propTypes = {\n hideSubject: PropTypes.bool,\n subject: PropTypes.string,\n message: PropTypes.string,\n modalTitle: PropTypes.string,\n buttonTitle: PropTypes.string,\n };\n\n static defaultProps = {\n hideSubject: false,\n subject: '',\n message: '',\n modalTitle: 'Contact us',\n buttonTitle: 'Contact us',\n };\n\n render() {\n return (\n ;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { formatInvestorVehicle } from './format';\nimport dt from '../../../shared/theme';\n\nconst Container = styled.span`\n display: flex;\n align-items: center;\n height: 14px;\n margin: 0 16px;\n text-transform: uppercase;\n border: 1px solid #627484;\n box-sizing: border-box;\n border-radius: 2.4px;\n font: ${props => dt(props).theme.fontWeightBold} 10px/12px ${props => dt(props).theme.fontFamilyBody};\n color: #627484;\n`;\n\nconst Tag = styled.span`\n padding: 0 4px;\n margin: 0;\n`;\n\nexport default function InvestorVehicle({ name }) {\n const label = formatInvestorVehicle(name);\n\n if (!label) {\n return null;\n }\n return (\n
\n (this.$overlay = $(el))}\n className=\"livewire-modal-overlay style-guide-livewire-password-modal-overlay\"\n onClick={() => this.dismiss()}\n />\n (this.$modal = $(el))}\n className=\"livewire-modal style-guide-livewire-password-modal\"\n tabIndex=\"-1\"\n role=\"dialog\"\n >\n \n \n \n \n \n \n \n
\n Provide your password
\n\n Enter a password for your new account. It must be at least 8 characters long.\n
\n \n\n (this.$overlay = $(el))}\n role=\"region\"\n className=\"livewire-modal-overlay style-guide-livewire-wizard-step-modal-overlay\"\n onClick={() => this.dismiss()}\n />\n (this.$overlay = $(el))}\n className=\"livewire-modal style-guide-livewire-wizard-step-modal\"\n tabIndex=\"-1\"\n role=\"dialog\"\n >\n \n \n \n \n \n \n \n
\n Step 3 of 5
\nWhich investment themes are you most interested in?
\n\n Select the asset classes which relate to your investment portfolio.\n
\n \n\n
\n );\n}\n\nWireDraft.propTypes = {\n wire: PropTypes.shape({\n id: PropTypes.number.isRequired,\n slug: PropTypes.string,\n title: PropTypes.string.isRequired,\n updatedAt: PropTypes.string.isRequired,\n }).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport dt from '../../shared/theme';\n\nconst Hr = styled.hr`\n margin: 20px 0;\n ${props => (dt(props).theme.isMobile ? `\n width: 100%;\n border: none;\n border-bottom: 1px solid #d7dfe7;\n ` : `\n width: 148px;\n border: 0.02em solid ${dt(props).theme.primaryColor};\n `)};\n`;\n\nexport default function EndOfWire() {\n return \n {wire.title}\n
\n \n {`Last saved on ${moment(wire.updatedAt).format('ddd Do MMMM @ h.mma')}`}\n \n \n \n;\n}\n","import React from 'react';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport theme from '../../../assets/stylesheets/_settings.global.scss';\n\nconst vGap = 15;\n\nconst Container = styled.div`\n color: white;\n width: 100%;\n padding: ${props => (props.theme.isMobile ? '30px 20px' : '30px 40px')};\n border-radius: 10px;\n position: relative;\n background: ${props => props.theme.bodyColor};\n background: ${props => (props.theme.isMobile ? props.theme.linearGradientDarkThemeSquare : props.theme.linearGradientDarkThemeRect)};\n box-shadow: 0 2px 3px ${props => props.theme.darkShadowColor};\n`;\n\nconst Header = styled.h4`\n font-family: ${props => props.theme.fontFamilyHeader};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 24px;\n line-height: 31px;\n text-transform: none;\n margin: 0;\n ${props => (!props.theme.isMobile && `\n margin-right: 75px;\n `)};\n`;\n\nconst Separator = styled.hr`\n height: 1px;\n width: 88px;\n background-color: ${props => props.theme.primaryColor};\n border: 0px;\n margin-top: ${vGap}px;\n margin-bottom: ${vGap}px;\n text-align: left;\n margin-left: 0;\n`;\n\nconst Desc = styled.p`\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightBold};\n font-size: 15px;\n line-height: 18px;\n`;\n\nconst Footer = styled.div`\n margin-top: ${vGap}px;\n display: flex;\n flex-direction: ${props => (props.theme.isMobile ? 'column' : 'row')};\n align-items: center;\n`;\n\nconst Button = styled.button`\n width: ${props => (props.theme.isMobile ? '100%' : '234px')};\n color: white;\n background-color: ${props => props.theme.btnPrimaryBackgroundColor};\n border: none;\n border-radius: 4px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 16px;\n padding: 10px 20px;\n text-transform: uppercase;\n\n &:hover {\n background-color: ${props => props.theme.btnPrimaryBackgroundColor};\n }\n\n`;\n\nconst Aside = styled.span`\n ${props => (props.theme.isMobile ? `\n margin-top: 30px;\n ` : `\n margin-left: 20px;\n `)};\n font-size: 12px;\n`;\n\nconst signUp = evt => {\n evt && evt.preventDefault();\n window.location = '/sign_up';\n};\n\nconst signIn = evt => {\n evt && evt.preventDefault();\n window.location = '/sign_in';\n};\n\nexport default function PromptToJoin() {\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n return (\n
}\n
Share
\n
- \n
\n
\n \n 
\n {!!pick.wire.profile?.name &&
\n {pick.wire.title}
\n{pick.wire.profile?.name}
}\n {!!pick.wire.profile?.organisation &&{pick.wire.profile?.organisation}
}\n- \n {picks.map((pick, index) => (\n
Editor's Picks
\nThere are no contributors
}\nSign in to Livewire
\nWhat type of investor are you?
\nSelect the investor type which best describes you.
\n\n {this.state.investorTypes.map(type => {\n const matched = this.state.investorTypeId === type.id;\n return (\n \n this.handleInvestorTypeChange(e)}\n value={type.id}\n />\n {type.name}\n \n );\n })}\n (this.investorTypeIdLoading = el)} />\n
\n Which investment themes interest you most?
\nSelect the asset classes and investment topics that you are interested in.
\n\n {this.state.assetClasses.map((assetClass, index) => (\n \n this.handleAssetClassChange(e)}\n />\n {assetClass.title}\n \n ))}\n (this.assetClassLoading = el)} />\n
\n \n
\n);\n\nPdfAttachment.propTypes = {\n url: PropTypes.string.isRequired,\n filename: PropTypes.string.isRequired,\n size: PropTypes.string,\n};\n\nPdfAttachment.defaultProps = {\n size: null,\n};\n\nexport default function MediaCarousel(props) {\n const { wireId, inFullWireView, showMediaGallery } = props;\n const elementId = `wire-${wireId}`;\n\n const [{ data }, getCarouselMetadata] = useGetMediaCarouselMetadata(wireId);\n\n React.useEffect(() => {\n getCarouselMetadata();\n }, [getCarouselMetadata]);\n\n React.useEffect(() => {\n if (data) {\n Livewire.Wire.initCarousel($(`#${elementId}`));\n }\n }, [data, elementId]);\n\n const isMobile = useMediaQuery({ query: `(max-width: ${theme.breakpointMediumMax})` });\n\n if (isMobile && !inFullWireView) {\n return null;\n }\n\n return (\n pdf attached
\n\n
\n {\n data && (\n
\n );\n}\n\nMediaCarousel.propTypes = {\n wireId: PropTypes.number.isRequired,\n inFullWireView: PropTypes.bool.isRequired,\n showMediaGallery: PropTypes.bool.isRequired,\n};\n","import moment from 'moment';\nimport React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { Link, RowContainer } from '../../shared/styles';\nimport { ActionColumn, DateColumn, NameColumn } from './styles';\nimport { deleteAdvertising } from '../../../../services/lwadmin/advertising/advertising-service';\nimport useAdvertisingsStore from './state-hook';\n\nconst DeleteLink = styled(Link)`\n color: ${props => props.theme.errorColor};\n\n &:hover {\n color: ${props => props.theme.errorColor};\n }\n`;\n\nexport default function Advertising({ advertising }) {\n const removeAdvertising = useAdvertisingsStore(state => state.removeAdvertising);\n const [showDeleteConfirmation, setShowDeleteConfirmation] = React.useState(false);\n\n const {\n id,\n name,\n startDate,\n finishDate,\n } = advertising;\n\n const handleDelete = e => {\n e && e.preventDefault();\n\n deleteAdvertising(id).then(removeAdvertising(advertising));\n };\n\n return (\n - \n {data.media.map(m => {\n const filename = _(m.url).split('/').last();\n const isPDF = _.lowerCase(_(filename).split('.').last()) === 'pdf';\n const pdfProps = { ...m, filename: _.truncate(filename, { length: 40 }) };\n\n if (!isPDF && !showMediaGallery) {\n return null;\n }\n\n return (\n
- \n {isPDF &&
}\n {showMediaGallery && }\n
\n );\n })}\n {data.attachments.map(att => (\n - \n
Partnership: None
\n );\n }\n\n const {\n id,\n name,\n type,\n email,\n isActive,\n } = partnership;\n\n return (\n <>\n\n Partnership: \n \n {name}\n \n
\n\n Partnership type: \n {type}\n
\n \n Contact: \n \n {!!email && {email}}\n \n
\n \n Status: \n {isActive ? 'Active' : 'Inactive'}\n
\n \n );\n}\n\nPartnership.propTypes = {\n partnership: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n email: PropTypes.string,\n type: PropTypes.string.isRequired,\n isActive: PropTypes.bool.isRequired,\n }),\n};\n\nPartnership.defaultProps = {\n partnership: null,\n};\n","import React from 'react';\nimport Card from 'react-bootstrap/Card';\nimport withNameInput from './hoc-input';\nimport withNameSelect from './hoc-select';\nimport withNameCheckbox from './hoc-checkbox';\nimport Header from './header';\nimport Pane from './pane';\n\nconst Name = withNameInput('name');\nconst FundType = withNameSelect('fundType');\nconst DataProviderId = withNameInput('dataProviderId', 'data provider id');\nconst ISIN = withNameInput('isin', 'isin', true);\nconst ApirCode = withNameInput('apirCode', 'apir code');\nconst StockCode = withNameSelect('stockCode');\nconst Company = withNameSelect('company');\nconst Members = withNameSelect('members', 'team members', true);\nconst InvestorVehicleType = withNameInput('fundInvestorVehicleType', 'investor vehicle type', true);\nconst Wholesale = withNameCheckbox('wholesale', 'wholesale');\nconst Category = withNameInput('dpCategory', 'data provider category', true);\nconst Series = withNameSelect('series', 'series', true);\n\nexport default function BasicFields() {\n return (\n {`There is no questions for ${type || 'the type of fund'}.`}
}\n {!!typedList.length && (\n <>\n\n \n
\n );\n}\n/* eslint-enable complexity */\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport { HeaderContainer, HeaderMixin } from '../../../shared/styles';\nimport {\n DataColumn,\n NameColumn,\n} from './styles';\n\nconst NameColumnHeader = styled(NameColumn)`\n ${HeaderMixin}\n`;\n\nconst DataColumnHeader = styled(DataColumn)`\n ${HeaderMixin}\n`;\n\nconst ImportColumnHeader = styled(DataColumnHeader)`\n label {\n float: right;\n }\n`;\n\nexport default function Header() {\n return (\n \n \n Search for a fund to import data \n \n \n {funds.length > 0 && funds.map(fund => No funds found }\n \n \n
\n \n \n
\n );\n}\n/* eslint-enable complexity */\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { formatMoney, formatDate } from '../../../../shared/fund/format';\nimport Item from './item';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 16px 0;\n`;\n\n// eslint-disable-next-line complexity\nexport default function Fund({ fund }) {\n const {\n dpFundName,\n dpFundInceptionDate,\n dpFundMinimumInvestment,\n dpFundApir,\n dpFundIsin,\n dpFundId,\n dpFundCurrency,\n dpFundLegalStructure,\n dpFundDomicile,\n dpFundCategory,\n dpFundInvestmentVehicleType,\n geographicalFocus,\n dpStockCode,\n dpStockExchange,\n lwStockCode,\n dpFundType,\n } = fund;\n\n const inceptionDate = dpFundInceptionDate ? formatDate(dpFundInceptionDate) : null;\n const fundMinimumInvestment = dpFundMinimumInvestment > 0\n ? formatMoney(dpFundMinimumInvestment)\n : null;\n\n return (\n \n \n confirm data import \n \n Below is a list of the fields which will be updated with data imported from our\n data provider. Please confirm before importing.\n \n \n {!!viewFund && \n \n cancel \n \n import \n \n \n \n
\n \n {q.fundTypes.map(({ label }) => (\n \n {label}\n \n ))}\n
\n \n \n );\n}\n\nSummary.propTypes = {\n eventKey: PropTypes.string.isRequired,\n qindex: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport { ActionContainer, ActionLink, ActionTitle } from '../../shared/styles';\n\nexport default function Actions() {\n return (\n \n \n {this.state.validations.nameRequiredValid || Event name is required}\n
\n );\n }\n\n renderSlug() {\n return (\n\n \n {this.state.validations.slugRequiredValid || Event slug is required}\n The event slug must match the Livewire page for the event. See your IT team for assistance.\n
\n );\n }\n\n renderDate() {\n /* eslint-disable jsx-a11y/label-has-associated-control */\n return (\n\n \n {this.state.validations.startsAtRequiredValid || The starting date/time is required}\n
\n );\n /* eslint-enable jsx-a11y/label-has-associated-control */\n }\n\n renderTime() {\n return (\n \n \n {this.state.validations.starts_at_timeRequiredValid || Starts at time is required}\n {this.state.validations.starts_at_timeFormatValid || Starts at time must be in the correct format (HH:MM, 24 hour time)}\n
\n );\n }\n\n renderEventBrite() {\n return (\n \n \n {this.state.validations.eventbrite_idRequiredValid || The Eventbrite ID is required}\n
\n );\n }\n\n renderRollOver() {\n return (\n\n \n
\n );\n }\n\n renderCity() {\n return (\n\n \n {this.state.validations.cityRequiredValid || The city is required}\n
\n );\n }\n\n renderDigitalPass() {\n return (\n\n \n
\n );\n }\n\n renderHidden() {\n return (\n\n \n
\n );\n }\n\n render() {\n return (\n\n
(this.$overlay = $(el))} onClick={() => this.dismiss()} />\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport Validator from '../../../shared/validator';\nimport mutate from '../../../shared/mutate';\nimport { UserSearchControl } from '../shared/user-search-control';\n\n/* Props:\n- orderDidSave Callback after order was saved\n*/\nexport default class LinkLivewireEventOrderModal extends React.Component {\n static propTypes = {\n orderDidSave: PropTypes.func.isRequired,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n userRequired: state => !!state.user,\n });\n this.state = {\n order: {},\n user: null,\n validations: this.validator.getValidations(),\n };\n }\n\n componentDidMount() {\n const self = this;\n\n this.$modal.click(function onClick(e) {\n if (e.target === this) self.dismiss();\n });\n }\n\n handleUserChange(user) {\n this.setState(oldState => mutate(oldState, state => {\n state.user = user;\n state.validations.userRequiredValid = this.validator.validateUserRequired(state);\n }));\n }\n\n present(order) {\n this.setState({\n order,\n user: null,\n validations: this.validator.getValidations(),\n });\n this.userSearchControl.clear();\n this.$overlay.fadeIn();\n this.$modal.fadeIn();\n }\n\n dismiss() {\n this.$overlay.fadeOut();\n this.$modal.fadeOut();\n }\n\n link() {\n this.setState(\n state => ({\n validations: this.validator.validateForm(state),\n }),\n () => {\n if (!this.validator.formValid) return;\n\n this.loading.start();\n this.state.order.linkToUser(this.state.user)\n .then(() => {\n this.loading.stop();\n this.dismiss();\n this.props.orderDidSave && this.props.orderDidSave(this.state.order);\n })\n .catch(e => {\n this.loading.stop();\n defaultOnErrorHandler(e, 'Error linking order to user');\n });\n },\n );\n }\n\n render() {\n return (\n (this.$modal = $(el))}>\n \n \n \n (this.loading = c)}>\n \n \n \n \n \n \n
\n \n {`${this.state.event.id ? 'Editing' : 'Creating'} an event`}\n
\n\n \n Name \n URL \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {\n Button,\n HelpBlock,\n InputText,\n SuccessMessage,\n} from '../../common/form';\nimport {\n createNavigationItem,\n updateNavigationItem,\n publishNavigationItem,\n unpublishNavigationItem,\n} from '../../../../services/lwadmin/navigation/navigation-item-service';\nimport useNavigationStore from '../state-hook';\n\nconst SSuccessMessage = styled(SuccessMessage)`\n margin-bottom: 0;\n`;\n\nconst Form = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n padding: 12px 0;\n\n & > .name {\n width: 30%;\n }\n\n & > .url {\n width: 40%;\n }\n\n & > .action {\n width: 30%;\n }\n`;\n\nconst SInputText = styled(InputText)`\n width: 90%;\n`;\n\nconst SButton = styled(Button)`\n margin-top: 0;\n margin-right: 10px;\n padding: 0 10px;\n`;\n\nexport default function Item(props) {\n const set = useNavigationStore(state => state.set);\n const [saving, setSaving] = React.useState(false);\n const [showSuccess, setShowSuccess] = React.useState(false);\n const [error, setError] = React.useState(null);\n const [item, setItem] = React.useState(_.get(props, 'item', {}));\n const {\n id,\n name,\n url,\n order,\n published,\n } = item;\n\n const onAttributeChange = e => {\n const attrValue = _.get(e, 'target.value', '');\n const attrName = _.get(e, 'target.name');\n const newItem = { ...item };\n newItem[attrName] = attrValue;\n setItem(newItem);\n\n set(state => {\n state.items[order] = newItem;\n });\n };\n\n const saveItem = () => {\n setSaving(true);\n\n const payload = { name, url, order };\n\n const createOrUpdate = id ? updateNavigationItem(id, payload) : createNavigationItem(payload);\n\n createOrUpdate.then(resp => {\n setSaving(false);\n setError(null);\n setShowSuccess(true);\n setTimeout(() => setShowSuccess(false), 3000);\n\n const createdId = _.get(resp, 'data.id');\n if (createdId) {\n setItem({ ...item, id: createdId });\n }\n }).catch(errorResp => {\n setSaving(false);\n setShowSuccess(false);\n setError(_.get(errorResp, 'response.data'));\n });\n };\n\n const publishOrUnpublish = () => {\n const apiToCall = published ? unpublishNavigationItem : publishNavigationItem;\n\n apiToCall(id).then(() => setItem({ ...item, published: !published }));\n };\n\n return (\n <>\n {showSuccess && Navigation item successfully saved }\n {error && {_.compact([error.name, error.url]).join(' and ')} }\n \n \n );\n}\n\nItem.propTypes = {\n item: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n url: PropTypes.string,\n order: PropTypes.number,\n published: PropTypes.bool,\n }).isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport useNavigationStore from '../state-hook';\n\nconst Container = styled.div`\n margin-top: 32px;\n`;\n\nexport default function Preview() {\n const items = useNavigationStore(state => state.items);\n\n return (\n \n \n );\n}\n","import _ from 'lodash';\nimport Wire from './wire';\n\nexport default class Contributor {\n /* eslint-disable camelcase */\n constructor(source) {\n Object.assign(this, source || {\n id: null,\n name: '',\n company: '',\n wires: [],\n active: true,\n });\n\n this.wires = this.wires.map(w => new Wire(w));\n }\n\n get sent_contact_count() {\n return _(this.wires).sumBy(w => w.sent_contact_count);\n }\n\n get unsent_contact_count() {\n return _(this.wires).sumBy(w => w.unsent_contact_count);\n }\n\n get total_contact_count() {\n return this.sent_contact_count + this.unsent_contact_count;\n }\n /* eslint-enable camelcase */\n}\n","/* eslint-disable camelcase */\nexport default class Wire {\n constructor(source) {\n Object.assign(this, source || {\n id: null,\n title: '',\n sent_contact_count: 0,\n unsent_contact_count: 0,\n });\n }\n\n get total_contact_count() {\n return this.sent_contact_count + this.unsent_contact_count;\n }\n}\n/* eslint-enable camelcase */\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { useGetCompanies } from '../../../services/lwadmin/company/company-service';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: -20px;\n`;\n\nconst Input = styled.input`\n height: 50px;\n padding: 15px 23px;\n margin-top: 16px;\n`;\n\nconst Label = styled.label`\n color: ${props => props.theme.bodyColor};\n font-size: 16px;\n margin-top: -20px;\n line-height: 100%;\n`;\n\nconst CompaniesContainer = styled.div`\n display: flex;\n flex-direction: column;\n border: 1px solid #e4eaee;\n border-top: none;\n border-radius: 4px;\n padding: 16px 8px;\n`;\n\nconst Row = styled.div`\n border-radius: 4px;\n padding: 8px;\n\n &:hover {\n background-color: #e4eaee;\n cursor: pointer;\n }\n`;\n\nconst NoResult = styled.div`\n padding: 8px;\n`;\n\nexport default function CompanySearchControl({ filterExisting, onCompanySelected }) {\n const [, getCompanies] = useGetCompanies();\n\n const [allCompanies, setAllCompanies] = React.useState([]);\n const [filteredCompanies, setFilteredCompanies] = React.useState([]);\n const [query, setQuery] = React.useState('');\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && getCompanies().then(({ data }) => {\n const companies = _.get(data, 'companies') || [];\n setAllCompanies(companies);\n setFilteredCompanies(filterExisting(companies));\n });\n }, {});\n\n const filter = React.useCallback(() => {\n let f = [...filterExisting(allCompanies)];\n\n if (query.length > 0) {\n const regex = new RegExp(query, 'i');\n f = _.filter(f, company => company.name.match(regex));\n }\n setFilteredCompanies(f);\n }, [filterExisting, allCompanies, query]);\n\n useChangeAwareEffect(({ did }) => {\n did.query.change && filter();\n }, { query, filter });\n\n const handleOnChange = e => {\n const newQuery = e.target.value;\n setQuery(newQuery);\n };\n\n const selectCompany = (e, compnay) => {\n e && e.preventDefault();\n onCompanySelected(compnay);\n setQuery('');\n };\n\n return (\n \n \n {filteredCompanies.map(company => (\n selectCompany(e, company)}>\n {company.name}\n
\n ))}\n {filteredCompanies.length === 0 && No Result }\n \n )}\n \n );\n}\n\nCompanySearchControl.propTypes = {\n filterExisting: PropTypes.func.isRequired,\n onCompanySelected: PropTypes.func.isRequired,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport update from 'immutability-helper';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport toastr from 'toastr';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport { getContact, sendContact as send } from '../../../services/lwadmin/partnership/partnership-service';\n\nconst Contact = source => ({\n ...(source || {\n id: null,\n name: '',\n email: '',\n phone: '',\n investor_type: '',\n enquiring_about: [],\n message_to_contributor: '',\n partnership: {\n id: null,\n },\n }),\n created_at: _.get(source, 'created_at') ? moment(source.created_at) : null,\n sent_at: _.get(source, 'sent_at') ? moment(source.sent_at) : null,\n});\n\nexport default class ViewContactModal extends React.Component {\n static propTypes = {\n contactWasSent: PropTypes.func,\n };\n\n static defaultProps = {\n contactWasSent: null,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n contact: Contact(),\n };\n }\n\n componentDidMount() {\n const self = this;\n\n this.$modal.click(function onClick(e) {\n if (e.target === this) self.dismiss();\n });\n }\n\n present(partnershipId, contactId) {\n this.$overlay.fadeIn();\n this.$modal.fadeIn();\n this.loading.start();\n getContact(partnershipId, contactId)\n .then(result => this.setState({ contact: Contact(result.data) }))\n .catch(error => defaultOnErrorHandler(error, 'Error loading contact'))\n .finally(() => this.loading.stop());\n }\n\n dismiss() {\n this.$overlay.fadeOut();\n this.$modal.fadeOut();\n }\n\n sendContact() {\n this.loading.start();\n send(this.state.contact.partnership.id, this.state.contact.id)\n .then(() => {\n this.setState(state => update(state, {\n contact: {\n sent_at: { $set: moment() },\n },\n }));\n toastr.success('Contact has been sent');\n this.props.contactWasSent && this.props.contactWasSent();\n })\n .catch(error => defaultOnErrorHandler(error, 'Error sending contact'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n const { contact } = this.state;\n return (\n \n \n {props.children}\n \n);\nMenu.propTypes = { children: PropTypes.node.isRequired };\n\nconst onBlur = () => {\n postal.publish({\n channel: 'editor',\n topic: 'mention-control-on-blur',\n });\n};\n\nconst onChange = mentionable => {\n postal.publish({\n channel: 'editor',\n topic: 'mention-control-value-selected',\n data: mentionable,\n });\n};\n\nconst validSearchQuery = query => query.trim().length >= 2;\n\nexport default class MentionControl extends React.Component {\n static propTypes = {\n menuIsOpen: PropTypes.bool.isRequired,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n query: '',\n mentionables: [],\n };\n\n this.setFocus = this.setFocus.bind(this);\n this.onKeyDown = this.onKeyDown.bind(this);\n this.onInputChange = this.onInputChange.bind(this);\n this.noOptionsMessage = this.noOptionsMessage.bind(this);\n }\n\n onKeyDown(event) {\n const { key } = event;\n\n if (key === 'Enter' && !this.selectRef.select.state.focusedOption) {\n event.preventDefault();\n }\n\n if (key === 'Backspace' && this.selectRef.state.inputValue.length < 1) {\n postal.publish({\n channel: 'editor',\n topic: 'mention-control-on-backspace',\n data: event,\n });\n\n return;\n }\n\n postal.publish({\n channel: 'editor',\n topic: 'mention-control-on-keydown',\n data: event,\n });\n }\n\n onInputChange(newValue) {\n if (validSearchQuery(newValue)) {\n getAll(newValue)\n .then(result => this.setState({\n query: newValue,\n mentionables: _.map(_.get(result, 'data.mentionables'), m => ({\n ..._.pick(m, ['id', 'name', 'company', 'isCompanyProfile', 'type', 'publicUrl']),\n value: this.buildSearchName(m),\n label: m.name,\n })),\n }));\n } else {\n this.setState({\n query: newValue,\n mentionables: [],\n });\n }\n }\n\n setFocus() {\n this.selectRef.focus();\n }\n\n // eslint-disable-next-line class-methods-use-this\n buildSearchName(record) {\n let name = `${record.name} ${record.company}`;\n\n if (record.type === 'StockCode') {\n [':', ' ', ''].forEach(char => {\n name += ` ${record.name.replace(': ', char)}`;\n });\n }\n\n return name;\n }\n\n noOptionsMessage() {\n if (validSearchQuery(this.state.query)) {\n return 'NO CONTRIBUTOR, FUND OR STOCK CODE FOUND';\n }\n\n return 'ENTER A SEARCH TERM';\n }\n\n render() {\n const label = 'MENTION CONTRIBUTOR, FUND, OR STOCK CODE';\n const groupedOptions = [\n {\n label,\n options: this.state.mentionables,\n },\n ];\n\n return (\n \n \n \n );\n }\n}\n","import axios from 'axios';\n\nexport default function getAll(query) {\n return axios.get('/api/v1/mentionables', {\n params: { query },\n cache: { ignoreCache: true },\n });\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport function useUpdateCTA(wireId, newCta) {\n const common = (wId, cta) => ({\n url: `/api/v1/wire/${wId}/cta`,\n data: cta,\n });\n\n const [state, q] = useAxios({\n method: 'POST',\n ...common(wireId, newCta),\n }, { manual: true });\n\n const executeQuery = (wId, cta) => q(common(wId, cta));\n\n return [state, executeQuery];\n}\n\nexport function useDeleteCTA(wireId) {\n const common = (wId, cta) => ({\n url: `/api/v1/wire/${wId}/cta`,\n data: cta,\n });\n\n const [state, q] = useAxios({\n method: 'DELETE',\n ...common(wireId),\n }, { manual: true });\n\n const executeQuery = wId => q(common(wId));\n\n return [state, executeQuery];\n}\n\nexport function useGetPresetCTA(wireId) {\n const common = wId => ({\n cache: { ignoreCache: true },\n url: `/api/v1/wire/${wId}/cta/preset`,\n method: 'GET',\n });\n\n const [state, q] = useAxios(common(wireId), { manual: true });\n\n const executeQuery = wId => q(common(wId));\n\n return [state, executeQuery];\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select, { components } from 'react-select';\nimport styled, { ThemeProvider } from 'styled-components';\nimport postal from 'postal';\n\nimport theme from '../../../../../assets/stylesheets/_settings.global.scss';\nimport TextArea from '../../../shared/text-area';\nimport Loading from '../../../../shared/loading';\nimport { useDeleteCTA, useUpdateCTA, useGetPresetCTA } from '../../../../services/wire/cta-service';\nimport useEditorStore from '../state-hook';\nimport {\n Button, BottomLink, Container, Link, Title, TitleContainer,\n} from './shared/styles';\nimport { selectorProps } from '../../../lwadmin/common/form';\n\nconst MContainer = styled(Container)`\n margin-bottom: 24px;\n`;\n\nconst TextTitle = styled.h2`\n font-size: 24px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n margin: 12px 0;\n`;\n\nconst TextMessage = styled.p`\n font-size: 19px;\n margin: 9px 0;\n`;\n\nconst Field = styled.div`\n label {\n font-weight: ${props => props.theme.fontWeightBold};\n }\n\n textarea {\n resize: none;\n padding: 8px 16px;\n font-size: 19px;\n font-weight: ${props => props.theme.fontWeightRegular};\n }\n`;\n\nconst FieldPresetList = styled(Field)`\n label {\n font-size: 14px;\n text-transform: uppercase;\n }\n\n & > div {\n margin-bottom: 24px;\n }\n\n .preset-cta-option {\n display: flex;\n align-items: center;\n cursor: pointer;\n gap: 8px;\n padding-left: 8px;\n }\n`;\n\nconst FieldTitle = styled(Field)`\n textarea {\n font-size: 24px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n }\n`;\n\nconst FieldText = styled(Field)`\n textarea {\n color: ${props => props.theme.primaryColor};\n text-decoration: underline;\n\n &::placeholder {\n color: ${props => props.theme.secondaryColor};\n opacity: 0.5;\n }\n }\n`;\n\nconst FieldNamesMap = {\n title: 'Title',\n message: 'Message',\n text: 'Call to Action Text',\n url: 'Call to Action Link',\n};\n\nconst buildErrorMessage = (fieldName, errors) => {\n const fieldErrors = errors[fieldName] || [];\n\n return fieldErrors.length > 0 ? `${FieldNamesMap[fieldName]} ${fieldErrors[0]}` : '';\n};\n\nconst customSelectorProps = {\n ...selectorProps,\n styles: {\n ...selectorProps.styles,\n option: (provided, state) => ({\n ...provided,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: state.isSelected ? '#FBF5E5' : (state.isFocused ? '#FBF5E5' : '#fff'),\n // eslint-disable-next-line no-nested-ternary\n color: state.isSelected ? '#B88E1E' : (state.isFocused ? '#B88E1E' : '#19202d'),\n fontSize: 18,\n fontWeight: 400,\n textTransform: 'none',\n padding: '3px 12px',\n }),\n groupHeading: (provided) => ({\n ...provided,\n marginTop: '4px',\n marginBottom: 0,\n }),\n group: (provided) => ({\n ...provided,\n paddingTop: '4px',\n paddingBottom: 0,\n }),\n },\n};\n\nconst PresetCTAOption = props => (\n \n \n);\n\nPresetCTAOption.propTypes = {\n data: PropTypes.shape({\n type: PropTypes.string,\n label: PropTypes.string,\n value: PropTypes.string,\n }).isRequired,\n};\n\nexport default function CTA() {\n const [editable, setEditable] = React.useState(false);\n const [presetCTAOptions, setPresetCTAOptions] = React.useState([]);\n const [selectedPresetCTA, setSelectedPresetCTA] = React.useState(null);\n const [errors, setErrors] = React.useState({});\n const [{ data, loading }, updateCTA] = useUpdateCTA();\n const [, deleteCTA] = useDeleteCTA();\n const [, getPresetCTA] = useGetPresetCTA();\n const set = useEditorStore(state => state.set);\n const wire = useEditorStore(state => state.wire);\n const cta = useEditorStore(state => state.cta);\n const presetCTA = useEditorStore(state => state.presetCTA);\n const loadingRef = React.useRef();\n\n const getPresetCTAList = () => {\n getPresetCTA(wire.id).then(res => {\n set(state => {\n state.presetCTA = res.data;\n });\n\n const contributorOptions = res.data.contributorCta.map(\n contributorCTA => ({\n type: 'contributor',\n value: contributorCTA,\n label: `${contributorCTA.contributor}, ${contributorCTA.company} - ${contributorCTA.title}`,\n }),\n );\n\n const companyOptions = res.data.companyCta.map(\n companyCTA => ({\n type: 'company',\n value: companyCTA,\n label: `${companyCTA.company} - ${companyCTA.title}`,\n }),\n );\n\n const groupedOptions = [];\n if (contributorOptions.length > 0) groupedOptions.push({ label: 'Contributor', options: contributorOptions });\n if (companyOptions.length > 0) groupedOptions.push({ label: 'Company', options: companyOptions });\n\n setPresetCTAOptions(groupedOptions);\n });\n };\n\n React.useEffect(() => {\n loadingRef.current && loadingRef.current.toggle(loading);\n }, [loading]);\n\n React.useEffect(() => {\n const editorSubscription = postal.subscribe({\n channel: 'editor',\n topic: 'wire-body-saved',\n callback: getPresetCTAList,\n });\n\n getPresetCTAList();\n\n return () => {\n editorSubscription.unsubscribe();\n };\n }, []);\n\n React.useEffect(() => {\n if (!cta.id && data && data.id) {\n set(state => {\n state.cta.id = data.id;\n });\n }\n\n setErrors(data && data.errors ? data.errors : []);\n }, [data]);\n\n const toggleEditable = e => {\n e.preventDefault();\n setEditable(!editable);\n };\n\n const removeCTA = e => {\n e.preventDefault();\n deleteCTA(wire.id);\n setEditable(false);\n setErrors({});\n set(state => {\n state.cta = {};\n });\n };\n\n const onChange = (field, value) => {\n updateCTA(wire.id, { [field]: value });\n\n set(state => {\n state.cta[field] = value;\n });\n\n if (selectedPresetCTA) {\n setSelectedPresetCTA(null);\n }\n };\n\n let actionLabel;\n if (editable) {\n actionLabel = 'Done';\n } else {\n actionLabel = cta.id ? 'Edit CTA' : 'Add CTA';\n }\n\n const onPresetCTAChange = selected => {\n if (selected) {\n const { value } = selected;\n const {\n title,\n message,\n text,\n url,\n } = value;\n\n updateCTA(wire.id, {\n title,\n message,\n text,\n url,\n });\n\n set(state => {\n state.cta = {\n id: state.cta.id,\n title,\n message,\n text,\n url,\n };\n });\n\n setSelectedPresetCTA(selected);\n }\n };\n\n return (\n \n \n \n Call to Action \n {actionLabel}\n \n { !editable && cta.id && (\n <>\n {cta.title} \n {cta.message} \n {cta.text} \n \n )}\n { editable && (\n <>\n {(presetCTA.companyCta.length > 0 || presetCTA.contributorCta.length > 0) && (\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n \n )}\n \n onChange('title', v)}\n />\n \n \n onChange('message', v)}\n />\n \n \n onChange('text', v)}\n />\n \n \n onChange('url', v)}\n />\n \n {actionLabel} \n \n )}\n \n \n );\n}\n","import useAxios from 'axios-hooks';\n\nexport default function useGetContributorsByName() {\n const common = query => ({ params: { search_term: query } });\n const [state, q] = useAxios({\n url: '/api/v1/contributors/search',\n cache: { ignoreCache: true },\n method: 'GET',\n }, { manual: true });\n const executeQuery = query => q(common(query));\n return [state, executeQuery];\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport Select from 'react-select';\nimport { useDebouncedCallback } from 'use-debounce';\nimport selectorProps from './selector-style';\nimport Contributor from './contributor';\nimport useGetContributorsByName from '../../../../../services/contributors/search-service';\nimport { useUpdateContributor } from '../../../../../services/wire/edit-services';\nimport useEditorStore from '../../state-hook';\nimport useContributorStore from './state-hook';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n z-index: 5;\n`;\n\nconst Anchor = styled.a`\n align-self: flex-end;\n display: inline-block;\n font: ${props => props.theme.fontWeightBold} 14px/120% ${props => props.theme.fontFamilyBody};\n margin-bottom: 8px;\n margin-right: 3px;\n color: ${props => props.theme.secondaryColor};\n text-transform: uppercase;\n`;\n\nexport default function Selector() {\n // eslint-disable-next-line no-unused-vars\n const [{ data }, search] = useGetContributorsByName();\n const { callback: debouncedSearch } = useDebouncedCallback(search, 300, { leading: true });\n const [options, setOptions] = React.useState([]);\n const mounted = React.useRef(false);\n const selectRef = React.useRef();\n const valueChanged = React.useRef(false);\n const prev = useContributorStore(state => state.prev);\n const dft = useContributorStore(state => state.dft);\n const setContributor = useContributorStore(state => state.set);\n const setEditor = useEditorStore(state => state.set);\n const wire = useEditorStore(state => state.wire);\n const [{ response: updateResponse }, update] = useUpdateContributor(wire.id);\n\n React.useEffect(() => {\n mounted.current = true;\n _.get(selectRef, 'current') && selectRef.current.focus();\n return () => (mounted.current = false);\n }, []);\n\n React.useEffect(() => {\n const contributors = _.get(data, 'contributors', []);\n setOptions(contributors.map(c => ({\n ...c,\n label: `${c.name} ${c.organization}`,\n value: c.slug,\n isDefault: c.slug === dft,\n })));\n }, [data, dft]);\n\n React.useEffect(() => {\n if (_.get(updateResponse, 'status') === 200) {\n const profile = (_.get(updateResponse, 'data.profile', null));\n if (profile) {\n setContributor(state => {\n state.toChange = false;\n });\n setEditor(state => {\n state.wire.profile = profile;\n });\n }\n }\n }, [updateResponse, setContributor, setEditor]);\n\n const undo = e => {\n e && e.preventDefault();\n if (mounted.current && prev) {\n setContributor(state => {\n state.toChange = false;\n });\n }\n };\n\n const onInputChange = v => {\n if (mounted.current) {\n if (v.length >= 3) {\n debouncedSearch(v);\n } else {\n setOptions([]);\n }\n }\n };\n\n const onChange = v => {\n valueChanged.current = true;\n if (mounted.current) {\n if (v.slug === prev) {\n undo();\n } else {\n update(wire.id, v.slug);\n }\n }\n };\n\n const onMenuClose = () => {\n // This event is always happening before onChange.\n setTimeout(() => (mounted.current && valueChanged.current || undo()), 50);\n };\n\n const isSelected = d => prev === d.slug;\n\n return (\n \n undo \n \n );\n}\n","import axios from '../axios';\nimport csrfToken from '../../shared/meta';\n\naxios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken();\n\nexport default function updateWireFeaturedContributors(wireId) {\n return axios.put(`/hotwired/wires/${wireId}/featured_contributors`, { responseType: 'text', cache: { ignoreCache: true } });\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport postal from 'postal';\nimport updateWireFeaturedContributors from '../../../../services/wire/featured-contributor-service';\n\nexport default class WireFeaturedContributorsControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n postal.subscribe({\n channel: 'editor',\n topic: 'wire-body-saved',\n callback: this.updateFeaturedContributors.bind(this),\n });\n }\n\n updateFeaturedContributors() {\n const id = `#wire-featured-contributors-${this.props.wireId}`;\n updateWireFeaturedContributors(this.props.wireId)\n .then(response => {\n document.querySelector(id).innerHTML = response.data;\n });\n }\n\n render() {\n const id = `wire-featured-contributors-${this.props.wireId}`;\n const urlValue = `/hotwired/wires/${this.props.wireId}/featured_contributors`;\n return (\n \n \n \n \n \n \n {text}\n \n \n );\n}\n\nTip.propTypes = {\n text: PropTypes.string.isRequired,\n largeFont: PropTypes.bool,\n};\n\nTip.defaultProps = {\n largeFont: true,\n};\n","import React from 'react';\nimport moment from 'moment';\nimport PropTypes from 'prop-types';\nimport 'react-dates/initialize';\nimport { isInclusivelyAfterDay, SingleDatePicker } from 'react-dates';\n\nexport default function SingleDatePickerWrapper({ initialDate, onDateChange, isOutsideRange }) {\n const [focused, setFocused] = React.useState(false);\n const [date, setDate] = React.useState(initialDate);\n\n React.useEffect(() => {\n initialDate && setDate(initialDate);\n }, [initialDate]);\n\n const dateChangeHandler = d => {\n onDateChange(d);\n setDate(d);\n };\n\n return (\n setFocused(d.focused)}\n isOutsideRange={isOutsideRange}\n displayFormat={moment.localeData('en-au').longDateFormat('L')}\n />\n );\n}\n\nSingleDatePickerWrapper.propTypes = {\n initialDate: PropTypes.instanceOf(moment),\n onDateChange: PropTypes.func.isRequired,\n isOutsideRange: PropTypes.func,\n};\n\nSingleDatePickerWrapper.defaultProps = {\n initialDate: null,\n isOutsideRange: (d => !isInclusivelyAfterDay(d, moment())),\n};\n","import axios from 'axios';\n\nconst base = '/api/v1/lwadmin/livewire_event';\n\nexport function getAllEvents() {\n return axios.get(`${base}s`);\n}\n\nexport function createOrUpdateEvent(dto) {\n return axios.post(`${base}/${dto.id || ''}`, dto);\n}\n\nexport function getUnlinkedOrders() {\n return axios.get(`${base}s/orders/unlinked`);\n}\n\nexport function linkOrderToUser(orderId, userId) {\n return axios.post(`${base}s/order/${orderId}/_link_to_user/${userId}`);\n}\n","import _ from 'lodash';\nimport axios from 'axios';\nimport csrfToken from '../../../shared/meta';\nimport axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nconst formDataHeaders = {\n 'X-CSRF-TOKEN': csrfToken(),\n 'content-type': 'multipart/form-data',\n};\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nconst base = '/api/v1/lwadmin/announcement';\n\nexport function useGetAnnouncements() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${base}s`,\n method: 'GET',\n }, { manual: true });\n}\n\nconst buildFormData = payload => {\n const data = new FormData();\n\n _.forOwn(payload, (value, key) => {\n if (key === 'hero_image') {\n !!value && data.append(key, value);\n } else if (key === 'companies' || key === 'investor_types') {\n if (_.isEmpty(value)) {\n data.append(`${key}[]`, '');\n } else {\n _.each(value, v => data.append(`${key}[]`, v));\n }\n } else {\n data.append(key, value);\n }\n });\n\n return data;\n};\n\nexport function createAnnouncement(payload) {\n return axios.post(base, buildFormData(payload), { headers: formDataHeaders });\n}\n\nexport function updateAnnouncement(id, payload) {\n return axios.put(`${base}/${id}`, buildFormData(payload), { headers: formDataHeaders });\n}\n\nexport function publishAnnouncement(id) {\n return axios.put(`${base}/${id}/publish`, { headers });\n}\n\nexport function unpublishAnnouncement(id) {\n return axios.put(`${base}/${id}/unpublish`, { headers });\n}\n","import axios from 'axios';\nimport csrfToken from '../../../shared/meta';\nimport axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nexport function useGetFundCategories() {\n return useAxios({\n cache: { ignoreCache: true },\n url: '/api/v1/lwadmin/data_provider/fund_categories',\n method: 'GET',\n }, { manual: true });\n}\n\nexport function createFundCategory(payload) {\n return axios.post('/api/v1/lwadmin/data_provider/fund_category', payload, { headers });\n}\n\nexport function updateFundCategory(id, payload) {\n return axios.put(`/api/v1/lwadmin/data_provider/fund_category/${id}`, payload, { headers });\n}\n\nexport function deleteFundCategory(id) {\n return axios.delete(`/api/v1/lwadmin/data_provider/fund_category/${id}`, { headers });\n}\n","import _ from 'lodash';\nimport axios from 'axios';\nimport csrfToken from '../../../shared/meta';\nimport axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nconst formDataHeaders = {\n 'X-CSRF-TOKEN': csrfToken(),\n 'content-type': 'multipart/form-data',\n};\n\nconst base = '/api/v1/lwadmin/homepage/banner';\n\nconst buildFormData = payload => {\n const data = new FormData();\n\n _.forOwn(payload, (value, key) => {\n if (key === 'image') {\n !!value && data.append(key, value);\n } else {\n data.append(key, value);\n }\n });\n\n return data;\n};\n\nexport function useGetBanners() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${base}s`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function createBanner(payload) {\n return axios.post(base, buildFormData(payload), { headers: formDataHeaders });\n}\n\nexport function updateBanner(id, payload) {\n return axios.put(`${base}/${id}`, buildFormData(payload), { headers: formDataHeaders });\n}\n\nexport function publishBanner(id) {\n return axios.put(`${base}/${id}/publish`, { headers });\n}\n\nexport function unpublishBanner(id) {\n return axios.put(`${base}/${id}/unpublish`, { headers });\n}\n","export function contactAsync(arg) {\n return $.post('/api/v1/contact/_contact', {\n contact_form: {\n name: arg.name,\n company: arg.company,\n email_address: arg.emailAddress,\n subject: arg.subject,\n message: arg.message,\n mobile: arg.mobile,\n send_media_kit: arg.sendMediaKit,\n },\n });\n}\n\nexport function contactAsContributorAsync(arg) {\n return $.post('/api/v1/contact/_as_contributor', {\n contact_form: {\n name: arg.name,\n email_address: arg.emailAddress,\n mobile_phone_number: arg.mobilePhoneNumber,\n },\n });\n}\n\nexport function contactAsPartnerAsync(arg) {\n return $.post('/api/v1/contact/_as_partner', {\n contact_form: {\n name: arg.name,\n email_address: arg.emailAddress,\n mobile_phone_number: arg.mobilePhoneNumber,\n },\n });\n}\n","import _ from 'lodash';\nimport axios from 'axios';\nimport csrfToken from '../../../shared/meta';\nimport axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nconst formDataHeaders = {\n 'X-CSRF-TOKEN': csrfToken(),\n 'content-type': 'multipart/form-data',\n};\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nconst base = '/api/v1/lwadmin/advertising';\n\nconst buildFormData = payload => {\n const data = new FormData();\n\n _.forOwn(payload, (value, key) => {\n if (key === 'image') {\n !!value && data.append(key, value);\n } else {\n data.append(key, value);\n }\n });\n\n return data;\n};\n\nexport function useGetAdvertisings() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${base}s`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function createAdvertising(payload) {\n return axios.post(base, buildFormData(payload), { headers: formDataHeaders });\n}\n\nexport function updateAdvertising(id, payload) {\n return axios.put(`${base}/${id}`, buildFormData(payload), { headers: formDataHeaders });\n}\n\nexport function deleteAdvertising(id) {\n return axios.delete(`${base}/${id}`, { headers });\n}\n","import axios from 'axios';\n\nconst url = id => `/api/v1/wire/${id}/media_types`;\n\nexport function get(wireId) {\n return axios.get(url(wireId), { cache: { ignoreCache: true } });\n}\n\nexport function create(wireId, mediaTypeId) {\n return axios.post(`${url(wireId)}/${mediaTypeId}`);\n}\n\nexport function remove(wireId, mediaTypeId) {\n return axios.delete(`${url(wireId)}/${mediaTypeId}`);\n}\n","import axios from 'axios';\nimport axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\nimport csrfToken from '../../../shared/meta';\n\nconfigure({ axiosConfig });\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nconst base = '/api/v1/lwadmin/navigation_item';\n\nexport function useGetNavigationItems() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${base}s`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function createNavigationItem(payload) {\n return axios.post(base, payload, { headers });\n}\n\nexport function updateNavigationItem(id, payload) {\n return axios.put(`${base}/${id}`, payload, { headers });\n}\n\nexport function publishNavigationItem(id) {\n return axios.put(`${base}/${id}/publish`, { headers });\n}\n\nexport function unpublishNavigationItem(id) {\n return axios.put(`${base}/${id}/unpublish`, { headers });\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function EditAdvertising(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nEditAdvertising.propTypes = propTypes;\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function NewAdvertising(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nNewAdvertising.propTypes = propTypes;\n","import _ from 'lodash';\nimport React from 'react';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { ThemeProvider } from 'styled-components';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Loading from '../../../shared/loading';\nimport useAdvertisingsStore from './advertisings-components/state-hook';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { useGetAdvertisings } from '../../../services/lwadmin/advertising/advertising-service';\nimport Advertising from './advertisings-components/advertising';\nimport Actions from './advertisings-components/actions';\nimport Header from './advertisings-components/header';\n\nexport default function Advertisings() {\n const set = useAdvertisingsStore(state => state.set);\n const advertisings = useAdvertisingsStore(state => state.advertisings);\n const [{ loading }, get] = useGetAdvertisings();\n const loadingRef = React.useRef();\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get().then(({ data }) => {\n set(state => {\n state.advertisings = _.get(data, 'advertisings', []);\n });\n });\n }, {});\n\n React.useEffect(() => (loadingRef.current.toggle(loading)), [loading]);\n\n return (\n \n \n \n \n {advertisings.map(ad => \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function EditAnnouncement(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nEditAnnouncement.propTypes = propTypes;\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function NewAnnouncement(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nNewAnnouncement.propTypes = propTypes;\n","import _ from 'lodash';\nimport React from 'react';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { ThemeProvider } from 'styled-components';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Loading from '../../../shared/loading';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { useGetAnnouncements } from '../../../services/lwadmin/announcement/announcement-service';\nimport Announcement from './announcements-components/announcement';\nimport Actions from './announcements-components/actions';\nimport Header from './announcements-components/header';\nimport AnnouncementModal from '../../announcement/announcement-modal';\nimport useAnnouncementModalStore from '../../announcement/state-hook';\n\nexport default function Announcements() {\n const [announcements, setAnnouncements] = React.useState([]);\n const [{ loading }, get] = useGetAnnouncements();\n const loadingRef = React.useRef();\n\n const announcement = useAnnouncementModalStore(state => state.currentAnnouncement);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get().then(({ data }) => setAnnouncements(_.get(data, 'announcements', [])));\n }, {});\n\n React.useEffect(() => (loadingRef.current.toggle(loading)), [loading]);\n\n return (\n \n \n \n \n {announcements.map(an => \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport {\n SortableFilterableTableHeader,\n SORT_DIRECTION,\n sortSimpleColumn,\n filterSimpleColumn,\n} from '../../../shared/sortable-filterable-table-header';\nimport Category from './category';\nimport EditCategoryModal from './edit-category-modal';\nimport { getAll } from '../../../services/lwadmin/category/category-service';\n\nfunction filterCategories(categories, state) {\n let filteredCategories = _(categories);\n\n filteredCategories = filterSimpleColumn(filteredCategories, 'name', state);\n\n return filteredCategories.value();\n}\n\nfunction sortCategories(categories, state) {\n let sortedCategories = _(categories);\n\n sortedCategories = sortSimpleColumn(sortedCategories, 'name', state);\n\n return sortedCategories.value();\n}\n\nfunction filterAndSortCategories(categories, state) {\n return sortCategories(filterCategories(categories, state), state);\n}\n\nexport default class CategoriesTable extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n allCategories: [],\n categories: [],\n nameSortDirection: SORT_DIRECTION.unsorted,\n nameFilter: '',\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.categories.commands',\n topic: 'create-category',\n callback: () => this.createCategory(),\n });\n\n this.refresh();\n }\n\n createCategory() {\n this.editCategoryModal.present();\n }\n\n refresh() {\n this.loading.start();\n getAll()\n .then(result => {\n this.setState(state => {\n state.allCategories = _(result.data.categories)\n .map(p => new Category(p))\n .sortBy(x => x.name)\n .value();\n state.categories = filterAndSortCategories(state.allCategories, state);\n return state;\n });\n })\n .catch(err => defaultOnErrorHandler(err, 'Error loading categories'))\n .finally(() => this.loading.stop());\n }\n\n editCategory(e, category) {\n e && e.preventDefault && e.preventDefault();\n\n this.editCategoryModal.present(category.id);\n }\n\n sortName(direction) {\n this.setState(state => {\n state.nameSortDirection = direction;\n state.categories = filterAndSortCategories(state.allCategories, state);\n return state;\n });\n }\n\n filterName(filter) {\n this.setState(state => {\n state.nameFilter = filter;\n state.categories = filterAndSortCategories(state.allCategories, state);\n return state;\n });\n }\n\n render() {\n return (\n \n \n );\n }\n}\n","import moment from 'moment';\n\nexport default class CategoryNameChanges {\n constructor(source) {\n Object.assign(this, source || {\n new_name: '',\n by_user: '',\n updated_at: null,\n });\n\n this.updated_at = this.updated_at ? moment(this.updated_at) : null;\n }\n}\n","import moment from 'moment';\n\nexport default class WireCategoryReferenceChanges {\n constructor(source) {\n Object.assign(this, source || {\n wire: {\n id: null,\n title: '',\n },\n by_user: '',\n updated_at: null,\n });\n\n this.updated_at = this.updated_at ? moment(this.updated_at) : null;\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport postal from 'postal';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport {\n SortableFilterableTableHeader,\n SORT_DIRECTION,\n} from '../../../shared/sortable-filterable-table-header';\nimport EditCategoryModal from '../categories/edit-category-modal';\nimport { getById } from '../../../services/lwadmin/category/category-service';\n\nconst dirs = {\n name: 'name_changes_updated_atSortDirection',\n wire: 'wires_assigned_updated_atSortDirection',\n};\n\nconst arrs = {\n name: 'category_name_changes',\n wire: 'wire_category_reference_changes',\n};\n\nconst nameChanges = source => ({\n ...(source || {\n new_name: '',\n by_user: '',\n }),\n updated_at: _.get(source, 'updated_at') ? moment(source.updated_at) : null,\n});\n\nconst wireReferenceChanges = source => ({\n ...(source || {\n wire: { id: null, title: '' },\n by_user: '',\n }),\n updated_at: _.get(source, 'updated_at') ? moment(source.updated_at) : null,\n});\n\nconst createCategory = source => ({\n ...(source || {\n id: null,\n name: '',\n description: '',\n slug: '',\n stats: { wires_count: 0 },\n }),\n [arrs.name]: _.get(source, arrs.name, []).map(nameChanges),\n [arrs.wire]: _.get(source, arrs.wire, []).map(wireReferenceChanges),\n});\n\nconst DataTable = ({ type, onSort, data }) => (\n \n \n \n
\n \n);\n\nDataTable.propTypes = {\n type: PropTypes.oneOf(['wire', 'name']).isRequired,\n onSort: PropTypes.func.isRequired,\n data: PropTypes.arrayOf(PropTypes.shape({\n updated_at: PropTypes.objectOf(PropTypes.object),\n by_user: PropTypes.string,\n })).isRequired,\n};\n\nexport default class CategoryAdmin extends React.Component {\n static propTypes = {\n categoryId: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n category: createCategory(),\n [dirs.wire]: SORT_DIRECTION.unsorted,\n [dirs.name]: SORT_DIRECTION.unsorted,\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.category.commands',\n topic: 'edit-category',\n callback: () => this.editCategory(),\n });\n this.refresh();\n }\n\n editCategory() {\n this.editCategoryModal.present(this.state.category.id);\n }\n\n refresh() {\n this.loading.start();\n getById(this.props.categoryId)\n .then(result => this.setState({ category: createCategory(result.data.category) }))\n .catch(error => defaultOnErrorHandler(error, 'Error loading category'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\n\nimport {\n FormField,\n HelpBlock,\n InputFile,\n Label,\n Row,\n} from './form';\n\nexport default function withNameFileInput(objectName, name, store, accept, label) {\n const kebab = _.kebabCase(name);\n const capitalize = _.capitalize(name);\n const snake = _.snakeCase(name);\n\n function PlainInput() {\n const set = store(state => state.set);\n const errors = store(state => state.errors);\n const file = store(state => state[objectName][name]);\n const filename = store(state => state[objectName][`${name}Filename`]);\n\n const onChange = e => {\n e && e.preventDefault();\n\n const v = e.target.files[0];\n\n set(state => {\n state[objectName][name] = v;\n });\n };\n\n return (\n \n \n \n {errors[snake]} }\n \n
\n );\n }\n\n PlainInput.displayName = capitalize;\n\n return PlainInput;\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Loading from '../../../shared/loading';\nimport { Container, ContentContainer } from '../shared/styles';\nimport CompaniesContext, { reducer, defaultState } from './companies-components/context';\nimport { useGetCompanies, createCompanyCTA, updateCompanyCTA } from '../../../services/lwadmin/company/company-service';\nimport Header from './companies-components/header';\nimport Company from './companies-components/company';\nimport Actions from './companies-components/actions';\nimport EditCompanyModal from './companies-components/edit-company-modal';\nimport BrandCompanyModal from './companies-components/brand-company-modal';\nimport CTAModal from './companies-components/cta-modal';\n\nconst initialOrder = 'asc';\n\nexport default function Companies() {\n const [{ loading }, get] = useGetCompanies();\n const [state, dispatch] = React.useReducer(reducer, defaultState);\n const loadingRef = React.useRef();\n\n const sortCompanies = React.useCallback((companies, key, direction) => {\n const c = _.orderBy(companies, key, direction);\n dispatch({ type: 'setCompanies', payload: c });\n }, []);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get().then(({ data }) => {\n const companies = _.get(data, 'companies') || [];\n sortCompanies(companies, 'name', initialOrder);\n });\n }, {});\n\n React.useEffect(() => (loadingRef.current.toggle(loading)), [loading]);\n\n const onSort = (key, direction) => {\n sortCompanies(state.companies, key, direction);\n };\n\n const props = { initialOrder, onSort };\n\n return (\n \n \n \n \n \n {state.companies.map(company => \n \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function EditContentFormatType(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nEditContentFormatType.propTypes = propTypes;\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function NewContentFormatType(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nNewContentFormatType.propTypes = propTypes;\n","import _ from 'lodash';\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport Actions from './content-format-type-components/actions';\nimport useContentFormatTypesStore from './content-format-type-components/state-hook';\nimport { useGetContentFormatTypes } from '../../../services/lwadmin/content-format-type/content-format-type-service';\nimport Loading from '../../../shared/loading';\nimport Header from './content-format-type-components/header';\nimport ContentFormatType from './content-format-type-components/content-format-type';\n\nexport default function ContentFormatTypes() {\n const set = useContentFormatTypesStore(state => state.set);\n const contentFormatTypes = useContentFormatTypesStore(state => state.contentFormatTypes);\n const [{ loading }, get] = useGetContentFormatTypes();\n const loadingRef = React.useRef();\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get().then(({ data }) => {\n set(state => {\n state.contentFormatTypes = _.get(data, 'contentFormatTypes', []);\n });\n });\n }, {});\n\n React.useEffect(() => (loadingRef.current.toggle(loading)), [loading]);\n\n return (\n \n \n \n \n {contentFormatTypes.map(cft => (\n \n \n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { propTypes } from './prop-types';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport Form from './form-components/form';\n\nexport default function EditFund(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nEditFund.propTypes = propTypes;\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport Form from './form-components/form';\n\nexport default function NewFund(props) {\n return (\n \n \n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { ThemeProvider } from 'styled-components';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Loading from '../../../shared/loading';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { useGetFunds } from '../../../services/lwadmin/fund/fund-service';\nimport FundsContext, { reducer, defaultState } from './funds-components/context';\nimport Actions from './funds-components/actions';\nimport Fund from './funds-components/fund';\nimport Header from './funds-components/header';\nimport ImportModal from './funds-components/import-modal';\nimport ViewModal from './funds-components/view-modal';\nimport DataReviewModal from '../fund/form-components/data-review-modal';\n\nexport default function Funds() {\n const [{ data, loading }, get] = useGetFunds();\n const [state, dispatch] = React.useReducer(reducer, defaultState);\n const loadingRef = React.useRef();\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get();\n }, {});\n\n React.useEffect(() => (loadingRef.current.toggle(loading)), [loading]);\n\n React.useEffect(() => {\n const funds = _.get(data, 'funds') || [];\n\n dispatch({ type: 'setFunds', payload: funds });\n }, [data]);\n\n return (\n \n \n \n \n \n {state.filteredFunds.map(fund => \n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { Container, FullWidthContentContainer } from '../shared/styles';\nimport useGetFundAssetClasses from '../../../services/lwadmin/fund-asset-class/fund-asset-class-service';\nimport { useGetFundCategories } from '../../../services/lwadmin/data-provider/fund-category-service';\nimport useStore from './manage-categories-components/store-hook';\nimport Header from './manage-categories-components/header';\nimport Category from './manage-categories-components/category';\n\nexport default function ManageCategories() {\n const categories = useStore(state => state.categories);\n const set = useStore(state => state.set);\n\n const [, getAssetClasses] = useGetFundAssetClasses();\n const [, getCategories] = useGetFundCategories();\n\n const onAssetClassesData = React.useCallback(({ data }) => {\n const assetClasses = _.get(data, 'fundAssetClasses', []);\n const mappedAssetClasses = assetClasses.map(a => ({ label: a.name, value: a.id.toString() }));\n\n set(state => {\n state.assetClasses = mappedAssetClasses;\n });\n }, [set]);\n\n const onCategoriesData = React.useCallback(({ data }) => {\n set(state => {\n state.categories = _.get(data, 'categories', []);\n });\n }, [set]);\n\n useChangeAwareEffect(({ isMount }) => {\n if (!isMount) {\n return;\n }\n\n getAssetClasses().then(onAssetClassesData);\n getCategories().then(onCategoriesData);\n }, {});\n\n return (\n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport Accordion from 'react-bootstrap/Accordion';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, FullWidthContentContainer } from '../shared/styles';\nimport Loading from '../../../shared/loading';\nimport { useGetQuestionCategories, useGetQuestions } from '../../../services/lwadmin/fund/question-service';\nimport Actions from './manage-qanda-questions-components/actions';\nimport Header from './manage-qanda-questions-components/header';\nimport Editor from './manage-qanda-questions-components/editor';\nimport Question from './manage-qanda-questions-components/question';\nimport useStore from './manage-qanda-questions-components/store-hook';\n\nconst Wrapper = ({ children }) => (\n \n \n \n {children}\n \n \n \n);\n\nWrapper.propTypes = { children: PropTypes.node.isRequired };\n\nconst Title = styled.h1`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n`;\n\nconst plainQuestion = {\n order: 99,\n fundTypes: [],\n description: '',\n};\n\nexport default function ManageQandaQuestions() {\n const setQsCats = useStore(state => state.setQsCats);\n const qs = useStore(state => state.qs);\n const set = useStore(state => state.set);\n const loadingRef = React.useRef();\n const [{ data: cdata, loading: cloading }, getCats] = useGetQuestionCategories();\n const [{ data: qdata, loading: qloading }, getQs] = useGetQuestions();\n const [collapsed, setCollapsed] = React.useState(true);\n const [creating, setCreating] = React.useState(false);\n\n React.useEffect(() => {\n loadingRef.current && loadingRef.current.toggle(cloading || qloading);\n }, [cloading, qloading]);\n\n React.useEffect(() => {\n const categories = _.get(cdata, 'categories', []);\n const questions = _.get(qdata, 'questions', []);\n categories.length && questions.length && setQsCats(questions, categories);\n }, [cdata, qdata, setQsCats]);\n\n useChangeAwareEffect(({ isMount }) => {\n if (!isMount) {\n return;\n }\n getCats();\n getQs();\n }, {});\n\n const actionsProps = {\n creating,\n enabled: collapsed,\n onRefresh: getQs,\n onCreate: () => setCreating(!creating),\n };\n\n const editorProps = {\n question: plainQuestion,\n onCancel: () => setCreating(false),\n onCreated: d => {\n set(state => {\n state.qs.unshift(d);\n });\n setCreating(false);\n },\n };\n\n return (\n \n <>\n \n Manage Fund Q&A Questions\n <Actions {...actionsProps} />\n \n setCollapsed(!e)}>\n {qs.map((q, i) => \n )}\n \n \n );\n}\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function EditBanner(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nEditBanner.propTypes = propTypes;\n","import React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../../shared/styles';\nimport { propTypes } from './prop-types';\nimport Form from './form-components/form';\n\nexport default function NewBanner(props) {\n return (\n \n \n \n \n \n \n );\n}\n\nNewBanner.propTypes = propTypes;\n","import _ from 'lodash';\nimport React from 'react';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { ThemeProvider } from 'styled-components';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport Loading from '../../../shared/loading';\nimport { Container, ContentContainer } from '../shared/styles';\nimport { useGetBanners } from '../../../services/lwadmin/homepage/banner-service';\nimport Actions from './homepage-components/actions';\nimport Header from './homepage-components/header';\nimport Banner from './homepage-components/banner';\n\nexport default function Homepage() {\n const [banners, setBanners] = React.useState([]);\n const [{ loading }, get] = useGetBanners();\n const loadingRef = React.useRef();\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get().then(({ data }) => setBanners(_.get(data, 'banners', [])));\n }, {});\n\n React.useEffect(() => (loadingRef.current.toggle(loading)), [loading]);\n\n return (\n \n \n \n \n {banners.map(bn => \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport {\n SortableFilterableTableHeader,\n SORT_DIRECTION,\n filterSimpleColumn,\n sortSimpleColumn,\n} from '../../../shared/sortable-filterable-table-header';\nimport LivewireEvent from './livewire-event';\nimport EditLivewireEventModal from './edit-livewire-event-modal';\nimport { getAllEvents } from '../../../services/lwadmin/livewire-events/events-service';\n\nfunction filterEvents(events, state) {\n let filteredEvents = _(events);\n\n filteredEvents = filterSimpleColumn(filteredEvents, 'name', state);\n filteredEvents = filterSimpleColumn(filteredEvents, 'slug', state);\n\n return filteredEvents.value();\n}\n\nfunction sortEvents(events, state) {\n let sortedEvents = _(events);\n\n sortedEvents = sortSimpleColumn(sortedEvents, 'name', state);\n sortedEvents = sortSimpleColumn(sortedEvents, 'slug', state);\n sortedEvents = sortSimpleColumn(sortedEvents, 'startsAt', state);\n\n return sortedEvents.value();\n}\n\nfunction filterAndSortEvents(events, state) {\n return sortEvents(filterEvents(events, state), state);\n}\n\nexport default class LivewireEventsTable extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n allEvents: [],\n events: [],\n nameSortDirection: SORT_DIRECTION.unsorted,\n nameFilter: '',\n slugSortDirection: SORT_DIRECTION.unsorted,\n slugFilter: '',\n startsAtSortDirection: SORT_DIRECTION.unsorted,\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.livewire-events.commands',\n topic: 'create-event',\n callback: () => this.createEvent(),\n });\n\n this.refresh();\n }\n\n createEvent() {\n this.editLivewireEventModal.present();\n }\n\n refresh() {\n this.loading.start();\n getAllEvents()\n .then(result => {\n this.setState(state => {\n state.allEvents = result.data.events.map(e => new LivewireEvent(e));\n state.events = filterAndSortEvents(state.allEvents, state);\n return state;\n });\n })\n .catch(e => defaultOnErrorHandler(e, 'Error loading events'))\n .finally(() => this.loading.stop());\n }\n\n hideEvent(ce, event) {\n ce && ce.preventDefault && ce.preventDefault();\n\n this.setState(state => _(state.events).find({ id: event.id }).hide());\n }\n\n showEvent(ce, event) {\n ce && ce.preventDefault && ce.preventDefault();\n\n this.setState(state => _(state.events).find({ id: event.id }).show());\n }\n\n editEvent(ce, event) {\n ce && ce.preventDefault && ce.preventDefault();\n\n this.editLivewireEventModal.present(event);\n }\n\n sortName(direction) {\n this.setState(state => {\n state.nameSortDirection = direction;\n state.events = filterAndSortEvents(state.allEvents, state);\n return state;\n });\n }\n\n filterName(filter) {\n this.setState(state => {\n state.nameFilter = filter;\n state.events = filterAndSortEvents(state.allEvents, state);\n return state;\n });\n }\n\n sortSlug(direction) {\n this.setState(state => {\n state.slugSortDirection = direction;\n state.events = filterAndSortEvents(state.allEvents, state);\n return state;\n });\n }\n\n filterSlug(filter) {\n this.setState(state => {\n state.slugFilter = filter;\n state.events = filterAndSortEvents(state.allEvents, state);\n return state;\n });\n }\n\n sortStartsAt(direction) {\n this.setState(state => {\n state.startsAtSortDirection = direction;\n state.events = filterAndSortEvents(state.allEvents, state);\n return state;\n });\n }\n\n render() {\n return (\n \n \n );\n }\n}\n","import React from 'react';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport LivewireEventOrder from './livewire-event-order';\nimport LinkLivewireEventOrderModal from './link-livewire-event-order-modal';\nimport { getUnlinkedOrders } from '../../../services/lwadmin/livewire-events/events-service';\n\nexport default class UnlinkedOrdersTable extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n orders: [],\n };\n }\n\n componentDidMount() {\n this.refresh();\n }\n\n refresh() {\n this.loading.start();\n getUnlinkedOrders()\n .then(r => this.setState({ orders: r.data.orders.map(e => new LivewireEventOrder(e)) }))\n .catch(e => defaultOnErrorHandler(e, 'Error loading unlinked orders'))\n .finally(() => this.loading.stop());\n }\n\n linkOrder(e, order) {\n e && e.preventDefault && e.preventDefault();\n\n this.linkLivewireEventOrderModal.present(order);\n }\n\n render() {\n return (\n \n (this.linkLivewireEventOrderModal = c)}\n orderDidSave={() => this.refresh()}\n />\n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport { useGetNavigationItems } from '../../../services/lwadmin/navigation/navigation-item-service';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { Container, ContentContainer } from '../shared/styles';\nimport useNavigationStore from './state-hook';\nimport Header from './navigation-items-components/header';\nimport Item from './navigation-items-components/item';\nimport Preview from './navigation-items-components/preview';\n\nconst DEFAULT_ITEMS = [\n {\n id: null,\n name: 'Latest',\n url: '/feeds/latest',\n order: 0,\n published: false,\n },\n {\n id: null,\n name: 'Contributors',\n url: '/contributors',\n order: 1,\n published: false,\n },\n {\n id: null,\n name: 'Funds',\n url: '/funds',\n order: 2,\n published: false,\n },\n];\n\nexport default function NavigationItems() {\n const set = useNavigationStore(state => state.set);\n const items = useNavigationStore(state => state.items);\n\n const [, getItems] = useGetNavigationItems();\n\n const onItemsData = React.useCallback(({ data }) => {\n const createdItems = _.get(data, 'items', []);\n const mergedItems = DEFAULT_ITEMS.map(item => {\n const matchedItem = _.find(createdItems, { order: item.order });\n return matchedItem ? { ...item, ...matchedItem } : item;\n });\n\n set(state => {\n state.items = mergedItems;\n });\n }, [set]);\n\n useChangeAwareEffect(({ isMount }) => {\n if (!isMount) {\n return;\n }\n\n getItems().then(onItemsData);\n }, {});\n\n return (\n \n \n \n \n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport moment from 'moment';\nimport postal from 'postal';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport mutate from '../../../shared/mutate';\nimport {\n SortableFilterableTableHeader,\n SORT_DIRECTION,\n filterSimpleColumns,\n sortSimpleColumn,\n} from '../../../shared/sortable-filterable-table-header';\nimport EditPartnershipModal from '../partnerships/edit-partnership-modal';\nimport ViewContactModal from './view-contact-modal';\nimport { getById, toggleArchivingStatus } from '../../../services/lwadmin/partnership/partnership-service';\n\nfunction filterContacts(contacts, state) {\n let filteredContacts = _(contacts);\n\n if (state.wireIdFilter != null) {\n filteredContacts = filteredContacts.filter(x => x.referable_type === 'Wire' && state.wireIdFilter === x.referable_id);\n }\n\n if (state.filterOutArchivedContact) {\n filteredContacts = filteredContacts.filter({ archived: false });\n }\n\n filteredContacts = filterSimpleColumns(filteredContacts, state, 'name', 'email', 'phone', 'investor_type');\n\n return filteredContacts.value();\n}\n\nfunction sortContacts(contacts, state) {\n let sortedContacts = _(contacts);\n\n sortedContacts = sortSimpleColumn(sortedContacts, 'created_at', state);\n sortedContacts = sortSimpleColumn(sortedContacts, 'name', state);\n sortedContacts = sortSimpleColumn(sortedContacts, 'email', state);\n sortedContacts = sortSimpleColumn(sortedContacts, 'phone', state);\n sortedContacts = sortSimpleColumn(sortedContacts, 'investor_type', state);\n sortedContacts = sortSimpleColumn(sortedContacts, 'sent_at', state);\n\n return sortedContacts.value();\n}\n\nfunction filterAndSortContacts(contacts, state) {\n return sortContacts(filterContacts(contacts, state), state);\n}\n\nconst Contact = source => ({\n ...(source || {\n id: null,\n profile_id: null,\n name: '',\n email: '',\n phone: '',\n investor_type: '',\n referable_type: null,\n referable_id: null,\n }),\n created_at: _.get(source, 'created_at') ? moment(source.created_at) : null,\n sent_at: _.get(source, 'sent_at') ? moment(source.sent_at) : null,\n});\n\nconst Partnership = source => ({\n ...(source || {\n id: null,\n name: '',\n active: false,\n send_automatically: false,\n contact_email: '',\n partnership_type: '',\n dashboard_url: '',\n }),\n contacts: _.get(source, 'contacts', []).map(Contact),\n});\n\n/* Props:\n- partnershipId\n- wireId: the id of the wire to limit contacts to. if not provided, all wire contacts are displayed.\n*/\nexport default class PartnershipAdmin extends React.Component {\n static propTypes = {\n partnershipId: PropTypes.number.isRequired,\n wireId: PropTypes.number,\n }\n\n static defaultProps = {\n wireId: null,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n /* eslint-disable react/no-unused-state */\n partnership: new Partnership(),\n contacts: [],\n created_atSortDirection: SORT_DIRECTION.unsorted,\n nameSortDirection: SORT_DIRECTION.unsorted,\n nameFilter: '',\n emailSortDirection: SORT_DIRECTION.unsorted,\n emailFilter: '',\n phoneSortDirection: SORT_DIRECTION.unsorted,\n phoneFilter: '',\n investor_typeSortDirection: SORT_DIRECTION.unsorted,\n investor_typeFilter: '',\n sent_atSortDirection: SORT_DIRECTION.unsorted,\n wireIdFilter: props.wireId,\n filterOutArchivedContact: true,\n /* eslint-enable react/no-unused-state */\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.partnership.commands',\n topic: 'edit-partnership',\n callback: () => this.editPartnership(),\n });\n this.refresh();\n }\n\n editPartnership() {\n this.editPartnershipModal.present(this.state.partnership.id);\n }\n\n refresh() {\n this.loading.start();\n getById(this.props.partnershipId)\n .then(result => this.setState(oldState => mutate(oldState, state => {\n state.partnership = new Partnership(result.data);\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n })))\n .catch(error => defaultOnErrorHandler(error, 'Error loading partnership'))\n .finally(() => this.loading.stop());\n }\n\n sortCreatedAt(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.created_atSortDirection = direction;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n sortName(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.nameSortDirection = direction;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n filterName(filter) {\n this.setState(oldState => mutate(oldState, state => {\n state.nameFilter = filter;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n sortEmail(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.emailSortDirection = direction;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n filterEmail(filter) {\n this.setState(oldState => mutate(oldState, state => {\n state.emailFilter = filter;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n sortPhone(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.phoneSortDirection = direction;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n filterPhone(filter) {\n this.setState(oldState => mutate(oldState, state => {\n state.phoneFilter = filter;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n sortInvestorType(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.investor_typeSortDirection = direction;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n filterInvestorType(filter) {\n this.setState(oldState => mutate(oldState, state => {\n state.investor_typeFilter = filter;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n sortSentAt(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.sent_atSortDirection = direction;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n viewContact(e, contact) {\n e.preventDefault();\n\n this.viewContactModal.present(this.state.partnership.id, contact.id);\n }\n\n toggleContactArchiving(evt, contact) {\n evt.preventDefault();\n\n toggleArchivingStatus(contact.id)\n .then(() => this.setState(oldState => mutate(oldState, state => {\n const c = _.find(state.partnership.contacts, { id: contact.id });\n c.archived = !c.archived;\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n })))\n .catch(error => defaultOnErrorHandler(error, 'Error toggling contact archiving status'))\n .finally(() => this.loading.stop());\n }\n\n toggleShowHideArchivedContacts() {\n this.setState(oldState => mutate(oldState, state => {\n state.filterOutArchivedContact = !state.filterOutArchivedContact;\n\n state.contacts = filterAndSortContacts(state.partnership.contacts, state);\n }));\n }\n\n renderContactsTable() {\n return (\n \n \n
\n );\n }\n\n render() {\n const CheckboxLabel = styled.label`\n float: right;\n margin-top: -30px;\n margin-right: 20px;\n\n input[type=checkbox] {\n top: -2px;\n }\n `;\n\n return (\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport {\n SortableFilterableTableHeader,\n SORT_DIRECTION,\n filterSimpleColumn,\n sortSimpleColumn,\n} from '../../../shared/sortable-filterable-table-header';\nimport EditPartnershipModal from '../partnerships/edit-partnership-modal';\nimport { getById } from '../../../services/lwadmin/partnership/partnership-service';\n\nfunction filterWires(wires, state) {\n let filteredWires = _(wires);\n\n filteredWires = filterSimpleColumn(filteredWires, 'name', state);\n filteredWires = filterSimpleColumn(filteredWires, 'title', state);\n\n return filteredWires.value();\n}\n\nfunction sortWires(wires, state) {\n let sortedWires = _(wires);\n\n sortedWires = sortSimpleColumn(sortedWires, 'name', state);\n sortedWires = sortSimpleColumn(sortedWires, 'title', state);\n\n return sortedWires.value();\n}\n\nfunction filterAndSortWires(wires, state) {\n return sortWires(filterWires(wires, state), state);\n}\n\nconst Wire = (source, contributor) => ({\n ...(source || {\n id: null,\n title: '',\n sent_contact_count: 0,\n unsent_contact_count: 0,\n }),\n contributor,\n name: contributor.name,\n});\n\nfunction Contributor(source) {\n _.assign(this, source || {\n id: null,\n active: false,\n name: '',\n company: '',\n });\n this.wires = _.get(source, 'wires', []).map(x => Wire(x, this))\n .filter(x => x.sent_contact_count > 0 || x.unsent_contact_count > 0);\n}\n\nfunction Partnership(source) {\n _.assign(this, source || {\n id: null,\n name: '',\n active: false,\n send_automatically: false,\n contact_email: '',\n partnership_type: '',\n contributors: [],\n });\n this.contributors = this.contributors.map(x => new Contributor(x));\n this.wires = _.flatten(this.contributors.map(c => c.wires));\n}\n\nexport default class WiresAdmin extends React.Component {\n static propTypes = {\n partnershipId: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n partnership: new Partnership(),\n wires: [],\n nameSortDirection: SORT_DIRECTION.unsorted,\n nameFilter: '',\n titleSortDirection: SORT_DIRECTION.unsorted,\n titleFilter: '',\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.partnership.commands',\n topic: 'edit-partnership',\n callback: () => this.editPartnership(),\n });\n this.refresh();\n }\n\n refresh() {\n this.loading.start();\n getById(this.props.partnershipId)\n .then(result => this.setState(state => {\n state.partnership = new Partnership(result.data);\n state.wires = filterAndSortWires(state.partnership.wires, state);\n return state;\n }))\n .catch(error => defaultOnErrorHandler(error, 'Error loading partnership'))\n .finally(() => this.loading.stop());\n }\n\n editPartnership() {\n this.editPartnershipModal.present(this.state.partnership.id);\n }\n\n sortContributorName(direction) {\n this.setState(state => {\n state.nameSortDirection = direction;\n state.wires = filterAndSortWires(state.partnership.wires, state);\n return state;\n });\n }\n\n filterContributorName(filter) {\n this.setState(state => {\n state.nameFilter = filter;\n state.wires = filterAndSortWires(state.partnership.wires, state);\n return state;\n });\n }\n\n sortWireTitle(direction) {\n this.setState(state => {\n state.titleSortDirection = direction;\n state.wires = filterAndSortWires(state.partnership.wires, state);\n return state;\n });\n }\n\n filterWireTitle(filter) {\n this.setState(state => {\n state.titleFilter = filter;\n state.wires = filterAndSortWires(state.partnership.wires, state);\n return state;\n });\n }\n\n renderWiresTable() {\n return (\n \n \n
\n );\n }\n\n render() {\n return (\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport {\n SortableFilterableTableHeader,\n SORT_DIRECTION,\n filterSimpleColumn,\n sortSimpleColumn,\n} from '../../../shared/sortable-filterable-table-header';\nimport mutate from '../../../shared/mutate';\nimport Partnership from './partnership';\nimport EditPartnershipModal from './edit-partnership-modal';\nimport { getAll } from '../../../services/lwadmin/partnership/partnership-service';\n\nfunction filterPartnerships(partnerships, state) {\n let filteredPartnerships = _(partnerships);\n\n filteredPartnerships = filterSimpleColumn(filteredPartnerships, 'name', state);\n filteredPartnerships = filteredPartnerships.filter(x => !state.inactiveFilter || x.active);\n\n return filteredPartnerships.value();\n}\n\nfunction sortPartnerships(partnerships, state) {\n let sortedPartnerships = _(partnerships);\n\n sortedPartnerships = sortSimpleColumn(sortedPartnerships, 'name', state);\n\n return sortedPartnerships.value();\n}\n\nfunction filterAndSortPartnerships(partnerships, state) {\n return sortPartnerships(filterPartnerships(partnerships, state), state);\n}\n\nexport default class PartnershipsTable extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n /* eslint-disable react/no-unused-state */\n allPartnerships: [],\n partnerships: [],\n nameSortDirection: SORT_DIRECTION.unsorted,\n nameFilter: '',\n inactiveFilter: true,\n /* eslint-ensable react/no-unused-state */\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.partnerships.commands',\n topic: 'create-partnership',\n callback: () => this.createPartnership(),\n });\n\n this.refresh();\n }\n\n handleFilterOutInactivePartnershipsChange(e) {\n const inactiveFilter = !e.target.checked;\n\n this.setState(oldState => mutate(oldState, state => {\n state.inactiveFilter = inactiveFilter;\n state.partnerships = filterAndSortPartnerships(state.allPartnerships, state);\n }));\n }\n\n createPartnership() {\n this.editPartnershipModal.present();\n }\n\n refresh() {\n this.loading.start();\n getAll()\n .then(result => {\n this.setState(oldState => mutate(oldState, state => {\n state.allPartnerships = _(result.data.partnerships)\n .map(p => new Partnership(p))\n .sortBy(x => x.name)\n .value();\n state.partnerships = filterAndSortPartnerships(state.allPartnerships, state);\n }));\n })\n .catch(error => defaultOnErrorHandler(error, 'Error loading partnerships'))\n .finally(() => this.loading.stop());\n }\n\n editPartnership(e, partnership) {\n e && e.preventDefault && e.preventDefault();\n\n this.editPartnershipModal.present(partnership.id);\n }\n\n toggleActivePartnership(e, partnership) {\n e && e.preventDefault && e.preventDefault();\n\n const found = _.find(this.state.partnerships, { id: partnership.id });\n if (found) {\n found[partnership.active ? 'deactivate' : 'activate']().then(() => {\n this.setState(oldState => mutate(oldState, state => {\n state.partnerships = filterAndSortPartnerships(state.allPartnerships, state);\n }));\n });\n }\n }\n\n sortName(direction) {\n this.setState(oldState => mutate(oldState, state => {\n state.nameSortDirection = direction;\n state.partnerships = filterAndSortPartnerships(state.allPartnerships, state);\n }));\n }\n\n filterName(filter) {\n this.setState(oldState => mutate(oldState, state => {\n state.nameFilter = filter;\n state.partnerships = filterAndSortPartnerships(state.allPartnerships, state);\n }));\n }\n\n render() {\n return (\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { ThemeProvider } from 'styled-components';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport commonProps from '../common/common-props';\nimport FeatureControl from './feature-control';\nimport Header from './common/header';\nimport { Link } from './common/styles';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst SmallLink = styled(Link)`\n font-size: 14px;\n`;\n\nconst Separator = styled.div`\n height: 0px;\n border-bottom: 1px solid ${props => props.theme.secondaryColorLight};\n margin-top: 20px;\n margin-bottom: 20px;\n`;\n\nexport default function ProfileFeaturesAdmin(props) {\n const common = commonProps();\n const { profile, availableFeatures } = props;\n return (\n \n \n Profile Page }\n \n {availableFeatures.map(feature => (\n \n \n ))}\n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nProfileFeaturesAdmin.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n showProfileLink: PropTypes.bool,\n features: PropTypes.arrayOf(PropTypes.shape({\n feature: PropTypes.string,\n active: PropTypes.bool,\n })),\n }).isRequired,\n availableFeatures: PropTypes.arrayOf(PropTypes.string),\n};\n/* eslint-enable react/no-unused-prop-types */\nProfileFeaturesAdmin.defaultProps = {\n availableFeatures: [],\n};\n","import React from 'react';\nimport { Container, ContentContainer } from '../shared/styles';\nimport Form from './configuration-components/form';\nimport Actions from './series-components/actions';\n\nexport default function Configuration() {\n return (\n \n \n \n \n );\n}\n","import React from 'react';\nimport { Container, ContentContainer } from '../shared/styles';\nimport Actions from './series-components/actions';\nimport SeriesTable from './series-components/series-table';\n\nexport default function Series() {\n return (\n \n \n \n \n );\n}\n","export default function getWireId() {\n const $wireId = $('form input[name=\"wire[id]\"]');\n\n return !$wireId.length ? null : $wireId.val();\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport Sticky from 'react-stickynode';\nimport ImpersonaPrompt from './impersona-prompt';\nimport EditorContent from './content/editor-content';\nimport EditorSidebar from './sidebar/editor-sidebar';\nimport useEditorStore from './state-hook';\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\n\nexport default function WireEditor({\n wire,\n currentProfile,\n mediaTypes,\n cta,\n newNav,\n standfirstSummary,\n showIsCommercial,\n showCTA,\n}) {\n const set = useEditorStore(state => state.set);\n const id = useEditorStore(React.useCallback(state => _.get(state.wire, 'id'), []));\n\n React.useEffect(() => {\n set(state => {\n state.wire = wire;\n state.currentProfile = currentProfile;\n state.mediaTypes = mediaTypes;\n state.cta = cta;\n });\n }, [currentProfile, wire, mediaTypes, set]);\n\n const domId = `wire-featured-contributors-${id}-update-modal`;\n return (\n \n \n \n );\n}\n\nWireEditor.propTypes = {\n wire: PropTypes.shape({ id: PropTypes.number.isRequired }).isRequired,\n currentProfile: PropTypes.shape({\n slug: PropTypes.string.isRequired,\n isEditor: PropTypes.bool.isRequired,\n canScheduleWire: PropTypes.bool.isRequired,\n canSelectMediaTypes: PropTypes.bool.isRequired,\n }).isRequired,\n mediaTypes: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n cta: PropTypes.shape({\n id: PropTypes.number,\n title: PropTypes.string,\n message: PropTypes.string,\n text: PropTypes.string,\n url: PropTypes.string,\n }),\n newNav: PropTypes.bool.isRequired,\n standfirstSummary: PropTypes.bool.isRequired,\n showIsCommercial: PropTypes.bool.isRequired,\n showCTA: PropTypes.bool,\n};\n\nWireEditor.defaultProps = {\n cta: {},\n showCTA: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst DEFAULT_DISMISS_TEXT = 'Close';\n\n/*\nProps:\n - onDismiss: () => {}\nUsage:\n In JSX: this.alert = c} onDismiss={() => this.handleAlertDismiss()}> \n The in code: this.alert.present('Title', 'Body', 'Close')\n*/\nexport default class Alert extends React.Component {\n static propTypes = {\n onDismiss: PropTypes.func,\n };\n\n static defaultProps = {\n onDismiss: () => null,\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n title: '',\n body: '',\n dismissText: DEFAULT_DISMISS_TEXT,\n };\n }\n\n present(title, body, dismissText) {\n this.setState({\n title,\n body,\n dismissText: dismissText || DEFAULT_DISMISS_TEXT,\n });\n this.$overlay.fadeIn();\n this.$modal.fadeIn();\n }\n\n dismiss() {\n this.$overlay.fadeOut();\n this.$modal.fadeOut();\n this.props.onDismiss();\n }\n\n render() {\n return (\n \n {p === page ? p : ({p})}\n \n );\n\n return (\n \n );\n }\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport function useFollow(stockCodeSlug) {\n const common = slug => ({ url: `/api/v1/stock_code/${slug}/follow` });\n const [state, q] = useAxios({ ...common(stockCodeSlug), method: 'POST' }, { manual: true });\n const executeQuery = slug => q(common(slug));\n return [state, executeQuery];\n}\n\nexport function useUnfollow(stockCodeSlug) {\n const common = slug => ({ url: `/api/v1/stock_code/${slug}/unfollow` });\n const [state, q] = useAxios({ ...common(stockCodeSlug), method: 'POST' }, { manual: true });\n const executeQuery = slug => q(common(slug));\n return [state, executeQuery];\n}\n","import axios from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nconst base = '/api/v1/lwadmin/fund/question';\n\nexport function useGetQuestionCategories() {\n return useAxios({\n url: `${base}/categories`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function useGetQuestions() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${base}s`,\n method: 'GET',\n }, { manual: true });\n}\n\nconst execute = query => ({\n id, catId, description, fundTypes, order,\n}) => query({\n ...(id ? { url: `${base}/${id}` } : {}),\n data: {\n description,\n order,\n category_id: catId,\n fund_types: fundTypes,\n },\n});\n\nexport function usePostQuestion() {\n const [state, q] = useAxios({\n url: base,\n method: 'POST',\n }, { manual: true });\n\n return [state, execute(q)];\n}\n\nexport function usePutQuestion() {\n const [state, q] = useAxios({\n url: `${base}/`,\n method: 'PUT',\n }, { manual: true });\n\n return [state, execute(q)];\n}\n","import axios from 'axios';\n\nconst baseUrl = id => `/api/v1/wire/${id}/bookmark`;\n\nexport function bookmark(wireId) {\n return axios.post(baseUrl(wireId));\n}\n\nexport function unbookmark(wireId) {\n return axios.delete(baseUrl(wireId));\n}\n","import axios from 'axios';\nimport csrfToken from '../../../shared/meta';\nimport axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nconst base = '/api/v1/lwadmin/content_format_type';\n\nexport function useGetContentFormatTypes() {\n return useAxios({\n cache: { ignoreCache: true },\n url: `${base}s`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function createContentFormatType(payload) {\n return axios.post(base, payload, { headers });\n}\n\nexport function updateContentFormatType(id, payload) {\n return axios.put(`${base}/${id}`, payload, { headers });\n}\n","import axios from 'axios';\n\nconst url = id => `/api/v1/wire/${id}/attachment`;\n\nexport function list(id) {\n return axios.get(`${url(id)}s`, { cache: { ignoreCache: true } });\n}\n\nexport function create(id, file, title) {\n const data = new FormData();\n data.append('attachment', file);\n\n if (title) {\n data.append('title', title);\n }\n\n return axios.post(url(id), data, { headers: { 'content-type': 'multipart/form-data' } });\n}\n\nexport function deleteById(wireId, attachmentId) {\n return axios.delete(`${url(wireId)}/${attachmentId}`);\n}\n","import axios from 'axios';\n\nconst baseUrl = id => `/api/v1/wire/${id}/restrictions`;\n\nexport function getEventRestrictions(id) {\n return axios.get(baseUrl(id), { cache: { ignoreCache: true } });\n}\n\nexport function updateEventRestrictions(wireId, eventId) {\n return axios.post(`${baseUrl(wireId)}/_update_restricted_to_event_id`, {\n restricted_to_event_id: eventId,\n });\n}\n\nexport function updateRegUserRestrictions(id, isRestricted) {\n return axios.post(`${baseUrl(id)}/_update_is_restricted_to_registered_users`, {\n is_restricted_to_registered_users: isRestricted,\n });\n}\n\nexport function updateRedirectionUrl(id, url) {\n return axios.post(`${baseUrl(id)}/_update_restricted_to_registered_users_redirect_url`, {\n restricted_to_registered_users_redirect_url: url,\n });\n}\n","import axios from 'axios';\n\nexport default function get(\n partnershipId,\n contributorIds,\n daysAgo,\n cachedPerformanceDataUrl,\n fromCache,\n) {\n const source = axios.CancelToken.source();\n let task;\n\n if (fromCache && cachedPerformanceDataUrl) {\n task = axios.get(cachedPerformanceDataUrl, {\n cancelToken: source.token,\n });\n } else {\n task = axios.get(`/api/v1/analytics/wires/published/partnership/${partnershipId}`, {\n params: {\n contributor_ids: contributorIds,\n days_ago: daysAgo,\n },\n cancelToken: source.token,\n });\n }\n\n return [task, source];\n}\n","import React from 'react';\nimport axios from './axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\n// eslint-disable-next-line import/prefer-default-export\nexport function usePostCmSubscribe() {\n const common = v => ({ data: { nominated_email: v.email, new_user: v.newUser || false } });\n const [state, q] = useAxios({\n url: '/api/v1/campaign_mailing_list/subscribe_user',\n method: 'POST',\n }, { manual: true });\n const executeQuery = React.useCallback(newParams => q(common(newParams)), [q]);\n return [state, executeQuery];\n}\n","import axios from 'axios';\n\nexport default function assignWireCategory(wireId, categoryId) {\n return axios.post(`/api/v1/wire/${wireId}/assign/category/${categoryId}`);\n}\n","import axios from './axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport function useGetRecentWiresBySeries() {\n return useAxios({\n url: '/api/v1/series/wires/recent',\n method: 'GET',\n });\n}\n\nexport function listAllSeries() {\n return axios.get('/api/v1/series');\n}\n","import React from 'react';\nimport axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport function useGetRecentSearches(query) {\n const common = v => ({ params: v ? { query: v } : null });\n const [state, q] = useAxios({\n cache: { ignoreCache: true },\n url: '/api/v1/recent_searches',\n method: 'GET',\n ...common(query),\n }, { manual: true });\n const executeQuery = React.useCallback(newQuery => q(common(newQuery)), [q]);\n return [state, executeQuery];\n}\n\nexport function usePutRemoveRecentSearches(id) {\n const common = v => ({ url: `/api/v1/recent_searches/${v}/remove` });\n const [state, q] = useAxios({ ...common(id), method: 'PUT' }, { manual: true });\n const executeQuery = React.useCallback(newId => q(common(newId)), [q]);\n return [state, executeQuery];\n}\n","// Credit of this component goes to the example of the react-truncate repo\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Truncate from 'react-truncate';\n\nexport default class ExpandableContainer extends React.Component {\n static propTypes = {\n children: PropTypes.node.isRequired,\n lines: PropTypes.number,\n less: PropTypes.string,\n more: PropTypes.string,\n }\n\n static defaultProps = {\n lines: 3,\n more: 'read more',\n less: 'show less',\n }\n\n constructor(...args) {\n super(...args);\n\n this.state = {\n expanded: false,\n truncated: null,\n lines: this.props.lines,\n };\n\n this.handleTruncate = this.handleTruncate.bind(this);\n this.toggleLines = this.toggleLines.bind(this);\n }\n\n handleTruncate(truncated) {\n if (this.state.truncated !== truncated) {\n this.setState(state => {\n state.truncated = truncated;\n\n if (!truncated) {\n state.lines = false;\n }\n\n return state;\n });\n }\n }\n\n toggleLines(e) {\n e.preventDefault();\n\n this.setState(state => {\n state.expanded = !state.expanded;\n\n if (!state.expanded) {\n state.lines = this.props.lines;\n }\n\n return state;\n });\n }\n\n render() {\n const { expanded, truncated, lines } = this.state;\n\n return (\n
(this.$overlay = $(el))} onClick={() => this.dismiss()} />\n
\n );\n }\n}\n","import { linkOrderToUser } from '../../../services/lwadmin/livewire-events/events-service';\n\nexport default class LivewireEventOrder {\n constructor(source) {\n Object.assign(this, source);\n }\n\n linkToUser(user) {\n return linkOrderToUser(this.id, user.id);\n }\n}\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport { HeaderContainer, HeaderMixin } from '../../shared/styles';\nimport { NameColumn, UrlColumn } from './styles';\n\nconst SHeaderContainer = styled(HeaderContainer)`\n margin-bottom: 16px;\n`;\n\nconst NameColumnHeader = styled(NameColumn)`\n ${HeaderMixin}\n`;\n\nconst UrlColumnHeader = styled(UrlColumn)`\n ${HeaderMixin}\n`;\n\nexport default function Header() {\n return (\n (this.$modal = $(el))}>\n \n (this.loading = c)}>\n \n \n \n \n \n \n \n \n
\n Link order
\n\n
\n - \n {items.map(item => (\n
- \n {item.name}\n \n ))}\n
Companies & Contributors
\n \n \n {query.length > 0 && (\n\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport MediumEditor from 'medium-editor';\nimport AutoList from 'medium-editor-autolist';\nimport AutoHR from 'medium-editor-autohr';\nimport MediumEditorTable from 'medium-editor-tables';\nimport postal from 'postal';\n\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport Loading from '../../../../shared/loading';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport debounceAction from '../../../../shared/debounce-action';\nimport {\n updateBody,\n deleteImageById,\n deleteImageByBlobSignedId,\n} from '../../../../services/wire/edit-services';\nimport Validator from '../../../../shared/validator';\nimport { editorValidate } from '../channel-editor-postal';\nimport BlockquoteExtension from './medium-editor-extensions/blockquote-extension';\nimport TagExtension from './medium-editor-extensions/tag-extension';\nimport DragDropExtension from './medium-editor-extensions/dragdrop-extension';\nimport BackspaceWorkaroundExtension from './medium-editor-extensions/backspace-workaround';\nimport VideoHandler from './medium-editor-extensions/video-handler';\nimport DeleteEmbedCard from './medium-editor-extensions/delete-embed-card';\nimport MentionControl from './mention-control';\nimport { WarningIcon } from '../warning-icon';\n\nrequire('jquery');\nrequire('medium-editor-insert-plugin')($);\n\nconst editorId = 'wire-editor-body';\n\nexport default class Body extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n value: PropTypes.string.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n bodyRequired: () => {\n const bodyValue = this.editor && this.editor.serialize()[editorId].value;\n const $body = $(bodyValue);\n return bodyValue && ($body.text().trim().length || $body.find('img').length);\n },\n });\n\n this.state = {\n body: this.props.value || '',\n initialBody: this.props.value || '',\n showMentionables: false,\n validations: this.validator.getValidations(),\n };\n\n this.initMentionControlState();\n\n [\n 'handleInputChange',\n 'handleNativeKeydownDelete',\n 'handleMentionControlValueSelected',\n 'handleMentionControlOnBlur',\n 'handleMentionControlOnKeydown',\n 'handleMentionControlOnBackspace',\n 'handleShowMentionables',\n 'serializeAndSaveBody',\n 'deleteImage',\n ].forEach(m => (this[m] = this[m].bind(this)));\n\n this.saveBody = debounceAction({\n getCurrentValue: () => this.state.body,\n actionPromise: () => updateBody(this.props.wireId, this.state.body),\n onBeforeAction: () => this.loading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving body'),\n onAfterAction: () => {\n this.loading.stop();\n postal.publish({\n channel: 'editor',\n topic: 'wire-body-saved',\n });\n },\n wait: 2000,\n });\n\n postal.subscribe({\n channel: 'editor',\n topic: 'mention-control-value-selected',\n callback: this.handleMentionControlValueSelected,\n });\n\n postal.subscribe({\n channel: 'editor',\n topic: 'mention-control-on-blur',\n callback: this.handleMentionControlOnBlur,\n });\n\n postal.subscribe({\n channel: 'editor',\n topic: 'mention-control-on-keydown',\n callback: this.handleMentionControlOnKeydown,\n });\n\n postal.subscribe({\n channel: 'editor',\n topic: 'mention-control-on-backspace',\n callback: this.handleMentionControlOnBackspace,\n });\n\n editorValidate(this, 'body');\n }\n\n componentDidMount() {\n const buttons = [\n {\n name: 'bold',\n contentFA: '',\n },\n {\n name: 'italic',\n contentFA: '',\n },\n 'anchor',\n 'tag-extension',\n {\n name: 'h2',\n contentFA: '',\n },\n {\n name: 'h3',\n contentFA: '',\n },\n 'blockquote-extension',\n 'orderedlist',\n 'unorderedlist',\n ];\n\n const cleanTags = ['meta', 'img'];\n\n if (window.Livewire.features.editorTable) {\n buttons.push('table');\n } else {\n cleanTags.push('table');\n }\n\n const extensions = {\n autolist: new AutoList(),\n 'blockquote-extension': new BlockquoteExtension(),\n 'tag-extension': new TagExtension(),\n autohr: new AutoHR(),\n 'backspace-workaround': new BackspaceWorkaroundExtension(),\n 'video-handler': new VideoHandler(),\n imageDragging: {},\n 'delete-embed-card': new DeleteEmbedCard(),\n table: new MediumEditorTable(),\n 'dragdrop-extension': new DragDropExtension(),\n };\n\n this.editor = new MediumEditor(`#${editorId}`, {\n buttonLabels: 'fontawesome',\n imageDragging: false,\n paste: {\n forcePlainText: false,\n cleanPastedHTML: true,\n cleanTags,\n unwrapTags: ['h1', 'h4', 'h5', 'h6'],\n cleanAttrs: [\n 'class', 'style', 'dir', 'width', 'height', 'id', 'rel',\n 'data-controller',\n 'data-tooltip-url-value',\n 'data-event-name-value',\n 'data-event-event-value',\n 'data-event-statisticable-value',\n 'data-event-id-value', 'data-event-type',\n 'data-zoom-target', 'data-target-type', 'data-target-id',\n 'data-media-player-service-type-value', 'data-player-id',\n 'data-url', 'data-link-url-value', 'data-hotwired',\n 'data-type', 'data-wire-id', 'data-video-id', 'data-user-signed-in',\n ],\n },\n toolbar: {\n buttons,\n },\n placeholder: {\n text: 'Create your wire here',\n },\n extensions,\n });\n\n this.editor.subscribe('showMentionables', this.handleShowMentionables);\n this.editor.subscribe('editableInput', this.handleInputChange);\n this.editor.subscribe('editableKeydownDelete', this.handleNativeKeydownDelete);\n\n const $mediumInsert = $(`#${editorId}`).mediumInsert({\n editor: this.editor,\n enabled: true,\n addons: {\n images: {\n deleteScript: (file, $el) => this.deleteImage(file || $el.attr('src')),\n fileUploadOptions: {\n url: `/api/v1/wire/${this.props.wireId}/image`,\n acceptFileTypes: /(\\.|\\/)(gif|jpe?g|png)$/i,\n },\n captions: true,\n captionPlaceholder: 'Enter your image caption...',\n uploadCompleted: $el => {\n $el.find('img').click();\n setTimeout(() => {\n this.setupImageCaption($el, true);\n }, 50);\n },\n actions: null,\n preview: false,\n },\n embeds: false,\n },\n });\n\n window.mediumInsertImages = $mediumInsert.data('plugin_mediumInsertImages');\n window.mediumInsert = $mediumInsert.data('plugin_mediumInsert');\n window.mediumInsert.removeCaptions = () => {};\n window.mediumInsert.removeCaptionPlaceholder = () => {};\n\n $mediumInsert.find('.medium-insert-images > figure').each((index, figure) => {\n this.setupImageCaption($(figure));\n });\n\n this.removeUnnecessaryElements();\n this.detectCannotDeleteLines();\n this.addEmptyLineBetweenSpecialTagsAndEOW();\n }\n\n /* eslint-disable react/sort-comp */\n // because we have method names tricking eslinter to think it's a setter method\n deleteImage(url) {\n const imageId = _.get(url.match(/\\/uploads\\/media\\/(\\d+)\\/.*/), '[1]');\n if (imageId) {\n deleteImageById(this.props.wireId, imageId);\n } else {\n this.deleteImageBlob(url);\n }\n }\n\n // blob URL pattern: :///rails/active_storage/blobs/redirect//.\n deleteImageBlob(url) {\n const regex = /\\/rails\\/active_storage\\/.+(\\/(proxy|redirect)?)\\/(.+)\\/.+/;\n const match = regex.exec(url);\n if (_.get(match, 'length') >= 2) {\n deleteImageByBlobSignedId(this.props.wireId, match[match.length - 1]);\n }\n }\n\n setupImageCaption = (figure, uploaded) => {\n const info = '
';\n wrapper.insertAdjacentElement('afterend', newline);\n MediumEditor.selection.moveCursor(document, newline);\n }\n\n // eslint-disable-next-line class-methods-use-this\n removeUnnecessaryElements() {\n const body = document.querySelector('section.wire-body.full-wire');\n const tobeRemovedSelectors = [\n '.wire-editor-body > p:empty',\n '.wire-editor-body > h2:empty',\n '.wire-editor-body > h3:empty',\n '.wire-editor-body > div:empty',\n 'div.medium-editor-table-wrapper > :not(table)',\n ];\n body.querySelectorAll(tobeRemovedSelectors.join(', ')).forEach(element => element.remove());\n }\n\n // eslint-disable-next-line class-methods-use-this\n detectCannotDeleteLines() {\n const body = document.querySelector('section.wire-body.full-wire');\n\n body.querySelectorAll('.medium-insert-images, .medium-editor-table-wrapper').forEach(element => {\n const next = element.nextElementSibling;\n if (next) {\n const isAnImageOrTable = next.classList.contains('medium-insert-images') || next.classList.contains('medium-editor-table-wrapper');\n const isBlank = next.innerHTML.trim() === '' || next.innerHTML.trim() === '
';\n\n if (isAnImageOrTable) {\n element.insertAdjacentHTML('afterend', '
') {\n event.preventDefault();\n event.stopPropagation();\n if (previousSibling.classList.contains('medium-insert-images')) {\n currentLine.remove();\n this.serializeAndSaveBody();\n }\n } else {\n const caret = MediumEditor.selection.getCaretOffsets(currentLine).left;\n if (caret === 0 && previousSibling && (previousSibling.classList.contains('embedded-video') || previousSibling.getElementsByClassName('embedded-video').length > 0)) {\n previousSibling.remove();\n event.preventDefault();\n event.stopPropagation();\n this.serializeAndSaveBody();\n }\n }\n }\n\n isTheFirstCharacterOrPrecededByWhitespaceOrBracket() {\n const element = this.editor.getSelectedParentElement();\n const caret = MediumEditor.selection.getCaretOffsets(element).left;\n\n if (caret === 1) {\n return true;\n }\n\n const previousChar = $(element).text().charAt(caret - 2);\n\n return previousChar.trim().length === 0 || previousChar === '(';\n }\n\n keepStatusOfTheCurrentEditingElement() {\n const element = this.editor.getSelectedParentElement();\n this.currentCaretPosition = MediumEditor.selection.getCaretOffsets(element).left;\n this.currentEditingElement = $(element);\n }\n\n setupNewMentionElement() {\n const children = this.currentEditingElement.contents().toArray();\n let textLength = 0;\n\n this.newMentionElement = $('@');\n this.newSpaceElement = $(' ');\n this.currentEditingElement.empty();\n\n _(children).each(child => {\n const content = child.textContent;\n const len = content.length;\n\n if (textLength < this.currentCaretPosition && textLength + len >= this.currentCaretPosition) {\n const before = content.substring(0, this.currentCaretPosition - textLength - 1);\n const after = content.substring(this.currentCaretPosition - textLength, len);\n\n this.currentEditingElement\n .append(before)\n .append(this.newMentionElement)\n .append(this.newSpaceElement)\n .append(after);\n } else {\n this.currentEditingElement.append(child);\n }\n\n textLength += len;\n });\n\n const selection = this.editor.selectElement(this.newMentionElement.get(0));\n if (selection) {\n MediumEditor.selection.clearSelection(document);\n }\n }\n\n handleShowMentionables() {\n const newPosition = window.getSelection().getRangeAt(0).getBoundingClientRect();\n this.highlightedText = window.getSelection().toString();\n this.currentEditingElement = $(this.editor.getSelectedParentElement());\n this.showTheMentionables(newPosition);\n }\n\n showTheMentionables(newPosition) {\n if (newPosition) {\n $('#mentionables').css({\n top: newPosition.top - 22,\n left: newPosition.left,\n position: 'fixed',\n display: 'block',\n });\n\n document.querySelector('#mentionables').classList.add('highlighted-text');\n } else {\n const standfirstHeight = document.querySelector('.wire-standfirst-summary textarea').offsetHeight;\n const headerHeight = document.querySelector('.wire-editor header').offsetHeight;\n const warningHeight = document.querySelector('.impersona-warning-prompt')?.offsetHeight || 0;\n const isForFigcaption = this.currentEditingElement.prop('tagName') === 'FIGCAPTION' || this.currentEditingElement.parents('figcaption').length;\n const totalHeight = standfirstHeight + headerHeight + warningHeight;\n const newMentionElementPosition = this.newMentionElement.position();\n const newMentionElementOffset = this.newMentionElement.offset();\n const figcaptionTop = newMentionElementOffset.top - 222.5 - totalHeight;\n\n $('#mentionables').css({\n top: isForFigcaption ? figcaptionTop : newMentionElementPosition.top - 22,\n left: newMentionElementPosition.left + 18,\n position: 'absolute',\n display: 'block',\n });\n }\n\n this.setState({ showMentionables: true });\n this.mentionablesRef.setFocus();\n\n if (this.highlightedText) {\n this.mentionablesRef.onInputChange(this.highlightedText);\n }\n }\n\n handleMentionControlValueSelected(mentionable) {\n const nameToShow = mentionable.isCompanyProfile && mentionable.company\n ? mentionable.company : mentionable.name;\n this.mentionControlState.mentionableSelected = true;\n\n const mentionableHtml = `${nameToShow}`;\n\n if (this.highlightedText) {\n const currentLine = this.currentEditingElement.get(0);\n currentLine.innerHTML = currentLine.innerHTML.replace(\n this.highlightedText, mentionableHtml,\n );\n this.escapeMentionControl();\n } else {\n this.newMentionElement.replaceWith($(mentionableHtml));\n this.insertNewMentionElement();\n }\n }\n\n handleMentionControlOnBlur() {\n const { mentionableSelected, backspacePressed } = this.mentionControlState;\n if (mentionableSelected || backspacePressed) {\n return;\n }\n\n this.escapeMentionControl();\n }\n\n handleMentionControlOnKeydown(event) {\n const { key } = event;\n\n if (key === 'Escape') {\n this.escapeMentionControl();\n }\n }\n\n handleMentionControlOnBackspace() {\n this.mentionControlState.backspacePressed = true;\n this.setState({ showMentionables: false });\n this.newSpaceElement.remove();\n this.newMentionElement.empty();\n const parent = this.newMentionElement.get(0).parentNode;\n\n if (parent.classList.contains('medium-insert-active') || parent.textContent.trim().length === 0) {\n parent.innerHTML = '
';\n MediumEditor.selection.moveCursor(document, parent);\n } else {\n MediumEditor.selection.moveCursor(document, this.newMentionElement.get(0));\n this.newMentionElement.remove();\n }\n\n this.initMentionControlState();\n this.serializeAndSaveBody();\n }\n\n insertNewMentionElement() {\n this.setState({ showMentionables: false });\n MediumEditor.selection.moveCursor(document, this.newSpaceElement.get(0), 1);\n this.serializeAndSaveBody();\n }\n\n escapeMentionControl() {\n this.initMentionControlState();\n this.setState({ showMentionables: false });\n this.removeHighlightedText();\n if (this.newMentionElement && this.newSpaceElement) {\n this.newSpaceElement.remove();\n MediumEditor.selection.moveCursor(document, this.newMentionElement.get(0), 1);\n }\n this.serializeAndSaveBody();\n }\n\n removeHighlightedText() {\n if (this.highlightedText) {\n delete this.highlightedText;\n this.mentionablesRef.onInputChange('');\n document.querySelector('#mentionables').classList.remove('highlighted-text');\n }\n }\n /* eslint-enable react/sort-comp */\n\n render() {\n return (\n\n \n {!!this.state.validations.bodyRequiredValid || Please ensure your wire content is not empty.}\n \n {\n this.state.body.length >= 40_000_000 && (\n \n );\n }\n}\n","import MediumEditor from 'medium-editor';\n\nconst BlockquoteExtension = MediumEditor.extensions.button.extend({\n name: 'blockquote-extension',\n\n tagNames: ['blockquote'],\n contentDefault: '',\n contentFA: '',\n aria: 'blockquote',\n action: 'blockquote',\n\n init() {\n MediumEditor.extensions.button.prototype.init.call(this);\n\n this.setStateForButton.bind(this);\n },\n\n handleClick() {\n if (this.firstClick) {\n $(window.getSelection().focusNode).parents('blockquote').addClass('--standout');\n } else {\n MediumEditor.util.execFormatBlock(document, 'blockquote');\n }\n\n this.setStateForButton();\n\n this.base.checkContentChanged();\n },\n\n isAlreadyApplied() {\n this.setStateForButton();\n\n return this.firstClick || this.secondClick;\n },\n\n setStateForButton() {\n const blockquoteNode = $(window.getSelection().focusNode).parents('blockquote').get(0);\n\n this.firstClick = blockquoteNode && !blockquoteNode.classList.contains('--standout');\n this.secondClick = blockquoteNode && blockquoteNode.classList.contains('--standout');\n\n const { childNodes } = this.button;\n\n childNodes[0].classList.remove('--active');\n childNodes[1].classList.remove('--active');\n\n if (this.firstClick) {\n childNodes[1].classList.add('--active');\n } else if (this.secondClick) {\n childNodes[0].classList.add('--active');\n childNodes[1].classList.add('--active');\n }\n },\n});\n\nexport default BlockquoteExtension;\n","import MediumEditor from 'medium-editor';\n\nconst TagExtension = MediumEditor.extensions.button.extend({\n name: 'tag-extension',\n contentDefault: '',\n contentFA: '',\n aria: 'Tag/Mention',\n\n init() {\n MediumEditor.extensions.button.prototype.init.call(this);\n },\n\n handleClick() {\n this.base.trigger('showMentionables');\n },\n});\n\nexport default TagExtension;\n","import MediumEditor from 'medium-editor';\n\nconst DragDropExtension = MediumEditor.Extension.extend({\n name: 'dragdrop-extension',\n allowedTypes: ['image'],\n\n init() {\n MediumEditor.Extension.prototype.init.apply(this);\n // eslint-disable-next-line prefer-destructuring\n this.element = this.base.elements[0];\n this.subscribe('editableDrag', this.handleDrag.bind(this));\n this.subscribe('editableDrop', this.handleDrop.bind(this));\n },\n\n handleDrag(event) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'copy';\n this.addDragingClass();\n const target = event.target.classList ? event.target : event.target.parentElement;\n this.clearClassNames(target);\n\n if (\n event.type === 'dragover'\n && target.parentNode === this.element\n && target !== this.element\n && target.classList\n && (target.tagName === 'P' || target.tagName === 'DIV')\n ) {\n target.classList.add('medium-editor-dragover');\n }\n },\n\n handleDrop(event) {\n // Prevent file from opening in the current window\n event.preventDefault();\n event.stopPropagation();\n\n const { files } = event.dataTransfer;\n if (files) {\n this.removeDragingClass();\n if (this.isAllowedFile(files[0])) {\n this.insertImage(files);\n }\n }\n },\n\n isAllowedFile(file) {\n return this.allowedTypes.some(fileType => !!file.type.match(fileType));\n },\n\n insertNewLine(dragoverLine) {\n const newline = document.createElement('p');\n newline.innerHTML = '
';\n newline.classList.add('medium-insert-active');\n dragoverLine.classList.remove('medium-insert-active', 'medium-editor-dragover');\n dragoverLine.insertAdjacentElement('afterend', newline);\n MediumEditor.selection.moveCursor(document, newline);\n newline.click();\n },\n\n // The original code https://github.com/linkesch/medium-editor-insert-plugin/blob/master/src/js/images.js#L197\n triggerMediumInsertUploadFile(files) {\n const that = window.mediumInsertImages;\n const $file = $('');\n\n const fileUploadOptions = {\n dataType: 'json',\n add(e, data) {\n $.proxy(that, 'uploadAdd', e, data)();\n },\n done(e, data) {\n $.proxy(that, 'uploadDone', e, data)();\n },\n };\n\n if (new XMLHttpRequest().upload) {\n fileUploadOptions.progress = function (e, data) {\n $.proxy(that, 'uploadProgress', e, data)();\n };\n\n fileUploadOptions.progressall = function (e, data) {\n $.proxy(that, 'uploadProgressall', e, data)();\n };\n }\n\n $file.fileupload($.extend(true, {}, that.options.fileUploadOptions, fileUploadOptions));\n $file.prop('files', files);\n $file.get(0).dispatchEvent(new Event('change'));\n },\n\n insertImage(files) {\n const dragoverLine = this.element.querySelector('.medium-editor-dragover');\n\n if (!dragoverLine) {\n return;\n }\n\n this.insertNewLine(dragoverLine);\n this.triggerMediumInsertUploadFile(files);\n },\n\n addDragingClass() {\n this.element.classList.add('medium-editor-draging');\n },\n\n removeDragingClass() {\n this.element.classList.remove('medium-editor-draging');\n },\n\n clearClassNames(element) {\n const editable = MediumEditor.util.getContainerEditorElement(element);\n const existing = Array.prototype.slice.call(editable.parentElement.querySelectorAll('.medium-editor-dragover'));\n\n existing.forEach(el => {\n el.classList.remove('medium-editor-dragover');\n });\n },\n});\n\nexport default DragDropExtension;\n","// This is a workaround for an known issue integrating\n// medium-editor-insert-plugin with medium editor.\n// Do not use this for any other purpose.\n// https://github.com/orthes/medium-editor-insert-plugin/issues/408\nimport MediumEditor from 'medium-editor';\nimport _ from 'lodash';\n\nconst BackspaceWorkaroundExtension = MediumEditor.Extension.extend({\n name: 'backspace-workaround',\n\n init() {\n MediumEditor.Extension.prototype.init.call(this);\n this.subscribe('editableKeyup', this.handleBackspaceUp.bind(this));\n },\n\n handleBackspaceUp(event) {\n if (event.key === 'Backspace') {\n const value = _.get(_.first(_.values(this.base.serialize())), 'value');\n if (!value) {\n this.base.setContent('\n \n \n Disclaimer \n {actionLabel}\n Restore \n : }\n \n { editable ? (\n <>\n {actionLabel} \n \n ) : \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Sticky from 'react-stickynode';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport Header from './header';\nimport Title from './title';\nimport Body from './body';\nimport StandfirstSummary from './standfirst-summary';\nimport CTA from './cta';\nimport Disclaimer from './disclaimer';\nimport MicroProfile from '../../../micro-profiles/micro-profile';\nimport { SectionSeparator } from './shared/styles';\nimport useEditorStore from '../state-hook';\n\nexport default function EditorContent({ standfirstSummary, showCTA }) {\n const titleRef = React.useRef();\n const bodyRef = React.useRef();\n const wire = useEditorStore(state => state.wire);\n\n React.useEffect(() => {\n titleRef.current && bodyRef.current\n && titleRef.current.setNextFocusOnEnter(_.first(bodyRef.current.editor.elements));\n }, []);\n\n const profile = _.get(wire, 'profile', {});\n const id = _.get(wire, 'id');\n\n return (\n \n \n \n \n \n );\n}\n\nEditorContent.propTypes = {\n standfirstSummary: PropTypes.bool.isRequired,\n showCTA: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\n\nexport default class Header extends React.Component {\n static propTypes = {\n categoryName: PropTypes.string,\n seriesTitle: PropTypes.string,\n isSponsored: PropTypes.bool,\n }\n\n static defaultProps = {\n categoryName: '',\n seriesTitle: '',\n isSponsored: false,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n categoryName: this.props.categoryName,\n seriesTitle: this.props.seriesTitle,\n isSponsored: this.props.isSponsored,\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'editor',\n topic: 'category-changed',\n callback: categoryName => {\n this.setState({ categoryName });\n },\n });\n\n postal.subscribe({\n channel: 'editor',\n topic: 'series-changed',\n callback: seriesTitle => {\n this.setState({ seriesTitle });\n },\n });\n\n postal.subscribe({\n channel: 'editor',\n topic: 'is-sponsored-changed',\n callback: isSponsored => {\n this.setState({ isSponsored });\n },\n });\n }\n\n category() {\n return this.state.seriesTitle || this.state.categoryName;\n }\n\n render() {\n return (\n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { updateSummary } from '../../../../services/wire/edit-services';\nimport debounceAction from '../../../../shared/debounce-action';\nimport Loading from '../../../../shared/loading';\n\nconst WarningIcon = () => (\n \n);\n\nexport default class StandfirstSummary extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n value: PropTypes.string.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n summary: this.props.value || '',\n summaryLength: this.props.value.length || 0,\n };\n\n this.saveSummary = debounceAction({\n getCurrentValue: () => this.state.summary,\n actionPromise: () => updateSummary(this.props.wireId, this.state.summary),\n onBeforeAction: () => this.loading.start(),\n onAfterAction: () => this.loading.stop(),\n wait: 2000,\n });\n }\n\n componentDidMount() {\n this.summaryElement = document.querySelector('.wire-standfirst-summary textarea');\n this.summaryElement.addEventListener('keydown', event => {\n if (event.keyCode === 13) {\n event.preventDefault();\n }\n });\n this.summaryElement.addEventListener('keyup', event => {\n this.setState(state => {\n state.summary = event.target.value;\n state.summaryLength = state.summary.length;\n return state;\n }, this.saveSummary);\n this.setHeight();\n this.controlWarning(this.state.summaryLength);\n });\n\n this.setHeight();\n }\n\n setHeight() {\n setTimeout(() => {\n if (this.state.summary === '') {\n this.summaryElement.style.height = '25px';\n } else {\n this.summaryElement.style.height = 'auto';\n this.summaryElement.style.height = `${this.summaryElement.scrollHeight}px`;\n }\n }, 10);\n }\n\n // eslint-disable-next-line class-methods-use-this\n controlWarning(length) {\n const warning = document.querySelector('.warning');\n if (length > 140) {\n warning.classList.remove('hidden');\n } else {\n warning.classList.add('hidden');\n }\n }\n\n render() {\n return (\n \n \n \n This wire will be published under\n {`${author.isCompanyProfile && author.organization ? author.organization : author.name}’s`}\n account.\n \n \n \n );\n}\n\nImpersonaPrompt.propTypes = {\n newNav: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport Loading from '../../../../shared/loading';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport { create } from '../../../../services/wire/edit-attachment-services';\n\nexport default class AddAttachmentModal extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n onAttachmentAdded: PropTypes.func.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n show: false,\n attachment: undefined,\n title: undefined,\n error: undefined,\n };\n }\n\n handleAttachmentFileChange(e) {\n this.setState({ attachment: e.target.files[0] });\n }\n\n handleTitleChange(e) {\n this.setState({ title: e.target.value });\n }\n\n present() {\n this.setState({ show: true });\n }\n\n dismiss() {\n this.$input.val('');\n this.setState({\n show: false,\n attachment: undefined,\n title: undefined,\n error: undefined,\n });\n }\n\n save() {\n if (!this.state.attachment) {\n this.setState({ error: 'Please select a file' });\n return;\n }\n\n this.loading.start();\n create(this.props.wireId, this.state.attachment, this.state.title)\n .then(result => {\n this.props.onAttachmentAdded(result.data);\n this.dismiss();\n })\n .catch(e => {\n defaultOnErrorHandler(e, 'Error uploading the attachment');\n this.setState({ error: 'Invalid File Format' });\n })\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n Add attachment \n \n \n (this.loading = c)}>\n \n \n \n \n this.dismiss()}\n >\n Cancel\n \n this.save()}\n >\n Upload\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport update from 'immutability-helper';\n\nimport AddAttachmentModal from './add-attachment-modal';\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport { list, deleteById } from '../../../../services/wire/edit-attachment-services';\n\nexport default class AttachmentsControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n attachments: [],\n };\n }\n\n componentDidMount() {\n this.loading.start();\n list(this.props.wireId)\n .then(result => this.setState({ attachments: result.data.attachments }))\n .catch(e => defaultOnErrorHandler(e, 'Error getting attachments'))\n .finally(() => this.loading.stop());\n }\n\n handleAttachmentAdded(attachment) {\n this.setState(state => update(state, {\n attachments: {\n $push: [attachment],\n },\n }));\n }\n\n removeAttachment(e, attachment) {\n e && e.preventDefault && e.preventDefault();\n\n deleteById(this.props.wireId, attachment.id).then(() => this.setState(state => update(state, {\n attachments: attachments => attachments.filter(a => a.id !== attachment.id),\n })));\n }\n\n render() {\n return (\n \n \n (this.addAttachmentModal = c)}\n wireId={this.props.wireId}\n onAttachmentAdded={a => this.handleAttachmentAdded(a)}\n />\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport postal from 'postal';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport AutoPublishWireModal from './auto-publish-wire-modal';\nimport { updateAutoPublishDate } from '../../../../services/wire/edit-services';\n\nrequire('moment-timezone');\n\nexport default class AutoPublishWireControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n wirePublished: PropTypes.bool,\n autoPublishAt: PropTypes.string,\n }\n\n static defaultProps = {\n wirePublished: false,\n autoPublishAt: null,\n }\n\n constructor(props, context) {\n super(props, context);\n\n const dateTime = this.props.autoPublishAt ? moment(this.props.autoPublishAt) : null;\n const savedAutoPublishedAt = dateTime;\n this.state = { dateTime, savedAutoPublishedAt, wirePublished: this.props.wirePublished };\n\n this.handleDateTimeSettingsUpdated = this.handleDateTimeSettingsUpdated.bind(this);\n this.presentModal = this.presentModal.bind(this);\n this.cancelSchedule = this.cancelSchedule.bind(this);\n\n postal.subscribe({\n channel: 'editor',\n topic: 'wire-unpublished',\n callback: () => this.setState({ wirePublished: false }),\n });\n }\n\n handleDateTimeSettingsUpdated(dateTime) {\n this.setState({ dateTime });\n\n postal.publish({\n channel: 'editor',\n topic: 'auto-publish-time-changed',\n data: dateTime,\n });\n }\n\n presentModal(e) {\n e && e.preventDefault && e.preventDefault();\n\n this.autoPublishWireModal.present(this.state.dateTime);\n }\n\n cancelSchedule(evt) {\n evt && evt.preventDefault && evt.preventDefault();\n\n updateAutoPublishDate(this.props.wireId, null)\n .then(() => {\n this.handleDateTimeSettingsUpdated(null);\n this.setState({ savedAutoPublishedAt: null });\n })\n .catch(e => defaultOnErrorHandler(e, 'Error updating schedule settings for wire'));\n }\n\n render() {\n return !this.state.wirePublished && (\n \n \n (this.autoPublishWireModal = el)}\n wireId={this.props.wireId}\n onAutoPublishSettingsUpdated={this.handleDateTimeSettingsUpdated}\n />\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport moment from 'moment';\n\nimport Loading from '../../../../shared/loading';\nimport Validator from '../../../../shared/validator';\nimport SingleDatePickerWrapper from '../../../../shared/single-date-picker-wrapper';\nimport mutate from '../../../../shared/mutate';\n\nfunction getTimesForDate(date) {\n const step = 15;\n const now = moment();\n const isToday = date && date.isSame(now, 'day');\n const times = [];\n if (date) {\n const p = isToday\n ? now.clone().minute(Math.ceil(now.minute() / 15) * 15)\n : date.clone().set({ hour: 0, minute: 0 });\n while (p.isSame(date, 'day')) {\n times.push(p.format('hh:mm a'));\n p.add(step, 'minutes');\n }\n }\n return times;\n}\n\nexport default class AutoPublishWireModal extends React.Component {\n static propTypes = {\n onAutoPublishSettingsUpdated: PropTypes.func.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n dateTimeRequired: state => state.dateTime && state.dateTime.isValid() && state.time !== '',\n });\n\n this.state = {\n show: false,\n dateTime: null,\n time: '',\n validations: this.validator.getValidations(),\n };\n }\n\n handleDateChange(date) {\n this.setState(oldState => mutate(oldState, state => {\n if (!!date && date.isValid()) {\n state.dateTime = date;\n } else {\n state.dateTime = null;\n state.time = '';\n }\n\n state.validations.dateTimeRequiredValid = this.validator.validateDateTimeRequired(state);\n }));\n }\n\n handleTimeChange(e) {\n const time = e.target.value;\n\n this.setState(oldState => mutate(oldState, state => {\n state.time = time;\n\n const validationResult = this.validator.validateDateTimeRequired(state);\n state.validations.dateTimeRequiredValid = validationResult;\n\n if (validationResult) {\n const t = moment(time, 'hh:mm a');\n\n state.dateTime.set({\n hour: t.hour(),\n minute: t.minute(),\n });\n }\n }));\n }\n\n setAutoPublishAt() {\n this.setState(\n state => ({ validations: this.validator.validateForm(state) }),\n () => {\n if (!this.validator.formValid) return;\n\n this.props.onAutoPublishSettingsUpdated(this.state.dateTime);\n this.dismiss();\n },\n );\n }\n\n present(dateTime) {\n this.validator.resetValidation();\n const time = (!!dateTime && dateTime.isValid()) ? dateTime.format('hh:mm a') : '';\n this.setState({\n show: true,\n dateTime,\n time,\n validations: this.validator.getValidations(),\n });\n }\n\n dismiss() {\n this.setState({ show: false });\n }\n\n render() {\n return (\n \n \n Schedule \n \n \n (this.loading = el)}>\n \n \n \n \n this.dismiss()}\n >\n Cancel\n \n this.setAutoPublishAt()}\n >\n Save\n \n \n \n );\n }\n}\n","import React from 'react';\nimport Select, { components } from 'react-select';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport Validator from '../../../../shared/validator';\nimport { editorValidate } from '../channel-editor-postal';\nimport assignWireCategory from '../../../../services/wire/category-service';\nimport { getAllCategories } from '../../../../services/categories-service';\n\nconst GroupLabel = ({ label }) => \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport { updateIsCommercial } from '../../../../services/wire/edit-services';\n\nexport default class CommercialControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n wasCommercial: PropTypes.bool.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n isCommercial: this.props.wasCommercial,\n };\n }\n\n handleIsCommercialChange(evt) {\n const isCommercial = evt.target.value === 'true';\n\n this.loading.start();\n updateIsCommercial(this.props.wireId, isCommercial)\n .then(() => {\n this.setState({ isCommercial });\n postal.publish({\n channel: 'editor',\n topic: 'is-commercial-changed',\n data: isCommercial,\n });\n })\n .catch(e => defaultOnErrorHandler(e, 'Error updating is Commercial status'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Aside from './common/styles';\nimport View from './contributor-control-components/view';\nimport Selector from './contributor-control-components/selector';\nimport useEditorStore from '../state-hook';\nimport useContributorStore from './contributor-control-components/state-hook';\n\nexport default function ContributorControl() {\n const wProfile = useEditorStore(React.useCallback(state => _.get(state, 'wire.profile'), []));\n const cpSlug = useEditorStore(React.useCallback(state => _.get(state, 'currentProfile.slug'), []));\n const toChange = useContributorStore(state => state.toChange);\n const set = useContributorStore(state => state.set);\n\n React.useEffect(() => {\n set(state => {\n state.prev = _.get(wProfile, 'slug', null);\n state.dft = cpSlug;\n });\n }, [cpSlug, wProfile, set]);\n\n return (\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Contributor from './contributor';\nimport useContributorStore from './state-hook';\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n\n & > div:first-child {\n border-bottom: 1px solid #d7dfe7;\n }\n\n & > a {\n margin-top: 8px;\n margin-right: 3px;\n align-self: flex-end;\n text-transform: uppercase;\n color: ${props => props.theme.primaryColor};\n font: ${props => props.theme.fontWeightDccc} 12px/14px ${props => props.theme.fontFamilyBody};\n\n :hover {\n text-decoration: none;\n }\n }\n`;\n\nexport default function View(props) {\n const set = useContributorStore(state => state.set);\n const dft = useContributorStore(state => state.dft);\n\n const change = e => {\n e && e.preventDefault();\n set(state => {\n state.toChange = true;\n });\n };\n\n return (\n \n \n );\n}\n\nView.propTypes = {\n slug: PropTypes.string.isRequired,\n};\n","const selectorStyles = {\n container: provided => ({\n ...provided,\n fontSize: 17,\n marginBottom: 23,\n zIndex: 'inherit',\n }),\n control: (provided, state) => ({\n ...provided,\n borderColor: state.isFocused ? '#19202d' : '#d7dfe7',\n '&:hover': {\n borderColor: '#19202d',\n },\n borderRadius: 3,\n borderBottomLeftRadius: state.menuIsOpen ? 0 : 3,\n borderBottomRightRadius: state.menuIsOpen ? 0 : 3,\n outline: 'none',\n boxShadow: 'none',\n height: 40,\n }),\n indicatorsContainer: provided => ({\n ...provided,\n height: 40,\n }),\n indicatorSeparator: () => ({\n display: 'none',\n }),\n menu: provided => ({\n ...provided,\n marginTop: 0,\n borderRadius: 3,\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderColor: '#19202d',\n borderStyle: 'solid',\n borderWidth: 1,\n borderTopWidth: 0,\n }),\n menuList: provided => ({\n ...provided,\n display: 'flex',\n flexDirection: 'column',\n }),\n option: (provided, state) => ({\n ...provided,\n backgroundColor: state.isFocused ? '#f3f5fa' : '#fff',\n color: '#19202d',\n margin: 0,\n padding: '0px 16px',\n width: 'auto',\n border: 'none',\n borderBottom: '1px solid #d7dfe7',\n opacity: state.isDisabled ? 0.4 : 1,\n '&:last-child': { borderBottom: 'none' },\n }),\n placeholder: provided => ({\n ...provided,\n color: '#8ea3b5',\n }),\n valueContainer: provided => ({\n ...provided,\n height: 40,\n }),\n};\n\nconst selectorProps = {\n styles: selectorStyles,\n classNamesPrefix: 'sel',\n noOptionMessage: () => 'no results',\n components: {\n IndicatorsContainer: () => null,\n },\n};\n\nexport default selectorProps;\n","import _ from 'lodash';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport useEditorStore from '../state-hook';\nimport ContributorControl from './contributor-control';\nimport MediaTypesControl from './media-types-control';\nimport CategoryControl from './categories-control';\nimport KeywordsControl from './keywords-control';\nimport StockCodesControl from './stock-codes-control';\nimport WireFeaturedContributorsControl from './wire-featured-contributors-control';\nimport SeriesControl from './series-control';\nimport SponsorshipControl from './sponsorship-control';\nimport CommercialControl from './commercial-control';\nimport ExclusiveContentControl from './exclusive-content-control';\nimport RestrictUserControl from './restricted-redirect-control';\nimport RestrictionsEventControl from './restricted-event-control';\nimport AttachmentsControl from './attachments-control';\nimport PrimaryImageControl from './primary-image-control';\nimport PermalinkControl from './permalink-control';\nimport AutoPublishWireControl from './auto-publish-wire-control';\nimport PublishWireControl from './publish-wire-control';\nimport FeatureWireControl from './feature-wire-control';\n\n// eslint-disable-next-line complexity\nexport default function EditorSidebar({ showIsCommercial }) {\n const wire = useEditorStore(state => state.wire);\n const currentProfile = useEditorStore(React.useCallback(state => state.currentProfile, []));\n\n const { canSelectMediaTypes, isEditor } = currentProfile;\n const id = _.get(wire, 'id');\n\n return (\n <>\n \n \n \n );\n}\n\nOption.propTypes = {\n wireId: PropTypes.number.isRequired,\n itemId: PropTypes.number.isRequired,\n label: PropTypes.string.isRequired,\n isSelected: PropTypes.bool.isRequired,\n};\n","import { withStyles } from '@material-ui/core/styles';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\n\nconst ArrowIcon = withStyles(() => ({\n root: {\n color: '#BBCBD8',\n },\n}))(KeyboardArrowDownIcon);\n\nexport default ArrowIcon;\n","import _ from 'lodash';\nimport React from 'react';\nimport Select from 'react-select';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport { listAllSeries } from '../../../../services/series-service';\nimport { updateSeries } from '../../../../services/wire/edit-services';\n\nexport default class SeriesControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n seriesId: PropTypes.number,\n }\n\n static defaultProps = {\n seriesId: null,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n hasSeries: false,\n wireSeries: null,\n series: [],\n };\n\n this.toggleChange = this.toggleChange.bind(this);\n this.assignSeries = this.assignSeries.bind(this);\n }\n\n componentDidMount() {\n this.loading.start();\n listAllSeries()\n .then(result => {\n const series = _.map(_.get(result, 'data.series', []), d => ({ value: d.id, label: d.title }));\n const wireSeries = _.find(series, { value: this.props.seriesId }) || null;\n const hasSeries = !!wireSeries;\n this.setState({ series, wireSeries, hasSeries });\n })\n .catch(error => defaultOnErrorHandler(error, 'Error getting series'))\n .finally(() => this.loading.stop());\n }\n\n toggleChange(e) {\n const hasSeries = e.target.value === 'true';\n this.setState({ hasSeries });\n if (!hasSeries) {\n this.assignSeries(null);\n }\n }\n\n assignSeries(series) {\n this.loading.start();\n updateSeries(this.props.wireId, _.get(series, 'value', null))\n .then(() => {\n this.setState({ wireSeries: series });\n postal.publish({\n channel: 'editor',\n topic: 'series-changed',\n data: series ? series.label : null,\n });\n })\n .catch(error => defaultOnErrorHandler(error, `Error assigning series: ${series.title}`))\n .finally(() => this.loading.stop());\n }\n\n render() {\n const groupedOptions = [\n {\n label: 'Select a series',\n options: this.state.series,\n },\n ];\n\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport { updateIsSponsored } from '../../../../services/wire/edit-services';\n\nexport default class SponsorshipControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n wasSponsored: PropTypes.bool.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n isSponsored: this.props.wasSponsored,\n };\n }\n\n handleIsSponsoredChange(evt) {\n const isSponsored = evt.target.value === 'true';\n\n this.loading.start();\n updateIsSponsored(this.props.wireId, isSponsored)\n .then(() => {\n this.setState({ isSponsored });\n postal.publish({\n channel: 'editor',\n topic: 'is-sponsored-changed',\n data: isSponsored,\n });\n })\n .catch(e => defaultOnErrorHandler(e, 'Error updating sponsorship status'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport debounceAction from '../../../../shared/debounce-action';\nimport Validator from '../../../../shared/validator';\nimport { editorValidate } from '../channel-editor-postal';\nimport { updateOriginalUrl } from '../../../../services/wire/edit-services';\n\nexport default class ExclusiveContentControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n originalUrl: PropTypes.string,\n }\n\n static defaultProps = {\n originalUrl: '',\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n url: state => state.isExclusiveContent || Validator.UrlRegex.test(state.originalUrl),\n emptyUrl: state => state.isExclusiveContent || !!state.originalUrl.length,\n });\n\n this.state = {\n isExclusiveContent: !this.props.originalUrl,\n originalUrl: this.props.originalUrl,\n validations: this.validator.getValidations(),\n };\n\n this.saveOriginalUrl = debounceAction({\n getCurrentValue: () => this.state.originalUrl,\n actionPromise: () => updateOriginalUrl(this.props.wireId, this.state.originalUrl),\n onBeforeAction: () => this.loading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving original URL'),\n onAfterAction: () => this.loading.stop(),\n });\n\n editorValidate(this, 'exclusiveness');\n }\n\n handleOriginalUrlChange(e) {\n const originalUrl = e.target.value;\n\n this.setState(state => {\n state.originalUrl = originalUrl;\n if (!state.isExclusiveContent) {\n state.validations = this.validator.validateForm(state);\n if (state.validations.urlValid) {\n this.saveOriginalUrl();\n }\n } else {\n state.validations = {\n urlValid: true,\n emptyUrlValid: true,\n formValid: true,\n };\n }\n return state;\n });\n }\n\n handleIsExclusiveContentChange(e) {\n const isExclusiveContent = e.target.value === 'true';\n\n this.setState({ isExclusiveContent });\n if (isExclusiveContent) {\n this.setState({ originalUrl: '' });\n this.saveOriginalUrl();\n }\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport {\n updateRegUserRestrictions,\n} from '../../../../services/wire/edit-event-restrictions-services';\n\nexport default class RestrictionsUserControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n wasRestrictedToRegisteredUsers: PropTypes.bool.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n isRestricted: this.props.wasRestrictedToRegisteredUsers,\n };\n }\n\n handleIsRestrictedToRegisteredUsersChange(evt) {\n const isRestricted = evt.target.value === 'true';\n\n this.loading.start();\n updateRegUserRestrictions(this.props.wireId, isRestricted)\n .then(() => this.setState({ isRestricted }))\n .catch(e => defaultOnErrorHandler(e, 'Error updating is restricted to registered users'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Select from 'react-select';\nimport PropTypes from 'prop-types';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport debounceAction from '../../../../shared/debounce-action';\nimport Validator from '../../../../shared/validator';\nimport { editorValidate } from '../channel-editor-postal';\nimport {\n getEventRestrictions, updateEventRestrictions,\n} from '../../../../services/wire/edit-event-restrictions-services';\n\nexport default class RestrictionsEventControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n restrictedToEventId: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n eventRequired: state => !state.isRestrictedToEvent || !!state.event,\n });\n\n this.state = {\n isRestrictedToEvent: this.props.restrictedToEventId !== -1,\n event: this.props.restrictedToEventId === -1\n ? null\n : { value: this.props.restrictedToEventId },\n events: [],\n validations: this.validator.getValidations(),\n };\n this.saveEventId = debounceAction({\n getCurrentValue: () => _.get(this.state.event, 'value', null),\n actionPromise: () => updateEventRestrictions(this.props.wireId, _.get(this.state.event, 'value', null)),\n onBeforeAction: () => this.loading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving event id'),\n onAfterAction: () => this.loading.stop(),\n });\n this.toggleChange = this.toggleChange.bind(this);\n this.assignEvent = this.assignEvent.bind(this);\n\n editorValidate(this, 'restrictEvent');\n }\n\n componentDidMount() {\n this.loading.start();\n getEventRestrictions(this.props.wireId)\n .then(result => this.setState(state => {\n const id = result.data.restricted_to_event_id;\n state.isRestrictedToEvent = id !== null && id !== -1;\n state.events = result.data.events.map(e => ({ value: e.id, label: e.name }));\n state.event = _.find(state.events, { value: id }) || null;\n return state;\n }))\n .catch(e => defaultOnErrorHandler(e, 'Error getting wire restrictions'))\n .finally(() => this.loading.stop());\n }\n\n toggleChange(e) {\n const isRestrictedToEvent = e.target.value === 'true';\n\n this.setState(state => {\n state.isRestrictedToEvent = isRestrictedToEvent;\n if (!isRestrictedToEvent) {\n state.event = null;\n }\n state.validations = this.validator.validateForm(state);\n return state;\n }, () => isRestrictedToEvent || this.saveEventId());\n }\n\n assignEvent(event) {\n this.setState(state => {\n state.isRestrictedToEvent = true;\n state.event = event;\n state.validations = this.validator.validateForm(state);\n return state;\n }, () => this.saveEventId());\n }\n\n render() {\n const groupedOptions = [{\n label: 'Unrestricted',\n options: this.state.events,\n }];\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport PrimaryImageContext, { reducer } from './primary-image-components/context';\nimport Prompt from './primary-image-components/prompt';\nimport Viewer from './primary-image-components/viewer';\nimport Modal from '../../../shared/primary-image-modal';\n\nexport default function PrimaryImageControl(props) {\n const initialState = {\n ...props,\n showModal: false,\n };\n const [state, dispatch] = React.useReducer(reducer, initialState);\n\n const modalProps = {\n ...state,\n onAssigned: url => dispatch({ type: 'setUrl', payload: url }),\n onClose: () => dispatch({ type: 'hideModal' }),\n };\n return (\n \n \n \n \n \n );\n}\n\n/* eslint-disable react/no-unused-prop-types */\nPrimaryImageControl.propTypes = {\n mediaUrl: PropTypes.string,\n wireId: PropTypes.number.isRequired,\n};\n/* eslint-enable react/no-unused-prop-types */\n\nPrimaryImageControl.defaultProps = {\n mediaUrl: null,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport PrimaryImageContext from './context';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & > a {\n border-radius: 3px;\n box-shadow: 0px 2px 4px rgba(50, 50, 71, 0.06), 0px 1px 4px rgba(50, 50, 71, 0.06);\n border: 1px solid #b71e49;\n background-color: #f8f9fc;\n width: 100%;\n height: 168px;\n display: flex;\n flex-direction: column;\n align-items: center;\n :hover {\n text-decoration: none;\n border-color: #c19d3f;\n }\n\n > strong, > em {\n font-weight: 800;\n font-size: 14px;\n line-height: 120%;\n text-align: center;\n text-transform: uppercase;\n font-style: normal;\n }\n\n > strong {\n margin-top: 20px;\n color: #B71E49;\n :hover {\n color: #B71E49;\n }\n }\n\n > em {\n margin-top: 10px;\n :hover {\n text-decoration: underline;\n }\n }\n\n > .fa-picture-o {\n font-size: 48px;\n margin-top: 40px;\n color: #bbcbd8;\n :hover {\n color: #bbcbd8;\n }\n }\n\n }\n\n & > p {\n margin-top: 8px;\n color: #627484;\n font-size: 14px;\n line-height: 120%;\n }\n`;\n\nexport default function Prompt() {\n const { dispatch } = React.useContext(PrimaryImageContext);\n\n return (\n \n e.preventDefault() || dispatch({ type: 'showModal' })}>\n \n no wire image\n assign wire image\n \n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PrimaryImageContext from './context';\nimport { useRemovePrimaryImage } from '../../../../../services/wire/primary-image-services';\n\nexport default function Viewer() {\n const { state: { mediaUrl, wireId }, dispatch } = React.useContext(PrimaryImageContext);\n const [{ response }, remove] = useRemovePrimaryImage(wireId);\n\n React.useEffect(() => {\n if (_.get(response, 'status') === 204) {\n dispatch({ type: 'setUrl', payload: null });\n }\n }, [response, dispatch]);\n\n return (\n <>\n 
\n e.preventDefault() || remove()}\n >\n remove\n \n \n );\n}\n","import _ from 'lodash';\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport postal from 'postal';\nimport Loading from '../../../../shared/loading';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport copyToClipboard from '../../../../shared/copy-to-clipboard';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport { generatePermaLink } from '../../../../services/wire/edit-services';\nimport { whenAllValid } from '../channel-editor-postal';\n\nconst edCh = postal.channel('editor');\n\nexport default class PermalinkControl extends Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n wireTitleLength: PropTypes.number.isRequired,\n wireCategoryId: PropTypes.number,\n permalink: PropTypes.string.isRequired,\n wirePublished: PropTypes.bool,\n }\n\n static defaultProps = {\n wireCategoryId: null,\n wirePublished: false,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n interestsValid: !!this.props.wireTitleLength && !!this.props.wireCategoryId,\n permalink: this.props.permalink,\n wirePublished: this.props.wirePublished,\n };\n\n this.submit = this.submit.bind(this);\n this.generateLink = this.generateLink.bind(this);\n\n edCh.subscribe('wire-unpublished', () => this.setState({ wirePublished: false }));\n }\n\n submit(e) {\n e.preventDefault();\n\n const fields = ['title', 'category'];\n whenAllValid({\n fields,\n action: () => _.each(fields, d => edCh.publish(`validate.${d}`)),\n done: () => this.setState({ interestsValid: true }, this.generateLink),\n });\n }\n\n generateLink() {\n if (this.state.permalink || !this.state.interestsValid) {\n return;\n }\n\n this.loading.start();\n generatePermaLink(this.props.wireId)\n .then(result => this.setState({ permalink: result.data.permalink }))\n .catch(e => defaultOnErrorHandler(e, 'Error generating permalink'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport postal from 'postal';\nimport ConfirmationModal from '../../../shared/confirmation-modal';\nimport ImpersonaPromptModal from './publish-wire-components/impersona-prompt-modal';\nimport AddDisclaimerPromptModal from './publish-wire-components/add-disclaimer-prompt-modal';\nimport PublishPromptToShareModal from './publish-wire-components/publish-prompt-to-share-modal';\nimport SchedulePromptToShareModal from './publish-wire-components/schedule-prompt-to-share-modal';\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport {\n getWirePath, updateAutoPublishDate, publish, unpublish,\n} from '../../../../services/wire/edit-services';\nimport { whenAllValid } from '../channel-editor-postal';\n\nconst edCh = postal.channel('editor');\n\nexport default class PublishWireControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n validations: PropTypes.arrayOf(PropTypes.string).isRequired,\n autoPublishAt: PropTypes.string,\n wirePublished: PropTypes.bool,\n isFeatured: PropTypes.bool,\n categoryValid: PropTypes.bool,\n }\n\n static defaultProps = {\n autoPublishAt: null,\n wirePublished: false,\n isFeatured: false,\n categoryValid: true,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n autoPublishAt: this.props.autoPublishAt,\n wirePublished: this.props.wirePublished,\n categoryValid: this.props.categoryValid,\n };\n\n edCh.subscribe('auto-publish-time-changed', d => this.setState({ autoPublishAt: d }));\n edCh.subscribe('field.category.validated', d => this.setState({ categoryValid: d.isValid }));\n edCh.subscribe('category-changed', d => this.setState({ categoryValid: !!d }));\n\n [\n 'updateWire',\n 'scheduleWire',\n 'submit',\n 'showAddDisclaimer',\n 'proceed',\n 'publishWire',\n 'unpublishWire',\n 'presentUnpublishWireConfirmationModal',\n ].forEach(m => (this[m] = this[m].bind(this)));\n }\n\n updateWire() {\n this.loading.start();\n getWirePath(this.props.wireId)\n .then(result => {\n window.location = result.data.wire_path;\n })\n .catch(e => defaultOnErrorHandler(e, 'Error getting relative path of the wire'))\n .finally(() => this.loading.stop());\n }\n\n scheduleWire() {\n this.loading.start();\n const mpub = moment(this.state.autoPublishAt);\n updateAutoPublishDate(this.props.wireId, mpub.toDate())\n .then(result => {\n result.data.autoPublishAt = mpub;\n result.data.wireId = this.props.wireId;\n this.scheduledModal.present(result.data);\n })\n .catch(e => defaultOnErrorHandler(e, 'Error updating schedule settings for wire'))\n .finally(() => this.loading.stop());\n }\n\n submit(e) {\n const intention = e.target.getAttribute('data-intent');\n const func = this[`${intention}Wire`];\n if (typeof func !== 'function') {\n return;\n }\n\n const standfirstLength = document.querySelector('.wire-standfirst-summary textarea');\n if (standfirstLength && standfirstLength.value.length > 140) {\n return;\n }\n\n whenAllValid({\n fields: this.props.validations,\n action: () => edCh.publish('validate'),\n done: () => this.impersonaModal.present(intention),\n });\n }\n\n showAddDisclaimer(intention) {\n this.addDisclaimerModal.present(intention);\n }\n\n proceed(intention) {\n const func = this[`${intention}Wire`];\n if (typeof func !== 'function') {\n return;\n }\n func();\n }\n\n publishWire() {\n this.loading.start();\n publish(this.props.wireId)\n .then(result => {\n result.data.wireId = this.props.wireId;\n this.publishedModal.present(result);\n })\n .catch(e => defaultOnErrorHandler(e, 'Error publishing wire'))\n .finally(() => this.loading.stop());\n }\n\n presentUnpublishWireConfirmationModal() {\n this.unpublishWireConfirmationModal.present();\n }\n\n unpublishWire() {\n this.loading.start();\n unpublish(this.props.wireId)\n .then(() => {\n this.setState({ wirePublished: false });\n edCh.publish('wire-unpublished');\n })\n .catch(e => defaultOnErrorHandler(e, 'Error unpublishing wire'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n // eslint-disable-next-line no-nested-ternary\n const intent = this.state.wirePublished\n ? 'update'\n : (this.state.autoPublishAt ? 'schedule' : 'publish');\n\n const confirmModalProps = {\n title: 'Are you sure you want to unpublish?',\n submitText: 'Unpublish',\n extraClass: '--large',\n onConfirm: this.unpublishWire,\n message: this.props.isFeatured\n ? 'You’ve featured this wire on your profile. If you unpublish this wire it will be removed from your Feature Wires list on your Profile.'\n : 'When you unpublish a wire it can no longer be discovered or read by investors. You can always republish this wire if you change your mind.',\n };\n\n return (\n \n \n (this.impersonaModal = el)}\n onDismiss={this.showAddDisclaimer}\n />\n (this.addDisclaimerModal = el)}\n onDismiss={this.proceed}\n />\n (this.publishedModal = el)} />\n (this.scheduledModal = el)} />\n (this.unpublishWireConfirmationModal = el)}\n />\n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { createGlobalStyle } from 'styled-components';\nimport Modal from 'react-bootstrap/Modal';\nimport useEditorStore from '../../state-hook';\nimport MicroProfile from './micro-profile';\n\nconst Style = createGlobalStyle`\n #success-icon {\n --success-icon-circle-color: ${props => props.theme.secondaryColor};\n --success-icon-tick-color: #d7dfe7;\n }\n\n .modal-body.modal-body.modal-body.modal-body.modal-body {\n flex-grow: 2;\n padding-left: 0px;\n padding-right: 0px;\n padding-bottom: 35px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n > strong {\n margin-top: 20px;\n font-size: 24px !important;\n line-height: 29px;\n }\n\n > #desc {\n max-width: 404px;\n font-size: 19px;\n line-height: 23px;\n margin: 0 1em;\n }\n }\n\n .modal-footer {\n flex-basis: 90px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n &:after {\n order: 0;\n content: \"\";\n width: 26px;\n display: block;\n }\n\n > button.btn-inverted {\n order: -1;\n border-radius: 4px;\n border: 1px solid ${props => props.theme.secondaryColor};\n }\n\n > button.btn-primary {\n order: 1;\n width: 152px;\n }\n }\n`;\n\nconst ImpersonaPromptModal = React.forwardRef((props, ref) => {\n const wire = useEditorStore(state => state.wire);\n const currentProfile = useEditorStore(state => state.currentProfile);\n const [intention, setIntention] = React.useState('');\n const [show, setShow] = React.useState(false);\n\n const present = d => {\n const profile = _.get(wire, 'profile', {});\n if (_.get(currentProfile, 'slug') === profile.slug) {\n props.onDismiss(d);\n } else {\n setIntention(d);\n setShow(true);\n }\n };\n\n const goBack = () => {\n setShow(false);\n props.onDismiss('invalid');\n };\n\n const proceed = () => {\n setShow(false);\n props.onDismiss(intention);\n };\n\n React.useImperativeHandle(ref, () => ({ present }));\n\n return (\n \n \n \n \n \n \n this wire will appear to be published by...\n \n \n \n \n \n \n );\n});\n\nImpersonaPromptModal.propTypes = { onDismiss: PropTypes.func.isRequired };\n\nImpersonaPromptModal.displayName = 'ImpersonaPromptModal';\n\nexport default ImpersonaPromptModal;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n max-width: 260px;\n flex-grow: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n\n > img {\n border-radius: 4px;\n width: 88px;\n height: 88px;\n border: 1.4px solid white;\n filter: drop-shadow(0px 2.7px 5.5px rgba(50, 50, 71, 0.2));\n }\n\n > div {\n height: 88px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: 24px;\n font: ${props => props.theme.fontWeightMedium} 14px/100% ${props => props.theme.fontFamilyBody};\n color: ${props => props.theme.bodyColor};\n overflow: hidden;\n\n > * {\n display: inline !important;\n height: unset !important;\n text-align: left !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n > :not(:last-child) {\n margin-bottom: 5px;\n }\n\n .name {\n font-weight: ${props => props.theme.fontWeightHeavy};\n font-size: 19px;\n height: 18px !important;\n }\n\n .organization {\n color: #627484;\n }\n }\n`;\n\nexport default function MicroProfile({\n name, profilePictureUrl, organization, position, isCompanyProfile,\n}) {\n const showCompanyProfile = isCompanyProfile && !!organization;\n\n return (\n \n \n );\n}\n\nMicroProfile.propTypes = {\n name: PropTypes.string,\n organization: PropTypes.string,\n position: PropTypes.string,\n profilePictureUrl: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n};\n\nMicroProfile.defaultProps = {\n name: '',\n organization: '',\n position: '',\n profilePictureUrl: null,\n isCompanyProfile: false,\n};\n","import _ from 'lodash';\nimport React from 'react';\nimport styled, { createGlobalStyle } from 'styled-components';\nimport PropTypes from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport TextareaAutosize from 'react-autosize-textarea';\nimport useEditorStore from '../../state-hook';\nimport useUpdateDisclaimer from '../../../../../services/wire/disclaimer-service';\nimport { usePostUpdateDisclaimer } from '../../../../../services/profiles/contributor-settings-service';\n\nconst Style = createGlobalStyle`\n .modal article.horizontal {\n width: 850px;\n max-height: 420px;\n }\n .modal-body.modal-body.modal-body.modal-body.modal-body {\n flex-grow: 2;\n padding-left: 0px;\n padding-right: 0px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n > strong {\n margin-top: 20px;\n font-size: 24px !important;\n line-height: 29px;\n }\n\n > #desc {\n font-size: 19px;\n line-height: 23px;\n margin: 1em 2em;\n }\n }\n\n .modal-footer {\n flex-basis: 90px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n &:after {\n order: 0;\n content: \"\";\n width: 26px;\n display: block;\n }\n\n > button {\n margin: 0 8px;\n\n .btn-inverted {\n order: 1;\n border-radius: 4px;\n border: 1px solid ${props => props.theme.secondaryColor};\n }\n .btn-primary {\n order: -1;\n width: 152px;\n }\n }\n }\n`;\n\nconst TextArea = styled(TextareaAutosize)`\n font-family: ${props => props.theme.fontFamilyBody};\n font-size: 14px;\n line-height: 18px;\n padding: 0;\n resize: none;\n overflow: hidden;\n height: 160px;\n margin: 1em 2em;\n width: 90%;\n`;\n\nconst Checkbox = styled.label`\n font-size: 16px;\n margin-bottom: 8px;\n`;\n\nconst AddDisclaimerPromptModal = React.forwardRef((props, ref) => {\n const wire = useEditorStore(state => state.wire);\n const set = useEditorStore(state => state.set);\n const currentProfile = useEditorStore(state => state.currentProfile);\n const [intention, setIntention] = React.useState('');\n const [show, setShow] = React.useState(false);\n const [disclaimer, setDisclaimer] = React.useState('');\n const [assignToAllWires, setAssignToAllWires] = React.useState(true);\n const [, updateDisclaimer] = useUpdateDisclaimer();\n const [, updateMyDisclaimer] = usePostUpdateDisclaimer();\n const contentRef = React.useRef();\n\n React.useEffect(() => {\n show && contentRef.current && contentRef.current.focus();\n }, [show]);\n\n const present = d => {\n const profile = _.get(wire, 'profile', {});\n if (_.get(wire, 'disclaimer') || _.get(currentProfile, 'slug') !== profile.slug) {\n props.onDismiss(d);\n } else {\n setIntention(d);\n setShow(true);\n }\n };\n\n const goBack = () => {\n setShow(false);\n props.onDismiss('invalid');\n };\n\n const proceed = async () => {\n if (disclaimer.length > 0) {\n await updateDisclaimer(wire.id, disclaimer);\n set(state => {\n state.wire.disclaimer = disclaimer;\n });\n if (assignToAllWires) {\n await updateMyDisclaimer(disclaimer);\n set(state => {\n state.currentProfile.disclaimer = disclaimer;\n });\n }\n }\n setShow(false);\n props.onDismiss(intention);\n };\n\n const onChange = e => {\n e.preventDefault();\n setDisclaimer(e.target.value);\n };\n\n const toggleCheckbox = e => {\n setAssignToAllWires(e.target.checked);\n };\n\n React.useImperativeHandle(ref, () => ({ present }));\n\n return (\n \n \n \n Would you like to add a disclaimer?\n \n \n \n \n \n \n \n \n );\n});\n\nAddDisclaimerPromptModal.propTypes = { onDismiss: PropTypes.func.isRequired };\n\nAddDisclaimerPromptModal.displayName = 'AddDisclaimerPromptModal';\n\nexport default AddDisclaimerPromptModal;\n","import _ from 'lodash';\nimport React from 'react';\nimport Modal from 'react-bootstrap/Modal';\n\nimport { clickToShare, socialMedia } from '../../../../../shared/click-to-share';\nimport copyToClipboard from '../../../../../shared/copy-to-clipboard';\n\nexport default class PublishPromptToShareModal extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n show: false,\n email: null,\n url: null,\n wirePath: null,\n wireId: null,\n };\n\n this.dismiss = this.dismiss.bind(this);\n this.present = this.present.bind(this);\n }\n\n present(d) {\n const state = {\n ...d.data.shares,\n url: d.data.url,\n wirePath: d.data.wire_path,\n wireId: d.data.wireId,\n show: true,\n };\n this.setState(state);\n }\n\n dismiss() {\n this.setState({ show: false }, () => (window.location = this.state.wirePath));\n }\n\n render() {\n return (\n \n \n \n \n \n success\n \n \n get more views\n \n \n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport { clickToShare, socialMedia } from '../../../../../shared/click-to-share';\n\nrequire('moment-timezone');\n\nexport default class SchedulePromptToShareModal extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n show: false,\n timeAndDate: null,\n email: null,\n url: null,\n wireId: null,\n };\n\n this.dismiss = this.dismiss.bind(this);\n this.present = this.present.bind(this);\n }\n\n present({\n shares: { email }, url, autoPublishAt, wireId,\n }) {\n const timeAndDate = (autoPublishAt && autoPublishAt.isValid()) ? autoPublishAt.tz('Australia/Sydney').format('hh:mm a LL zz') : null;\n this.setState({\n timeAndDate, email, url, wireId, show: true,\n });\n }\n\n dismiss() {\n this.setState({ show: false }, () => (window.location = '/feeds/latest'));\n }\n\n render() {\n return (\n \n \n \n \n \n scheduled\n \n \n get more views\n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FeatureWireModal from './feature-wire-components/feature-wire-modal';\nimport useFeatureWireStore from './feature-wire-components/state-hooks';\nimport useGetAllFeatureable from '../../../../services/wire/featureable-service';\n\nexport default function FeatureWireControl({ wireId }) {\n const set = useFeatureWireStore(state => state.set);\n const [, getFeatureable] = useGetAllFeatureable(wireId);\n\n const showModal = e => {\n e && e.preventDefault();\n\n getFeatureable().then(resp => {\n set(state => {\n state.showModal = true;\n state.featureable = resp.data.featureable;\n state.selectedFeatureable = resp.data.selectedFeatureable;\n });\n }).catch(() => {\n set(state => {\n state.showModal = true;\n state.featureable = { author: null, mentions: [] };\n });\n });\n };\n\n return (\n <>\n \n \n \n Select Profiles to feature this wire \n \n When published, this will update and pin this as the first featured wire\n for selected profiles.\n \n \n \n \n \n \n \n \n \n );\n}\n\nFeatureWireModal.propTypes = { wireId: PropTypes.number.isRequired };\n","import React from 'react';\nimport useFeatureWireStore from './state-hooks';\nimport Option from './option';\n\nexport default function Author() {\n const author = useFeatureWireStore(state => state.featureable.author);\n\n if (!author) {\n return null;\n }\n\n return (\n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport useFeatureWireStore from './state-hooks';\nimport Option from './option';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n width: 100%;\n margin-top: 32px;\n`;\n\nconst Top = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-bottom: 8px;\n`;\n\nconst Bottom = styled.div`\n border: 1px solid #D7DFE7;\n border-radius: 2px;\n max-height: 320px;\n overflow-y: auto;\n width: 100%;\n`;\n\nconst Label = styled.div`\n color: ${props => props.theme.secondaryColor};\n font-size: 14px;\n font-family: ${props => props.theme.fontFamilyBody};\n font-weight: ${props => props.theme.fontWeightHeavy};\n line-height: 120%;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n`;\n\nconst Action = styled.div`\n color: ${props => props.theme.secondaryColor};\n font-size: 16px;\n font-weight: ${props => props.theme.fontWeightHeavy};\n\n a.secondary, a.disabled {\n color: ${props => props.theme.secondaryColor};\n }\n\n a.disabled {\n cursor: unset;\n opacity: 0.5;\n text-decoration: none;\n }\n\n .separator {\n margin: 0 8px;\n }\n`;\n\nexport default function Mentions() {\n const set = useFeatureWireStore(state => state.set);\n const mentions = useFeatureWireStore(state => state.featureable.mentions);\n const selected = useFeatureWireStore(state => state.selectedFeatureable);\n\n if (mentions.length === 0) {\n return null;\n }\n\n const selectAll = e => {\n e && e.preventDefault();\n\n set(state => {\n state.selectedFeatureable = _.unionWith(selected, mentions, _.isEqual);\n });\n };\n\n const clear = e => {\n e && e.preventDefault();\n\n set(state => {\n state.selectedFeatureable = _.differenceWith(selected, mentions, _.isEqual);\n });\n };\n\n const selectedMentions = _.intersectionWith(selected, mentions, _.isEqual);\n const clearLinkClass = selectedMentions.length === 0 ? 'disabled' : 'secondary';\n\n return (\n \n \n \n \n Select All\n |\n Clear\n \n \n \n {mentions.map(f => )}\n \n \n );\n}\n","import axios from 'axios';\n\nconst baseUrl = id => `/api/v1/wire/${id}/keyword`;\n\nexport function getWireKws(id) {\n return axios.get(`${baseUrl(id)}s`, { cache: { ignoreCache: true } });\n}\n\nexport function addKw(wireId, kwSlug) {\n return axios.post(`${baseUrl(wireId)}/${kwSlug}`);\n}\n\nexport function removeKw(wireId, kwSlug) {\n return axios.delete(`${baseUrl(wireId)}/${kwSlug}`);\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport update from 'immutability-helper';\nimport 'devbridge-autocomplete/dist/jquery.autocomplete';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport Validator from '../../../../shared/validator';\nimport { editorValidate } from '../channel-editor-postal';\nimport create from '../../../../services/keywords/create-service';\nimport { getWireKws, addKw, removeKw } from '../../../../services/wire/edit-keywords-service';\n\nconst ERR_TIMEOUT_SEC = 5;\nconst MIN_LENGTH = 3;\nconst MAX_LENGTH = 64;\n\nexport default class KeywordsControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.onErrorTimeout = null;\n this.validator = new Validator({\n maxKeywords: state => {\n const len = state.keywords.length;\n const isValid = len <= 5 && (len < 5 || !state.newKeyword.length);\n const op = isValid ? 'enable' : 'disable';\n this.$newKeywordInput && this.$newKeywordInput.devbridgeAutocomplete()[op]();\n isValid || this.resetError(state.newKeyword, 'maxKeywords');\n return isValid;\n },\n newKeywordMinLength: state => {\n const maxKeywordsReached = state.keywords.length >= 5;\n const suggesting = !!state.suggestionKeywords.length;\n const notInputting = !state.newKeyword.length;\n const isValid = maxKeywordsReached\n || suggesting\n || notInputting\n || state.newKeyword.length >= MIN_LENGTH;\n isValid || this.resetError(state.newKeyword, 'newKeywordMinLength');\n return isValid;\n },\n newKeywordMaxLength: state => {\n const maxKeywordsReached = state.keywords.length >= 5;\n const suggesting = !!state.suggestionKeywords.length;\n const isValid = maxKeywordsReached || suggesting || state.newKeyword.length <= MAX_LENGTH;\n isValid || this.resetError(state.newKeyword, 'newKeywordMaxLength');\n return isValid;\n },\n notStockCode: state => {\n const maxKeywordsReached = state.keywords.length >= 5;\n const suggesting = !!state.suggestionKeywords.length;\n const isValid = maxKeywordsReached || suggesting || !state.newKeyword.match(/(^asx|:asx)/i);\n isValid || this.resetError(state.newKeyword, 'notStockCode');\n return isValid;\n },\n });\n\n this.state = {\n keywords: [],\n suggestionKeywords: [],\n newKeyword: '',\n validations: this.validator.getValidations(),\n };\n\n editorValidate(this, 'keywords');\n }\n\n componentDidMount() {\n this.loading.start();\n getWireKws(this.props.wireId)\n .then(result => this.setState(\n state => {\n state.keywords = _.get(result, 'data.keywords', []);\n state.validations = this.validator.validateForm(state);\n return state;\n },\n () => {\n if (this.state.keywords.length >= 5) {\n this.$newKeywordInput.devbridgeAutocomplete().disable();\n }\n },\n ))\n .catch(e => defaultOnErrorHandler(e, 'Error getting keywords'))\n .finally(() => this.loading.stop());\n\n this.$newKeywordInput\n .devbridgeAutocomplete({\n serviceUrl: '/keywords/suggest',\n noCache: true,\n tabDisabled: true,\n triggerSelectOnValidInput: false,\n transformResult: response => {\n const suggestionKeywords = $.parseJSON(response).results;\n\n this.setState({ suggestionKeywords });\n\n return {\n suggestions: $.map(suggestionKeywords, keyword => ({\n id: keyword.id,\n value: keyword.value,\n slug: keyword.slug,\n data: { category: 'Select a Keyword' },\n })),\n };\n },\n onSearchComplete: () => {\n this.setState(state => {\n state.validations = this.validator.validateForm(state);\n return state;\n });\n },\n onSelect: keyword => {\n if (this.state.validations.formValid) {\n this.setState({ newKeyword: '' });\n this.addKeyword(keyword.value);\n }\n },\n maxHeight: 350,\n groupBy: 'category',\n })\n .on('keypress keydown', e => {\n if (e.which === 13 || e.which === 9) {\n e.preventDefault();\n }\n })\n .on('keyup', e => {\n const eligible = (e.which === 13 || e.which === 188 || e.which === 9)\n && this.state.validations.formValid\n && !(this.$newKeywordInput.devbridgeAutocomplete().disabled);\n if (eligible) {\n this.getAndAddKeywords();\n }\n });\n }\n\n handleNewKeywordChange(e) {\n const newKeyword = e.target.value;\n\n this.setState(state => {\n state.newKeyword = newKeyword;\n state.validations = this.validator.validateForm(state);\n return state;\n });\n }\n\n getAndAddKeywords() {\n this.state.newKeyword\n .split(',')\n .map(x => x.trim())\n .filter(x => !!x)\n .forEach(x => this.addKeyword(x));\n }\n\n resetError(lastNewKeyword, rule) {\n clearTimeout(this.onErrorTimeout);\n this.onErrorTimeout = setTimeout(() => {\n if (this.state.newKeyword === lastNewKeyword && !this.state.validations[`${rule}Valid`]) {\n this.validator.resetValidation();\n this.setState({ validations: this.validator.getValidations() });\n }\n }, ERR_TIMEOUT_SEC * 1000);\n }\n\n addKeyword(keywordValue) {\n const foundKeyword = _.find(this.state.suggestionKeywords, ['value', keywordValue]);\n\n if (foundKeyword) {\n if (_.some(this.state.keywords, ['id', foundKeyword.id])) return;\n\n this.state.validations = this.validator.validateForm(this.state);\n\n if (this.state.validations.formValid) {\n this.loading.start();\n addKw(this.props.wireId, foundKeyword.slug)\n .then(result => this.setState(state => update(state, {\n keywords: { $push: [result.data] },\n })))\n .catch(e => defaultOnErrorHandler(e, 'Error adding keyword'))\n .finally(() => this.loading.stop());\n\n this.setState({ newKeyword: '' });\n this.$newKeywordInput.val('').focus();\n }\n } else {\n this.createAndAddNewKeyword(keywordValue);\n }\n }\n\n createAndAddNewKeyword(keywordValue) {\n create(keywordValue)\n .then(result => {\n this.setState(state => update(state, {\n suggestionKeywords: { $push: [result.data] },\n }));\n this.addKeyword(keywordValue);\n })\n .catch(e => defaultOnErrorHandler(e, 'Error creating new keyword'))\n .finally(() => this.loading.stop());\n }\n\n removeKeyword(evt, keyword) {\n evt && evt.preventDefault && evt.preventDefault();\n\n this.setState(state => {\n state.keywords = _.filter(state.keywords, x => x !== keyword);\n state.validations = this.validator.validateForm(state);\n return state;\n });\n\n this.loading.start();\n removeKw(this.props.wireId, keyword.slug)\n .catch(e => defaultOnErrorHandler(e, 'Error removing keyword'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n","import axios from 'axios';\n\nexport default function create(v) {\n return axios.post(`/api/v1/keywords/${v}`);\n}\n","import axios from 'axios';\n\nconst url = (id, slug) => `/api/v1/wire/${id}/stock_code/${slug}`;\n\nexport function add(wireId, scSlug) {\n return axios.post(url(wireId, scSlug));\n}\n\nexport function remove(wireId, scSlug) {\n return axios.delete(url(wireId, scSlug));\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport update from 'immutability-helper';\nimport 'devbridge-autocomplete/dist/jquery.autocomplete';\n\nimport postal from 'postal';\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport StockCodeTooltip from '../../stock-codes-components/tooltip';\nimport breakpoints from '../../../../shared/breakpoints';\nimport { listAllStockCodes } from '../../../../services/stock-codes/stock-codes-service';\nimport { getWireStockCodes } from '../../../../services/stock-codes/from-wires-service';\nimport { add, remove } from '../../../../services/wire/edit-stock-codes-service';\n\nconst isMobile = breakpoints.upTo_medium();\n\nexport default class StockCodesControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n stockCodes: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n stockExchange: PropTypes.string,\n code: PropTypes.string,\n companyName: PropTypes.string,\n isStockCodeFollowedByCurrentUser: PropTypes.bool,\n mentioned: PropTypes.bool,\n }),\n ).isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n stockCodes: this.props.stockCodes,\n };\n this.stockCodes = [];\n this.addStockCode = this.addStockCode.bind(this);\n this.getStockCodes = this.getStockCodes.bind(this);\n this.filterItem = this.filterItem.bind(this);\n this.buildItems = this.buildItems.bind(this);\n\n postal.subscribe({\n channel: 'editor',\n topic: 'wire-body-saved',\n callback: this.getStockCodes,\n });\n }\n\n componentDidMount() {\n this.loading.start();\n listAllStockCodes()\n .then(result => {\n this.stockCodes = result.data.stockCodes.map(s => ({ ...s, category: 'Select a stock code' }));\n // Refer to https://github.com/devbridge/jQuery-Autocomplete for API doc\n // instead of the official jQuery.AutoComplete. They're different!\n this.$newInput.devbridgeAutocomplete({\n autoSelectFirst: true,\n lookup: this.stockCodes.map(d => ({ value: d.code, data: d })),\n lookupFilter: this.filterItem,\n lookupLimit: 10,\n minChars: 2,\n noSuggestionNotice: 'No Stock Codes Found',\n onSelect: this.addStockCode,\n tabDisabled: true,\n triggerSelectOnValidInput: false,\n showNoSuggestionNotice: true,\n maxHeight: 350,\n groupBy: 'category',\n beforeRender: this.buildItems,\n });\n })\n .catch(e => defaultOnErrorHandler(e, 'Error getting stock codes'))\n .finally(() => this.loading.stop());\n }\n\n getStockCodes() {\n getWireStockCodes(this.props.wireId)\n .then(result => this.setState({ stockCodes: result.data.stockCodes }));\n }\n\n buildItems(container, suggestions) {\n const pattern = `(${this.queryLowerCase.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '\\\\$&')})`;\n\n container.find('.autocomplete-suggestion').each((index, suggestionItem) => {\n const matchedCompanyName = suggestions[index].data.companyName\n .replace(new RegExp(pattern, 'gi'), '$1')\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/<(\\/?strong)>/g, '<$1>');\n\n const newHtml = `\n \n \n \n );\n }\n}\n","import axios from 'axios';\n\nexport function listASXStockCodes() {\n return axios.get('/api/v1/stock_codes/NASDAQ', { cache: { ignoreCache: true } });\n}\n\nexport function listAllStockCodes() {\n return axios.get('/api/v1/stock_codes/*', { cache: { ignoreCache: true } });\n}\n","import axios from './axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useSearchUser() {\n const common = (cohort, query) => ({ params: { cohort, q: query } });\n const [state, q] = useAxios({\n url: '/api/v1/lwadmin/users/_search',\n method: 'GET',\n }, { manual: true });\n const executeQuery = (cohort, query) => q(common(cohort, query));\n return [state, executeQuery];\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useDebounce } from 'use-debounce';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport useSearchUser from '../../../../services/user-search-service';\nimport CompaniesContext from './context';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst Input = styled.input`\n height: 50px;\n padding: 15px 23px;\n`;\n\nconst UsersContainer = styled.div`\n display: flex;\n flex-direction: column;\n border: 1px solid ${props => props.theme.secondaryColorLight};\n border-top: none;\n border-radius: 4px;\n padding: 16px 8px;\n`;\n\nconst Row = styled.div`\n border-radius: 4px;\n padding: 8px;\n\n &:hover {\n background-color: ${props => props.theme.secondaryColorLight};\n cursor: pointer;\n }\n`;\n\nconst NoResult = styled.div`\n padding: 8px;\n`;\n\nexport default function MemberSearchControl() {\n const [, search] = useSearchUser();\n const { state: { currentEditingCompany }, dispatch } = React.useContext(CompaniesContext);\n const [users, setUsers] = React.useState([]);\n const [value, setValue] = React.useState('');\n const [query] = useDebounce(value, 300);\n\n const handleOnChange = e => setValue(e.target.value);\n\n useChangeAwareEffect(({ did }) => {\n did.query.change && query && search('contributors', query).then(({ data }) => {\n const foundUsers = _.get(data, 'users', []);\n if (foundUsers) {\n const filteredUsers = foundUsers.filter(u => {\n const notExisting = _.every(currentEditingCompany.members, m => m.id !== u.profile_id);\n return notExisting && (!u.company_id || u.company_id === currentEditingCompany.id);\n });\n setUsers(filteredUsers);\n }\n });\n }, { query });\n\n const addMember = (e, user) => {\n e && e.preventDefault();\n\n dispatch({ type: 'addMember', payload: { id: user.profile_id, name: user.name, role: user.role } });\n setValue('');\n };\n\n return (\n \n \n {query.length > 0 && (\n \n {users.map(user => (\n addMember(e, user)}>\n {`${user.name} (${user.email})`}\n
\n ))}\n {users.length === 0 && No Result }\n \n )}\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport debounceAction from '../../../shared/debounce-action';\nimport searchUser from '../../../services/lwadmin/users/search-service';\n\nexport const USER_SEARCH_COHORT = {\n all: 'all',\n contributors: 'contributors',\n};\n\nexport class UserSearchControl extends React.Component {\n static propTypes = {\n onUserSelected: PropTypes.func,\n cohort: PropTypes.string,\n filter: PropTypes.func,\n searchPlaceholder: PropTypes.string,\n }\n\n static defaultProps = {\n onUserSelected: null,\n cohort: USER_SEARCH_COHORT.all,\n filter: () => true,\n searchPlaceholder: '',\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n search: '',\n users: [],\n selectedUser: null,\n hasDoneSearch: false,\n };\n\n this.updateSearch = debounceAction({\n getCurrentValue: () => this.state.search,\n actionPromise: () => searchUser(props.cohort, this.state.search),\n onBeforeAction: () => this.loading.start(),\n onNext: result => this.setState({\n users: result.data.users.filter(props.filter),\n hasDoneSearch: true,\n }),\n onError: e => defaultOnErrorHandler(e, 'Error performing search'),\n onAfterAction: () => this.loading.stop(),\n actionDelay: 300,\n });\n }\n\n componentDidMount() {}\n\n handleSearchChange(e) {\n const search = e.target.value;\n\n this.setState({ search }, () => this.updateSearch());\n }\n\n selectUser(e, user) {\n e && e.preventDefault && e.preventDefault();\n\n this.setState(\n { selectedUser: user },\n () => this.props.onUserSelected && this.props.onUserSelected(user),\n );\n }\n\n clear() {\n this.setState({\n search: '',\n users: [],\n selectedUser: null,\n hasDoneSearch: false,\n }, () => this.updateSearch.resetInitialValue());\n }\n\n render() {\n return (\n \n {feature} \n \n \n \n ON\n \n \n \n \n OFF\n \n \n \n \n );\n}\n\nFeatureControl.propTypes = {\n profileId: PropTypes.number.isRequired,\n feature: PropTypes.string.isRequired,\n profileFeature: PropTypes.shape({\n feature: PropTypes.string.isRequired,\n active: PropTypes.bool.isRequired,\n }),\n};\n\nFeatureControl.defaultProps = {\n profileFeature: null,\n};\n","import axios from 'axios';\nimport csrfToken from '../../../../shared/meta';\nimport axiosConfig from '../../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nconst headers = { 'X-CSRF-TOKEN': csrfToken() };\n\nconst base = '/api/v1/lwadmin/series_configuration';\n\nexport function useGetSeriesConfiguration() {\n return useAxios({\n cache: { ignoreCache: true },\n url: base,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function saveSeriesConfiguration(payload) {\n return axios.post(base, payload, { headers });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\n\nimport {\n Button,\n Container,\n SuccessMessage,\n} from '../../common/form';\n\nimport useSeriesConfigurationStore from './state-hook';\nimport {\n useGetSeriesConfiguration,\n saveSeriesConfiguration,\n} from '../../../../services/lwadmin/series/configuration/configuration-service';\n\nimport withNameInput from '../../common/input';\n\nconst rulesOfInvestingPodcastAppleRating = 'rulesOfInvestingPodcastAppleRating';\n\nconst RulesOfInvestingPodcastAppleRating = withNameInput(\n 'config',\n rulesOfInvestingPodcastAppleRating,\n useSeriesConfigurationStore,\n _.snakeCase(rulesOfInvestingPodcastAppleRating),\n);\n\nconst SContainer = styled(Container)`\n padding-bottom: 40px;\n\n > div {\n & > div {\n width: 50%;\n }\n & > label {\n width: 50%;\n }\n }\n`;\n\nexport default function Form() {\n const [, get] = useGetSeriesConfiguration();\n const [saving, setSaving] = React.useState(false);\n const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n\n const set = useSeriesConfigurationStore(state => state.set);\n const config = useSeriesConfigurationStore(state => state.config);\n\n useChangeAwareEffect(({ isMount }) => {\n isMount && get().then(({ data }) => set(state => {\n state.config[rulesOfInvestingPodcastAppleRating] = _.get(data, `config.${rulesOfInvestingPodcastAppleRating}`, null);\n }));\n }, {});\n\n const save = e => {\n e && e.preventDefault();\n\n setSaving(true);\n\n const payload = {\n config: [{\n name: _.snakeCase(rulesOfInvestingPodcastAppleRating),\n value: config[rulesOfInvestingPodcastAppleRating],\n }],\n };\n\n saveSeriesConfiguration(payload).then(() => {\n setSaving(false);\n setShowSuccessMessage(true);\n\n set(state => {\n state.errors = {};\n });\n }).catch(error => {\n setSaving(false);\n setShowSuccessMessage(false);\n\n set(state => {\n state.errors = _.get(error, 'response.data', {});\n });\n\n setSaving(false);\n });\n };\n\n return (\n \n {showSuccessMessage && (\n \n Configuration successfully saved\n \n )}\n \n );\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport AsyncSelect, { components } from 'react-select';\nimport postal from 'postal';\n\nimport Loading from '../../../../shared/loading';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport getAll from '../../../../services/mentionables/mentionables-service';\n\nconst GroupLabel = ({ label }) => \n
\n);\n\nOption.propTypes = {\n data: PropTypes.shape({\n type: PropTypes.string,\n name: PropTypes.string,\n company: PropTypes.string,\n isCompanyProfile: PropTypes.bool,\n }).isRequired,\n isFocused: PropTypes.bool.isRequired,\n innerRef: PropTypes.elementType,\n // eslint-disable-next-line react/forbid-prop-types\n innerProps: PropTypes.shape({}),\n};\n\nOption.defaultProps = {\n innerRef: null,\n innerProps: {},\n};\n\nconst Menu = props => (\n (this.$overlay = $(el))} onClick={() => this.dismiss()} />\n
\n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport Loading from '../../../../shared/loading';\nimport mutate from '../../../../shared/mutate';\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport EditSeriesModal from './edit-series-modal';\nimport { getAllSeries } from '../../../../services/lwadmin/series/series-service';\n\nexport default class SeriesTable extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n /* eslint-disable react/no-unused-state */\n allSeries: [],\n series: [],\n archivedFilter: true,\n /* eslint-ensable react/no-unused-state */\n };\n }\n\n componentDidMount() {\n this.refresh();\n }\n\n handleFilterOutArchivedSeriesChange(e) {\n const archivedFilter = !e.target.checked;\n\n this.setState(oldState => mutate(oldState, state => {\n state.archivedFilter = archivedFilter;\n state.series = this.filterSeries(state.allSeries, state);\n }));\n }\n\n refresh() {\n this.loading.start();\n getAllSeries()\n .then(result => this.setState(oldState => mutate(oldState, state => {\n state.allSeries = _.map(result.data.series, s => _.pick(s, [\n 'id', 'title', 'slug', 'description', 'archived',\n ]));\n state.series = this.filterSeries(state.allSeries, state);\n })))\n .catch(e => defaultOnErrorHandler(e, 'Error loading series'))\n .finally(() => this.loading.stop());\n }\n\n editSeries(e, series) {\n e && e.preventDefault && e.preventDefault();\n\n this.editSeriesModal.present(series.id);\n }\n\n // eslint-disable-next-line class-methods-use-this\n filterSeries(series, state) {\n let filteredSeries = _(series);\n filteredSeries = filteredSeries.filter(x => !state.archivedFilter || !x.archived);\n return filteredSeries.value();\n }\n\n render() {\n return (\n (this.$modal = $(el))}>\n \n \n \n (this.loading = c)}>\n \n \n
\n \n {`Contact from ${contact.name} - ${contact.sent_at ? contact.sent_at.format('LLLL') : 'Not sent'}`}\n
\n\n {contact.wire && (\n \n {`You have received a contact/lead from ${contact.wire.profile.name}'s wire `}\n \n {`\"${contact.wire.title}\"`}\n \n .\n
\n )}\n {contact.profile && (\n \n {'You have received a contact/lead from '}\n \n {`${contact.profile.name}`}\n \n {' page.'}\n
\n )}\n {contact.fund && (\n \n {'You have received a contact/lead from '}\n \n {`${contact.fund.name}`}\n \n {' page.'}\n
\n )}\n \n Name:\n {` ${contact.name}`}\n
\n \n Email:\n {`${contact.email}`}\n
\n \n Phone number:\n {`${contact.phone}`}\n
\n \n Investor type:\n {`${contact.investor_type}`}\n
\n Enquiring about:
\n - \n {contact.enquiring_about.map(topic =>
- {topic} )}\n
Message:
\n{contact.message_to_contributor}
\n \n \nSeries
\n\n \n
\n\n (this.loading = el)}>\n \n \n
\n \n (this.editSeriesModal = el)}\n seriesDidSave={() => this.refresh()}\n />\n
\n | Title | \nSlug | \nDescription | \nVisible | \n\n |
|---|---|---|---|---|
| {series.title} | \n{series.slug} | \n{series.description} | \n{series.archived ? 'No' : 'Yes'} | \n\n this.editSeries(e, series)}>Edit\n | \n
'\n + '
';\n const { captionPlaceholder } = window.mediumInsert.options.addons.images;\n let figcaption = figure.find('figcaption').get(0);\n\n if (!figcaption) {\n figure.append('';\n wrapper.insertAdjacentElement('afterend', newline);\n MediumEditor.selection.moveCursor(document, newline);\n }\n\n // eslint-disable-next-line class-methods-use-this\n removeUnnecessaryElements() {\n const body = document.querySelector('section.wire-body.full-wire');\n const tobeRemovedSelectors = [\n '.wire-editor-body > p:empty',\n '.wire-editor-body > h2:empty',\n '.wire-editor-body > h3:empty',\n '.wire-editor-body > div:empty',\n 'div.medium-editor-table-wrapper > :not(table)',\n ];\n body.querySelectorAll(tobeRemovedSelectors.join(', ')).forEach(element => element.remove());\n }\n\n // eslint-disable-next-line class-methods-use-this\n detectCannotDeleteLines() {\n const body = document.querySelector('section.wire-body.full-wire');\n\n body.querySelectorAll('.medium-insert-images, .medium-editor-table-wrapper').forEach(element => {\n const next = element.nextElementSibling;\n if (next) {\n const isAnImageOrTable = next.classList.contains('medium-insert-images') || next.classList.contains('medium-editor-table-wrapper');\n const isBlank = next.innerHTML.trim() === '' || next.innerHTML.trim() === '
';\n\n if (isAnImageOrTable) {\n element.insertAdjacentHTML('afterend', '
') {\n event.preventDefault();\n event.stopPropagation();\n if (previousSibling.classList.contains('medium-insert-images')) {\n currentLine.remove();\n this.serializeAndSaveBody();\n }\n } else {\n const caret = MediumEditor.selection.getCaretOffsets(currentLine).left;\n if (caret === 0 && previousSibling && (previousSibling.classList.contains('embedded-video') || previousSibling.getElementsByClassName('embedded-video').length > 0)) {\n previousSibling.remove();\n event.preventDefault();\n event.stopPropagation();\n this.serializeAndSaveBody();\n }\n }\n }\n\n isTheFirstCharacterOrPrecededByWhitespaceOrBracket() {\n const element = this.editor.getSelectedParentElement();\n const caret = MediumEditor.selection.getCaretOffsets(element).left;\n\n if (caret === 1) {\n return true;\n }\n\n const previousChar = $(element).text().charAt(caret - 2);\n\n return previousChar.trim().length === 0 || previousChar === '(';\n }\n\n keepStatusOfTheCurrentEditingElement() {\n const element = this.editor.getSelectedParentElement();\n this.currentCaretPosition = MediumEditor.selection.getCaretOffsets(element).left;\n this.currentEditingElement = $(element);\n }\n\n setupNewMentionElement() {\n const children = this.currentEditingElement.contents().toArray();\n let textLength = 0;\n\n this.newMentionElement = $('@');\n this.newSpaceElement = $(' ');\n this.currentEditingElement.empty();\n\n _(children).each(child => {\n const content = child.textContent;\n const len = content.length;\n\n if (textLength < this.currentCaretPosition && textLength + len >= this.currentCaretPosition) {\n const before = content.substring(0, this.currentCaretPosition - textLength - 1);\n const after = content.substring(this.currentCaretPosition - textLength, len);\n\n this.currentEditingElement\n .append(before)\n .append(this.newMentionElement)\n .append(this.newSpaceElement)\n .append(after);\n } else {\n this.currentEditingElement.append(child);\n }\n\n textLength += len;\n });\n\n const selection = this.editor.selectElement(this.newMentionElement.get(0));\n if (selection) {\n MediumEditor.selection.clearSelection(document);\n }\n }\n\n handleShowMentionables() {\n const newPosition = window.getSelection().getRangeAt(0).getBoundingClientRect();\n this.highlightedText = window.getSelection().toString();\n this.currentEditingElement = $(this.editor.getSelectedParentElement());\n this.showTheMentionables(newPosition);\n }\n\n showTheMentionables(newPosition) {\n if (newPosition) {\n $('#mentionables').css({\n top: newPosition.top - 22,\n left: newPosition.left,\n position: 'fixed',\n display: 'block',\n });\n\n document.querySelector('#mentionables').classList.add('highlighted-text');\n } else {\n const standfirstHeight = document.querySelector('.wire-standfirst-summary textarea').offsetHeight;\n const headerHeight = document.querySelector('.wire-editor header').offsetHeight;\n const warningHeight = document.querySelector('.impersona-warning-prompt')?.offsetHeight || 0;\n const isForFigcaption = this.currentEditingElement.prop('tagName') === 'FIGCAPTION' || this.currentEditingElement.parents('figcaption').length;\n const totalHeight = standfirstHeight + headerHeight + warningHeight;\n const newMentionElementPosition = this.newMentionElement.position();\n const newMentionElementOffset = this.newMentionElement.offset();\n const figcaptionTop = newMentionElementOffset.top - 222.5 - totalHeight;\n\n $('#mentionables').css({\n top: isForFigcaption ? figcaptionTop : newMentionElementPosition.top - 22,\n left: newMentionElementPosition.left + 18,\n position: 'absolute',\n display: 'block',\n });\n }\n\n this.setState({ showMentionables: true });\n this.mentionablesRef.setFocus();\n\n if (this.highlightedText) {\n this.mentionablesRef.onInputChange(this.highlightedText);\n }\n }\n\n handleMentionControlValueSelected(mentionable) {\n const nameToShow = mentionable.isCompanyProfile && mentionable.company\n ? mentionable.company : mentionable.name;\n this.mentionControlState.mentionableSelected = true;\n\n const mentionableHtml = `${nameToShow}`;\n\n if (this.highlightedText) {\n const currentLine = this.currentEditingElement.get(0);\n currentLine.innerHTML = currentLine.innerHTML.replace(\n this.highlightedText, mentionableHtml,\n );\n this.escapeMentionControl();\n } else {\n this.newMentionElement.replaceWith($(mentionableHtml));\n this.insertNewMentionElement();\n }\n }\n\n handleMentionControlOnBlur() {\n const { mentionableSelected, backspacePressed } = this.mentionControlState;\n if (mentionableSelected || backspacePressed) {\n return;\n }\n\n this.escapeMentionControl();\n }\n\n handleMentionControlOnKeydown(event) {\n const { key } = event;\n\n if (key === 'Escape') {\n this.escapeMentionControl();\n }\n }\n\n handleMentionControlOnBackspace() {\n this.mentionControlState.backspacePressed = true;\n this.setState({ showMentionables: false });\n this.newSpaceElement.remove();\n this.newMentionElement.empty();\n const parent = this.newMentionElement.get(0).parentNode;\n\n if (parent.classList.contains('medium-insert-active') || parent.textContent.trim().length === 0) {\n parent.innerHTML = '
';\n MediumEditor.selection.moveCursor(document, parent);\n } else {\n MediumEditor.selection.moveCursor(document, this.newMentionElement.get(0));\n this.newMentionElement.remove();\n }\n\n this.initMentionControlState();\n this.serializeAndSaveBody();\n }\n\n insertNewMentionElement() {\n this.setState({ showMentionables: false });\n MediumEditor.selection.moveCursor(document, this.newSpaceElement.get(0), 1);\n this.serializeAndSaveBody();\n }\n\n escapeMentionControl() {\n this.initMentionControlState();\n this.setState({ showMentionables: false });\n this.removeHighlightedText();\n if (this.newMentionElement && this.newSpaceElement) {\n this.newSpaceElement.remove();\n MediumEditor.selection.moveCursor(document, this.newMentionElement.get(0), 1);\n }\n this.serializeAndSaveBody();\n }\n\n removeHighlightedText() {\n if (this.highlightedText) {\n delete this.highlightedText;\n this.mentionablesRef.onInputChange('');\n document.querySelector('#mentionables').classList.remove('highlighted-text');\n }\n }\n /* eslint-enable react/sort-comp */\n\n render() {\n return (\n
\n
\n (this.mentionablesRef = el)}\n />\n
\n \n
\n )\n }\n \n
\n ';\n newline.classList.add('medium-insert-active');\n dragoverLine.classList.remove('medium-insert-active', 'medium-editor-dragover');\n dragoverLine.insertAdjacentElement('afterend', newline);\n MediumEditor.selection.moveCursor(document, newline);\n newline.click();\n },\n\n // The original code https://github.com/linkesch/medium-editor-insert-plugin/blob/master/src/js/images.js#L197\n triggerMediumInsertUploadFile(files) {\n const that = window.mediumInsertImages;\n const $file = $('');\n\n const fileUploadOptions = {\n dataType: 'json',\n add(e, data) {\n $.proxy(that, 'uploadAdd', e, data)();\n },\n done(e, data) {\n $.proxy(that, 'uploadDone', e, data)();\n },\n };\n\n if (new XMLHttpRequest().upload) {\n fileUploadOptions.progress = function (e, data) {\n $.proxy(that, 'uploadProgress', e, data)();\n };\n\n fileUploadOptions.progressall = function (e, data) {\n $.proxy(that, 'uploadProgressall', e, data)();\n };\n }\n\n $file.fileupload($.extend(true, {}, that.options.fileUploadOptions, fileUploadOptions));\n $file.prop('files', files);\n $file.get(0).dispatchEvent(new Event('change'));\n },\n\n insertImage(files) {\n const dragoverLine = this.element.querySelector('.medium-editor-dragover');\n\n if (!dragoverLine) {\n return;\n }\n\n this.insertNewLine(dragoverLine);\n this.triggerMediumInsertUploadFile(files);\n },\n\n addDragingClass() {\n this.element.classList.add('medium-editor-draging');\n },\n\n removeDragingClass() {\n this.element.classList.remove('medium-editor-draging');\n },\n\n clearClassNames(element) {\n const editable = MediumEditor.util.getContainerEditorElement(element);\n const existing = Array.prototype.slice.call(editable.parentElement.querySelectorAll('.medium-editor-dragover'));\n\n existing.forEach(el => {\n el.classList.remove('medium-editor-dragover');\n });\n },\n});\n\nexport default DragDropExtension;\n","// This is a workaround for an known issue integrating\n// medium-editor-insert-plugin with medium editor.\n// Do not use this for any other purpose.\n// https://github.com/orthes/medium-editor-insert-plugin/issues/408\nimport MediumEditor from 'medium-editor';\nimport _ from 'lodash';\n\nconst BackspaceWorkaroundExtension = MediumEditor.Extension.extend({\n name: 'backspace-workaround',\n\n init() {\n MediumEditor.Extension.prototype.init.call(this);\n this.subscribe('editableKeyup', this.handleBackspaceUp.bind(this));\n },\n\n handleBackspaceUp(event) {\n if (event.key === 'Backspace') {\n const value = _.get(_.first(_.values(this.base.serialize())), 'value');\n if (!value) {\n this.base.setContent('
\n { this.category() && ({ this.category() }) }\n { this.category() && this.state.isSponsored && (•) }\n { this.state.isSponsored && (sponsored) }\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport MediumEditor from 'medium-editor';\n\nimport ErrorBoundary from '../../../../shared/error-boundary';\nimport Loading from '../../../../shared/loading';\nimport defaultOnErrorHandler from '../../../../shared/default-on-error-handler';\nimport debounceAction from '../../../../shared/debounce-action';\nimport { updateTitle } from '../../../../services/wire/edit-services';\nimport Validator from '../../../../shared/validator';\nimport { editorValidate } from '../channel-editor-postal';\n\nexport default class Title extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n value: PropTypes.string.isRequired,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n titleRequired: () => {\n const title = this.editor && this.editor.getContent();\n return title && title.trim().length;\n },\n });\n this.state = {\n title: this.props.value || '',\n initialTitle: this.props.value || '',\n validations: this.validator.getValidations(),\n };\n\n editorValidate(this, 'title');\n editorValidate(this, 'title', { topic: 'validate.title' });\n\n this.saveTitle = debounceAction({\n getCurrentValue: () => this.state.title,\n actionPromise: () => updateTitle(this.props.wireId, this.state.title),\n onBeforeAction: () => this.loading.start(),\n onError: e => defaultOnErrorHandler(e, 'Error saving title'),\n onAfterAction: () => this.loading.stop(),\n wait: 2000,\n });\n this.setNextFocusOnEnter = this.setNextFocusOnEnter.bind(this);\n }\n\n componentDidMount() {\n this.editor = new MediumEditor('.wire-editor-title', {\n imageDragging: false,\n disableReturn: true,\n toolbar: false,\n placeholder: {\n text: 'Type your headline here',\n hideOnClick: false,\n },\n });\n this.editor.subscribe('editableInput', () => {\n this.setState(state => {\n state.title = this.editor.getContent();\n state.validations = this.validator.validateForm(state);\n return state;\n }, this.saveTitle);\n });\n\n this.titleInput.focus();\n }\n\n setNextFocusOnEnter(el) {\n this.editor.subscribe('editableKeydownEnter', () => $(el).focus());\n }\n\n render() {\n return (\n\n (this.titleInput = el)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: this.state.initialTitle,\n }}\n />\n
\n {!!this.state.validations.titleRequiredValid || Please create a headline for your wire.}\n \n
\n
\n );\n }\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { createGlobalStyle } from 'styled-components';\nimport { useMediaQuery } from 'react-responsive';\nimport useEditorStore from './state-hook';\nimport NavbarWidthContainer from '../../shared/navbar-width-container';\nimport breakpoints from '../../../shared/breakpoints';\n\nconst Style = createGlobalStyle`\n .impersona-warning-prompt {\n width: 100vw;\n height: 52px;\n background: white;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);\n z-index: 2500;\n ${props => (props.isLarge ? `\n position: sticky;\n top: 66px;\n\n &.new-nav {\n top: 105px;\n }\n ` : `\n position: relative;\n top: -79px;\n `)};\n\n > .nw-content-container {\n display: flex;\n align-items: center;\n font: ${props => props.theme.fontWeightRegular} 17px/110% ${props => props.theme.fontFamilyBody};\n\n .icon-lw-user-check {\n color: ${props => props.theme.primaryColor};\n margin-right: 16px;\n font-size: 20px;\n font-weight: ${props => props.theme.fontWeightDccc};\n }\n\n > span {\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 0;\n > strong {\n font-weight: ${props => props.theme.fontWeightDccc};\n margin: 0 6px;\n }\n }\n }\n }\n`;\n\nexport default function ImpersonaPrompt({ newNav }) {\n const wire = useEditorStore(state => state.wire);\n const currentProfile = useEditorStore(state => state.currentProfile);\n const isLarge = useMediaQuery({ minWidth: breakpoints.largeMin });\n\n const author = _.get(wire, 'profile');\n\n if (_.get(currentProfile, 'slug') === _.get(author, 'slug')) {\n return null;\n }\n\n const clsName = `impersona-warning-prompt ${newNav ? 'new-nav' : ''}`;\n\n return (\n <>\n \n \n
\n
\n \n
\n 140 ? '#B71E49' : '' }} className=\"inline-block w-16 text-secondary text-sm\">{`${this.state.summaryLength}/140`}\n {label}
;\nGroupLabel.propTypes = { label: PropTypes.string.isRequired };\n\nexport default class CategoriesControl extends React.Component {\n static propTypes = {\n wireId: PropTypes.number.isRequired,\n categoryId: PropTypes.number,\n }\n\n static defaultProps = {\n categoryId: null,\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.validator = new Validator({\n categoryRequired: state => !!state.assignedCategory,\n });\n\n this.state = {\n category: null,\n categories: [],\n assignedCategory: null,\n validations: this.validator.getValidations(),\n };\n\n editorValidate(this, 'category');\n editorValidate(this, 'category', { topic: 'validate.category' });\n\n this.assignCategory = this.assignCategory.bind(this);\n }\n\n componentDidMount() {\n this.loading.start();\n\n getAllCategories()\n .then(result => {\n const categories = result.data.categories.map(category => ({\n value: category.id,\n label: category.name,\n }));\n const { categoryId } = this.props;\n\n if (categoryId) {\n const category = categories.find(cat => cat.value === categoryId);\n this.setState({ categories, category, assignedCategory: category });\n } else {\n this.setState({ categories });\n }\n })\n .catch(error => defaultOnErrorHandler(error, 'Error getting categories'))\n .finally(() => this.loading.stop());\n }\n\n assignCategory(category) {\n this.loading.start();\n const currentCategory = this.state.category;\n const assignedCategory = category;\n\n this.setState({ category });\n\n assignWireCategory(this.props.wireId, category.value)\n .then(() => {\n this.setState(state => {\n state.assignedCategory = assignedCategory;\n state.validations = this.validator.validateForm(state);\n return state;\n });\n postal.publish({\n channel: 'editor',\n topic: 'category-changed',\n data: category ? category.label : null,\n });\n })\n .catch(error => {\n this.setState({ category: currentCategory });\n defaultOnErrorHandler(error, `Error assigning category: ${category.name}`);\n })\n .finally(() => this.loading.stop());\n }\n\n render() {\n const groupedOptions = [\n {\n label: 'select a category',\n options: this.state.categories,\n },\n ];\n\n return (\n \n {!!isEditor &&
\n \n {!!isEditor && (\n <>\n
\n \n );\n}\n\nEditorSidebar.propTypes = {\n showIsCommercial: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport withStyles from '@material-ui/core/styles/withStyles';\nimport useEditorStore from '../state-hook';\nimport useWireMediaTypesStore from './media-types-control_components/state-hook';\nimport { get } from '../../../../services/wire/media-type-service';\nimport Aside from './common/styles';\nimport SelectedItem from './media-types-control_components/selected-item';\nimport Option from './media-types-control_components/option';\nimport ArrowIcon from './media-types-control_components/arrow-icon';\n\nconst StyledAutocomplete = withStyles(() => ({\n inputRoot: {\n paddingTop: 16,\n borderBottom: '1px solid #D7DFE7',\n minHeight: 52,\n minWidth: 0,\n\n '& input.MuiAutocomplete-input': {\n padding: 0,\n minWidth: 0,\n },\n\n '&[class*=\"MuiInput-root\"]': {\n padding: 0,\n },\n\n '&.MuiInput-underline': {\n '&:before, &:after, &.Mui-disabled:before, &:hover:not(.Mui-disabled):before': {\n borderBottom: 'unset',\n },\n },\n },\n endAdornment: {\n top: 'calc(50% - 14px)',\n },\n popper: {\n zIndex: 1,\n },\n paper: {\n border: '1px solid #D7DFE7',\n boxSizing: 'border-box',\n borderRadius: 6,\n boxShadow: '0px 12px 12px rgba(50, 50, 71, 0.08), 0px 16px 24px rgba(50, 50, 71, 0.08)',\n marginTop: -4,\n padding: '16px 16px 16px 8px',\n },\n listbox: {\n padding: 8,\n },\n option: {\n borderRadius: 6,\n padding: 0,\n height: 48,\n\n '&:active, &[data-focus=\"true\"], &[aria-selected=\"true\"]': {\n backgroundColor: 'transparent',\n },\n },\n}))(Autocomplete);\n\nexport default function MediaTypesControl({ wireId }) {\n const mediaTypes = useEditorStore(state => state.mediaTypes);\n const set = useWireMediaTypesStore(state => state.set);\n const wireMediaTypes = useWireMediaTypesStore(state => state.wireMediaTypes);\n const wireMediaTypeIds = wireMediaTypes.map(wmt => wmt.id);\n\n React.useEffect(() => {\n get(wireId).then(response => set(state => {\n state.wireMediaTypes = response.data.mediaTypes;\n }));\n }, [wireId, set]);\n\n return (\n \n );\n}\n\nMediaTypesControl.propTypes = { wireId: PropTypes.number.isRequired };\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport DeleteIcon from '@material-ui/icons/Cancel';\nimport { remove } from '../../../../../services/wire/media-type-service';\nimport useWireMediaTypesStore from './state-hook';\n\nconst CustomChip = withStyles(() => ({\n root: {\n height: 24,\n marginRight: 8,\n marginBottom: 4,\n color: 'white',\n backgroundColor: '#8EA3B5',\n fontFamily: 'Texta,Arial,Helvetica,sans-serif',\n fontSize: 14,\n fontWeight: 700,\n lineHeight: '100%',\n textTransform: 'uppercase',\n\n '& span.MuiChip-deleteIcon:hover > svg': {\n fill: 'white',\n },\n },\n label: {\n paddingLeft: 8,\n paddingRight: 8,\n },\n deleteIcon: {\n display: 'flex',\n alignItems: 'center',\n height: 18,\n width: 18,\n marginLeft: 0,\n marginRight: 4,\n },\n}))(Chip);\n\nconst CustomDeleteIcon = withStyles(() => ({\n root: {\n color: '#BBCBD8',\n height: 18,\n width: 18,\n },\n}))(DeleteIcon);\n\nexport default function SelectedItem({\n wireId, itemId, label, allowDelete,\n}) {\n const set = useWireMediaTypesStore(state => state.set);\n const wireMediaTypes = useWireMediaTypesStore(state => state.wireMediaTypes);\n\n const onDelete = () => {\n remove(wireId, itemId).then(() => set(state => {\n state.wireMediaTypes = _.reject(wireMediaTypes, { id: itemId });\n }));\n };\n\n const onMouseDown = e => {\n e && e.stopPropagation();\n };\n\n if (!allowDelete) return \n Tip:\n An image will increase the views your wire gets on Livewire\n
\n\n If this contributor is correct click publish wire below,\n or you can change the contributor.\n
\n\n {showCompanyProfile ? organization : name}\n {!showCompanyProfile\n && (\n <>\n {position}\n {organization}\n \n )}\n
\n \n Including a disclaimer on your wires is not required, however we do recommend\n that you include one or check with your compliance team as to whether a\n disclaimer is required. If you hold an AFSL, we also recommend you include\n this in your disclaimer section.\n
\n\n Thank you for contributing to Livewire. Your wire has been published to the latest feed.\n
\nDrive more traffic to your wires by sharing to your other channels.
\n\n \n \n \n {_.map(socialMedia, _.toLower).map(d => (\n clickToShare({ wireId: this.state.wireId, source: d, medium: 'publisher-prompt' })}\n >\n \n \n ))}\n
\n \n \n \n
\n \n \n Provide feedback\n
\n Congratulations, your wire has been scheduled for
\n{this.state.timeAndDate}
\nWe'll send you an email once your wire has successfully published.
\n\n \n Provide feedback\n
\n Once your wire has been published, don't forget to share it across your other channels to help drive more traffic to your wire.
\n quick share links\n \n${matchedCompanyName}
\n ${suggestionItem.innerHTML}
\n `;\n\n suggestionItem.innerHTML = newHtml;\n suggestionItem.classList.add('grid', 'gap-1');\n });\n }\n\n filterItem(suggestion, originalQuery, queryLowerCase) {\n this.queryLowerCase = queryLowerCase;\n const isMatched = suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;\n return isMatched || suggestion.data.companyName.toLowerCase().indexOf(queryLowerCase) !== -1;\n }\n\n addStockCode(evt) {\n const { code, slug } = evt.data;\n // skip invalid code\n if (!_.find(this.stockCodes, { code })) {\n this.$newInput.val('').focus();\n return;\n }\n\n // skip existing code\n if (_.find(this.state.stockCodes, sc => sc.code === code)) {\n this.$newInput.val('').focus();\n return;\n }\n\n this.loading.start();\n add(this.props.wireId, slug)\n .then(result => this.setState(state => update(state, {\n stockCodes: { $push: [result.data] },\n })))\n .catch(e => defaultOnErrorHandler(e, 'Error adding stock code'))\n .finally(() => this.loading.stop());\n\n this.$newInput.val('').focus();\n }\n\n removeStockCode(evt, d) {\n evt && evt.preventDefault && evt.preventDefault();\n // Remove phantom tooltip elements\n $('.tooltip[role=\"tooltip\"]').remove();\n\n this.loading.start();\n remove(this.props.wireId, d.slug)\n .then(() => this.setState(state => update(state, {\n stockCodes: stockCodes => stockCodes.filter(e => e.slug !== d.slug),\n })))\n .catch(e => defaultOnErrorHandler(e, 'Error removing stock code'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import axios from 'axios';\n\nexport default function searchUser(cohort, q) {\n return axios.get('/api/v1/lwadmin/users/_search', { params: { cohort, q } });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from 'react-select';\nimport { selectorProps } from '../common/form';\nimport getAllEditors from '../../../services/lwadmin/profile/profile-search-service';\n\nconst mapper = ({ id, name }) => ({ label: name, value: id });\n\nexport default function AccountManagerControl({ accountManagerId, onSelected }) {\n const [editors, setEditors] = React.useState([]);\n const v = _.find(editors, { value: accountManagerId });\n\n React.useEffect(() => {\n getAllEditors().then(res => {\n const list = _.get(res, 'data.editors', []);\n setEditors(list.map(mapper));\n });\n }, []);\n\n const handleOnChange = ({ label, value }) => {\n onSelected({ id: value, name: label });\n };\n\n return (\n <>\n Account manager\n \n this.handleSearchChange(e)}\n onBlur={() => this.updateSearch}\n placeholder={this.props.searchPlaceholder || ''}\n />\n
\n \n (this.loading = c)} variant=\"small\">\n {this.state.users.length > 0 && (\n \n
\n - \n {this.state.users.map(user => (\n
No results
}\n{label}
;\nGroupLabel.propTypes = { label: PropTypes.string.isRequired };\n\nconst Option = ({\n data, isFocused, innerRef, innerProps,\n}) => (\n {data.type}
\n {data.isCompanyProfile && data.company ? data.company : data.name}
\n {!data.isCompanyProfile && {data.company}
}\n \n {props.data.type === 'contributor' && (\n \n )}\n {props.data.type === 'company' && (\n \n\n )}\n {props.data.label}\n
\n Editing Advertising
\n \nCreating Advertising
\n \nAdvertisings
\nEditing Feature Announcement
\n \nCreating Feature Announcement
\n \nAnnouncements
\n\n (this.loading = c)}>\n \n \n
\n \n (this.editCategoryModal = c)}\n categoryDidSave={() => this.refresh()}\n />\n
\n | Description | \nAssigned wires | \n\n | |
|---|---|---|---|
| \n {category.name}\n | \n{category.description} | \n{category.stats.wires_count} | \n\n \n | \n
{{ wire: 'Assigned Wires', name: 'Category Name Changes' }[type]}
\n| Title | \nBy | \n|
|---|---|---|
| {d.updated_at.format('LLLL')} | \n{_.get(d, { wire: 'wire.title', name: 'new_name' }[type])} | \n{d.by_user} | \n
\n (this.loading = c)}>\n \n {['name', 'wire'].map(type => (\n this.setState({ [dirs[type]]: dir })}\n data={this.state.category[arrs[type]]}\n />\n ))}\n \n \n (this.editCategoryModal = c)}\n categoryDidSave={() => this.refresh()}\n />\n
\n {`Category \"${this.state.category.name}\"`}
\n\n Description:\n {` ${this.state.category.description}`}\n
\n Wires count:\n {` ${this.state.category.stats.wires_count}`}\n
\n
Companies
\nEditing Content Format Type
\n \nCreating Content Format Type
\n \nContent Format Types
\nEditing Fund
\n \nCreating Fund
\n \nFunds
\nManage Data Provider Fund Categories
\nEditing Banner
\n \nCreating Banner
\n \nBanners
\n\n (this.loading = c)}>\n \n \n
\n \n (this.editLivewireEventModal = c)}\n eventDidSave={() => this.refresh()}\n />\n
\n | Eventbrite ID | \nRollover EB ID | \nInclude Digital Pass | \nActions | \n|||
|---|---|---|---|---|---|---|
| \n {\n event.hidden\n ? (\n \n | \n {event.slug} | \n\n {`${event.starts_at_time} ${event.starts_at.format('LL')}`}\n | \n{event.eventbrite_id} | \n{event.rollover_eventbrite_id} | \n{event.include_digital_pass ? 'Yes' : 'No'} | \n\n
| \n
\n (this.loading = c)}>\n \n \n
\n \n
\n | Order number | \nName | \nTicket type | \nTools | \n|
|---|---|---|---|---|
| {order.order_number} | \n{order.name} | \n{order.email} | \n{order.ticket_type} | \n\n \n | \n
Navigation
\n| Tools | \n||||||
|---|---|---|---|---|---|---|
| {contact.created_at.format('LLLL')} | \n{contact.name} | \n{contact.email} | \n{contact.phone} | \n{contact.investor_type} | \n\n {!!contact.sent_at && contact.sent_at.format('LLLL')}\n {!contact.sent_at && 'Not sent'}\n | \n\n \n | \n
\n (this.loading = c)}>\n \n \n \n {this.renderContactsTable()}\n \n \n \n (this.editPartnershipModal = c)}\n partnershipDidSave={() => this.refresh()}\n />\n (this.viewContactModal = c)}\n contactWasSent={() => this.refresh()}\n />\n
\n \n Partnerships\n {' | '}\n \n {this.state.partnership.name}\n \n {' | Enquiries'}\n
\n\n {!this.state.partnership.active && (\nThis partnership has been deactivated
\n )}\n\n\n Partnership type:\n {` ${this.state.partnership.partnership_type}`}\n
\n \n \n {'Contacts are'}\n {\n this.state.partnership.send_automatically\n ? ' '\n : (\n
\n Contact:\n {' '}\n \n {this.state.partnership.contact_email}\n \n
| Sent enquiries | \n\n See all enquiries\n | \n||
|---|---|---|---|
| {wire.contributor.name} | \n{wire.title} | \n{`${wire.sent_contact_count}/${wire.sent_contact_count + wire.unsent_contact_count}`} | \n\n
| \n
\n (this.loading = c)}>\n \n \n \n {this.renderWiresTable()}\n \n \n \n (this.editPartnershipModal = c)}\n partnershipDidSave={() => this.refresh()}\n />\n
\n \n Partnerships\n {` | ${this.state.partnership.name}`}\n
\n {!this.state.partnership.active &&This partnership has been deactivated
}\n\n Partnership type:\n {` ${this.state.partnership.partnership_type}`}\n
\n \n {\n this.state.partnership.send_automatically\n ? Contacts are sent automatically\n : (\n \n {'Contacts are '}\n not\n {' sent automatically'}\n \n )\n }\n \n
\n Contact:\n {' '}\n {this.state.partnership.contact_email}\n
\n (this.loading = c)}>\n \n \n
\n \n (this.editPartnershipModal = c)}\n partnershipDidSave={() => this.refresh()}\n />\n
\n \n \n
\n| Partnership level | \nNo. Contacts | \n\n | |
|---|---|---|---|
| \n {\n p.active\n ? p.name\n : (\n \n | \n {p.partnership_type} | \n\n {`${p.sent_contact_count}/${p.total_contact_count}`}\n | \n\n
| \n
Series Configuration
\n \n\n \n {!!id && \n \n \n {!!id && \n \n
\n \n \n \n {keys.map(key => (\n
\n);\n\nWireStatTable.propTypes = {\n ...keys.reduce((r, key) => _.set(r, key, PropTypes.number.isRequired), {}),\n age_of_wire_in_days: PropTypes.number.isRequired,\n};\n\nconst Hint = ({ text }) => (\n {text}}\n >\n ?\n \n);\n\nHint.propTypes = { text: PropTypes.string.isRequired };\n\nconst GlobalStyle = createGlobalStyle`\n .trending-hint {\n color: white;\n font: 700 14px/120% \"Texta\", Arial, Helvetica, sans-serif;\n width: 200px;\n border-radius: 6px;\n background-color: rgb(33, 37, 41);\n padding: 8px 20px;\n box-shadow: 0 0 9px 5px rgba(53, 65, 76, 0.2);\n }\n`;\n\nexport default class TrendingTable extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.triggerTrendingRecalcForAllWires = this.triggerTrendingRecalcForAllWires.bind(this);\n this.refresh = this.refresh.bind(this);\n\n this.state = {\n wires: [],\n totalWireCount: 0,\n page: 1,\n totalPageCount: 1,\n };\n }\n\n componentDidMount() {\n postal.subscribe({\n channel: 'lwadmin.trending.commands',\n topic: 'trigger-trending-recalc-for-all-wires',\n callback: () => this.triggerTrendingRecalcForAllWires(),\n });\n\n this.refresh();\n }\n\n refresh() {\n const locationState = getLocationState();\n const page = (+locationState.p || this.state.page);\n\n this.loading.start();\n getPaginated(page)\n .then(result => this.setState({\n page,\n wires: result.data.wires,\n totalWireCount: result.data.total_wire_count,\n totalPageCount: result.data.total_page_count,\n }))\n .catch(e => defaultOnErrorHandler(e, 'Error loading trending feed'))\n .finally(() => this.loading.stop());\n }\n\n triggerTrendingRecalcForAllWires() {\n if (this.state.alreadyTriggeredTrendingRecalcForAllWires) {\n // eslint-disable-next-line no-alert\n alert(\"You've already triggered the recalc. Don't do it again! Be patient. Ceiling cat knows all.\");\n return;\n }\n\n this.setState({ alreadyTriggeredTrendingRecalcForAllWires: true });\n\n const wiresPerMinute = 100;\n const estimatedTime = this.state.totalWireCount / wiresPerMinute / 60;\n const message = `There are ${this.state.totalWireCount} wires in the system, which will take approximately ${estimatedTime.toFixed(0)} hours to complete at ${wiresPerMinute} wires per minute. Are you sure you want to trigger a full recalc?`;\n\n // eslint-disable-next-line no-alert\n if (!window.confirm(message)) return;\n\n recalcAllWires()\n .then(() => toastr.success('Trending score recalculation has been triggered for all wires'))\n .catch(e => defaultOnErrorHandler(e, 'Error triggering trending score recalculation'));\n }\n\n retrieveWireStatistics(event, wireId) {\n event && event.preventDefault && event.preventDefault();\n getWireStats(wireId)\n .then(result => this.alert.present('Statistics for wire', \n \n );\n }\n}\n","import _ from 'lodash';\nimport axios from 'axios';\n\nconst validTypes = ['users', 'wires', 'statistic-events'];\nexport default function triggerPush(type) {\n if (!_.includes(validTypes, type)) {\n return Promise.resolve();\n }\n\n return axios.post(`/api/v1/lwadmin/bigquery/_trigger_push_${_.snakeCase(type)}`);\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport toastr from 'toastr';\nimport { useChangeAwareEffect } from 'use-change-aware-effect';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport triggerPush from '../../../services/lwadmin/bigquery/big-query-service';\n\nconst items = {\n users: 'users',\n wires: 'wires',\n 'statistic-events': 'statistic-events',\n};\n\nexport default function BigqueryManagement() {\n const [triggered, setTriggered] = React.useState(_.mapValues(items, () => false));\n\n const triggerFunctions = _.mapValues(items, v => () => {\n const type = v.replace('-', ' ');\n const alertText = `You have already triggered pushing all ${type}. Don't do it again! Be patient. Ceiling cat knows all.`;\n const confirmText = `Are you sure you want to push all of the ${type} to BigQuery? It could take some time.`;\n if (triggered[v]) {\n // eslint-disable-next-line no-alert\n alert(alertText);\n return;\n }\n\n setTriggered({ ...triggered, [v]: true });\n\n // eslint-disable-next-line no-alert\n if (!window.confirm(confirmText)) return;\n\n triggerPush(v)\n .then(() => toastr.success(`Pushing all ${type} has been triggered`))\n .catch(e => {\n defaultOnErrorHandler(e, `Error triggering pushing all ${type}`);\n setTriggered({ ...triggered, [v]: false });\n });\n });\n\n const triggerFullPush = () => {\n _.each(items, v => triggerFunctions[v]());\n };\n\n useChangeAwareEffect(({ isMount }) => {\n if (!isMount) {\n return;\n }\n postal.subscribe({\n channel: 'lwadmin.bigquery.commands',\n topic: 'trigger-full-push',\n callback: triggerFullPush,\n });\n\n _.each(items, v => {\n postal.subscribe({\n channel: 'lwadmin.bigquery.commands',\n topic: `trigger-push-${v}`,\n callback: triggerFunctions[v],\n });\n });\n }, {});\n\n return (\n \n \n \n \n Team Members - Contributors \n Team Members - Partners \n Funds \n \n \n \n \n );\n}\n\nCompany.propTypes = {\n company: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n administratorEmail: PropTypes.string,\n websiteUrl: PropTypes.string,\n members: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n slug: PropTypes.string,\n name: PropTypes.string,\n position: PropTypes.string,\n userId: PropTypes.number,\n role: PropTypes.string,\n cta: PropTypes.shape({\n id: PropTypes.number,\n title: PropTypes.string,\n description: PropTypes.string,\n url: PropTypes.string,\n }),\n })),\n funds: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n published: PropTypes.bool,\n publicUrl: PropTypes.string,\n })),\n }).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\nimport Select from 'react-select';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport {\n Button,\n Container,\n FormField,\n Label,\n Row,\n SuccessMessage,\n selectorProps,\n} from '../common/form';\nimport commonProps from '../common/common-props';\nimport linkFunds from '../../../services/lwadmin/profile/profile-funds-service';\nimport Header from './common/header';\n\nexport default function ProfileFundsAdmin({ profile }) {\n const {\n id,\n funds,\n availableFunds,\n } = profile;\n\n const emptyFund = { label: 'None (eg. not link to any fund)', value: null };\n const firstFund = funds.length > 0 ? { label: funds[0].name, value: funds[0].id } : emptyFund;\n\n const [fund, setFund] = React.useState(firstFund);\n const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n\n const mappedFunds = availableFunds.length > 0 ? [\n emptyFund,\n ...availableFunds.map(f => ({ label: f.name, value: f.id })),\n ] : [];\n\n const handleFundChange = selectedFund => {\n setFund(selectedFund);\n setShowSuccessMessage(false);\n };\n\n const submit = e => {\n e && e.preventDefault();\n\n linkFunds(id, [fund.value]).then(() => {\n setShowSuccessMessage(true);\n });\n };\n\n return (\n \n \n \n {showSuccessMessage && (\n \n Fund successfully linked to this profile\n \n )}\n \n \n \n \n
\n \n \n \n \n );\n}\n\nProfileFundsAdmin.propTypes = {\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n slug: PropTypes.string,\n position: PropTypes.string,\n organization: PropTypes.string,\n funds: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n })),\n availableFunds: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n })),\n }).isRequired,\n};\n","import axios from 'axios';\n\nexport default function linkFunds(profileId, fundIds) {\n return axios.post(`/api/v1/lwadmin/profile/${profileId}/funds`, {\n fund_ids: fundIds,\n });\n}\n","import _ from 'lodash';\nimport axios from 'axios';\n\nconst url = '/api/v1/lwadmin/score_weightings';\n\nexport function get() {\n return axios.get(url, { cache: { ignoreCache: true } });\n}\n\nexport function update(sws) {\n return axios.post(url, {\n score_weightings: _.map(sws, x => ({\n id: x.id,\n multiplier: +x.multiplier,\n })),\n });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport postal from 'postal';\nimport toastr from 'toastr';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport Validator from '../../../shared/validator';\nimport { get, update } from '../../../services/lwadmin/score-weighting/score-weighting-service';\n\nexport default class ManageScoreWeightingsModal extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.save = this.save.bind(this);\n this.cancel = this.cancel.bind(this);\n this.handleMultiplierChange = this.handleMultiplierChange.bind(this);\n\n this.state = {\n scoreWeightings: [],\n validator: new Validator(),\n };\n }\n\n componentDidMount() {\n this.$overlay.on('click', () => this.dismiss());\n\n postal.subscribe({\n channel: 'lwadmin.trending.commands',\n topic: 'manage-score-weightings',\n callback: () => this.present(),\n });\n }\n\n handleMultiplierChange(event, weightingId) {\n const multiplier = event.target.value;\n\n this.setState(state => {\n const weighting = _.find(state.scoreWeightings, { id: weightingId });\n\n weighting.multiplier = multiplier;\n state.validator[`validateWeightingMultiplier${weightingId}`](state);\n\n return state;\n });\n }\n\n save(event) {\n event && event.preventDefault();\n\n this.setState(\n state => state.validator.validateForm(state),\n () => {\n if (!this.state.validator.formValid) return;\n\n this.loading.start();\n update(this.state.scoreWeightings)\n .then(() => {\n toastr.success('Score weightings have been updated. Trigger a recalc to effect the new weightings for all wires.');\n this.dismiss();\n })\n .catch(e => defaultOnErrorHandler(e, 'Error updating score weightings'))\n .finally(() => this.loading.stop());\n },\n );\n }\n\n cancel(event) {\n event && event.preventDefault();\n this.dismiss();\n }\n\n dismiss() {\n this.$overlay.fadeOut();\n this.$modal.fadeOut();\n }\n\n present() {\n this.$overlay.fadeIn();\n this.$modal.fadeIn();\n this.loading.start();\n\n get()\n .then(response => this.setState(state => {\n state.scoreWeightings = response.data.score_weightings;\n state.scoreWeightings.forEach(w => {\n state.validator.addRule(`weightingMultiplier${w.id}`, s => {\n const found = _.find(s.scoreWeightings, { id: w.id });\n return _.isNumber(+found.multiplier);\n });\n });\n return state;\n }))\n .catch(e => defaultOnErrorHandler(e, 'Error loading score weightings'))\n .finally(() => this.loading.stop());\n }\n\n render() {\n const getRowForWeighting = weighting => {\n const weightingMultiplierValid = this.state.validator[`weightingMultiplier${weighting.id}Valid`];\n\n return (\n \n {weighting.score_type} \n {weighting.source} \n \n this.handleMultiplierChange(e, weighting.id)} value={weighting.multiplier} />\n {weightingMultiplierValid || \n \n );\n };\n\n return (\n \n (this.$overlay = $(e))}\n className=\"modal-overlay manage-score-weightings-modal-overlay\"\n />\n (this.$modal = $(e))}\n className=\"modal modal-large manage-score-weightings-modal\"\n tabIndex=\"-1\"\n role=\"dialog\"\n >\n \n \n \n (this.loading = c)}>\n \n \n \n \n \n \n
\n \n );\n }\n}\n","import axios from 'axios';\n\nexport default function sendContact(partnershipId, data) {\n return axios.post(`/api/v1/partnership/${partnershipId}/_contact`, data);\n}\n","import axios from 'axios';\n\nconst url = (type, id) => `/api/v1/analytics/audience/${type}/partnership/${id}`;\n\nexport function getFollowers(\n partnershipId,\n contributorIds,\n daysAgo,\n cachedFollowersDataUrl,\n fromCache,\n) {\n const source = axios.CancelToken.source();\n\n let task;\n\n if (fromCache && cachedFollowersDataUrl) {\n task = axios.get(cachedFollowersDataUrl, {\n cancelToken: source.token,\n });\n } else {\n task = axios.get(url('followers', partnershipId), {\n params: {\n contributor_ids: contributorIds,\n days_ago: daysAgo,\n },\n cancelToken: source.token,\n });\n }\n\n return [task, source];\n}\n\nexport function getReaderEvents(\n partnershipId,\n contributorIds,\n daysAgo,\n cachedInvestorTypesDataUrl,\n fromCache,\n) {\n const source = axios.CancelToken.source();\n\n let task;\n\n if (fromCache && cachedInvestorTypesDataUrl) {\n task = axios.get(cachedInvestorTypesDataUrl, {\n cancelToken: source.token,\n });\n } else {\n task = axios.get(url('investor_types', partnershipId), {\n params: {\n contributor_ids: contributorIds,\n days_ago: daysAgo,\n },\n cancelToken: source.token,\n });\n }\n\n return [task, source];\n}\n\nexport function getContributorRanking(\n partnershipId,\n daysAgo,\n cachedContributorRankingDataUrl,\n fromCache,\n) {\n const source = axios.CancelToken.source();\n\n let task;\n\n if (daysAgo === 0 && fromCache && cachedContributorRankingDataUrl) {\n task = axios.get(cachedContributorRankingDataUrl, {\n cancelToken: source.token,\n });\n } else {\n task = axios.get(url('contributor_ranking', partnershipId), {\n params: { days_ago: daysAgo },\n cancelToken: source.token,\n });\n }\n\n return [task, source];\n}\n","import axios from './axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nconst url = '/api/v1/categories';\n\nexport function useGetRecentWiresByCategories() {\n return useAxios({\n url: `${url}/wires/recent`,\n method: 'GET',\n });\n}\n\nexport function useGetCategoryById(id) {\n const common = v => ({ url: `${url}/${v}` });\n const [state, q] = useAxios({ ...common(id), method: 'GET' }, { manual: true });\n const executeQuery = newId => q(common(newId));\n return [state, executeQuery];\n}\n\nexport function getAllCategories() {\n return axios.get(url);\n}\n","import moment from 'moment';\n\nexport default function relativeTime(timestamp, short) {\n const midday = moment().startOf('day').hour(12);\n const mom = moment(timestamp);\n let result = '';\n if (timestamp && timestamp.length && mom.isValid()) {\n result = Math.abs(mom.diff(midday, 'days'))\n ? mom.format(short ? 'D MMM YY' : 'Do MMM, YY')\n : mom.fromNow();\n }\n return result;\n}\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\n/**\n * {Props}\n * calloutTrigger:\n * the visual component/element that triggers the callout, wrapped by the\n * button with the click handler\n * children:\n * the toggleable callout\n * show:\n * boolean, indicates whether the callout should be shown,\n * size:\n * a set of sizes for the callout, which map to styles, if you want it to be\n * sized according to content, use 'auto'\n * offsetX:\n * horizontal axis offset, useful for more precise positioning,\n * offsetY:\n * vertical axis offset useful for more precise positioning,\n * indicatorPosition:\n * position of indicator triangle in relation to trigger\n * togglePresent:\n * callback to be fired on interaction with trigger, controls presentation of\n * callout\n * classModifier:\n * modifier to add a class for styling tweaks\n */\nexport default class Callout extends Component {\n static propTypes = {\n calloutTrigger: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.object,\n PropTypes.func,\n ]).isRequired,\n size: PropTypes.oneOf([\n 'auto',\n 'small',\n 'medium',\n 'large',\n ]),\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n indicatorPosition: PropTypes.oneOf([\n 'top-left',\n 'top-center',\n 'top-right',\n ]),\n togglePresent: PropTypes.func,\n classModifier: PropTypes.string,\n show: PropTypes.bool,\n children: PropTypes.node.isRequired,\n };\n\n static defaultProps = {\n size: null,\n indicatorPosition: null,\n togglePresent: () => null,\n offsetX: 0,\n offsetY: 0,\n classModifier: null,\n show: false,\n };\n\n getCalloutClasses() {\n return classNames(\n 'callout-inner', {\n '--auto': this.props.size === 'auto',\n '--small': this.props.size === 'small',\n '--medium': this.props.size === 'medium',\n '--large': this.props.size === 'large',\n '--indicator-top-left': this.props.indicatorPosition === 'top-left',\n '--indicator-top-center': this.props.indicatorPosition === 'top-center',\n '--indicator-top-right': this.props.indicatorPosition === 'top-right',\n },\n );\n }\n\n render() {\n return (\n (this.$overlay = $(el))} />\n
\n );\n }\n}\n","import axios from 'axios';\n\nconst base = '/api/v1/lwadmin/trending';\n\nexport function getPaginated(page) {\n return axios.get(`${base}`, {\n params: { page },\n cache: { ignoreCache: true },\n });\n}\n\nexport function recalcAllWires() {\n return axios.post(`${base}/_trigger_trending_recalc_for_all_wires`);\n}\n\nexport function getWireStats(wid) {\n return axios.get(`${base}/_get_wire_statistics`, {\n params: { id: wid },\n cache: { ignoreCache: true },\n });\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Popover from 'react-bootstrap/Popover';\nimport { createGlobalStyle } from 'styled-components';\nimport postal from 'postal';\nimport toastr from 'toastr';\nimport Loading from '../../../shared/loading';\nimport defaultOnErrorHandler from '../../../shared/default-on-error-handler';\nimport Pagination from '../../../shared/pagination';\nimport Alert from '../../../shared/alert';\nimport ErrorBoundary from '../../../shared/error-boundary';\nimport { getLocationState } from '../../../shared/location';\nimport { getPaginated, recalcAllWires, getWireStats } from '../../../services/lwadmin/trending/trending-service';\n\nconst keys = [\n 'number_of_wire_impressions', 'number_of_feed_impressions', 'number_of_likes',\n 'number_of_comments', 'number_of_shares', 'number_of_profile_link_clicks',\n 'number_of_external_link_clicks', 'number_of_pdf_link_clicks',\n];\nconst pfxLen = 'number_of_'.length;\n\nconst WireStatTable = props => (\n (this.$modal = $(el))}>\n \n \n \n \n {this.state.body}\n \n \n \n
\n {this.state.title}
\n| {_.capitalize(_.lowerCase(key.slice(pfxLen)))} | \n{props[key]} | \n
|---|---|
| Age | \n{Math.round(props.age_of_wire_in_days * 100) / 100} | \n
\n (this.loading = c)}>\n \n \n
\n \n (this.alert = c)} />\n
\n | ID | \nTitle | \nPublished at | \n\n Time engagement score (\n | \n \n Engagement score (\n | \n \n Trending score (\n | \n Actions | \n
|---|---|---|---|---|---|---|
| {wire.id} | \n{wire.title} | \n{new Date(wire.published_at).toLocaleString()} | \n{(+(wire.time_engagement_score)).toFixed(2)} | \n{(+(wire.engagement_score)).toFixed(2)} | \n{(+(wire.trending_score)).toFixed(2)} | \n\n \n | \n
\n Nothing much to see here. If you have any ideas let the product and development teams know!\n
\n );\n}\n","import axios from 'axios';\n\nexport function createContributorCTA(profileId, cta) {\n return axios.post(`/api/v1/lwadmin/profile/${profileId}/cta`, {\n authenticity_token: Livewire.formAuthenticityToken,\n cta,\n });\n}\n\nexport function updateContributorCTA(profileId, cta) {\n return axios.put(`/api/v1/lwadmin/profile/${profileId}/cta/${cta.id}`, {\n authenticity_token: Livewire.formAuthenticityToken,\n cta,\n });\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider } from 'styled-components';\n\nimport theme from '../../../../assets/stylesheets/_settings.global.scss';\nimport { createContributorCTA, updateContributorCTA } from '../../../services/lwadmin/profile/contributor-cta-service';\nimport { createCompanyCTA, updateCompanyCTA } from '../../../services/lwadmin/company/company-service';\nimport { Container, ContentContainer } from '../shared/styles';\nimport CompaniesContext, { reducer, defaultState } from '../companies/companies-components/context';\nimport EditCompanyModal from '../companies/companies-components/edit-company-modal';\nimport BrandCompanyModal from '../companies/companies-components/brand-company-modal';\nimport CTAModal from '../companies/companies-components/cta-modal';\nimport Action from './company-components/actions';\nimport { SectionTitle } from './company-components/styles';\nimport ContributorHeader from './company-components/contributor-header';\nimport Contributor from './company-components/contributor';\nimport FundHeader from './company-components/fund-header';\nimport Fund from './company-components/fund';\nimport PartnerHeader from './company-components/partner-header';\nimport Partner from './company-components/partner';\n\nexport default function Company({ company }) {\n const [state, dispatch] = React.useReducer(reducer, defaultState);\n\n const { name, members, funds } = company;\n\n return (\n{name}
\nThe multiplier must be numeric
}\nScore weightings
\n\n this.props.togglePresent()}\n >\n {this.props.calloutTrigger}\n \n {this.props.show && (\n
\n );\n }\n}\n","import React from 'react';\nimport axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport function useGetPrimaryImage(wireId) {\n const common = v => ({ url: `/api/v1/wire/${v}/primary_image` });\n const [state, q] = useAxios({ ...common(wireId), method: 'GET' }, { manual: true });\n const executeQuery = newId => q(common(newId));\n return [state, executeQuery];\n}\n\nexport function useAssignPrimaryImage(wireId, imageId) {\n const common = (wId, iId) => ({ url: `/api/v1/wire/${wId}/primary_image/${iId}` });\n const [state, q] = useAxios({ ...common(wireId, imageId), method: 'POST' }, { manual: true });\n const executeQuery = React.useCallback((wId, iId) => q(common(wId, iId)), [q]);\n return [state, executeQuery];\n}\n\n// This hook is always called with wireId memoized. No need to provide\n// a parameterized query function.\nexport function useRemovePrimaryImage(wireId) {\n return useAxios({\n url: `/api/v1/wire/${wireId}/primary_image`,\n method: 'DELETE',\n }, { manual: true });\n}\n","export default function lineLimiting(lineCount, textExtractor, textSetter) {\n return function limiter(ele) {\n const $ele = $(ele);\n const originalText = typeof textExtractor === 'function' ? textExtractor($ele) : $ele.text();\n const words = originalText.split(' ');\n while (words.length) {\n const nLine = $ele.height() / parseFloat($ele.css('line-height'));\n if (nLine <= lineCount) {\n return;\n }\n words.pop();\n const text = `${words.join(' ')}...`;\n if (typeof textSetter === 'function') {\n textSetter($ele, text);\n } else {\n $ele.text(text);\n }\n }\n };\n}\n","import axios from 'axios';\n\nconst ENDPOINT = '/api/v1/contributor';\n\nexport function followContributor(profileId, exp) {\n const data = exp ? { exp } : undefined;\n return axios.post(`${ENDPOINT}/${profileId}/_follow`, data);\n}\n\nexport function unfollowContributor(profileId) {\n return axios.post(`${ENDPOINT}/${profileId}/_unfollow`);\n}\n","import axios from 'axios';\n\nconst url = '/api/v1/notifications';\nexport function getPaginated(pageNumber, pageSize) {\n const params = {\n per_page: pageSize,\n ...(pageNumber ? { page: pageNumber } : {}),\n };\n return axios.get(url, { params });\n}\n\nexport function markRead(id) {\n return axios.post(`${url}/${id}/_mark_as_read`);\n}\n\nexport function markUnread(id) {\n return axios.post(`${url}/${id}/_mark_as_unread`);\n}\n\nexport function getUnreadCount() {\n return axios.get(`${url}/unread_count`);\n}\n\nexport function markAllRead() {\n return axios.post(`${url}/_mark_all_as_read`);\n}\n","import _ from 'lodash';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Loading from './loading';\n\nexport default class Pagination extends React.Component {\n static propTypes = {\n page: PropTypes.number.isRequired,\n totalPageCount: PropTypes.number.isRequired,\n pageUrl: PropTypes.string.isRequired,\n };\n\n get first() {\n const n = this.props.page >= 10 ? 3 : 10;\n return Math.min(this.props.totalPageCount, n);\n }\n\n get second() {\n const { page, totalPageCount } = this.props;\n return (page >= 10 && totalPageCount >= 12 && page <= totalPageCount - 9) ? 7 : 0;\n }\n\n get third() {\n const { page, totalPageCount } = this.props;\n let n;\n if (totalPageCount <= 12) {\n n = 0;\n } else {\n n = (page >= totalPageCount - 8) ? 10 : 3;\n }\n return n;\n }\n\n render() {\n const { page, totalPageCount, pageUrl } = this.props;\n const getPageLink = p => (\n \n {this.props.children}\n \n
\n )}\n \n \n ...\n {this.props.more}\n \n )}\n onTruncate={this.handleTruncate}\n >\n {this.props.children}\n \n {!truncated && expanded && (\n
\n );\n }\n}\n","import React from 'react';\nimport axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetQandasByFund(useCache = true) {\n const [state, q] = useAxios({\n cache: { ignoreCache: !useCache },\n url: '/api/v1/fund/-1/qandas',\n method: 'GET',\n }, { manual: true });\n const executeQuery = React.useCallback(id => q({ url: `/api/v1/fund/${id}/qandas` }), [q]);\n return [state, executeQuery];\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetAssetClasses(type, series, name) {\n return useAxios({\n url: '/api/v1/funds/asset_classes',\n method: 'GET',\n params: { type, series, name },\n }, { manual: true });\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useGetStockCodesFromWires(wires, limit) {\n const searchQueryId = window.Livewire?.request?.searchQuery?.id;\n\n return useAxios({\n cache: { ignoreCache: true },\n url: '/api/v1/stock_codes',\n method: 'GET',\n params: { wires, search_query_id: searchQueryId, top: limit },\n }, { manual: true });\n}\n\nexport function getWireStockCodes(wireId) {\n return axios.get(`/api/v1/wire/${wireId}/stock_codes`, { cache: { ignoreCache: true } });\n}\n","import axios from 'axios';\n\nexport default function getWireStatistics(wireId) {\n return axios.get(`/api/v1/wire/${wireId}/statistics`);\n}\n","const deferredYT = $.Deferred();\n\nwindow.onYouTubeIframeAPIReady = () => deferredYT.resolve(window.YT);\n\n$.getScript('https://www.youtube.com/iframe_api');\n\n// NOTE callback gets called with window.YT as the first argument\nexport default function getYouTubeApi(callback) {\n deferredYT.done(callback);\n}\n","/* eslint-disable no-underscore-dangle */\nwindow._wq = window._wq || [];\n\nexport default function getWistiaVideoHandle(id, callback) {\n window._wq.push({\n id,\n onReady: callback,\n });\n}\n/* eslint-enable no-underscore-dangle */\n","import axiosConfig from '../../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axiosConfig });\n\nexport default function useGetFundAssetClasses() {\n return useAxios({\n cache: { ignoreCache: true },\n url: '/api/v1/lwadmin/fund_asset_classes',\n method: 'GET',\n }, { manual: true });\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\n\nconfigure({ axios });\n\nexport default function useUpdateDisclaimer(wireId, newDisclaimer) {\n const common = (wId, disclaimer) => ({\n url: `/api/v1/wire/${wId}/edit/_update_disclaimer`,\n data: { disclaimer },\n });\n\n const [state, q] = useAxios({\n method: 'POST',\n ...common(wireId, newDisclaimer),\n }, { manual: true });\n\n const executeQuery = (wId, disclaimer) => q(common(wId, disclaimer));\n\n return [state, executeQuery];\n}\n","import toastr from 'toastr';\n\nfunction onCopySuccess() {\n toastr.success('Copied to clipboard');\n}\n\nfunction onCopyFailure() {\n toastr.error('Could not copy to clipboard');\n}\n\nfunction copyToClipboardFallback(textToCopy) {\n const textAreaDom = document.createElement('textarea');\n\n textAreaDom.value = textToCopy;\n\n document.body.appendChild(textAreaDom);\n\n textAreaDom.focus();\n textAreaDom.select();\n\n let success = true;\n try {\n success = document.execCommand('copy');\n } catch (_) {\n success = false;\n }\n\n document.body.removeChild(textAreaDom);\n\n if (success) onCopySuccess();\n else onCopyFailure();\n}\n\nexport default function copyToClipboard(textToCopy) {\n if (!navigator.clipboard) {\n copyToClipboardFallback(textToCopy);\n return;\n }\n\n navigator.clipboard\n .writeText(textToCopy)\n .then(\n () => onCopySuccess(),\n () => copyToClipboardFallback(textToCopy),\n );\n}\n","import axios from '../axios';\n// eslint-disable-next-line import/order\nimport useAxios, { configure } from 'axios-hooks';\nimport csrfToken from '../../shared/meta';\n\nconfigure({ axios });\n\nconst headers = {\n 'X-CSRF-TOKEN': csrfToken(),\n};\n\nexport default function useGetAllFeatureable(wireId) {\n return useAxios({\n cache: { ignoreCache: true },\n url: `/api/v1/wire/${wireId}/featureable`,\n method: 'GET',\n }, { manual: true });\n}\n\nexport function usePostFeatureableAssignments(wireId, payload) {\n return useAxios(\n {\n url: `/api/v1/wire/${wireId}/featureable`,\n method: 'POST',\n data: payload,\n headers,\n },\n { manual: true },\n );\n}\n","// Load all the channels within this directory and all subdirectories.\n// Channel files must be named *_channel.js.\n\nconst channels = require.context('.', true, /-channel\\.js$/);\nchannels.keys().forEach(channels);\n","function sendSubscriptionToServer(subscription) {\n if (window.Livewire.currentUser) {\n const subscriptionJSON = subscription.toJSON();\n\n fetch('/api/v1/user/set_vapid_attributes', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n vapid_endpoint: subscriptionJSON.endpoint,\n vapid_auth: subscriptionJSON.keys.auth,\n vapid_p256dh: subscriptionJSON.keys.p256dh,\n }),\n });\n }\n}\n\nfunction registerServiceWorker() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/service_worker.js', { scope: './' });\n\n navigator.serviceWorker.ready.then(registration => {\n if (window.Livewire.vapidPublicKey) {\n registration.pushManager.subscribe({\n userVisibleOnly: true,\n applicationServerKey: window.Livewire.vapidPublicKey,\n }).then(subscription => {\n sendSubscriptionToServer(subscription);\n });\n }\n });\n }\n}\n\nif ('Notification' in window) {\n if (Notification.permission === 'granted') {\n registerServiceWorker();\n } else if (Notification.permission !== 'denied') {\n Notification.requestPermission().then(permission => {\n if (permission === 'granted') {\n registerServiceWorker();\n }\n });\n }\n}\n","/*\nCSS Browser Selector v0.4.0 (Nov 02, 2010)\nRafael Lima (http://rafael.adm.br)\nhttp://rafael.adm.br/css_browser_selector\nLicense: http://creativecommons.org/licenses/by/2.5/\nContributors: http://rafael.adm.br/css_browser_selector#contributors\n*/\nfunction css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\\s(\\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3.')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\\/(\\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\\s|\\/)(\\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\\/(\\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);","import _ from 'lodash';\n\nconst toggleSelector = 'ul.accordion li [data-toggle=collapse]';\n\nfunction setAccordionMinHeights() {\n $(toggleSelector).each((i, element) => {\n const $toggle = $(element);\n const $li = $toggle.parents('li');\n const totalHeight = $toggle.height() + parseFloat($toggle.css('margin-top')) + parseFloat($toggle.css('margin-bottom'));\n\n $li.css('min-height', `${totalHeight}px`);\n });\n}\n\nfunction setUpAccordionToggles() {\n $(document).on('click', toggleSelector, function clickHandler() {\n const $toggle = $(this);\n const $toggleIndicator = $toggle.children('span');\n const $li = $toggle.parents('li');\n\n $li.toggleClass('collapsed');\n $toggleIndicator.toggleClass('fa-plus');\n $toggleIndicator.toggleClass('fa-minus');\n });\n}\n\nexport default function bootstrap() {\n setUpAccordionToggles();\n $(window).on('resize', _.throttle(() => setAccordionMinHeights(), 1000 / 60));\n setAccordionMinHeights();\n}\n","// NOTE this is already obsolete, this should be removed as soon as the profile\n// edit screen is replaced with the new profile editor hotness\n\nfunction limitBlurbLength() {\n const MAX_LENGTH = 250;\n const $blurbInput = $('#profile_blurb');\n\n if (!$blurbInput.length) return;\n\n const $counter = $('');\n\n $counter.insertAfter($blurbInput);\n\n function updateCounter() {\n const { length } = $blurbInput.val();\n const opacity = (length / MAX_LENGTH * 0.8) + 0.2;\n\n $counter\n .text(`${length}/${MAX_LENGTH}`)\n .css('opacity', opacity);\n }\n\n $blurbInput.on('input', () => {\n $blurbInput.val($blurbInput.val().substring(0, MAX_LENGTH));\n updateCounter();\n });\n\n updateCounter();\n}\n\nexport default function bootstrap() {\n limitBlurbLength();\n}\n","import _ from 'lodash';\nimport lineLimiting from './line-limiting';\n\nfunction maintainElementLineCount($el, lineCount) {\n const inner = () => lineLimiting(lineCount)($el);\n\n $(window).on('resize', _.throttle(() => inner(), 100));\n setTimeout(() => inner(), 100);\n}\n\n/*\nThis allows limiting the number of lines in a simple element containing plain\ntext using a data attribute (no code). For example:\n\n \n {' '}\n {this.props.less}\n
\n )}\n ...
\n*/\nexport default function bootstrap() {\n $('[data-line-limit]').each((i, el) => {\n const $el = $(el);\n const lineLimit = parseInt($el.data('line-limit'), 10);\n\n maintainElementLineCount($el, lineLimit);\n });\n}\n","import _ from 'lodash';\nimport lineLimiting from './line-limiting';\n\nfunction setUpScrolling() {\n const $wires = $('nav.editors-picks-navbar .wires');\n const $wiresInner = $('nav.editors-picks-navbar .wires .wires-inner');\n const $scrollLeftButton = $('#editorsPicksNavbarScrollLeft');\n const $scrollRightButton = $('#editorsPicksNavbarScrollRight');\n const $navbarH2 = $('nav.editors-picks-navbar .wires h2');\n const getWiresInnerWidth = () => _.sumBy($wiresInner.find('article'), a => {\n const $a = $(a);\n\n return $a.width() + parseFloat($a.css('margin-right'));\n }) + ($navbarH2.is(':hidden') ? 0 : $navbarH2.width()) + 40;\n\n $wiresInner.css({\n top: 0,\n width: getWiresInnerWidth(),\n });\n\n $(window).on('resize', _.throttle(() => $wiresInner.css({\n width: getWiresInnerWidth(),\n }), 100));\n\n function scrollBy(x) {\n $wires.animate({\n scrollLeft: _.clamp($wires[0].scrollLeft + x, 0, getWiresInnerWidth()),\n });\n }\n\n $scrollLeftButton.on('click', () => scrollBy(-240));\n $scrollRightButton.on('click', () => scrollBy(240));\n}\n\nfunction limitHeadersToTwoLines() {\n function inner() {\n $('nav.editors-picks-navbar article a').each((i, element) => {\n lineLimiting(\n 2,\n $ele => {\n const text = $ele.data('original-text') || $ele.text();\n $ele.data('original-text', text);\n return text;\n },\n )($(element));\n });\n }\n\n $(window).on('resize', _.throttle(() => inner(), 100));\n setTimeout(() => inner(), 100);\n}\n\nfunction showDropShadowOnScroll() {\n $(window).on('scroll', () => {\n const $editorsPickNavBar = $('nav.editors-picks-navbar');\n const contentGap = 30;\n\n if (window.pageYOffset < contentGap && !!$editorsPickNavBar.length) {\n const boxShadowOpacity = window.pageYOffset / contentGap / 4;\n\n $editorsPickNavBar.css({\n 'box-shadow': `0 2px 5px rgba(0,0,0,${boxShadowOpacity})`,\n });\n } else {\n $editorsPickNavBar.css({ 'background-color': '#fff' });\n }\n });\n}\n\nexport default function bootstrap() {\n $(() => {\n setUpScrolling();\n limitHeadersToTwoLines();\n showDropShadowOnScroll();\n });\n}\n","import postal from 'postal';\n\nexport default function bootstrap() {\n $(() => {\n // NOTE checkbox groups\n $(document).on('click', '.btn-group label.btn input[type=checkbox]', event => {\n const $target = $(event.currentTarget);\n\n if ($target.is(':checked')) {\n $target.parents('label.btn')\n .addClass('btn-secondary')\n .removeClass('btn-default');\n } else {\n $target.parents('label.btn')\n .removeClass('btn-secondary')\n .addClass('btn-default');\n }\n });\n\n // NOTE radio button groups\n $(document).on('click', '.btn-group label.btn input[type=radio]', event => {\n const $target = $(event.currentTarget);\n\n $target.parents('.btn-group').children('label.btn-secondary')\n .removeClass('btn-secondary')\n .addClass('btn-default');\n $target.parents('label.btn')\n .addClass('btn-secondary')\n .removeClass('btn-default');\n });\n\n // NOTE Add 'data-postal-channel' and 'data-postal-topic' tags to a clickable\n // element to get it to send a message via postal on click\n $(document).on('click', '[data-postal-channel]', event => {\n if (event && event.preventDefault) {\n event.preventDefault();\n }\n\n const $target = $(event.currentTarget);\n const channel = $target.data('postal-channel');\n const topic = $target.data('postal-topic');\n\n postal.publish({\n channel,\n topic,\n });\n\n return false;\n });\n });\n}\n","import _ from 'lodash';\nimport axios from 'axios';\nimport qs from 'querystring';\nimport postal from 'postal';\nimport 'jquery-appear-original';\nimport csrfToken from '../shared/meta';\nimport { recordStatisticsEvent } from '../services/statistics-service';\n\n// NOTE This can't use the $(document).on(event,selector,cb) trick because\n// viewables use jquery.appear, which doesn't support dynamic DOM elements\n// without being explicitly attached. feeds.js uses postal to trigger attaching\n// to new wires.\nfunction attachAppearEventToViewables(viewables) {\n const props = ['id', 'event', 'statisticable', 'page'];\n let timeout = null;\n let statisticsData = [];\n\n function deferBatchCreate() {\n window.clearTimeout(timeout);\n timeout = window.setTimeout(() => {\n const headers = {\n 'X-CSRF-Token': csrfToken(),\n 'Content-Type': 'application/x-www-form-urlencoded',\n };\n const copy = statisticsData;\n\n statisticsData = [];\n\n const body = {};\n _.each(copy, (d, i) => {\n _.each(props, p => {\n body[`statistics_data[${i}][${p}]`] = d[p];\n });\n if (d.clicked_url) {\n body[`statistics_data[${i}][clicked_url]`] = d.clicked_url;\n }\n });\n axios\n .post('/statistic_events/batch_create.json', qs.stringify(body), { headers })\n .catch(() => {\n _.each(copy, datum => {\n statisticsData.push(_.pick(datum, [...props, 'clicked_url']));\n });\n });\n }, 1000);\n }\n\n _.each(viewables, viewable => {\n $(viewable).appear().on('appear.viewable', function handler() {\n deferBatchCreate();\n const $this = $(this);\n const data = $this.data();\n\n statisticsData.push(_.pick(data, props));\n $this.off('appear.viewable');\n });\n });\n\n $.force_appear();\n}\n\nfunction attachLinkClickEventToClickables() {\n $(document).on(\n 'click',\n '[data-event-type=\"click\"]',\n function clickHandler() {\n const $clickable = $(this);\n const parentData = $clickable.parents('article.wire').data();\n\n recordStatisticsEvent({\n id: parentData.id,\n event: $clickable.data().event,\n statisticable: parentData.statisticable,\n clicked_url: $clickable.attr('href'),\n });\n },\n );\n}\n\n// NOTE This is the preferred method for attaching statisticable events to components.\n// All of the data for the event should be on the element, not requiring traversal\n// to a containing article (which doesn't exist for sidebar links for example).\n// Eg:\n// ...\n// The [data-statisticable-event-type] attribute is optional and default to 'link_click'\nfunction attachClickEvents() {\n document.querySelectorAll('[data-statisticable-event=\"click\"]').forEach(elem => {\n elem.addEventListener('click', event => {\n let { target } = event;\n\n while (!!target && target.dataset.statisticableEvent !== 'click') {\n target = target.parentElement;\n }\n\n const {\n dataset: {\n statisticableEventType,\n statisticableType,\n statisticableId,\n },\n } = target;\n\n recordStatisticsEvent({\n event: statisticableEventType || 'link_click',\n statisticable: statisticableType,\n id: statisticableId,\n clicked_url: target.getAttribute('href'),\n page: window.location.pathname,\n });\n });\n });\n}\n\nfunction attachWireBodyClickEvents() {\n $(document).on(\n 'click',\n 'section.wire-body.full-wire a',\n event => {\n const $target = $(event.target);\n const wireData = $target.parents('article.wire').data();\n // In the case of an invalid URL, we want this to break so that the recording\n // won't proceed.\n // Andd someone needs to fix a broken URL!\n const clickedUrl = new window.URL($target.attr('href'), window.location.origin);\n const isInternalUrl = _.get(clickedUrl, 'hostname') === window.location.hostname;\n\n recordStatisticsEvent({\n event: isInternalUrl ? 'internal_link_click' : 'external_link_click',\n statisticable: 'wire',\n id: wireData.id,\n clicked_url: _.get(clickedUrl, 'href'),\n });\n },\n );\n}\n\nfunction attachPdfMediaClickEvents() {\n $(document).on(\n 'click',\n 'article.wire .wire-media-carousel__pdf a',\n event => {\n const $target = $(event.target);\n const wireData = $target.parents('article.wire').data();\n const clickedUrl = $target.attr('href');\n\n recordStatisticsEvent({\n event: 'pdf_link_click',\n statisticable: 'wire',\n id: wireData.id,\n clicked_url: clickedUrl,\n });\n },\n );\n}\n\nexport default function bootstrap() {\n $(() => {\n attachAppearEventToViewables($('[data-event-type=\"view\"]'));\n attachLinkClickEventToClickables();\n attachClickEvents();\n attachWireBodyClickEvents();\n attachPdfMediaClickEvents();\n\n postal.subscribe({\n channel: 'commands.statistics',\n topic: 'attach-to-viewables',\n callback: data => attachAppearEventToViewables(data),\n });\n });\n}\n","import axios from 'axios';\nimport postal from 'postal';\nimport {\n recordSoundcloudPlayStartStatistic,\n recordSoundcloudPlayFinishedStatistic,\n} from '../services/statistics-service';\n\nexport default function bootstrap() {\n $(() => {\n const registerIFrame = iframe => {\n const widget = SC.Widget(iframe);\n const wireId = $(iframe).parents('article.wire').data().id;\n\n widget.bind(SC.Widget.Events.PLAY, () => {\n // Check to see if this media is restricted by Digital Pass\n if ($('.restricted-by-digital-pass').length) {\n widget.pause();\n return;\n }\n\n recordSoundcloudPlayStartStatistic(wireId);\n });\n widget.bind(SC.Widget.Events.FINISH, () => recordSoundcloudPlayFinishedStatistic(wireId));\n };\n\n function register($div) {\n const { soundcloudUrl: url } = $div.data();\n\n const params = {\n url,\n format: 'json',\n maxheight: 166,\n };\n\n axios.get('//soundcloud.com/oembed', { params, crossDomain: true }).then(response => {\n /* global SC */\n $div.html(response.data.html);\n\n const iframe = $div.find('iframe')[0];\n const widget = SC.Widget(iframe);\n const wireId = $div.parents('article.wire').data().id;\n\n widget.load(url, {\n visual: false,\n });\n\n widget.bind(SC.Widget.Events.PLAY, () => {\n // Check to see if this media is restricted by Digital Pass\n if ($('.restricted-by-digital-pass').length) {\n widget.pause();\n return;\n }\n\n recordSoundcloudPlayStartStatistic(wireId);\n });\n widget.bind(SC.Widget.Events.FINISH, () => recordSoundcloudPlayFinishedStatistic(wireId));\n });\n }\n\n $('[data-soundcloud-url]').each((index, div) => register($(div)));\n document.querySelectorAll(\"iframe[src*='/soundcloud.com/']\").forEach(iframe => registerIFrame(iframe));\n\n postal.subscribe({\n channel: 'commands.soundcloud',\n topic: 'register-soundcloud-embed',\n callback: data => register($(data.div)),\n });\n });\n}\n","// APIs docs: https://developers.podbean.com/apidoc/widget\nimport {\n recordPodbeanPlayStartStatistic,\n recordPodbeanPlayFinishedStatistic,\n} from '../services/statistics-service';\n\nexport default function bootstrap() {\n $(() => {\n function register(player) {\n // eslint-disable-next-line no-undef\n const widget = new PB(player);\n\n const wireId = $(player).parents('article.wire').data().id;\n\n widget.bind('PB.Widget.Events.PLAY', () => {\n recordPodbeanPlayStartStatistic(wireId);\n });\n\n widget.bind('PB.Widget.Events.FINISH', () => {\n recordPodbeanPlayFinishedStatistic(wireId);\n });\n }\n\n [\n 'iframe[src^=\"https://www.podbean.com/media/player/\"]',\n 'iframe[src^=\"https://www.podbean.com/player-v2\"]',\n ].forEach(selector => {\n $(`${selector}`).each((index, player) => register(player));\n });\n });\n}\n","import VimeoPlayer from '@vimeo/player';\n\nimport getYouTubeApi from '../shared/get-youtube-api';\nimport getWistiaVideoHandle from '../shared/get-wistia-video-handle';\n\nfunction restrictYoutubeMedia(iframe) {\n getYouTubeApi(YT => {\n const player = new YT.Player(iframe);\n\n player.addEventListener('onStateChange', () => player.stopVideo());\n });\n}\n\nfunction restrictVimeoMedia(iframe) {\n const player = new VimeoPlayer(iframe);\n\n player.unload();\n}\n\nfunction restrictWistiaMedia(iframe) {\n const $iframe = $(iframe);\n const videoId = $iframe.attr('id').match(/wistia_(.*)/)[1];\n\n getWistiaVideoHandle(videoId, handle => {\n handle.bind('play', () => handle.pause());\n });\n}\n\nexport default function bootstrap() {\n $(() => {\n // NOTE Soundcloud embeds are handled in `bootstrap-soundcloud-embeds.js`\n // because the iframe is created dynamically\n\n $('.restricted-by-digital-pass [data-event-type=\"youtube\"] iframe').each((index, iframe) => restrictYoutubeMedia(iframe));\n $('.restricted-by-digital-pass [data-event-type=\"vimeo\"] iframe').each((index, iframe) => restrictVimeoMedia(iframe));\n $('.restricted-by-digital-pass [data-event-type=\"wistia\"] iframe').each((index, iframe) => restrictWistiaMedia(iframe));\n });\n}\n","import _ from 'lodash';\nimport getScrollTop from '../get-scroll-top';\nimport breakpoints from '../breakpoints';\n\nexport default class VideoSwoosher {\n constructor($sidebarVideos) {\n this.$sidebarVideos = $sidebarVideos;\n this.videos = [];\n this.useIosScrollWorkaround = /webkit.*mobile/i.test(navigator.userAgent);\n\n $(window).on('scroll', _.throttle(\n () => {\n if (this.enabled) this.onScroll();\n setTimeout(() => this.enabled && this.onScroll(), 100);\n },\n 1000 / 60,\n {\n leading: true,\n trailing: true,\n },\n ));\n $(window).on('resize', _.throttle(\n () => {\n if (this.enabled) this.stickSidebarVideos();\n\n // Sometimes the offset seems to update after the last resize event,\n // making the left offset janky, so call this again in 100ms\n setTimeout(() => this.enabled && this.stickSidebarVideos(), 100);\n },\n 1000 / 60,\n {\n leading: true,\n trailing: true,\n },\n ));\n\n this.enable();\n }\n\n enable() {\n if (this.enabled) return;\n\n this.enabled = true;\n this.onScroll();\n }\n\n disable() {\n if (!this.enabled) return;\n\n this.videos\n .filter(x => x.swooshed)\n .forEach(x => this.swooshIn(x));\n this.enabled = false;\n }\n\n // video: SwooshableVideo\n register(video) {\n video.swoosher = this;\n this.videos.push(video);\n }\n\n onScroll() {\n this.videos.forEach(video => video.onScroll());\n this.stickSidebarVideos();\n }\n\n swooshSidebar() {\n this.swooshSidebarVideos();\n\n // calculate and animate the sidebar height\n const height = (() => {\n const swooshedVideos = this.videos.filter(video => video.swooshed);\n\n if (swooshedVideos.length === 0) return 0;\n\n const firstVideo = swooshedVideos[0];\n const lastVideo = swooshedVideos[swooshedVideos.length - 1];\n\n return lastVideo.swooshOutPosition.top\n - firstVideo.swooshOutPosition.top\n + lastVideo.swooshOutPosition.height\n + 12;\n })();\n\n this.$sidebarVideos.animate({ height });\n }\n\n optimizeSidebarVideoOffset() {\n const intercomIconDimension = 80;\n const vw = breakpoints.getViewportWidth();\n const clientRect = this.$sidebarVideos.get(0).getClientRects()[0];\n if (clientRect) {\n // If we have enough room on the right for intercom icon, we sit at the\n // bottom offset as intercom icon, otherwise, sit on top of intercom\n const bottomOffset = vw - clientRect.right >= intercomIconDimension ? 40 : 100;\n this.$sidebarVideos.css('bottom', `${bottomOffset}px`);\n }\n }\n\n setSidebarVideoPositions() {\n const swooshedVideos = this.videos.filter(video => video.swooshed);\n const offset = this.$sidebarVideos.offset();\n const scrollTop = getScrollTop();\n // NOTE iOS has a strange bug where during a scroll, this.$sidebarVideos.offset().top doesn't\n // update on each event, which makes the video stick to the content instead of the sidebar.\n // So, brute force the video div to stick to 122px from the top on iOS only. This is edge-casey\n // but better than it getting stuck :-(\n const initialTop = this.useIosScrollWorkaround\n ? 122\n : offset.top - scrollTop + 34;\n\n swooshedVideos.reduce((currentTop, video) => {\n video.swooshOutPosition.top = currentTop;\n video.swooshOutPosition.left = offset.left;\n\n return currentTop + video.swooshOutPosition.height + 12;\n }, initialTop);\n }\n\n swooshSidebarVideos() {\n this.setSidebarVideoPositions();\n\n this.videos\n .filter(video => video.swooshed)\n .forEach(video => {\n video.swooshing = true;\n video.$iframe.animate(\n video.swooshOutPosition,\n () => (video.swooshing = false),\n );\n });\n }\n\n stickSidebarVideos() {\n this.optimizeSidebarVideoOffset();\n this.setSidebarVideoPositions();\n this.videos\n .filter(video => video.swooshed && !video.swooshing)\n .forEach(video => video.$iframe.css(video.swooshOutPosition));\n }\n\n swooshIn(video) {\n video.swooshed = false;\n video.triggerSwooshInAnimation(400);\n this.swooshSidebar();\n }\n\n swooshOut(video) {\n video.swooshed = true;\n video.$iframe.css({\n position: 'fixed',\n top: video.originalPosition.top,\n left: video.originalPosition.left,\n });\n const width = this.$sidebarVideos.width();\n const vpos = video.originalPosition;\n video.swooshOutPosition = {\n width,\n height: parseFloat(vpos.height) * (width / parseFloat(vpos.width)),\n top: 0,\n left: 0,\n };\n this.swooshSidebar();\n }\n}\n","export default function getNavbarsHeight() {\n return [\n '.application-navbar', '.mobile-navbar',\n ]\n .reduce((aggregate, selector) => {\n const el = $(selector);\n const elHeight = el.is(':visible') ? el.height() : 0;\n\n return aggregate + elHeight;\n }, 0);\n}\n","import getScrollTop from '../get-scroll-top';\nimport getNavbarsHeight from '../get-navbars-height';\n\nconst SWOOSH_HEIGHT_THRESHOLD_RATIO = 2 / 3;\n\n// NOTE abstract, only instantiate subclasses\nexport default class SwooshableVideo {\n constructor(iframe) {\n this.iframe = iframe;\n this.$iframe = $(iframe);\n this.swooshed = false;\n this.iframeHeight = this.$iframe.height();\n this.iframeWidth = this.$iframe.width();\n this.$iframe.wrap('');\n this.$videoHolder = this.$iframe.parent();\n this.$videoParentSpan = this.$videoHolder.parent();\n this.swooshOutPosition = {};\n\n // Set the padding -bottom of the containing span, otherwise it covers\n // proceding content\n this.$videoHolder.parent().css('padding-bottom', this.iframeHeight);\n\n this.$videoHolder.css({\n display: 'relative',\n height: this.iframeHeight,\n width: this.iframeWidth,\n background: '#999',\n });\n\n this.$iframe.css({\n 'will-change': 'top, left, width, height',\n position: 'static',\n height: this.iframeHeight,\n width: this.iframeWidth,\n transform: 'translate3d(0px,0px,0px)',\n });\n\n this.originalPosition = {\n top: this.$iframe.offset().top - getScrollTop(),\n left: this.$iframe.offset().left,\n width: this.$iframe.css('width'),\n height: this.$iframe.css('height'),\n };\n this.lastScrollTop = getScrollTop();\n }\n\n onScroll() {\n const outsideThreshold = this.isVideoOutsideSwooshThreshold();\n const { playing } = this;\n const scrollTop = getScrollTop();\n const scrollTopDelta = this.lastScrollTop - scrollTop;\n\n this.lastScrollTop = scrollTop;\n\n this.originalPosition.top += scrollTopDelta;\n\n if (playing && !this.swooshed && outsideThreshold) {\n this.swoosher.swooshOut(this);\n } else if (this.swooshed && !outsideThreshold) {\n this.swoosher.swooshIn(this);\n }\n }\n\n isVideoOutsideSwooshThreshold() {\n const offset = this.$videoHolder.offset();\n const scrollTop = getScrollTop();\n\n if (!this.swooshed) {\n const top = offset.top - scrollTop + this.iframeHeight * (1 - SWOOSH_HEIGHT_THRESHOLD_RATIO);\n\n if (top < getNavbarsHeight()) return true;\n\n const bottom = offset.top - scrollTop + this.iframeHeight * SWOOSH_HEIGHT_THRESHOLD_RATIO;\n\n if (bottom > window.innerHeight) return true;\n } else {\n const top = offset.top - scrollTop + this.iframeHeight * (1 - SWOOSH_HEIGHT_THRESHOLD_RATIO);\n\n if (top < getNavbarsHeight()) return true;\n\n const bottom = offset.top - scrollTop + this.iframeHeight * SWOOSH_HEIGHT_THRESHOLD_RATIO;\n\n if (bottom > window.innerHeight) return true;\n }\n\n return false;\n }\n\n triggerSwooshInAnimation(duration) {\n // NOTE This does an initial animation of _duration_ ms to\n // this.originalPosition, constantly adjusting the end position during each\n // frame because the user is probably still scrolling (and\n // this.originalPosition will keep changing). Then it does a final 100ms\n // animation to this.originalPosition again because it's likely that there\n // is another position change in between the last frame and completion,\n // and this second animation minimises the jerk that occurs on the last\n // step - changing the frame's position to static, which locks it in place.\n\n this.swooshing = true;\n\n this.$iframe.animate(\n this.originalPosition,\n {\n duration,\n step: (now, tween) => {\n if (['top', 'right', 'bottom', 'left'].indexOf(tween.prop) === -1) return;\n\n tween.end = this.originalPosition[tween.prop];\n },\n complete: () => {\n this.$iframe.animate(\n this.originalPosition,\n {\n duration: 200,\n complete: () => {\n this.$iframe.css({\n position: 'static',\n });\n this.swooshing = false;\n },\n },\n );\n },\n },\n );\n }\n\n /* eslint-disable class-methods-use-this */\n get playing() {\n throw String('virtual');\n }\n /* eslint-enable class-methods-use-this */\n}\n","export default function isUserSignedIn() {\n return !!(document.querySelector('body').className.match(/\\buser-signed-in\\b/));\n}\n","import _ from 'lodash';\nimport Player from '@vimeo/player';\n\nimport SwooshableVideo from './swooshable-video';\nimport isUserSignedIn from '../is-user-signed-in';\nimport {\n recordVimeoPlayStartStatistic,\n recordVimeoPlayFinishedStatistic,\n} from '../../services/statistics-service';\n\nexport default class SwooshableVimeoVideo extends SwooshableVideo {\n constructor(iframe) {\n super(iframe);\n\n const wireId = $(iframe).parents('article.wire').data().id;\n\n this.isPlaying = false;\n\n const player = new Player(iframe);\n\n player.on('play', () => {\n if (!isUserSignedIn() && !_.startsWith(window.location.pathname, '/wires/')) {\n player.unload();\n window.location = '/sign_up';\n return;\n }\n\n this.isPlaying = true;\n recordVimeoPlayStartStatistic(wireId);\n });\n\n player.on('pause', () => (this.isPlaying = false));\n\n player.on('ended', () => {\n this.isPlaying = false;\n recordVimeoPlayFinishedStatistic(wireId);\n });\n }\n\n get playing() {\n return this.isPlaying;\n }\n}\n","import _ from 'lodash';\nimport SwooshableVideo from './swooshable-video';\nimport getYouTubeApi from '../get-youtube-api';\nimport {\n recordYoutubePlayStartStatistic,\n recordYoutubePlayFinishedStatistic,\n} from '../../services/statistics-service';\nimport isUserSignedIn from '../is-user-signed-in';\n\nconst YOUTUBE_PLAYER_STATE = {\n UNSTARTED: -1,\n ENDED: 0,\n PLAYING: 1,\n PAUSED: 2,\n BUFFERING: 3,\n VIDEO_CUED: 5,\n};\n\nexport default class SwooshableYouTubeVideo extends SwooshableVideo {\n constructor(iframe) {\n super(iframe);\n\n getYouTubeApi(YT => {\n this.player = new YT.Player(this.iframe);\n\n const wireId = $(`#${this.player.getIframe().id}`).parents('article.wire').data().id;\n\n // NOTE:\n // Also set up some behaviours around not being able to play when not\n // signed in and recording stats\n this.player.addEventListener('onStateChange', event => {\n if (event.data === YOUTUBE_PLAYER_STATE.PLAYING) {\n if (!isUserSignedIn() && !_.startsWith(window.location.pathname, '/wires/')) {\n this.player.stopVideo();\n window.location = '/sign_up';\n return;\n }\n\n recordYoutubePlayStartStatistic(wireId);\n } else if (event.data === YOUTUBE_PLAYER_STATE.ENDED) {\n recordYoutubePlayFinishedStatistic(wireId);\n }\n });\n });\n }\n\n get playing() {\n if (!this.player || !this.player.getPlayerState) return false;\n\n const state = this.player.getPlayerState();\n\n return state === YOUTUBE_PLAYER_STATE.PLAYING || state === YOUTUBE_PLAYER_STATE.BUFFERING;\n }\n}\n","import _ from 'lodash';\n\nimport SwooshableVideo from './swooshable-video';\nimport isUserSignedIn from '../is-user-signed-in';\nimport {\n recordWistiaPlayStartStatistic,\n recordWistiaPlayFinishedStatistic,\n} from '../../services/statistics-service';\nimport getWistiaVideoHandle from '../get-wistia-video-handle';\n\nexport default class SwooshableWistiaVideo extends SwooshableVideo {\n constructor(iframe) {\n super(iframe);\n\n const $iframe = $(iframe);\n const wireId = $iframe.parents('article.wire').data().id;\n\n this.isPlaying = false;\n\n const videoId = $iframe.attr('id').match(/wistia_(.*)/)[1];\n\n getWistiaVideoHandle(videoId, videoHandle => {\n videoHandle.bind('play', () => {\n if (!isUserSignedIn() && !_.startsWith(window.location.pathname, '/wires/')) {\n videoHandle.pause();\n window.location = '/sign_up';\n return;\n }\n\n this.isPlaying = true;\n recordWistiaPlayStartStatistic(wireId);\n });\n\n videoHandle.bind('pause', () => (this.isPlaying = false));\n videoHandle.bind('end', () => {\n this.isPlaying = false;\n recordWistiaPlayFinishedStatistic(wireId);\n });\n });\n }\n\n get playing() {\n return this.isPlaying;\n }\n}\n","import _ from 'lodash';\nimport postal from 'postal';\n\nimport lineLimiting from './line-limiting';\nimport breakpoints from '../shared/breakpoints';\nimport VideoSwoosher from '../shared/video-swoosher/video-swoosher';\nimport SwooshableVimeoVideo from '../shared/video-swoosher/swooshable-vimeo-video';\nimport SwooshableYouTubeVideo from '../shared/video-swoosher/swooshable-youtube-video';\nimport SwooshableWistiaVideo from '../shared/video-swoosher/swooshable-wistia-video';\n\n// NOTE this only runs once - if the sidebar is resized horizontally the text\n// doesn't update. It could, but that is a future refinement (have to find a\n// way around having to constantly rerun the loop each time the resize event\n// is triggered).\nfunction limitTrendingWireHeadersToTwoLines() {\n $('.sidebar-trending ul li h3').each((i, element) => {\n lineLimiting(\n 2,\n $ele => $ele.find('a').text(),\n ($ele, text) => $ele.find('a').text(text),\n )($(element));\n });\n}\n\nfunction setUpVideoSwoosher() {\n const $sidebarVideos = $('section.sidebar .sidebar-videos');\n\n if (!$sidebarVideos.length) return;\n\n const swoosher = new VideoSwoosher($sidebarVideos);\n\n $('[data-event-type=\"youtube\"] iframe').each((index, iframe) => swoosher.register(new SwooshableYouTubeVideo(iframe)));\n $('[data-event-type=\"vimeo\"] iframe').each((index, iframe) => swoosher.register(new SwooshableVimeoVideo(iframe)));\n $('[data-event-type=\"wistia\"] iframe').each((index, iframe) => swoosher.register(new SwooshableWistiaVideo(iframe)));\n\n // dynamically register new videos\n postal.subscribe({\n channel: 'commands.columnar',\n topic: 'register-youtube-video',\n callback: data => swoosher.register(new SwooshableYouTubeVideo(data.iframe)),\n });\n postal.subscribe({\n channel: 'commands.columnar',\n topic: 'register-vimeo-video',\n callback: data => swoosher.register(new SwooshableVimeoVideo(data.iframe)),\n });\n postal.subscribe({\n channel: 'commands.wistia',\n topic: 'register-wistia-video',\n callback: data => swoosher.register(new SwooshableWistiaVideo(data.iframe)),\n });\n\n // disable video swooshing up to medium (where the sidebar gets moved or removed)\n if (breakpoints.upTo_medium()) {\n swoosher.disable();\n }\n\n $(window).on('resize', _.throttle(() => (breakpoints.largerThan_medium() ? swoosher.enable() : swoosher.disable()), 100));\n}\n\nexport default function bootstrap() {\n $(() => {\n limitTrendingWireHeadersToTwoLines();\n setUpVideoSwoosher();\n });\n}\n","// https://github.com/twbs/bootstrap/blob/v4-dev/js/src/util.js\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-beta): util.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst Util = (() => {\n /**\n * ------------------------------------------------------------------------\n * Private TransitionEnd Helpers\n * ------------------------------------------------------------------------\n */\n\n let transition = false;\n\n const MAX_UID = 1000000;\n\n const TransitionEndEvent = {\n WebkitTransition: 'webkitTransitionEnd',\n MozTransition: 'transitionend',\n OTransition: 'oTransitionEnd otransitionend',\n transition: 'transitionend',\n };\n\n // shoutout AngusCroll (https://goo.gl/pxwQGp)\n function toType(obj) {\n return {}.toString.call(obj).match(/\\s([a-zA-Z]+)/)[1].toLowerCase();\n }\n\n function getSpecialTransitionEndEvent() {\n return {\n bindType: transition.end,\n delegateType: transition.end,\n handle(event) {\n if ($(event.target).is(this)) {\n return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params\n }\n return undefined; // eslint-disable-line no-undefined\n },\n };\n }\n\n function transitionEndTest() {\n if (window.QUnit) {\n return false;\n }\n\n const el = document.createElement('bootstrap');\n\n for (const name in TransitionEndEvent) {\n if (typeof el.style[name] !== 'undefined') {\n return {\n end: TransitionEndEvent[name],\n };\n }\n }\n\n return false;\n }\n\n function transitionEndEmulator(duration) {\n let called = false;\n\n $(this).one(Util.TRANSITION_END, () => {\n called = true;\n });\n\n setTimeout(() => {\n if (!called) {\n Util.triggerTransitionEnd(this);\n }\n }, duration);\n\n return this;\n }\n\n function setTransitionEndSupport() {\n transition = transitionEndTest();\n\n $.fn.emulateTransitionEnd = transitionEndEmulator;\n\n if (Util.supportsTransitionEnd()) {\n $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();\n }\n }\n\n\n /**\n * --------------------------------------------------------------------------\n * Public Util Api\n * --------------------------------------------------------------------------\n */\n\n const Util = {\n\n TRANSITION_END: 'bsTransitionEnd',\n\n getUID(prefix) {\n do {\n // eslint-disable-next-line no-bitwise\n prefix += ~~(Math.random() * MAX_UID); // \"~~\" acts like a faster Math.floor() here\n } while (document.getElementById(prefix));\n return prefix;\n },\n\n getSelectorFromElement(element) {\n let selector = element.getAttribute('data-target');\n if (!selector || selector === '#') {\n selector = element.getAttribute('href') || '';\n }\n\n try {\n const $selector = $(document).find(selector);\n return $selector.length > 0 ? selector : null;\n } catch (error) {\n return null;\n }\n },\n\n reflow(element) {\n return element.offsetHeight;\n },\n\n triggerTransitionEnd(element) {\n $(element).trigger(transition.end);\n },\n\n supportsTransitionEnd() {\n return Boolean(transition);\n },\n\n isElement(obj) {\n return (obj[0] || obj).nodeType;\n },\n\n typeCheckConfig(componentName, config, configTypes) {\n for (const property in configTypes) {\n if (Object.prototype.hasOwnProperty.call(configTypes, property)) {\n const expectedTypes = configTypes[property];\n const value = config[property];\n const valueType = value && Util.isElement(value)\n ? 'element' : toType(value);\n\n if (!new RegExp(expectedTypes).test(valueType)) {\n throw new Error(\n `${componentName.toUpperCase()}: `\n + `Option \"${property}\" provided type \"${valueType}\" `\n + `but expected type \"${expectedTypes}\".`,\n );\n }\n }\n }\n },\n };\n\n setTransitionEndSupport();\n\n return Util;\n})($);\n\nexport default Util;\n","import Util from './bootstrap-util';\n\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-beta): carousel.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst Carousel = (() => {\n /**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\n const NAME = 'carousel';\n const VERSION = '4.0.0-beta';\n const DATA_KEY = 'bs.carousel';\n const EVENT_KEY = `.${DATA_KEY}`;\n const DATA_API_KEY = '.data-api';\n const JQUERY_NO_CONFLICT = $.fn[NAME];\n const TRANSITION_DURATION = 600;\n const ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key\n const ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key\n const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch\n\n const Default = {\n interval: 5000,\n keyboard: true,\n slide: false,\n pause: 'hover',\n wrap: true,\n };\n\n const DefaultType = {\n interval: '(number|boolean)',\n keyboard: 'boolean',\n slide: '(boolean|string)',\n pause: '(string|boolean)',\n wrap: 'boolean',\n };\n\n const Direction = {\n NEXT: 'next',\n PREV: 'prev',\n LEFT: 'left',\n RIGHT: 'right',\n };\n\n const Event = {\n SLIDE: `slide${EVENT_KEY}`,\n SLID: `slid${EVENT_KEY}`,\n KEYDOWN: `keydown${EVENT_KEY}`,\n MOUSEENTER: `mouseenter${EVENT_KEY}`,\n MOUSELEAVE: `mouseleave${EVENT_KEY}`,\n TOUCHEND: `touchend${EVENT_KEY}`,\n LOAD_DATA_API: `load${EVENT_KEY}${DATA_API_KEY}`,\n CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`,\n };\n\n const ClassName = {\n CAROUSEL: 'carousel',\n ACTIVE: 'active',\n SLIDE: 'slide',\n RIGHT: 'carousel-item-right',\n LEFT: 'carousel-item-left',\n NEXT: 'carousel-item-next',\n PREV: 'carousel-item-prev',\n ITEM: 'carousel-item',\n };\n\n const Selector = {\n ACTIVE: '.active',\n ACTIVE_ITEM: '.active.carousel-item',\n ITEM: '.carousel-item',\n NEXT_PREV: '.carousel-item-next, .carousel-item-prev',\n INDICATORS: '.carousel-indicators',\n DATA_SLIDE: '[data-slide], [data-slide-to]',\n DATA_RIDE: '[data-ride=\"carousel\"]',\n };\n\n\n /**\n * ------------------------------------------------------------------------\n * Class Definition\n * ------------------------------------------------------------------------\n */\n\n class Carousel {\n constructor(element, config) {\n this._items = null;\n this._interval = null;\n this._activeElement = null;\n\n this._isPaused = false;\n this._isSliding = false;\n\n this.touchTimeout = null;\n\n this._config = this._getConfig(config);\n this._element = $(element)[0];\n this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0];\n\n this._addEventListeners();\n }\n\n\n // getters\n\n static get VERSION() {\n return VERSION;\n }\n\n static get Default() {\n return Default;\n }\n\n\n // public\n\n next() {\n if (!this._isSliding) {\n this._slide(Direction.NEXT);\n }\n }\n\n nextWhenVisible() {\n // Don't call next when the page isn't visible\n // or the carousel or its parent isn't visible\n if (!document.hidden\n && ($(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden')) {\n this.next();\n }\n }\n\n prev() {\n if (!this._isSliding) {\n this._slide(Direction.PREV);\n }\n }\n\n pause(event) {\n if (!event) {\n this._isPaused = true;\n }\n\n if ($(this._element).find(Selector.NEXT_PREV)[0]\n && Util.supportsTransitionEnd()) {\n Util.triggerTransitionEnd(this._element);\n this.cycle(true);\n }\n\n clearInterval(this._interval);\n this._interval = null;\n }\n\n cycle(event) {\n if (!event) {\n this._isPaused = false;\n }\n\n if (this._interval) {\n clearInterval(this._interval);\n this._interval = null;\n }\n\n if (this._config.interval && !this._isPaused) {\n this._interval = setInterval(\n (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),\n this._config.interval,\n );\n }\n }\n\n to(index) {\n this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];\n\n const activeIndex = this._getItemIndex(this._activeElement);\n\n if (index > this._items.length - 1 || index < 0) {\n return;\n }\n\n if (this._isSliding) {\n $(this._element).one(Event.SLID, () => this.to(index));\n return;\n }\n\n if (activeIndex === index) {\n this.pause();\n this.cycle();\n return;\n }\n\n const direction = index > activeIndex\n ? Direction.NEXT\n : Direction.PREV;\n\n this._slide(direction, this._items[index]);\n }\n\n dispose() {\n $(this._element).off(EVENT_KEY);\n $.removeData(this._element, DATA_KEY);\n\n this._items = null;\n this._config = null;\n this._element = null;\n this._interval = null;\n this._isPaused = null;\n this._isSliding = null;\n this._activeElement = null;\n this._indicatorsElement = null;\n }\n\n\n // private\n\n _getConfig(config) {\n config = $.extend({}, Default, config);\n Util.typeCheckConfig(NAME, config, DefaultType);\n return config;\n }\n\n _addEventListeners() {\n if (this._config.keyboard) {\n $(this._element)\n .on(Event.KEYDOWN, event => this._keydown(event));\n }\n\n if (this._config.pause === 'hover') {\n $(this._element)\n .on(Event.MOUSEENTER, event => this.pause(event))\n .on(Event.MOUSELEAVE, event => this.cycle(event));\n if ('ontouchstart' in document.documentElement) {\n // if it's a touch-enabled device, mouseenter/leave are fired as\n // part of the mouse compatibility events on first tap - the carousel\n // would stop cycling until user tapped out of it;\n // here, we listen for touchend, explicitly pause the carousel\n // (as if it's the second time we tap on it, mouseenter compat event\n // is NOT fired) and after a timeout (to allow for mouse compatibility\n // events to fire) we explicitly restart cycling\n $(this._element).on(Event.TOUCHEND, () => {\n this.pause();\n if (this.touchTimeout) {\n clearTimeout(this.touchTimeout);\n }\n this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval);\n });\n }\n }\n }\n\n _keydown(event) {\n if (/input|textarea/i.test(event.target.tagName)) {\n return;\n }\n\n switch (event.which) {\n case ARROW_LEFT_KEYCODE:\n event.preventDefault();\n this.prev();\n break;\n case ARROW_RIGHT_KEYCODE:\n event.preventDefault();\n this.next();\n break;\n default:\n }\n }\n\n _getItemIndex(element) {\n this._items = $.makeArray($(element).parent().find(Selector.ITEM));\n return this._items.indexOf(element);\n }\n\n _getItemByDirection(direction, activeElement) {\n const isNextDirection = direction === Direction.NEXT;\n const isPrevDirection = direction === Direction.PREV;\n const activeIndex = this._getItemIndex(activeElement);\n const lastItemIndex = this._items.length - 1;\n const isGoingToWrap = isPrevDirection && activeIndex === 0\n || isNextDirection && activeIndex === lastItemIndex;\n\n if (isGoingToWrap && !this._config.wrap) {\n return activeElement;\n }\n\n const delta = direction === Direction.PREV ? -1 : 1;\n const itemIndex = (activeIndex + delta) % this._items.length;\n\n return itemIndex === -1\n ? this._items[this._items.length - 1] : this._items[itemIndex];\n }\n\n\n _triggerSlideEvent(relatedTarget, eventDirectionName) {\n const targetIndex = this._getItemIndex(relatedTarget);\n const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]);\n const slideEvent = $.Event(Event.SLIDE, {\n relatedTarget,\n direction: eventDirectionName,\n from: fromIndex,\n to: targetIndex,\n });\n\n $(this._element).trigger(slideEvent);\n\n return slideEvent;\n }\n\n _setActiveIndicatorElement(element) {\n if (this._indicatorsElement) {\n $(this._indicatorsElement)\n .find(Selector.ACTIVE)\n .removeClass(ClassName.ACTIVE);\n\n const nextIndicator = this._indicatorsElement.children[\n this._getItemIndex(element)\n ];\n\n if (nextIndicator) {\n $(nextIndicator).addClass(ClassName.ACTIVE);\n }\n }\n }\n\n _slide(direction, element) {\n const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];\n const activeElementIndex = this._getItemIndex(activeElement);\n const nextElement = element || activeElement\n && this._getItemByDirection(direction, activeElement);\n const nextElementIndex = this._getItemIndex(nextElement);\n const isCycling = Boolean(this._interval);\n\n let directionalClassName;\n let orderClassName;\n let eventDirectionName;\n\n if (direction === Direction.NEXT) {\n directionalClassName = ClassName.LEFT;\n orderClassName = ClassName.NEXT;\n eventDirectionName = Direction.LEFT;\n } else {\n directionalClassName = ClassName.RIGHT;\n orderClassName = ClassName.PREV;\n eventDirectionName = Direction.RIGHT;\n }\n\n if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {\n this._isSliding = false;\n return;\n }\n\n const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);\n if (slideEvent.isDefaultPrevented()) {\n return;\n }\n\n if (!activeElement || !nextElement) {\n // some weirdness is happening, so we bail\n return;\n }\n\n this._isSliding = true;\n\n if (isCycling) {\n this.pause();\n }\n\n this._setActiveIndicatorElement(nextElement);\n\n const slidEvent = $.Event(Event.SLID, {\n relatedTarget: nextElement,\n direction: eventDirectionName,\n from: activeElementIndex,\n to: nextElementIndex,\n });\n\n if (Util.supportsTransitionEnd()\n && $(this._element).hasClass(ClassName.SLIDE)) {\n $(nextElement).addClass(orderClassName);\n\n Util.reflow(nextElement);\n\n $(activeElement).addClass(directionalClassName);\n $(nextElement).addClass(directionalClassName);\n\n $(activeElement)\n .one(Util.TRANSITION_END, () => {\n $(nextElement)\n .removeClass(`${directionalClassName} ${orderClassName}`)\n .addClass(ClassName.ACTIVE);\n\n $(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`);\n\n this._isSliding = false;\n\n setTimeout(() => $(this._element).trigger(slidEvent), 0);\n })\n .emulateTransitionEnd(TRANSITION_DURATION);\n } else {\n $(activeElement).removeClass(ClassName.ACTIVE);\n $(nextElement).addClass(ClassName.ACTIVE);\n\n this._isSliding = false;\n $(this._element).trigger(slidEvent);\n }\n\n if (isCycling) {\n this.cycle();\n }\n }\n\n\n // static\n\n static _jQueryInterface(config) {\n return this.each(function () {\n let data = $(this).data(DATA_KEY);\n const _config = $.extend({}, Default, $(this).data());\n\n if (typeof config === 'object') {\n $.extend(_config, config);\n }\n\n const action = typeof config === 'string' ? config : _config.slide;\n\n if (!data) {\n data = new Carousel(this, _config);\n $(this).data(DATA_KEY, data);\n }\n\n if (typeof config === 'number') {\n data.to(config);\n } else if (typeof action === 'string') {\n if (typeof data[action] === 'undefined') {\n throw new Error(`No method named \"${action}\"`);\n }\n data[action]();\n } else if (_config.interval) {\n data.pause();\n data.cycle();\n }\n });\n }\n\n static _dataApiClickHandler(event) {\n const selector = Util.getSelectorFromElement(this);\n if (!selector) {\n return;\n }\n\n const target = $(selector)[0];\n if (!target || !$(target).hasClass(ClassName.CAROUSEL)) {\n return;\n }\n\n const config = $.extend({}, $(target).data(), $(this).data());\n const slideIndex = this.getAttribute('data-slide-to');\n\n if (slideIndex) {\n config.interval = false;\n }\n\n Carousel._jQueryInterface.call($(target), config);\n\n if (slideIndex) {\n $(target).data(DATA_KEY).to(slideIndex);\n }\n\n event.preventDefault();\n }\n }\n\n\n /**\n * ------------------------------------------------------------------------\n * Data Api implementation\n * ------------------------------------------------------------------------\n */\n\n $(document)\n .on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler);\n\n $(window).on(Event.LOAD_DATA_API, () => {\n $(Selector.DATA_RIDE).each(function () {\n const $carousel = $(this);\n Carousel._jQueryInterface.call($carousel, $carousel.data());\n });\n });\n\n\n /**\n * ------------------------------------------------------------------------\n * jQuery\n * ------------------------------------------------------------------------\n */\n\n $.fn[NAME] = Carousel._jQueryInterface;\n $.fn[NAME].Constructor = Carousel;\n $.fn[NAME].noConflict = function () {\n $.fn[NAME] = JQUERY_NO_CONFLICT;\n return Carousel._jQueryInterface;\n };\n\n return Carousel;\n})($);\n\nexport default Carousel;\n","/*\nSelect the tab by an id (eg 'about_us')\nYou can also select an element within a tab and it will open the tab then\nnavigate to the element.\nReturns true if the tab changed, false otherwise.\n*/\nexport function selectTabById(id) {\n // don't bother if there is no id or nothing that matches the id\n if (!id || !$(`section[data-tab-panel-id=${id}]`).length) return false;\n\n const $tabLink = $(`section[data-role=tab-set] nav a[href=\"#${id}\"]`);\n\n // don't bother if the tab link is already active\n if ($tabLink.hasClass('active')) return false;\n\n const $tabSet = $tabLink.parents('section[data-role=tab-set]');\n const $tabLinks = $tabSet.find('nav ul li a');\n const $tabs = $tabSet.find('section[data-role=tab-panel]');\n const targetTabId = $tabLink.attr('href').replace('#', '');\n const $targetTab = $tabSet.find(`section[data-tab-panel-id=${targetTabId}]`);\n\n $tabLinks.removeClass('active');\n $tabLink.addClass('active');\n $tabs.removeClass('active');\n $targetTab.addClass('active');\n\n return true;\n}\n\n/*\nSelect the tab by hash (eg '#about_us')\nReturns true if the tab changed, false otherwise\n*/\nexport function selectTabByHash(hash) {\n return selectTabById(hash.replace('#', ''));\n}\n\nexport function convertTabPanelIdToDataAttribute($panel) {\n $panel.attr('data-tab-panel-id', $panel.attr('id'));\n $panel.removeAttr('id');\n}\n","import postal from 'postal';\nimport { setLocationHash } from '../shared/location';\nimport {\n selectTabByHash,\n convertTabPanelIdToDataAttribute,\n} from '../shared/tab-sets';\n\nfunction setUpTabSets() {\n $('section[data-role=tab-panel]')\n .each((i, element) => convertTabPanelIdToDataAttribute($(element)));\n\n // trigger the tab in the current location hash, if present\n selectTabByHash(window.location.hash);\n\n // trigger the tab when clicking a nav link\n $(document).on('click', 'section[data-role=tab-set] nav ul li a', function clickHandler() {\n const hash = $(this).attr('href');\n\n if (selectTabByHash(hash)) {\n setLocationHash(hash);\n }\n\n return false;\n });\n\n // trigger the tab on hash change, if present. Note that clicking a link will\n // trigger this event, causing a loop, but since the tab is already active\n // selectTabByHash() will exit early and return false in the click handler,\n // stopping the loop.\n postal.subscribe({\n channel: 'window.events',\n topic: 'location-state-changed',\n callback: () => selectTabByHash(window.location.hash),\n });\n}\n\nexport default function bootstrap() {\n setUpTabSets();\n}\n","function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nimport { DirectUpload } from \"@rails/activestorage\";\nexport var AttachmentUpload = /*#__PURE__*/function () {\n function AttachmentUpload(attachment, element) {\n _classCallCheck(this, AttachmentUpload);\n\n this.attachment = attachment;\n this.element = element;\n this.directUpload = new DirectUpload(attachment.file, this.directUploadUrl, this);\n }\n\n _createClass(AttachmentUpload, [{\n key: \"start\",\n value: function start() {\n this.directUpload.create(this.directUploadDidComplete.bind(this));\n }\n }, {\n key: \"directUploadWillStoreFileWithXHR\",\n value: function directUploadWillStoreFileWithXHR(xhr) {\n var _this = this;\n\n xhr.upload.addEventListener(\"progress\", function (event) {\n var progress = event.loaded / event.total * 100;\n\n _this.attachment.setUploadProgress(progress);\n });\n }\n }, {\n key: \"directUploadDidComplete\",\n value: function directUploadDidComplete(error, attributes) {\n if (error) {\n throw new Error(\"Direct upload failed: \".concat(error));\n }\n\n this.attachment.setAttributes({\n sgid: attributes.attachable_sgid,\n url: this.createBlobUrl(attributes.signed_id, attributes.filename)\n });\n }\n }, {\n key: \"createBlobUrl\",\n value: function createBlobUrl(signedId, filename) {\n return this.blobUrlTemplate.replace(\":signed_id\", signedId).replace(\":filename\", encodeURIComponent(filename));\n }\n }, {\n key: \"directUploadUrl\",\n get: function get() {\n return this.element.dataset.directUploadUrl;\n }\n }, {\n key: \"blobUrlTemplate\",\n get: function get() {\n return this.element.dataset.blobUrlTemplate;\n }\n }]);\n\n return AttachmentUpload;\n}();","import { AttachmentUpload } from \"./attachment_upload\";\naddEventListener(\"trix-attachment-add\", function (event) {\n var attachment = event.attachment,\n target = event.target;\n\n if (attachment.file) {\n var upload = new AttachmentUpload(attachment, target);\n upload.start();\n }\n});","// This is the entry point for the application (insofar as the\n// React/Webpack pipeline is concerned). There are other scripts in the\n// default Rails pipeline in /app/assets/javascripts (legacy code as of the\n// introduction of React) that are loaded in before this application. This file\n// bootstraps React, exposes NPM modules to the window object for legacy code,\n// and runs other bootstrap scripts.\n\n// Include Action Cable\nrequire('../channels/index');\n\n// Include Service Worker setup\nrequire('./serviceworker-companion');\n\n// Support component names relative to the ../components directory.\n// React components are added to Rails views like so:\n// <%= react_component 'layout/foo/bar' %>\n// which loads the component at /app/javascript/components/layout/foo/bar.jsx\nconst componentRequireContext = require.context(\n 'components',\n true,\n /^(?!.*\\/(lwadmin|wire\\/edit)\\/).*$/,\n);\n\nconst ReactRailsUJS = require('react_ujs');\n\n// eslint-disable-next-line react-hooks/rules-of-hooks\nReactRailsUJS.useContext(componentRequireContext);\n\n// expose NPM modules for legacy code and too cool for school code\n// eslint-disable-next-line import/no-extraneous-dependencies\nconst objectAssign = require('object.assign');\n\nObject.assign = Object.assign || objectAssign.getPolyfill();\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nconst jQuery = require('jquery');\n\nwindow.jQuery = jQuery;\nwindow.$ = jQuery;\nwindow.postal = require('postal');\nrequire('@nishanths/zoom.js/dist/zoom.min.js');\n\n// configure toastr\nwindow.toastr = require('toastr');\n\nwindow.toastr.options.positionClass = 'toast-bottom-full-width';\n\n// Include other stuff that just needs to be included\nrequire('../shared/bootstrap-carousels');\nrequire('./vendor/browser-select-custom');\n\n// run other bootstrap scripts\nrequire('../bootstrap/bootstrap-accordions').default();\nrequire('../bootstrap/bootstrap-profile').default();\nrequire('../bootstrap/bootstrap-line-limiting').default();\nrequire('../bootstrap/bootstrap-editors-picks-navbar').default();\nrequire('../bootstrap/bootstrap-buttons').default();\nrequire('../bootstrap/bootstrap-columnar').default();\nrequire('../bootstrap/bootstrap-statistics').default();\nrequire('../bootstrap/bootstrap-soundcloud-embeds').default();\nrequire('../bootstrap/bootstrap-podbean-embeds').default();\nrequire('../bootstrap/bootstrap-tabs').default();\nrequire('../bootstrap/bootstrap-media-restricted-by-digital-pass').default();\n","// This is the entry point for the application (insofar as the\n// React/Webpack pipeline is concerned). There are other scripts in the\n// default Rails pipeline in /app/assets/javascripts (legacy code as of the\n// introduction of React) that are loaded in before this application. This file\n// bootstraps React, exposes NPM modules to the window object for legacy code,\n// and runs other bootstrap scripts.\n\n// Include Action Cable\nrequire('../channels/index');\n\n// Include Service Worker setup\nrequire('./serviceworker-companion');\n\n// Support component names relative to the ../components directory.\n// React components are added to Rails views like so:\n// <%= react_component 'layout/foo/bar' %>\n// which loads the component at /app/javascript/components/layout/foo/bar.jsx\nconst componentRequireContext = require.context('components', true);\nconst ReactRailsUJS = require('react_ujs');\n\n// eslint-disable-next-line react-hooks/rules-of-hooks\nReactRailsUJS.useContext(componentRequireContext);\n\n// expose NPM modules for legacy code and too cool for school code\n// eslint-disable-next-line import/no-extraneous-dependencies\nconst objectAssign = require('object.assign');\n\nObject.assign = Object.assign || objectAssign.getPolyfill();\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nconst jQuery = require('jquery');\n\nwindow.jQuery = jQuery;\nwindow.$ = jQuery;\nwindow.postal = require('postal');\nrequire('@nishanths/zoom.js/dist/zoom.min.js');\n\n// configure toastr\nwindow.toastr = require('toastr');\n\nwindow.toastr.options.positionClass = 'toast-bottom-full-width';\n\n// Include other stuff that just needs to be included\nrequire('../shared/bootstrap-carousels');\nrequire('./vendor/browser-select-custom');\n\n// run other bootstrap scripts\nrequire('../bootstrap/bootstrap-accordions').default();\nrequire('../bootstrap/bootstrap-profile').default();\nrequire('../bootstrap/bootstrap-line-limiting').default();\nrequire('../bootstrap/bootstrap-editors-picks-navbar').default();\nrequire('../bootstrap/bootstrap-buttons').default();\nrequire('../bootstrap/bootstrap-columnar').default();\nrequire('../bootstrap/bootstrap-statistics').default();\nrequire('../bootstrap/bootstrap-soundcloud-embeds').default();\nrequire('../bootstrap/bootstrap-podbean-embeds').default();\nrequire('../bootstrap/bootstrap-tabs').default();\nrequire('../bootstrap/bootstrap-media-restricted-by-digital-pass').default();\n\nrequire('trix');\nrequire('@rails/actiontext');\n","// This is the entry point for the application (insofar as the\n// React/Webpack pipeline is concerned). There are other scripts in the\n// default Rails pipeline in /app/assets/javascripts (legacy code as of the\n// introduction of React) that are loaded in before this application. This file\n// bootstraps React, exposes NPM modules to the window object for legacy code,\n// and runs other bootstrap scripts.\n\n// Support component names relative to the ../components directory.\n// React components are added to Rails views like so:\n// <%= react_component 'layout/foo/bar' %>\n// which loads the component at /app/javascript/components/layout/foo/bar.jsx\nconst componentRequireContext = require.context('components', true);\nconst ReactRailsUJS = require('react_ujs');\n\n// eslint-disable-next-line react-hooks/rules-of-hooks\nReactRailsUJS.useContext(componentRequireContext);\n","// By default, this pack is loaded for server-side rendering.\n// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.\nconst componentRequireContext = require.context('components', true);\nconst ReactRailsUJS = require('react_ujs');\n\n// eslint-disable-next-line react-hooks/rules-of-hooks\nReactRailsUJS.useContext(componentRequireContext);\n"],"sourceRoot":""}